구조 분해 할당 예시 (object destructuring)

 

구조 분해 할당이란?
"배열"이나 "객체"의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

 

기본적인 것 말고, 내가 기록해두고 싶은 재할당 예시만 메모해두고자 한다.

 

1. 배열에서 변수 재할당

- 실무에서 정말 많이 사용하는 예시

const menu = ['americano', 'latte'];
const [myPick, yourPick] = menu; 

console.log(myPick); // 'americano' 
console.log(yourPick); // 'latte' 
console.log(menu); // ['americano', 'latte']

 

2. 로그인 로직에서의 배열 구조 분해 할당

const authorization = "Wooyoung hbTfisdhf4XiojVHl3OobCO-erf"; 
const [bearer, token] = authorization.split(' ');

console.log(bearer); // 'Wooyoung' 
console.log(token); // 'hbTfisdhf4XiojVHl3OobCO-erf'

 

3. spread Operator에서의 구조 분해 할당

- 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다고 한다.

const [sing, ...rest] = ['여보세요', '나야', '거기', '잘지내니'];

console.log(sing); // '여보세요'
console.log(rest); // [ '나야', '거기', '잘지내니' ]

 

4. for of문에서의 구조 분해 할당

- Object.entries를 이용해 객체에서 각각의 key, value를 뽑아내려고 할 때

const animal = { name: 'Tiger', age: 10 };
Object.keys(animal); // [ 'name', 'age' ]
Object.values(animal); // [ 'Tiger', 10 ]
Object.entries(animal); // [ [ 'name', 'Tiger' ], [ 'age', 10 ] ]

const zooInfo = obj => { 
  for(let [key, val] of Object.entries(obj)) { 
  console.log(`${key} : ${val}`);
  }
}

zooInfo(animal); 
// 'name : Tiger'
// 'age : 10'

 

- 객체가 여러개일 경우에는 객체 구조 분해 할당

const animals = [
  { name: 'Tiger', age: 10 },
  { name: 'Dog', age: 4 },
  { name: 'Rabbit', age: 8 }
]

const ShowZooInfo = arr => { 
  for(let {name: n, age: l} of arr) { 
  console.log(`동물 이름은 ${n}이고, 나이는 ${l}살 입니다`);
  }
}

ShowZooInfo(animals); 
// '동물 이름은 Tiger이고, 나이는 10살 입니다' 
// '동물 이름은 Dog이고, 나이는 4살 입니다' 
// '동물 이름은 Rabbit이고, 나이는 8살 입니다'