요소를 저장할 때 인덱스 순서에 따른 요소 저장 방식인 배열과
특정 키(이름)을 통해 값을 저장하는 객체가 있다.
간혹 특정 배열, 객체 데이터 요소만 분해하여 사용하는 경우가 있을 수도 있는데, 그럴때 쓰이는 표현 문법을
구조 분해 할당이라고 부른다.
구조 분해 할당(destructuring assignment)
배열이나 객체의 데이터 요소 속성을 분해하여 그 값을 변수에 담을 수 있게 하는 표현식
배열 구조 분해
let [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2
가장 기본적인 배열에 구조를 분해한 방식이다.
x에 1, y에 2를 할당하여 변수로 분해한 표현한 방식이다.
let str = "I-LOVE-NewYork"
let [user1, user2, user3] = str.split('-')
console.log(Item1); // I
console.log(Item2); // LOVE
console.log(Item3); // NewYork
str.split 메서드를 통해 문자열은 ["I", "LOVE", "NewYork"]이 되며,
각 user1~3의 배열에 할당하여 변수로 분해한다.
일부 요소 무시
let [Item1, ,Item2] = [1, 2, 3, 4]
console.log(Item1); // 1
console.log(Item2); // 3
공백을 활용하여 필요 없는 요소를 생략하여 분해가 가능하다.
요소 바꾸기
let a = 1;
let b = 2;
let c = a; // 1
a = b; // 2
b = c // 1
변수 a과 b를 서로 바꾸기 위해서는 c 변수를 새로 선언한 후 할당하여야 가능했다.
let a = 1;
let b = 2;
[a, b] = [b, a];
그러나 위의 코드 배열 구조 분해를 활용하면 새로 변수를 선언할 필요가 없어진다.
객체 구조 분해
let user = {name: 'Leo', age: 24}
let {age, name} = user
// 위의 코드와 똑같은 예시
// let name = user.name
// let age = user.age
console.log(name); // 'Leo'
console.log(age) // 24
객체 구조 분해를 통해 키 name, age를 변수처럼 선언하여 입력하여도 값이 출력된다.
배열 구조 객체와 다른점이 없지만, 한가지 특이점은 순서에 의존하지 않는다.
새로운 변수 이름으로 할당
let user = {name: 'Leo', age: 24}
let {name: userName, age: userAge} = user
console.log(userName); // 'Leo'
console.log(userAge) // 24
기존 키에 새로 값을 지정하면 그 값이 변수 역할을 해준다.
객체 구조 분해의 기본값
let user = {name: 'Leo', age: 24};
let {name, age, gender} = user;
console.log(Name); // 'Leo'
console.log(gender); // undefined
user 객체에 gender 프로퍼티가 없으므로, 구조 분해를 하면 undefined가 출력된다.
let user = {name: 'Leo', age: 24};
let {name, age, gender = "Man"} = user;
console.log(Name); // 'Leo'
console.log(gender); // "Man"
⛔️ 주의할 점⛔️
그러나 해당 위의 코드는 gender 프로퍼티가 undefined 상태일 때만 도출되는 방법이다.
let user = {
name: 'Leo',
age: 24,
gender: "Woman"
}
let user = {name: 'Leo', age: 24};
let {name, age, gender = "Man"} = user;
console.log(Name); // 'Leo'
console.log(gender); // "Woman"
Spread/Rest 문법
Spread
...Spread
다량의 배열 혹은 객체 요소들을 전달 인자로 전달할 때 사용
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2]
console.log(result) // [1, 2, 3, 4, 5, 6]
Rest
...Rest
함수의 매개변수에 배열의 형태로 입력받아 다수의 배열 요소를 사용할 수 있다.
function koreaCity(...city) {
console.log(city)
}
koreaCity(); // []
koreaCity("Seoul"); // ["Seoul"]
koreaCity("Seoul", "Daegu"); // ["Seoul", "Daegu"]
Spread/Rest 응용
배열 복사
let arr1 = [1, 2, 3];
let arr2 = [..arr1]
arr2.unshift(4)
arr1 // [1, 2, 3]
arr2 // [4, 1, 2, 3]
객체에서 활용
let obj1 = { fruit: 'apple', x: 10 };
let obj2 = { fruit: 'banana', y: 25 };
let clonedObj = { ...obj1 }; // { fruit: 'apple', x: 10 }
let mergedObj = { ...obj1, ...obj2 }; // { fruit: 'banana', x: 10, y: 25 }
다차원 배열 무시
let arr = ['Hello', 'my']
let value = [
...arr,
'Universe',
...['Come', 'on', 'yoo']
]
value // ["Hello", "my", "Universe", "Come", "on", "yoo"]
결론
특정 배열, 객체 데이터 요소를 변수에 담을 필요가 있을 경우나,
함수의 매개변수 혹은 변수의 전달 인자가 대량으로 많이 있을 경우 구조 분해 할당은
하드 코딩을 최소화해줄 편리한 문법이다.
