구조 분해 할당이란?
- 주어진 자료의 구조를 분해해서 변수에 할당하는 기능
- 디스트럭팅(destructing)이라고 함
- 배열이나 객체는 하나의 변수에 다양한 값이 들어 있는데, 그 중에서 일부만 꺼내어 다른 변수로 할당할 수 있음
// 방법 1
let [apple, peach] = ["사과", "복숭아"]
// 방법 2
const fruits = ["사과", "복숭아"]
let [apple, peach] = fruits
일부 값만 구조 분해 할당하기
- 구조 분해는 값의 일부만 변수에 할당할 때 더욱 편리함
let [spring, ,fall, ] = ["봄", "여름", "가을", "겨울"]
spring // "봄"
fall // "가을
나머지 변수를 사용해 구조 분해 할당하기
- 구조 분해에서 일부 값을 변수로 지정한 후 나머지 값을 묶어서 하나의 변수로 할당할 수 있음
→ 나머지 값을 묶어서 만든 변수를 ‘나머지 변수’라고 함
- 나머지 변수 이름 앞에 ...를 붙이고, 나머지 변수에 할당하는 값은 마지막에 오는 값이어야 함
let [teacher, ...students] = ["Kim", "Lee", "Park", "Choi"]
teacher // "Kim"
students // ["Lee", "Park", "Choi"]
두 변수의 값 교환하기
- 구조 분해를 사용하면 두 변수의 값을 서로 교환해서 할당할 때도 편리함
let x = 10
let y = 20
[x, y] = [y, x]
객체 구조 분해
- 객체를 구조 분해할 때는 프로퍼티 이름이나 메서드 이름을 변수 이름으로 사용함
→ 왜냐하면 객체에는 순서가 없기 때문에 키 이름과 변수 이름이 같아야 해당 키를 찾아서 값을 가져올 수 있기 때문
const member = {
name : "Kim",
age : 25
}
let {name, age} = member
name // "Kim"
age // 25
let name, age
{name, age} = {name : "Kim", age : 25}
name // "Kim"
age // 25
- 변수의 이름을 객체의 프로퍼티 이름이 아닌 다른 이름으로 지정하는 방법
const member = {
name : "Kim",
age : 25
}
let {name : userName, age} = member
username // "Kim"
중첩된 객체 구조 분해
- 변수의 이름을 객체의 프로퍼티 이름이 아닌 다른 이름으로 지정하는 방법
const student = {
name : "도레미",
score : {
history : 85,
science : 94
},
friends : ["Kim", "Lee", "Park"]
}
// 방법 1
let {
name, // student.name의 값
score : {
history, // student.score.history의 값
science // student.score.science의 값
},
friends : [f1, f2, f3] // friends 배열 구조 분해
} = student
// 방법 2
let { name, score : { history, science }, friends : [f1, f2, f3] } = student
댓글