Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- javascript arrow function
- react class method bind
- parcel
- client side rendering
- 순차리스트
- 자료구조
- es6 module
- Browser API
- web server vs was
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- js arrow function
- javascript destructuring
- server side rendering
- javascript eventloop
- es6 destructuring
- JavaScript
- react
- 선형리스트
- 크롬 익스텐션 개발
- DOM API
- chrome extension development
- react lifecycle
- javascript spread
- js promise
- react event bind
- task queue
- es6 promise
- javascript class method bind
- es7 async await
- es6 symbol
- Today
- 31
- Total
- 400,412
비실이의 개발 성장기
javascript 비구조화 할당(destructuring assignment) 본문
# 비구조화 할당(destructuring assignment) 이란?
-
Destructuring 은 우리말로 '구조를 파괴하다, 분해하다' 의미를 가집니다.
-
javascript 비구조화 할당은 배열이나 object 리터럴 객체를 분해한 뒤, 그 값을 변수에 할당하는 것을 말합니다.
-
비구조화 할당은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다.
# 비구조화 할당 활용
-
object 리터럴 객체에서 일부 속성(key) 을 할당하여 사용하고자 하는 경우
const user = {
id: 9369,
nickName: "2dubbing",
fullName: {
first: "Lee",
last: "dubbing"
}
};
const { fullName: { first: a, last: b } } = { ...user };
console.log(`${b} ${a}`); // dubbing Lee
const users = [
{
name: "Lee",
age: 20
},
{
name: "Kim",
age: 35
},
{
name: "Park",
age: 25
}
];
// reduce 메소드의 첫번째 인자(콜백함수) 의 두번째 인자를 비구조화 할당하여 사용
const totalAge = users.reduce((total, {name, age}) => (
total += age
), 0);
console.log(totalAge); // 80
-
React Hooks 인 useState() 가 반환하는 배열을 분해 할당하여 사용하고자 하는 경우
const [status, setStatus] = React.useState("PENDING");
# 참고문서
구조 분해 할당
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
developer.mozilla.org
# 잘못된 내용은 댓글 남겨주세요.
'프론트엔드 > javascript' 카테고리의 다른 글
javascript Arrow function (0) | 2020.06.12 |
---|---|
javascript Symbol 알아보기 (0) | 2020.06.06 |
javascript 비구조화 할당(destructuring assignment) (0) | 2020.06.05 |
javascript Spread 문법 (0) | 2020.06.05 |
javascript async & await 알아보기 (0) | 2020.05.30 |
javascript Promise 알아보기 (0) | 2020.05.29 |
0 Comments