[자바스크립트 중급] 구조 분해 할당 Destructuring assignment

1. 구조 분해 할당이란?

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
• 배열의 요소들이나, 객체의 프로퍼티를 한번에 다 변수로 만들어 버림

 

 

2. 배열 구조 분해

// 1. 배열 구조 분해

let users = ["Jane", "Tom", "Kane"];

let [user1, user2, user3] = users;

console.log(user2); // Tom

 

• str.split()을 이용한 구조 분해 (통 문자열로 되어있을 때)

// 2. str.split을 활용한 분해

let newUsers = "Mike-Tomy-Jimmy"

let [user4, user5, user6] = newUsers.split('-');

console.log(user5); // Tomy

 

• 변수는 있는데 값이 없으면 undefined 나옴 그래서 기본값 설정해둠
  • 디폴트 지정해두고 그 위에 새배열 덮어씌우는 개념

// 3. 배열 구조 분해 기본값 설정

let newUsers2 = ["Kommy", "Jommy",];

let [user7 = "없는 회원", user8 = "없는 회원", user9 = "없는 회원"] = newUsers2;

console.log(user9); // 없는 회원

console.log(user8); // Jommy

console.log(user7); // Kommy

 

• 일부 값 생략, 건너뛰기
  • 변수 선언 때, ,로 해당 위치 요소 건너 뛸 수 있음
  • 예제를 보면 Tom이 와야 할 user2에 Kane이 옴.

// 4. 배열 구조 분해에서 일부 값 생략/건너뛰기

let users = ["Jane", "Tom", "Kane"];

let [user1, ,user2] = users; // 인덱스 1번 자리에 아무것도 없으니 건너 뜀. 그 다음이 user2가 됨.

console.log(user2); // Kane

 

• 구조 분해 값 바꿔치기

// 구조 분해 바꿔치기

// a,b 값을 서로 바꾸고 싶다면

let a = 1;

let b = 5;

// 구조 분해 없이 바꾸려면 가상의 값 c 를 넣어야 충돌 방지

let c = a;

a = b;

b = c;

// 구조 분해 활용하면

[a,b] = [b,a]

 

 

3. 객체 구조 분해

• 객체는 l{} 중괄호로 감싸줘야 함.

// 객체 구조 분해

let users = {

    name: "popo",

    age: 29

}

let {name,age} = users;

 

• 변수 이름을 바꿀 수 있음 (아래처럼)
• let {기존 키값: 새로운 변수명, 기존 키값: 새로운 변수명}

 

let {name: aaa, age: bbb} = users;

console.log(aaa); // popo

console.log(bbb); // 29

 

• 객체 구조 분해도 기본값 설정할 수 있음 (안하면 undefined)
  • 기존 객체에 벨류값이 있다면 디폴트값이 지정해도 기존 벨류값으로 사용

// 객체 구조 디폴트값 설정

let users = {

    name: "popo",

    age: 29

}

let {name, age, gender = "male"} = users;

console.log(gender); // male 

 

let {name, age, gender} = users;

console.log(gender); // undefined 

 

let users = {

    name: "popo",

    age: 29,

    gender : "female"

}

let {name, age, gender = "male"} = users;

console.log(gender); // female

 

 

 

⚡ 객체 배열 을 구조분해 하려는데 어케하지

- 첫번째 프로퍼티만 반환된다.

let userList = [

    {name: "ko", age: 1},

    {name: "ho", age: 2},

    {name: "zo", age: 3},

    {name: "do", age: 4},

]

let [{name, age}] = userList;

console.log(name); // ko