[Javascript] 명명된 인수

이번에 소개할 방식은 명명된 인수입니다. 명명된 인수는 함수를 호출할 때 이름을 명시할 수 있는 인수를 말합니다.

---

1. 명명된 인수

명명된 인수는 서론에서 이야기 한 대로 함수를 호출할 때 이름이 명시가능한 인수를 말합니다. 실제 사용예를 보면 다음과 같이 인수를 객체형으로 전달되는 인수들을 명명된 인수라고 이야기합니다.

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 });

 

이 예제를 가지고는 사실 명명된 인수의 사용이 좋다!라고는 느끼지 못할 수도 있습니다. 너무 간결한 예제라 명명된 인수로 인해 오히려 혼란을 주기 때문인데요. 그래서 보통은 다음 두 가지 경우에 대해서 명명된 인수를 사용합니다.

• 인수의 수가 많을 경우에 사용한다.
• 생략가능한 인수가 많은 경우에 사용한다.

 

 

2. 분할 대입을 이용한 명명된 인수 표현

ES2015에서는 분할 대입(객체 구조 분해 할당 참조)를 이용해서 명명된 인수를 더 간단하게 사용할 수 있습니다.

인수 부분의 객체 리터럴 부분를 다음과 같이 사용합니다.

{프로퍼티 = 기본값, ...}

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

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

 

또한, 분할 대입을 사용했을 때는 인수 객체 리터럴에서 특정 프로퍼티만을 추출하는 것이 가능합니다.

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

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

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