구조 분해 할당 (북극곰은 사람을 찢지. 구조분해할당은...)

이지선·2021년 7월 31일
14

JavaScript

목록 보기
7/8
post-thumbnail

🤔'구조 분해 할당'이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식-byMDN-

어려운말~어려운말~어려운말~어려운말~어려운말~어려운말~어려운말~어려운말~

이럴 땐? 예시를 보자!

let 오늘,내일;

[오늘,내일]=["치킨","피자"];

console.log(오늘);
//"치킨"출력
console.log(내일);
//"피자"출력

[오늘,내일]=["치킨","피자"];

이런 식으로 오늘 변수에 “치킨”을 할당하고 내일 변수에 “피자”를 할당하는 것이 가능하다.

👉배열 구조 분해

let arr = [1,2,3]
let [a,b,c] = arr;

console.log(a);//1출력
console.log(b);//2출력
console.log(c);//3출력

[a,b,c]=[1,2,3]의 모습으로 할당된다.

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3출력
console.log(b); // 1출력

하나의 구조 분해식으로 두 변수의 값을 교환하는 것도 가능하다.

let arr = [1,2,3]
let [a, ,b] = arr

console.log(a);//1출력
console.log(b);//3출력

필요하지 않은 값은 공백처리 함으로서 무시할 수 있다.

👉객체 구조 분해

let obj = { a : 1, b : 2 };
let { a, b } = obj;

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

객체의 value를 {a,b}변수로 할당하여 바로 불러올 수 있다.

let key = "a";
let { [key]: hello} = { a: "world" };

console.log(hello); //"world출력"

속성의 이름으로도 구조 분해가 가능하다.

배열과 객체의 구조 분해에 대하여 알아보았다.

잊지 말자!
북극곰은 사람을 찢고
구조분해할당은 변수를 찢어...!🩸

profile
👩🏻‍💻

7개의 댓글

comment-user-thumbnail
2021년 8월 1일

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 찢어..!

1개의 답글
comment-user-thumbnail
2021년 8월 4일

안 들어올 수 없는 썸네일이네요..ㅎㅎ 글 잘 읽었습니다!

1개의 답글
comment-user-thumbnail
2021년 8월 5일

제목부터.... 썸네일까지... 잘보고 갑니다!!

1개의 답글