728x90
ES6부터 비구조화 할당(Destructuring Assignment)이라는 새로운 자바스크립트 표현식이 추가되었다.
비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다.
|
/***
* 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다.
* 배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다.
const [변수명1, 변수명2, 변수명3] = [값1, 값2, 값3];
const [변수명1, 변수명2, 변수명3 = 기본값] = [값1, 값2];
const 배열명 = [값1, 값2, 값3];
const [변수명1, 변수명2, 변수명3] = 배열명;
const {변수명1,변수명2,변수명3} = {
속성명1: 값1,
속성명2: 값2,
속성명3: 값3
};
*/
const arr = [1];
const [a = 10, b = 20] = arr;
// 배열 값이 있으면 변수 기본 값은 무시한다.
console.log({ a, b });
const fruits = ['apple', 'banana', 'cherry', 'peach']
const [apple, ...etc] = fruits;
console.log(apple);
console.log(etc);
// JSON 객체에서는 우측의 key 값이 좌측의 변수명과 매칭된다. const { cat, dog, tiger } = {
cat: 'CAT',
dog: 'DOG',
tiger: 'TIGER'
};
console.log(cat);
console.log(dog);
console.log(tiger);
|
전개 연산자(...)를 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다.
전개 연산자를 사용하려면 반드시 가장 마지막 요소에 넣어줘야 한다.
나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생한다.
var [a, ...b,] = [1, 2, 3];
|
const arr2 = [1, 2, 3];
const [first, ...rest1] = arr2;
console.log(rest1); // 컴마 개수 이후의 모든 나머지 [2,3]
const [aa, bb, cc, ...rest2] = arr2;
console.log(rest2); // 빈 배열 []
const obj = { age: 36, name: '이순신' };
const { age, name } = obj;
console.log({ age, name });
const { ao, bo } = obj; // 객체에 없는 변수를 할당하면??
console.log({ao, bo}); // { ao: undefined, bo: undefined }
const obj2 = { age2: undefined, name2: null, grade2: 'A' };
const { age2 = 0, name2 = 'noName', grade2 = 'F' } = obj2;
console.log({ age2, name2, grade2 }); // { age2: 0, name2: null, grade2: 'A' }
// undefined 인 경우에만 기본값으로 대체된다.
|
'React > morden javascript' 카테고리의 다른 글
| 자바스크립트 일급객체(first class citizen) (0) | 2022.12.28 |
|---|---|
| [ES2020] optional chaining (0) | 2022.12.28 |
| Javascript Array.filter 사용 예제 (0) | 2022.12.27 |
| Javascript Array.map 사용 예제 (2) | 2022.12.27 |
| 카카오 맵 장소 검색 구현 방법 (0) | 2022.12.19 |
Link2Me