April 11, 2024 4 min to read

명명된 인수

명명된 인수(Named Arguments)

Named Arguments는 함수 매개변수에 인수를 ‘키-값 쌍’으로 전달하는 방법임. 객체에 익숙하다면 키-값 쌍은 객체 속성을 나타내는데 널리 사용됨. 객체에서는 ‘key: value’와 같은 형식을 취하며, 예를 들어 ‘firstName: “Mike”와 같음. Named Arguments를 사용하는 함수는 매개변수 순서가 아니라 ‘Key’를 사용해 각 매개변수를 식별함. 이 접근법은 인수의 순서에 대해 유연성을 제공하고 코드 가독성을 향상시킴.

일반적인 함수 ‘foo(a,b,c)’ 가 있으면 기존에는 함수 호출시 인수를 위치에 따라 전달했음. foo(1, 3, 5)라면 ‘1’은 매개변수 ‘a’, ‘3’은 ‘b’, ‘5’는 ‘c’에 해당함. 그러나 Named Arguments 사용하면 함수 호출 시 매개변수 이름을 사용해 인수를 어떤 순서로든 전달할 수 있음. 예를 들어 ‘foo(b=3, a=1, c=5)’와 같이 매개변수 이름을 사용해 인수를 전달할 수 있음. 매개변수 이름이 인수값과 같이 지정되므로 순서는 필요없고 필요치 않은 인수는 쉽게 제외할 수 있어 코드를 더 쉽거 유연하게 작성가능. 기본 매개변수와 혼동하지 말것.

현재 JS가 ES2023으로부터 명명된 인수를 지원하지 않지만 JS가 단일 매개변수를 사용하는 함수는 모방이 가능함.

매개변수 대신 객체 속성 사용. 단일 매개변수 사용, 함수 본문 전체에서 이름으로 엑세스 되는 객체의 속성이 사용됨. 함수가 호출되면 단일 인수가 객체 리터럴로 전달되며, 여기서 객체 속성은 이름과 순서에 따라 정의될 수 있음. ```js function greet(options){ console.log(‘Hello ${options.firstName} ${options.lastName}!’); if(typeof options.weather != ‘undefined’){ console.log(‘It is ${options.weather} today.’); } else { console.log(‘I hope the weather is nice!’); } }

greet({firstName: ‘John’, lastName: ‘Smith’, weather: ‘sunny’}); // output: Hello John Smith! It is sunny today. greet({lastName: ‘Jones’, firstName: ‘Sarah’}); // output: Hello Sarah Jones! I hope the weather is nice!

위의 예제에서 greet() 함수는 단일 매개변수만을 가져오지만 해당 매개변수는 함수 본문 전체에서 사용되는 여러 속성을 포함하거나 '감싸고' 있음.
greet() 함수의 단일 객체 매개변수는 "래퍼" 역할을 하고 firstName, weather 같은 여러 정보를 함수 본문 전체에서 사용할 수 있도록 포함하거나 '감싸고' 있음을 의미함.
함수가 10번째와 11번째 줄에서 호출될 때, 단일 인수의 순서는 중요하지 않음. 하지만 리터럴 객체(중괄호 내부)에 정의된 속성은 식별가능하기에 문제가 없음. JS 인수와 같은 순서가 아니고 이름 또는 '키'에 따라 다름. 

2. 구조 분해 할당 구문 사용.
구조 분해 할당은 여러 속성이 포함된 단일 JS객체를 가져와 이를 개별 변수로 변환하는데 사용됨. 
```js
const myObject = {
    fullName: "Harry Callahan",
    age: 41,
    location: "San Francisco"
};
const {fullName, age, location} = myObject;
console.log(fullName); // output: Harry Callahan
console.log(age); // output: 41
console.log(location) // output: San Francisco

위의 예제에서 ‘myObject’ 객체는 destructuring assignment 구문을 사용하여 3 개의 개별 변수로 분해하여 각자 콘솔.로그에 할당함.

함수 매개변수에서 destructuring assignment 를 사용하는 것은 이전 방법과 마찬가지로 단일 JS 객체를 함수 매개변수로 사용하여 시작함. 차이점은 해당 객체의 속성에 접근해 함수 본문에서 사용하는 대신, destructuring assignment가 객체를 개별 변수로 분해하고 그 다음 이런 변수들이 코드 전반에 걸쳐 사용된다는 것임. 그 후 함수는 메서드1과 정확히 동일한 방식으로 호출될 수 있음. 아래의 greet2() 메서드는 이전의 greet() 메서드를 적용해 destructuring assignment 구문을 사용함:

function greet2({firstName, lastName, weather}){
    console.log('Hello ${firstName} ${lastName}!')
    if(typeof weather != 'undefined'){
        console.log('It is ${weather} today.');
    } else{
        console.log('I hope the weather is nice!');
    }
}
greet2({firstName: 'John', lastName: 'Smith', weather: 'sunny'});
//output: Hello John Smith! It is sunny today.
greet2({lastName: 'Jones', firstName: 'Sarah'});
//output: Hello Sarah Jones! I hope the weather is nice!

위의 greet2() 메서드는 destructuring assignment 를 구현하며 이전의 greet() 메서드와 유사하지만 다른 점이 있음.

greet2() 메서드의 매개변수를 보면 단일한 것 처럼보이지만 실제로는 destructuring assignment 구문을 사용해 객체를 분해하는 것임. 이전에는 greet() 메서드의 매개변수가 단일 JS 리터럴 객체였음. 하지만 이번에는 destructuring assignment 구문이 사용되어 제공된 객체 인수를 firstName, lastName, weather라는 3개의 개별 변수로 분해함.

또 다른 차이점은 함수 호출방식인데, greet2() 함수는 메서드1과 동일한 방식으로 호출될 수 있음, 객체 리터럴을 사용해 호출하며 제공된 객체 인수에서 속성을 생략 가능함.