구조분해는 기본적으로 값을 푸는 것입니다.
배열이나 객체의 속성이나 값을 구조분해하여 값을 변수에 담을 수 있게 하는 자바스크립트 문법입니다.
배열 구조 분해
배열이 갖고있는 값을 꺼내서 쓰려고 하면 직접 배열의 값을 지정해서 썼어야 합니다.
이렇게 쓴다면 코드도 길어지고, 한눈에 알아보기도 힘듭니다.
const food = ["kimchi","bulgogi","pasta"]
const koreanFood1 = food[0];
const koreanFood2 = food[1];
const foreignFood = food[2];
console.log(koreanFood1) //"kimchi"
console.log(koreanFood2) //"bulgogi"
console.log(foreignFood) //"pasta"
하지만 비구조화 할당을 통해서 다음과 같이 한눈에 보기 쉽게 쓸 수가 있습니다.
const food = ['kimchi', 'bulgogi', 'pasta'];
const [koreanFood1, koreanFood2, foreignFood] = food;
//or
const [koreanFood1, koreanFood2, foreignFood] = ['kimchi', 'bulgogi', 'pasta'];
console.log(koreanFood1); //"kimchi"
console.log(koreanFood2); //"bulgogi"
console.log(foreignFood); //"pasta"
그리고 기본값을 설정할 수가 있습니다.
배열의 3개의 요소를 구조분해한다고 하면 p와 q는 8과 9라는 값으로 설정되어 있는 반면에
배열의 세번째 요소인 r은 값이 설정 되어있지 않아서 undefined가 나옵니다.
const [p,q,r] = [8,9];
console.log(p,q,r) //8,9,undefined
이럴 때 다음과 같이 배열의 세번째 요소에 기본값을 설정한다면 값이 정상적으로 7이 나오는 것을 볼 수 있습니다.
const [p, q, r = 7] = [8, 9];
console.log(p, q, r);// 8,9,7그리고 기본값이 이미 설정이 되어있는 요소라도 우측에 값이 설정이 되어있다면
우측에 있는 값이 우선으로 찍히게 됩니다.
const [p=2, q=2, r = 7] = [8, 9];
console.log(p, q, r);// 8,9,7
중첩구조분해
배열이나 객체에 다른 객체나 배열을 포함할 때, 다음의 방법을 사용하면 중첩으로 된 배열이나, 객체의 정보를 추출할 수 있습니다.
간단한 예시
중첩 구조분해를 하기 전에는 c의 값이 [5,6]이라는 배열 그 자체이기 때문에 콘솔을 찍었을 때
[5,6] 이라는 배열 자체의 값이 나온 것을 볼 수 있습니다.
하지만 우리는 배열 자체의 값이 아니라 배열 안의 요소의 값을 추출하고 싶다면
중첩 구조분해를 사용할 수 있습니다.
중첩 구조분해를 하고나서는 배열 안의 배열의 요소인 c, d의 값을 추출한 것을 볼 수 있습니다.
//중첩 구조분해 하기 전
const nested = [2, 4, [5, 6]];
const [a,b,c] = nested;
console.log(a, b, c); //2,4,[5,6]
//중첩 구조분해 후
const nested = [2, 4, [5, 6]];
const [a,b, [c, d]] = nested;
console.log(a, b, c, d); //2,4,5,6
객체 구조 분해
만약에 person이라는 객체가 있는데, 그 객체 안의 name, job이라는 값을 꺼낸다고 가정을 해본다면
다음과 같이 꺼낼 수 있습니다.
구조분해를 쓴다면 구조분해하기 전보다 훨씬 더 간결하게 값을 추출할 수가 있습니다.
//구조분해하기 전
const person = {
name: 'haram',
job: 'designer',
};
console.log(person.name); //"haram"
console.log(person.job); //"designer"
//구조분해 후
const { name, job } = person;
console.log(name); //"haram"
console.log(job); //"designer"
구조분해를 할 때는 변수의 이름도 변경이 가능합니다.
다음과 같이 name을 nickname으로, job을 work로 변경하고서
nickname, work를 콘솔로 찍으면 동일한 값이 나오는 것을 볼 수 있습니다.
const person = {
name: 'haram',
job: 'designer',
};
const { name: nickname, job: work } = person;
console.log(nickname, work); //"haram", "designer"
구조분해를 통해서 변수의 값을 변경할 수도 있습니다.
let a = 111;
let b = 222;
const obj = { a: 15, b: 17, c: 127 };
//중괄호로 줄을 시작할때는 괄호로 묶어야 오류가 안난다.
({ a, b } = obj);
console.log(a, b); //15, 17
중첩구조분해를 통해서 객체안의 객체의 값을 추출하는 복잡한 코드도 해결할 수 있습니다.
restaurant 객체가 있고, 레스토랑의 이름과 월요일(mon)의 open시간과 close시간을 추출하려고 한다면
다음과 쓸 수 있습니다.
보통 첫번째 방법을 많이 쓰는 것 같습니다. 이렇게 중첩구조분해를 통해서 딥한 객체의 값을 추출할 수 있습니다.
const restaurant = {
name: 'Pasta heaven',
openingHours: {
mon: {
open: '9:00',
close: '22:00',
},
tues: {
open: '10:00',
close: '23:00',
},
},
};
//첫번째 방법
const {
name,
openingHours: {
mon: { open, close },
},
} = restaurant;
console.log(name, open, close); //"Pasta heaven", "9:00", "22:00"
//두번째 방법
const { name } = restaurant;
console.log(name); // "Pasta heaven"
const { open, close } = restaurant.openingHours.mon;
console.log(open, close); // "9:00", "22:00"
블로그 첫 포스팅인데 글 주변이 없어서 도움이 필요하신 분들한테 도움이 될 지 모르겠지만,
도움이 됐으면 좋겠습니다.
혹시나 잘못된 내용이 있다면 댓글로 달아주시면 수정하겠습니다.
감사합니다.