함수 파라미터를 중괄호로 감싸서 받을 때와 그냥 받을 때의 차이

제목 단순화에 실패한 나

 

항상 궁금했던 게 있었다.

함수의 매개변수(파라미터)가 2개 이상일 때,
`중괄호로 감싸서 받는 것`과 `그냥 개별 파라미터로 받는 것`은 무슨 차이가 있을까?

맨날 궁금했는데 정리를 안 해놓으니 평생 궁금해할 것 같아서 이번에 정리하고 넘어가겠다.

 

 

중괄호로 감싸서 받기 (='객체'로 받기)

export async function getReviews({ order = "rating", offset = 0, limit = 10 }) {
  // ...
}

먼저, 이렇게 받아오는 건 곧 파라미터들을 하나의 "객체"로 받는 것이다.

이는 구조 분해 형태로, 함수 내에서 사용할 때는 그냥 개별 파라미터를 받아온 것과 똑같이 사용하면 된다.

 

 

[파라미터 사용 예시]

export async function getReviews({ order = "rating", offset = 0, limit = 10 }) {
  const query = `order=${order}&offset=${offset}&limit=${limit}`;
  
  const response = await fetch(
    `https://learn.js.kr/api/film-reviews?${query}`
  );
  const body = response.json();
  return body;
}

 

 

그냥 개별 파라미터로 받기

export async function getReviews(order = "rating", offset = 0, limit = 10) {
  // ...
}

사실 이렇게 해도 실행 결과와 파라미터 사용 예시는 동일하다.

 

그럼 어떤 경우에 중괄호로 감싸서(=객체로) 파라미터를 받아오는 걸까?

 

 

객체 기반 파라미터: 주고 받기 간단하다

파라미터가 하나의 객체로 묶여서 받아오는 형태라면, 보낼 때도 하나의 객체만 보내면 된다.

 

약간 과장해서 getReviews가 파라미터를 7개 받는 함수라고 치자.

const queryOptions = {
  order: "createdAt",
  offset: 10,
  limit: 10,
  isPublic: true,
  hasImages: false,
  category: null,
  sort: "desc"
}

getReviews(queryOptions); // 7개의 인자를 한방에 전달

 

하지만 개별 파라미터로 받는 형태라면? 

const order = "createdAt";
getReviews("createdAt", 10, 10, true, false, null, "desc"); // 7개의 파라미터를 구구절절 전달

 

이렇게 할 경우 나중에 프로젝트 규모가 커질수록 유지보수하기가 매우 어려워진다. 

그 외에 단점들이 또 있는데, 대략 이렇게 정리할 수 있다.

 

 

개별 파라미터로 전달할 때의 단점

1. 가독성 저하

getReviews("createdAt", 10, 10, true, false, null, "desc");

• true, false, null, "desc"가 무엇을 의미하는지 코드를 처음 보는 사람은 전혀 알 수 없다.

 

2. 파라미터 "순서" 의존성

• 순서를 바꾸면 오류 발생 가능성이 높다.
  - 파라미터 순서를 잘못 넣으면 전혀 다른 결과가 나올 수 있음.
• 따라서 파라미터 순서를 기억하거나, api 문서를 참고해야 함 → 실수 유발 ⬆

 

3. 함수 확장에 불리함

• 파라미터가 추가/제거될 때마다 기존 호출부도 모두 수정해야 함.
• 프로젝트 규모가 커지면 이미 작성된 호출부를 일일이 수정하기 어려움.

 

 

그럼 2개 이상부터는 무조건 "객체 기반 파라미터"?

• 일반적으로 파라미터 3개 이상부터 사용.
• 파라미터 값으로 null, undefined, boolean이 자주 할당되는 경우에도 강력히 권장됨.
• 파라미터들 중 일부만 넘겨도 괜찮은 경우.
• 파라미터의 의미가 명확히 드러나야 할 때.

 

이럴 때는 개별 파라미터를 사용해도 좋다

• 1~2개의 필수 파라미터만 있고 의미가 명확한 경우.

login(email, password); // 명확하고 간단함
calculateTotal(price, quantity); // 명확함