10. javascript 비 구조화 할당

1. 비 구조화 할당

1. 배열의 비 구조화 할당

1-1. 스왑

2. 객체의 비 구조화 할당

---

1. 배열의 비 구조화 할당

코드로 설명한다.

let arr = [1, 2, 3];

let [one, two, three] = arr;

console.log(one); //1
console.log(two); //2
console.log(three); //3

더 간단히

let [one, two, three] = [1, 2, 3];

console.log(one); //1
console.log(two); //2
console.log(three); //3

배열의 선언하면서 default 값으로 세팅도 가능하다.

let [one, two, three, four] = [1, 2, 3];

console.log(one); //1
console.log(two); //2
console.log(three); //3
console.log(four); //undifined

let [one, two, three, four = 4] = [1, 2, 3];

console.log(one); //1
console.log(two); //2
console.log(three); //3
console.log(four);  //4 선언하면서 초기화.

1-1. 스왑

스왑을 할 수도 있다.

let a = 10;
let b = 20;
let tmp = 0;

tmp = a;
a = b;
b = tmp;
console.log(a, b); // 20 10

기존 스왑방식이 위와 같다.. 하지만 비구조화 할당을 통해 더 간단히 변경이 가능하다.

아래와 같이 구현하면 된다.

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20 10

---

2. 객체의 비 구조화 할당

기존 할당

let obj = {
  one: 1,
  two: 2,
  three: 3
};

let one = obj.one;
let two = obj.two;
let three = obj.three;

console.log(one, two, three); // 1 2 3

비 구조화 할당

배열의 키값과 같은 값을 할당해주어야 한다. (변수명과 object의 키값이 같아야 한다)

let obj = {
  one: 1,
  two: 2,
  three: 3
};

let { one, two, three } = obj; // 객체의 키값을 구분으로하여 할당함.
console.log(one, two, three); // 1 2 3

let obj = {
  one: 1,
  two: 2,
  three: 3,
  name: "배재현"
};

let { one, two, three, name } = obj;
console.log(one, two, three, name); // 1 2 3 배재현

만약 키값을 다르게 할당하고 싶다면?

콜론(:) 을 사용한다

let obj = {
  one: 1,
  two: 2,
  three: 3,
  name: "배재현"
};

let { one, two, three, name: koreaName } = obj;
console.log(one, two, three, koreaName); // 1 2 3 배재현

배열과 마찬가지로 할당과 동시에 초기화도 가능하다

let obj = {
  one: 1,
  two: 2,
  three: 3,
  name: "배재현"
};

let { one, two, three, name: koreaName, email = "shipjh@naver.com" } = obj;
console.log(one, two, three, koreaName, email); // 1 2 3 배재현 shipjh@naver.com