F-Lab
🚀
상위권 IT회사 합격 이력서 무료로 모아보기

모던 자바스크립트에서의 비구조화 할당

writer_thumbnail

F-Lab : 상위 1% 개발자들의 멘토링

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!



비구조화 할당의 기본 개념

비구조화 할당(Destructuring assignment)은 ES6에서 도입된 모던 자바스크립트의 중요한 특징 중 하나입니다. 이 기능을 통해 개발자는 객체나 배열로부터 속성이나 요소를 쉽게 추출할 수 있습니다. 비구조화 할당을 사용하면 코드의 가독성을 높이고, 불필요한 임시 변수의 사용을 줄일 수 있습니다.

왜냐하면 비구조화 할당을 통해 직접적으로 필요한 데이터를 변수에 할당할 수 있기 때문입니다.



객체에서의 비구조화 할당

객체에서 비구조화 할당을 사용하면 객체의 속성을 변수로 쉽게 매핑할 수 있습니다. 이는 특히 객체의 속성이 많을 때, 특정 속성만을 추출해야 할 경우 유용합니다.

    const person = {
        name: 'John Doe',
        age: 30
    };
    const { name, age } = person;

왜냐하면 이 방식을 통해 person 객체에서 name과 age 속성을 간단히 추출하여 사용할 수 있기 때문입니다.



배열에서의 비구조화 할당

배열에서 비구조화 할당을 사용하는 것도 객체와 유사합니다. 배열의 각 요소를 변수에 할당할 때, 인덱스를 기반으로 값을 추출할 수 있습니다. 이는 배열의 특정 위치에 있는 요소를 쉽게 가져올 수 있게 해줍니다.

    const colors = ['red', 'green', 'blue'];
    const [firstColor, , thirdColor] = colors;

왜냐하면 이 방식을 통해 colors 배열의 첫 번째와 세 번째 요소를 각각 firstColor, thirdColor 변수에 할당할 수 있기 때문입니다.



함수 매개변수에서의 비구조화 할당

함수의 매개변수에서도 비구조화 할당을 사용할 수 있습니다. 이는 함수가 객체나 배열을 매개변수로 받을 때, 내부에서 특정 속성이나 요소만을 사용하고자 할 때 매우 유용합니다.

    function displayPerson({ name, age }) {
        console.log(`Name: ${name}, Age: ${age}`);
    }
    displayPerson(person);

왜냐하면 이 방식을 통해 함수 내부에서 person 객체의 name과 age 속성을 직접적으로 사용할 수 있기 때문입니다.



결론: 비구조화 할당의 장점

비구조화 할당은 코드의 간결성과 가독성을 크게 향상시킵니다. 객체나 배열, 함수 매개변수에서 필요한 데이터를 쉽게 추출할 수 있어, 개발자가 더 효율적으로 코드를 작성할 수 있도록 돕습니다.

왜냐하면 비구조화 할당을 통해 데이터를 명확하고 직관적으로 다룰 수 있기 때문입니다.

ⓒ F-Lab & Company

이 컨텐츠는 F-Lab의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.

조회수
logo
copyright © F-Lab & Company 2025