키모스토리

#9 구조 분해 할당 (Destructuring assignment) 본문

Web Devlopment/JavaScript

#9 구조 분해 할당 (Destructuring assignment)

키모형 2025. 3. 18. 18:12
반응형

구조 분해 할당 (Destructuring assignment)

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

let [x, y] = [1, 2];
console.log(x); // 2
console.log(y); // 1

 

배열을 분해해서 변수에 저장.

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

 

let [a, b, c] = [1, 2]; // c에는 undefined 가 들어간다

let [a=3, b=4, c=5] = [1,2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 5 (undefined 가 오면 기본 설정값이 저장)

 

// 일부 반환값 무시하기

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

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

 

// a, b 값을 바꿔치기 하고 싶을때
let a=1;
let b=2;

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

console.log(a); // 2
console.log(b); // 1

 

객체 구조 분해


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

let {name, age} = user;
    // let name = user.name;
    // let age = user.age;

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

 

프로퍼티 이름 변경

let user = {name: 'Mide', age: 30};
let {name: userName, age: userAge} = user;
console.log(userName); // 'Mike'
console.log(userAge); // 30

 

객체 구조 분해 : 기본값 지정

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

console.log(name);
console.log(age);
console.log(gender);

 

 

반응형