자바스크립트의 매개변수 해체 할당 (Parameter Destructuring Assignment)은 매개변수를 단순화하고 가독성을 높이는 데 도움이 되는 강력한 기능입니다. 이 기능을 사용하면 매개변수의 값을 추출하고 새로운 변수로 할당할 수 있습니다. 이 글에서는 자바스크립트 매개변수 해체 할당에 대해 알아보겠습니다.

기본 구문

매개변수 해체 할당은 다음과 같은 기본 구문을 가지고 있습니다:

function functionName({param1, param2, ...}) {
  // 함수 본문
}

위의 구문에서 param1, param2는 해당 매개변수의 이름입니다. 함수가 호출될 때, 매개변수로 전달된 객체의 속성 이름과 일치하는 변수에 값을 할당합니다.

예제

아래의 예제를 통해 매개변수 해체 할당이 어떻게 동작하는지 살펴보겠습니다:

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

const user = {
  name: 'John Doe',
  age: 25
};

getUserInfo(user);

위 예제에서 getUserInfo 함수는 매개변수로 {name, age}를 받습니다. 호출 시, user 객체의 name과 age 속성을 가져와서 각각 name과 age 변수에 할당합니다. 이후, 함수 내에서 해당 변수를 출력하여 다음과 같은 결과를 얻을 수 있습니다:

이름: John Doe
나이: 25

기본값 설정

매개변수 해체 할당을 사용하는 동안, 기본값을 설정할 수도 있습니다. 기본값은 변수 이름 다음에 =을 사용하여 할당할 수 있습니다. 만약 전달된 객체에 해당 속성이 없다면 기본값이 사용됩니다.

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

const user = {
  name: 'John Doe'
};

getUserInfo(user);

위의 예제에서 age는 기본값으로 30을 가지도록 설정되어 있습니다. 따라서 user 객체에 age 속성이 없을 경우, age 변수는 기본값으로 30을 가지게 됩니다.

배열 해체 할당

매개변수 해체 할당은 배열에도 적용될 수 있습니다. 배열의 경우, 속성 이름 대신 인덱스를 사용하여 값을 할당합니다.

function getCoordinates([x, y]) {
  console.log(`x: ${x}`);
  console.log(`y: ${y}`);
}

const coordinates = [10, 20];

getCoordinates(coordinates);

위 예제에서 getCoordinates 함수는 [x, y] 형태의 매개변수를 받습니다. 호출 시, coordinates 배열의 첫 번째 인덱스를 x 변수에 할당하고, 두 번째 인덱스를 y 변수에 할당합니다.

마무리

자바스크립트 매개변수 해체 할당은 코드를 간결하고 가독성 높게 만드는 강력한 도구입니다. 이를 이용하여 객체나 배열의 값을 효율적으로 추출하고 할당할 수 있습니다. 매개변수 해체 할당을 적절하게 사용하여 코드를 개선하는데 도움이 되길 바랍니다.

이상으로 자바스크립트 매개변수 해체 할당에 관한 글을 마치겠습니다. 감사합니다!