[JavaScript] 10. 구조 분해 할당 (Destructuring assignment)

Zero·2023년 2월 12일
0

JavaScript

목록 보기
10/35

Destructuring assignment

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식을 의미한다.

let [x,y] = [1,2];

console.log(x); //1
console.log(y); //2

let users ['Mike', 'Tom' , 'Jane']

let [user1, user2, user3] = users;

console.log(user1); // Mike
console.log(user2); // Tom
console.log(user3); // Jane

배열 구조 분해 : 기본 값

// c는 값이 없기 때문에 undefined
let [a,b,c] = [1,2];

// 따라서 사전에 기본값을 세팅해주는 방법을 사용하자
let [a=3, b=4, c=5] = [1,2];

// , , 를 통해 생략하고 다음 인덱스의 값을 저장할 수 있다.
let [a, , c] = [1,2,3,4];

배열 구조 분해 : 바꿔치기

기존 새로운 변수를 하나 더 만들어 임시로 값을 저장하고 swap 했다면 , 배열 구조 분해를 통해

[a,b] = [b,a]; 

다음과 배열의 값을 바꿔치기 할 수 있다.



객체 구조 분해

let user = {name: 'Mike' , age:30};

// name , age 순서를 바꿔도 문제 없다.
let {name, age} = user;
console.log(name); // 'Mike'
console.log(age); // 30

// 다음과 같이 property의 이름을 지정할 수 있음.
let {name:userName, age:userAge} = user;
console.log(userName);
console.log(userAge);

객체 구조 분해 : 기본 값

let user = {
 	name: 'Jane',
  	age: 18,
  	gender: 'female'
};

let {name , age , gender = 'male'} = user;

console.log(gender); // female

0개의 댓글