JavaScript 에센셜 | 위니북스

매개변수 기법

1. 기본값

함수를 정의할 때 파라미터의 기본값을 설정할 수 있습니다. 파라미터의 뒤에 할당연산자(=)를 이용해 기본값을 설정하며, 함수 호출 시 인자를 전달하지 않으면 설정된 기본값이 사용됩니다.

function defaultFunc(a = 10, b = 20, c = 30) { return a + b + c; } console.log(defaultFunc()); console.log(defaultFunc(100)); console.log(defaultFunc(100, 200)); console.log(defaultFunc(100, 200, 300));

파라미터의 기본값을 사용하기 위해서는 인자를 생략하거나 undefined를 전달해야 합니다. 파라미터에는 전달된 인자가 순서대로 할당되기 때문에, 특정 파라미터에만 값을 전달하고 싶을 때는 undefined를 사용하여 값을 생략할 수 있습니다.

function defaultFunc(a = 10, b = 20, c = 30) { return a + b + c; } // a = 10(기본값), b = 200, c = 300 console.log(defaultFunc(100, 200, 300)); // 600 // a = 10(기본값), b = 200, c = 30(기본값) console.log(defaultFunc(100, 200)); // 330

하지만 이러한 방식은 가독성이 떨어지고 코드가 복잡해질 수 있습니다.

2. 구조 분해 할당

구조 분해 할당(Destructuring)은 ES6부터 지원하는 문법으로 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식입니다. 이를 통해 객체나 배열에서 값을 추출할 수 있습니다.

2.1 객체의 구조 분해 할당

ES6 이전에 사용했던 수동적인 방법은 다음과 같습니다.

const user = { name: '라이캣', age: 20, company: '위니브' }; const name = user.name; const age = user.age; const company = user.company; console.log(name); // 라이캣 console.log(age); // 20 console.log(company); // 위니브

ES6의 구조 분해 할당을 사용하면 다음과 같이 간단하게 작성할 수 있습니다. 객체에 사용된 키 이름을 변수명으로 사용하여 값을 추출할 수 있습니다. 필요한 값만 추출할 수 있습니다.

const { 변수1, 변수2, 변수3 = 변수3의기본값 } = 객체;

const { 변수1, 변수2, 변수3 = 변수3의기본값 } = 객체;

const user = { name: '라이캣', age: 20, }; const {name, age} = user; console.log(name); // 라이캣 console.log(age); // 20

객체에 없는 키 이름을 사용하면 undefined가 할당됩니다. 기본값을 설정하고 싶을 때는 =를 사용하여 기본값을 설정할 수 있습니다. 기본값이 설정된 경우에 구조 분해 할당을 한 객체에 해당 키가 없으면 기본값이 할당됩니다.

const user = { name: '라이캣', age: 20, }; const {company = '위니브', location} = user; console.log(company); // 위니브 console.log(location); // undefined

변수명을 다르게 지정하고 싶다면 다음과 같이 작성할 수 있습니다.

const { 키1: 새로운변수명1, 키2: 새로운변수명2 } = 객체;

const { 키1: 새로운변수명1, 키2: 새로운변수명2 } = 객체;

const user = { name: '라이캣', age: 20, }; const {name: userName, age: userAge} = user; console.log(userName); // 라이캣 console.log(userAge); // 20 console.log(userCompany); // 위니브

2.2 배열의 구조 분해 할당

배열의 구조 분해 할당은 다음과 같이 작성합니다. 배열의 구조 분해 할당은 배열의 인덱스 순서에 따라 값을 추출합니다.

const [변수1, 변수2] = 배열;

const [변수1, 변수2] = 배열;

const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3

배열의 구조 분해 할당은 인덱스 순서에 따라 값을 추출하며, 배열의 길이에 상관없이 필요한 값만 추출할 수 있습니다. 배열의 길이가 다를 경우 undefined가 할당됩니다.

const [a, b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2

중간 인덱스의 값을 생략하고 싶다면 쉼표(,)를 사용하여 생략할 수 있습니다.

const [a, , c] = [1, 2, 3]; console.log(a); // 1 console.log(c); // 3

1.3 함수의 구조 분해 할당

객체와 배열의 구조 분해 할당을 이용하여 함수의 매개변수를 처리할 수 있습니다. 함수의 매개변수에 구조 분해 할당을 사용하면, 객체나 배열에서 필요한 값만 추출하여 사용할 수 있습니다. 이를 통해 가독성을 높이고, 코드의 복잡성을 줄일 수 있습니다.

각 속성의 기본값을 설정할 수 있습니다. 기본값을 설정하면, 해당 속성이 없을 때 기본값이 할당됩니다.

함수에 인자가 전달되지 않으면 undefined가 할당되기 때문에 오류가 발생합니다. undefined는 객체가 아니기 때문에 구조 분해 할당을 할 수 없습니다. 이를 방지하기 위해 빈 객체를 기본값으로 설정할 수 있습니다.

function printUser({name, age = 0, company = '위니브'} = {}) { console.log(`이름: ${name}, 나이: ${age}, 회사: ${company}`); } printUser(); // 오류가 발생하지 않음

배열 또한 구조 분해 할당을 사용할 수 있습니다. 배열의 구조 분해 할당은 배열의 인덱스 순서에 따라 값을 추출합니다. 배열의 길이에 상관없이 필요한 값만 추출할 수 있습니다.

function arrayFunc([a, b, c]) { console.log(`a: ${a}, b: ${b}, c: ${c}`); } arrayFunc([1, 2, 3]); arrayFunc([1, 2]); arrayFunc([1, , 3]);

배열의 구조 분해를 매개변수로 사용하는 경우에도 기본값을 설정해야 합니다.

function arrayFunc([a, b, c] = []) { console.log(`a: ${a}, b: ${b}, c: ${c}`); } arrayFunc(); // 오류가 발생하지 않음

RORO 패턴
RORO는 "Recieve an Object, Return an Object"의 약자로, 구조 분해 할당을 이용하여 객체를 파라미터에 전달하고, 객체를 반환하는 방식을 말합니다. 이처럼 구조 분해 할당으로 파라미터를 전달하면 가독성이 높아지고, 필요한 값만 선택적으로 처리할 수 있습니다.

function createUser({ name, email }) {
  // ... 로직
  return { id, name, grade, email };
}
 
// 사용 예
const user = createUser({
  name: 'licat',
  email: 'licat@weniv.com',
});
console.log(user.id);

function createUser({ name, email }) {
  // ... 로직
  return { id, name, grade, email };
}
 
// 사용 예
const user = createUser({
  name: 'licat',
  email: 'licat@weniv.com',
});
console.log(user.id);

3. 나머지 매개변수

3.1 함수의 나머지 매개변수

함수의 매개변수는 기본적으로 정해진 개수만큼 인자를 전달받습니다. 하지만 가변적인 개수의 인자를 전달받고 싶을 때는 나머지 매개변수를 사용할 수 있습니다. 나머지 매개변수(Rest)는 ES6에서 도입된 문법으로, 함수의 매개변수에 ...을 붙여서 함수 호출 시 전달받은 인자를 배열로 받을 수 있는 기능입니다. 인자의 개수가 가변적일 때 유용하게 사용됩니다.

function restFunc(...args) { console.log(args); } restFunc(1, 2, 3, 4, 5);

위의 예시에서 restFunc 함수는 ...args를 사용하여 전달받은 인자를 배열로 묶어 args 변수에 할당합니다. 이때 args는 [1, 2, 3, 4, 5]와 같은 배열이 됩니다.

함수의 파라미터에는 단 하나의 나머지 매개변수만 존재할 수 있으며, 반드시 마지막 매개변수로 와야합니다. 그렇지 않으면 에러가 발생합니다.

function restFunc(a, b, ...c) { console.log(c); } restFunc(10, 20, 30, 40, 50);

위의 예시에서 restFunc 함수는 첫 번째와 두 번째 매개변수는 각각 a와 b에 할당되고, 나머지 매개변수는 c에 배열로 할당됩니다. 따라서 c는 [30, 40, 50]이 됩니다.

3.2 나머지 매개변수와 구조 분해 할당

나머지 매개변수는 구조 분해 할당에서도 사용할 수 있습니다. 구조 분해 할당을 사용하여 객체나 배열에서 원하는 값만 추출하고, 나머지 요소들을 객체나 배열로 묶어 처리할 수 있습니다.

const {name, company, ...others} = {name: '라이캣', company: '위니브', age: 20, grade: 3}; console.log(others); const [a, b, ...numbers] = [1, 2, 3, 4, 5]; console.log(numbers);

구조 분해 할당을 사용하는 함수에서 나머지 매개변수를 사용하여 추출 후 나머지 값들을 처리할 수 있습니다.

구조 분해 할당을 사용하는 함수에서 나머지 매개변수를 사용하면 나머지 매개변수는 구조 분해 할당과 함께 사용할 수 있습니다. 나머지 매개변수를 사용하여 함수의 매개변수로 전달된 인자 중 일부를 배열로 묶고, 나머지 인자들은 개별적으로 처리할 수 있습니다.

function restFunc({name, company, ...others}) { console.log(others); } restFunc({name: '라이캣', company: '위니브', age: 20, grade: 3});

나머지 매개변수(rest 문법)와 전개 구문(spread 문법)이 똑같이 생겼어요!
rest 문법과 spread 문법은 동일하게 ...으로 표현합니다. 하지만 두 문법은 서로 다른 역할을 합니다. rest 문법은 여러 개의 요소를 하나의 배열로 묶는 역할을 하며, spread 문법은 배열이나 객체를 펼쳐서 전개하는 역할을 합니다. 두 문법은 사용되는 위치에 따라 역할이 달라집니다.

자바스크립트 엔진은 일반적인 객체나 배열 안에서 사용되는 …은 spread, 함수의 마지막 매개변수에 사용되는 …은 rest 문법으로 인식합니다.

const arr = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr, ...arr2]; // spread 문법 console.log(newArr);

function restFunc(a, b, ...c) { // rest 문법 console.log(c); } restFunc(10, 20, 30, 40, 50);