명명된 인수

명명된 인수는 함수를 호출할 때 이름을 명시할 수 있는 인수를 의미합니다. 다음 코드와 같이 인수를 전달할 때 객체 리터럴로 전달하는 것을 명명된 인수라고 합니다.

getSum({ num1: 10, num2: 100 });

장점

명명된 인수는 다음과 같은 장점을 갖습니다.

• 생략가능한 인수 표현이 쉽다.
• 인수 순서 변경이 쉽다.
• 인수가 많아져도 코드를 해석하기 쉬워진다.

위의 장점에 따라 아래와 같은 코드를 작성해도 문제없이 동작합니다.

getSum({ num1: 10 });  //인수 생략
getSum({ num2: 100, num1: 10 }); //인수 순서 변경

실제로 사용할 땐 다음과 같이 사용합니다. 객체 리터럴로 인수를 전달하므로, 인수는 객체 하나만을 인자로 사용하고, 값 접근을 객체 프로퍼티 접근으로 접근합니다.

const getSum = args => args.num1 + args.num2;

getSum({ num1: 10, num2: 100 });

사실 좋은 예제는 아닌게, 예제를 위해 마련한 코드가 워낙 간단한 코드라 오히려 더 복잡하다고 느껴질 수 있는데요. 이처럼 모든 코드에 대해 명명된 인수를 쓰는 것이 좋지만은 않습니다. 따라서 보통 다음과 같은 두 가지 경우에 사용합니다.

• 인수의 수가 많을 경우
• 생략가능한 인수가 많은 경우

분할 대입을 이용한 명명된 인수

명명된 인수는 ES6에서 추가된 분할 대입을 이용하여 더 간단하게 표현할 수 있습니다.

const getSum = ({num1 = 1, num2 = 1}) => num1 + num2;

getSum({ num1: 10, num2: 100 });

분할 대입을 사용하니, 이전 방법에서 args.num1로 접근했던 것 보다 더 직관적이고 간단하게 인수를 활용할 수 있습니다.

또한 분할 대입을 사용하면, 인수 객체에서 특정 프로퍼티만을 추출할 수도 있습니다.

const showName = ({name}) => name;

let navi = {
  id: 101,
  name: '나비',
  age: 5,
};

console.log(showName(navi));  //'나비'