JavaScript - 구조 분해 할당

// 구조 분해 할당

const arr = [1, 2, 3];

// const a = arr[0];

// const b = arr[1];

// const c = arr[2];

const [a, b, c] = arr

console.log(a, b, c);

 

배열에 정해진 값 1,2,3 을 각각의 변수 값을 배열을 a, b, c로 분해하여 할당하는 것

 

// 구조 분해 할당

const arr = [1, 2, 3];

const [a, rest] = arr;

console.log(a, rest);

 

이렇게 작성하면 콘솔 창에 1 과 2만 출력됨 배열의 1을 제외한 나머지 전부를 출력하고자 할 때는 전개 연산자를 사용함

// 구조 분해 할당

const arr = [1, 2, 3];

const [a, rest] = arr;

console.log(a, ...rest);

 

여기서, rest 이름 대신 사용자가 원하는 이름으로 작성하여도 무관합니다.

 

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

// const a = obj.a

// const b = obj.b

// const c = obj.c

// const {} = obj;  객체 구조 분해 할당

// const [] = arr;  배열 구조 분해 할당

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const [,,,,,,,,n] = arr

const { a, b } = obj;

console.log(a, b);

 

배열 구조 분해 할당에서는 처음부터 숫자를 맞추어서 할당을 하는 것을 원칙으로 합니다. 따라서, 뒤쪽에 위치한 숫자를 출력하려면 ,(쉼표)로 빈 숫자를 제시한 후에 작성해야 합니다.

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

// const a = obj.a

// const b = obj.b

// const c = obj.c

// const {} = obj;  객체 구조 분해 할당

// const [] = arr;  배열 구조 분해 할당

const {c} = obj;

console.log(c);

 

반면에, 객체 구조 분해 할당은 따로 앞에 있는 숫자를 작성하지 않고 출력할 숫자만 작성하여도 무관합니다.

 

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

// const a = obj.a

// const b = obj.b

// const c = obj.c

// const {} = obj;  객체 구조 분해 할당

// const [] = arr;  배열 구조 분해 할당

const {x = 4} = obj;

console.log(x);

 

여기서 객체 데이터 x의 값을 4로 지정하고 콘솔창에 4로 출력이 되도록 작성할 수 있습니다.

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

// const a = obj.a

// const b = obj.b

// const c = obj.c

// const {} = obj;  객체 구조 분해 할당

// const [] = arr;  배열 구조 분해 할당

const {x = 4, a: younghak} = obj;

console.log(x,a) // a라는 변수를 younghak로 바꾸었기 때문에 오류가 발생

console.log(x,younghak);

 

x의 값과 기존에 작성된 a는 younghak이라는 변수로 바꾸어 졌기 때문에 콘솔 창에도 a가 아닌 younghak으로 작성해야 콘솔 창에 출력이 됩니다. 

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

// const a = obj.a

// const b = obj.b

// const c = obj.c

// const {} = obj;  객체 구조 분해 할당

// const [] = arr;  배열 구조 분해 할당

const {x = 4, a: younghak, y: first = 9} = obj;

console.log(x,a) // a라는 변수를 younghak로 바꾸었기 때문에 오류가 발생

console.log(x,younghak,ten);

 

// 구조 분해 할당 - 객채 및 배열 변수에 사용

const obj = {

  a: 1,

  b: 2,

  c: 3,

};

const { c, ...rest } = obj;

console.log(c, rest);

 

여기서 만약 const { c,rest}로 작성하게 되면 1과 undefined가 콘솔 창에 출력됩니다. 이유는 객체 데이터 안에 rest라는 데이터가 없기 때문입니다.