230116 JS: 숙달을 위한 메모 - 구조 분해 할당 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

 

이름만 들어도 몬말인지 1도 모르겠는 구조 분해 할당, 비 구조화 할당 이라고도 부른다.

한글단어로도 어렵고 영어로도 어렵다. 영어는 Destructuring Assignment.

개념은 배열이나 객체의 구조에 맞게 바로 개별 변수에 값을 할당하는 방법이라고 한다.

(Assignment는 숙제 아니었음..? 다른 뜻으로 사용된다니...)

 

뭐 암튼간 찬찬히 단어단어를 뜯어보자면, 구조를 분해해가지고 할당하겠다는 것 같은데..

우선 예시를 봐보자.... ㄷㄷ

 

---

 

배열 구조 분해(Array Destructuring)

배열은 객체와 달리 순서가 있다는 점을 인식하기!

 

예시

const arr = [1, 2, 3];
const [aa, b, c] = arr;

console.log(aa, b, c);  //>> 1 2 3

//선언과 할당하는 방법도 있다
const arrr = [1, 2, 3];
let d, e, f;
[d, e, f] = arr;

console.log(d, e, f); // >> 1 2 3

//기본값: 값이있으면 그 값을 쓰고 값이 없으면 0을 사용
const aarr = [, , 3]; // 가령 값이 있다면 아래 배열이 아닌 이 배열이 콘솔에 출력됨
const [g = 0, h, i] = arr;

console.log(g, h, i); //>> 0 undefined 3

---

객체 구조 분해(Object destructuring)

객체는 순서가 없고, 속성의 '이름'으로 매칭해서 할당함. 내가 꺼내 사용할 변수의 이름만 정확히 써주면됨

 

예시 1

const user = {
  name: 'nugu',
  age: 93,
  email: 'nugunugu@gmail.com'
}

const { name, age, address = 'Korea'} = user // =user할당연산자로 {}할당(객체를 구조분해 한 것)
//const { name: WHO, age, address = 'Korea'} = user // =user할당연산자로 {}할당(객체를 구조분해 한 것)
//        변수이름을 바꿀수 있음 name -> WHO
// E.g, user.address 점표기법과 같은 방법

console.log(`사용자의 이름은${name}입니다.`);
console.log(`${name}의 나이는 ${age}입니다.`);
console.log(`${name}의 이메일주소는 ${user.email}입니다.`);
console.log(user.address); // >> undefined: user 객체안에 address가 선언되어 있지 않기 때문
console.log(address); // >> Korea

const obsts = ['Apfel', 'Banane', 'Kirshe'];
const [a, b, c, d] = obsts; //배열은 객체와 다르게 순서대로 출력이 된다.
console.log(a, b, c, d);
//가령, Banane만 출력하고 싶을때 
//const [, b] = obsts; 
//console.log(b);

 

---

추가 예시

const obj = { ccc: 3 }
const { aaa = 0, bbb, ccc : x = 0 } = obj
//               꺼내는이름:사용할이름

console.log(aaa, bbb, x); //>> 0 undefined 3

// 객체 데이터에서 없는 값을 찾으면 undefined가 출력된다.
// 조건문에서 else구문을 안쓸 수 있으면 쓰지 않고 return으로 마무리 하면 된다.

---

음.. 그러니까 예시를 보면 user라는 객체변수가?

해체가 되가지고 한 줄 짜리의 할당연산자에 할당...

음.. 그래서 변수이름도 빼올 때 바꿀 수도있고, 보간 법을 통해서 불러오기도하고 그렇다..?

 

음...우선 연습을 해보는게 더 우선일 것 같다.

개념은 알겠는데 프로젝트 시, '아! 객체(배열)분할해서 진행해야겠다!'

이런 생각 까지 할 수 있는 경지는 아닌 듯 하다 :(

결론은 연습이 답!