명명된 인수
는 함수를 호출할 때 이름을 명시할 수 있는 인수를 의미합니다. 다음 코드와 같이 인수를 전달할 때 객체 리터럴로 전달하는 것을 명명된 인수라고 합니다.
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)); //'나비'