Day17
왜 낮에는 집중이 안될까,, 벌써 17일차!!!
ES6 비구조 할당 구글링해보고 실습하기
들어가기에 앞서, ES6의 비구조화 할당(Destructuring Assignment)이란?
: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.
비구조화 할당의 장점은?
- 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다.
- 필요한 객체와 나머지 요소 분리가 매우 간단하다.
- 기본값 지정이 가능하다.
1. 배열의 비구조 할당
ES6전 코드
let dogbreed = ['retriver', 'bordercollie', 'poodle'];
let retriver = dogbreed[0];
let bordercollie = dogbreed[1];
let poodle = dogbreed[2];
console.log(retriver);
console.log(bordercollie);
console.log(poodle);
이런식으로 배열의 값을 꺼내서 쓰려면 하나하나 지정해야했다.
기본적으로 귀찮다는 점도 있고, 코드도 길고 복잡해진다는 단점이 있다.
비구조 할당방식 배열 선언 & 호출
1) 문법
const [변수명1, 변수명2, 변수명3] = [값1, 값2, 값3];
2) 예제
const [retriver,bordercollie,poodle]=['retriver','bordercollie','poodle']
console.log(retriver);
console.log(bordercollie);
console.log(poodle);
비구조화 할당 구조 분해
꼭 값이 1:1로 매칭되는 것만 가능한 것이 아니다.
하나의 값만 변수에 넣고 나머지는 나머지 변수에 할당하는 것도 가능하다.
let dogbreed = ['retriver','bordercollie','poodle'];
let [retriver, ...etc] = dogbreed;
console.log(retriver);
console.log(etc);
비구조화 할당 기본값 지정
1) 문법
const [변수명1, 변수명2, 변수명3 = 기본값] = [값1, 값2];
2) 예제
const [retriver,bordercollie,poodle, dog = 'dogbreed']=['retriver','bordercollie','poodle']
console.log(retriver);
console.log(bordercollie);
console.log(poodle);
console.log(dog);
2. 객체의 비구조 할당
ES6전 코드
const dogbreed = {
retriver: 'retriver',
bordercollie: 'bordercollie',
poodle: 'poodle'
}
const retriver = dogbreed.retriver;
const bordercollie = dogbreed.retriver;
const poodle = dogbreed.poodle;
console.log(retriver);
console.log(bordercollie);
console.log(poodle);
비구조 할당방식 객체 선언 & 호출
1) 문법
const {변수명1,변수명2,변수명3} = {
속성명1: 값1,
속성명2: 값2,
속성명3: 값3
};
2) 예제
const {retriver,bordercollie,poodle} = {
retriver: 'retriver',
bordercollie: 'bordercollie',
poodle: 'poodle'
};
console.log(retriver);
console.log(bordercollie);
console.log(poodle);
객체의 나머지 패턴, 기본값 지정 등은 배열과 유사하다. (거의 동일)
'WEB' 카테고리의 다른 글
[Web 클론코딩] 넷플릭스 클론코딩 (0) | 2022.03.11 |
---|---|
[WEB] youtube 클론코딩 (0) | 2022.03.10 |
[ES6/Javascript] 변수 선언(let, const), 화살표 함수 선언 (0) | 2022.03.08 |
[Javascript] 로컬 스토리지 (0) | 2022.03.07 |
[Javascript] 이벤트 리스너 (0) | 2022.03.06 |