#9. 구조분해할당(Destructuring Assignment)

Seulyi Yoo·2022년 7월 7일
0

javascript grammar

목록 보기
9/20
post-thumbnail

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

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'

let str = 'Mike-Tom-Jane';
let [user1, user2, user3] = str.split('-');
console.log(str.split('-')); // ['Mike', 'Tom', 'Jane']

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

// 배열 구조 분해: 기본값

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

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

// 배열 구조 분해 : 일부 반환값 무시

let [user1, , user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1); // "Mike"
console.log(user2); // "Jane"

// 배열 구조 분해 : 바꿔치기

let a = 1;
let b = 2;

let c = a; // c = 1, c를 임시로 만들기
a = b; // a = 2
b = c; // b = 1

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

// 객체 구조 분해

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

console.log(name); // "Mike"
console.log(age);  // 30

// 객체 구조 분해: 새로운 변수 이름으로 할당

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

// let {name, age} = user;

let {name: userName, age: userAge} = user;

console.log(userName); // "Mike"
console.log(userAge); // 30

// 객체 구조 분해: 기본값

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

let {name, age, gender= "male"} = user; // gender가 undefined일 때, 기본값은 'male'

console.log(gender); // female
profile
성장하는 개발자 유슬이 입니다!

0개의 댓글