나는 이렇게 학습한다/Frontend

JavaScript 구조분해 할당으로 함수 매개변수 다루기

daco2020 2024. 8. 2. 22:42
반응형

JavaScript에서 함수를 사용할 때, 객체를 파라미터로 전달하는 경우가 많습니다. 이때 구조분해 할당(destructuring assignment)을 사용하면 코드가 더 간결하고 가독성이 좋아집니다. 이번 글에서는 구조분해 할당을 이용해 함수에서 객체의 특정 속성만 사용하는 방법을 알아보겠습니다.

 

1. 구조분해 할당으로 매개변수 간편하게 처리하기

구조분해 할당을 사용하면, 필요한 속성만 손쉽게 추출할 수 있습니다. 아래는 예시입니다.

function printMovie({ title, director }) {
  console.log(`Title: ${title}, Director: ${director}`);
}

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010
};

printMovie(movie);

 

이 예시에서 printMovie 함수는 객체 movie에서 title과 director 속성만을 사용해 출력합니다. 이렇게 하면 함수 내부에서 객체의 특정 속성만 간편하게 사용할 수 있습니다.

 

  • 함수 호출 예시: 
    printMovie({
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010
});

 

 

2. 구조분해 할당의 필요성

구조분해 할당 없이 객체의 속성을 사용하려면, 아래와 같이 작성합니다. {} 없이 바로 파라미터를 작성하면 됩니다.

function printMovie(movie) {
  console.log(`Title: ${movie.title}, Director: ${movie.director}`);
}

 

이 방법도 나쁘진 않지만, 사용하는 속성이 많아질수록 코드가 복잡해질 수 있습니다. 특히 객체가 중첩되어있는 구조라면 더더욱 그렇죠. 때문에 구조분해 할당을 사용하면 코드가 더 직관적이고 간결해집니다.

 

 

3. 다양한 상황에서의 구조분해 할당 적용

구조분해 할당은 객체의 구조에 맞게 사용해야 합니다. 다음 예시를 봅시다.

function MovieDetail({ params }) {
  const { id } = params;
  console.log(id);
}

 

이 함수는 { params: { id: 1 } } 형태의 객체를 전달받아야 정상적으로 작동합니다. 만약 { id }만 바로 사용하고 싶다면, { id: someValue } 형태로 함수에 전달해야 합니다.

 

  • 함수 호출 예시: 
    MovieDetail({ params: { id: 1 } });

 

 

결론

구조분해 할당을 사용하면 함수에 전달된 객체에서 필요한 속성만 간편하게 추출할 수 있습니다. 코드의 가독성을 높이고, 불필요한 코드 작성을 줄일 수 있으니, 적극적으로 활용해봅시다.

 

반응형