[JavaScript] 구조 분해 할당(Destructuring Assignment)

Intro

처음 변수명부분에  [변수명1, 변수명2, ...변수명3] 이런 식으로 있는 코드를 보았을 떄, 와.....저건 또 뭐야

무슨 괴생물이 있어? 어떻게 동작하길래 저렇게 사용하는거지 들어가는 값은 객체 하나인데 받는 변수는 여러개? 뭐야 라는 생각을 했었다. 얼핏 찾아보기로는 안에 있는 속성들을 꺼내서 사용하는데 구조분해할당처럼 전부 풀어서 사용하기보단 원하는 것만 꺼내서 사용하기 위한 방법인거 같은데 맞는지 확인해보자

Destructuring Assignment (구조 분해 할당)

배열이나 객체에서 값을 쉽게 꺼내서 변수에 할당하는 문법이야.

배열 구조 분해 할당

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...third] = numbers;

console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(third); // 출력: [3, 4, 5]

// 일부 값만 할당하기(빈칸으로 특정 값 건너 뛰기)
const [first, , ...third] = numbers;

console.log(first); // 출력: 1
console.log(third); // 출력: [3, 4, 5]

주의 Rest Parameter는 마지만 인자에서만 사용해야함.

객체 구조 분해 할당

const user = { name: "Alice", age: 25, location: "Seoul" };
const { name, age } = user;

console.log(name); // Alice 
console.log(age); //출력:  25

// 변수명을 변경하는 경우
const { name: userName, age: userAge } = user;

console.log(userName); // Alice 
console.log(userAge); // 출력: 25

// 만약 객체에 없는 속성 이름을 담을 경우
const { name, gender } = user;

console.log(gender); // 출력: undefined

// 기본값 설정
const { name, gender = 'female' } = user; // gender가 없으면 기본값 'female' 사용 

console.log(gender); // 출력: female

---

마무리

쉽게 안에 있는것들을 꺼내서 새로운 객체에 담는데, 배열일 때는 새로 담는 객체 변수명을 마음대로 정해도 되고

객체일 때는 객체의 속성 이름을 그대로 사용해서 담아야하는거고.... 내 머리 속에는 더이상 담길 곳이 없고 @@

 

[참고]

MDN - 구조 분해 할당 문서