[JavaScript] 비구조적 할당 사용 방법과 이유

비구조 할당(destructuring assignment)이란 배열 또는 객체의 속성을 변수에 연결하는 방식입니다. 비구조적 할당 문법은 어떻게 사용하며, 왜 사용하는 것일까요?

비구조적 할당 사용 방법

자바스크립트에서는 배열이나 객체를 사용하여 일련의 데이터를 간편하게 저장할 수 있죠. 비구조적 할당은 이와 유사한 문법을 사용합니다. 차이점은 왼쪽에 값이 오고 오른쪽에 기존의 배열 또는 객체 변수 이름이 온다는 것입니다. 아래의 예시 코드를 참고해보세요.

const numbers = [1, 2, 3, 4, 5];
const [firstNumber, secondNumber, ...restNumbers] = numbers;

console.log(firstNumber); // 1
console.log(secondNumber); // 2
console.log(restNumbers); // [3, 4, 5]

객체인 경우에는 아래와 같이 사용할 수 있습니다.

let user = { name: "John", years: 30 };
let {name, years: age, isMan = true} = user;

console.log(name); // John
console.log(age); // 30
console.log(isMan); // true

비구조적 할당을 사용하는 이유

비구조적 할당을 사용하는 이유는 무엇일까요? 아래의 people 배열을 예시로 살펴보겠습니다. 각 값에 접근하려면 people[0]과 같이 인덱스를 통해 접근해야 합니다. 그러나 비구조적 할당을 통해 이를 변수에 할당하면 해당 변수를 바로 사용할 수 있습니다.

const people = ["Jay", "Jeong", "Bora"];
const [firstPerson, secondPerson] = people // 비구조적 할당

console.log(`Hello, I am ${firstPerson}!`) // Hello, I am Jay!

참고 자료

• https://ko.javascript.info/destructuring-assignment