Destructuring은 ES6부터 도입된 자바스크립트의 기능으로, 배열이나 객체의 값을 추출하여 변수에 할당하는 문법입니다. 이를 활용하면 함수의 파라미터 값을 설정할 때 더 간편하게 할 수 있습니다.

배열 파라미터의 경우

배열을 파라미터로 받는 함수에서 Destructuring을 활용하여 배열의 요소를 변수에 할당할 수 있습니다. 예를 들어, addNumbers 함수는 두 개의 숫자를 인자로 받아서 합을 계산하는 함수입니다.

function addNumbers([a, b]) {
  return a + b;
}

const numbers = [5, 10];
console.log(addNumbers(numbers)); // 15

위 예제에서 addNumbers 함수의 파라미터에 [a, b]라는 구문을 사용하여 배열의 첫 번째 요소를 a 변수에 할당하고, 두 번째 요소를 b 변수에 할당하였습니다. 이렇게 할당된 변수들은 함수 내부에서 사용할 수 있습니다.

객체 파라미터의 경우

객체를 파라미터로 받는 함수에서도 Destructuring을 활용할 수 있습니다. 객체의 특정 프로퍼티 값을 변수에 할당할 때 유용합니다. 예를 들어, printUserInfo 함수는 사용자 정보 객체를 파라미터로 받아서 이름과 나이를 출력하는 함수입니다.

function printUserInfo({name, age}) {
  console.log(`이름: ${name}, 나이: ${age}`);
}

const userInfo = {name: 'John', age: 25};
printUserInfo(userInfo); // 이름: John, 나이: 25

위 예제에서 printUserInfo 함수의 파라미터에 {name, age}라는 구문을 사용하여 객체의 name 프로퍼티 값을 name 변수에 할당하고, age 프로퍼티 값을 age 변수에 할당하였습니다. 이렇게 할당된 변수들은 함수 내부에서 사용할 수 있습니다.

기본 값 설정

Destructuring을 사용하여 함수 파라미터 값을 설정할 때, 기본 값(default value)도 설정할 수 있습니다. 이를 활용하여 인자로 값이 전달되지 않을 경우 기본 값을 사용할 수 있습니다. 예를 들어, getFullName 함수는 이름과 성을 파라미터로 받아서 전체 이름을 반환하는 함수입니다.

function getFullName({firstName = 'John', lastName = 'Doe'}) {
  return `${firstName} ${lastName}`;
}

console.log(getFullName({firstName: 'Alice'})); // Alice Doe
console.log(getFullName({lastName: 'Smith'})); // John Smith
console.log(getFullName({})); // John Doe

위 예제에서 getFullName 함수의 파라미터에 {firstName = 'John', lastName = 'Doe'}라는 구문을 사용하여 객체의 firstName 프로퍼티 값을 firstName 변수에 할당하고, lastName 프로퍼티 값을 lastName 변수에 할당하였습니다. 각각의 변수에 기본 값을 설정해두었기 때문에, 인자로 전달된 객체에 해당 프로퍼티가 없을 경우 기본 값이 사용됩니다.

Destructuring을 사용하여 자바스크립트에서 함수 파라미터 값을 설정하는 방법을 알아보았습니다. 이를 통해 코드의 가독성을 높이고, 더 간결하게 함수를 작성할 수 있습니다.

#javascript #ES6