[JavaScript] 차근차근 구조 분해 할당👆

차근차근 구조를 분해해서 할당 해보자.

• 구조분해할당이란?

나는 처음 이 문법을 접했을 때, 수학에서 쓰이는 "대입" 이라는 단어가 생각났다.
그래서 이게 뭐냐면..
배열!! 혹은 객체!! 에서 각각 값(value)이나 프로퍼티(property) 를 분해 하여,
손쉽게 별도의 변수에 담을 수 있도록 해주는 어떤..음..일단 이렇게 쓰는 문법이다~
정도로 이해하고 넘어가기엔 뭔지 잘 모를거라 생각한다. (내가 그랬다..)

📌 간단한 예

let a, b, rest; // 변수부터 선언해보자.
[a, b] = [10, 20];

console.log(a);
// 결과 값: 10

console.log(b);
// 결과 값: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// 결과 값: Array [30,40,50]

• [10, 20] 배열을 다른 배열 [a,b]에 "할당!"하면

1. a에 첫번째 인덱스인 10이 "할당" 되고,
2. b에는 두번째 인덱스인 20이 "할당" 된다.

• [a, b, ...rest]배열에 [10, 20, 30, 40, 50] 배열을 할당하면??
  1. 당연히 a=10 b=20 "rest=30"이 아니다!!

2. rest 앞에 ... 이 전개연산자(↙읽어보셈) 라고하는데 배열의 요소나 객체를 나열해주는 연산자이다.
3. 즉, rest = [30, 40, 50]가 된다.

✔ 전개연산자?

• 펼쳐진 객체나 배열을 담을 바구니 라고 생각하면된다.
  [a, b, ...rest(바구니)] = [10, 20, 30, 40, 50](펼쳐진 배열)

📌 Step. 1 배열 구조 분해!!

• 기본 변수 할당

let numArray = [1, 2, 3];

[a, b, c] = numArray;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

솔직히 이건 너무 쉽다 ㅇㅈ?

• 기본 값 할당

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

a와 b에 각각 기본값이 할당되어있는 상태.
그런데 a에는 분해한 값 1이 있지만 b는 undefine인 상태.
그럴때는 기본 값을 참조한다.

• 변수값 교환도 가능!!

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

• 일부 반환값 개무시하기!@!@!

function f() {
  return [1, 2, 3];
}

let [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

예를 들어 중간의 2라는 number가 필요하지 않은 반환 값일 때 중간을 비워두고 쓰면 된다.
물론 다 무시할 수도 있다.
Like -> [,,] = f();

📌 Step. 2 객체 구조 분해!!

• 기본 할당

let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

이게 잘 이해가 안될 수 있다.
조금 다르게 표현하면

const a = {q:1, w:2, e:3, r:4}
let {q,r,m} = a
console.log(q) // 1
console.log(w) // w is not define
console.log(r) // 4
console.log(e) // e is not define
console.log(m) // undefine

1. a라는 객체 안에 있는 key값 선언시 자동으로 value값 할당.(m은 없으니까 undefine)
2. 선언하지 않은값은 할당되지 않았기 때문에 ".. is not define"

• 선언 없는 할당

let a, b;

({a, b} = {a: 1, b: 2});

❗❗여기서 중요한점❗❗

선언 없이 할당할 경우 할당 문을 둘러싼 ( .. )는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문이다.
즉, {a, b} = {a:1, b:2} 이렇게만 쓰면 독립적으로 유효한 구문이 아닌 것!
좌변의 {a, b}이 객체 리터럴이 아닌 블록(block)으로 간주되기 때문!!
그러나, ({a, b} = {a:1, b:2})는 유효한데, let {a, b} = {a:1, b:2}와 같다고 보면 된다.
❗❗한가지 더❗❗
( .. ) 표현식 앞에는 세미콜론이 꼭 있어야 함.
안그러면 이전 코드와 연결되서 영향을 미칠 수 있음.

• 새로운 변수 이름으로 할당

let o = {p: 42, q: true};
let {p: foo, q: bar} = o;

console.log(foo); //42
console.log(bar); //true

다른 이름의 변수에 할당할 수 있다.

let o = {p: 42, q: true};
let {p: q, q: p} = o;

console.log(q); // 42
console.log(p); // true

이런것도 가능하다.

• 기본값을 갖는 새로운 이름의 변수에 할당!!!

let {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

새로운 변수명 할당과 기본값 할당을 한번에 할 수 있다.