ES6에서 등장한 자바스크립트 비구조화 할당이 추가되었다.
오늘은 배열과 객체에서 중복을 없애주고
좀 더 간편하게 값을 이용할 수 있는 비구조화할당에 대해서 알아보겠다.
🔗비구조화 할당이란?
배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다.
또는 구조 분해 할당이라고 명칭 합니다.
기본 문법
비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다.
배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다.
아래처럼 선언하면 결과는 동일하게 나오게 된다.
let [x,y] = [1,2];
console.log(x);
console.log(y);
let {x,y} = {x: 1, y:2};
console.log(x);
console.log(y);
🎉비구조화 할당의 장점은?
- 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다.
- 필요한 객체와 나머지 요소 분리가 매우 간단하다.
- 기본값 지정이 가능하다.
간단한 코드 정리
비구조화할당 전 코드를 보자.
각각 배열 안에 있는 요소들을 꺼내 쓰기 위해서 각각의 변수 안에 배열 내 숫자를 찾아서 매칭 시켜줘야 했다.
let fruit = ['Apple', 'Banana', 'Peach'];
let Apple = fruit[0];
let Banana = fruit[1];
let Peach = fruit[2];
console.log(Apple);
console.log(Banana);
console.log(Peach);
반면 비구조화 할당 코드를 이용하면 한 줄로 해당 배열의 코드를 바로 객체 안에 넣어주는 것이 가능하다.
비구조화 할당코드를 이용하면 왼쪽의 변수에 오른쪽 배열 값이 바로 값을 분해해서 바로 할당해준다.
let fruit = ['Apple', 'Banana', 'Peach'];
let [Apple,Banana, Peach] = fruit;
console.log(Apple);
console.log(Banana);
console.log(Peach);
비구조화할당 구조 분해
만약에 1:1로 값이 매칭 되는 것이 아니라,
하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당도 가능하다.
전개 연산자인... 을 이용하면 매칭 된 값 외 모든 데이터 값을 할당할 수 있다.
let fruit = ['Apple', 'Banana', 'Peach', 'Pear'];
let [Apple, ...etc] = fruit;
console.log(Apple);
console.log(etc);
... 을 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다.
... 인 전개 연산자를 사용하려면, 반드시 가장 마지막 요소에 넣어줘야 한다.
기본값 지정
만약 내가 지정한 변수보다 넣어줄 매칭 할 값이 없다면 undefined가 발생한다.
만약 이때 undefined가 아니라 기본적으로 넣어주는 값이 있다고 하면 기본 값 을지 정하는 것도 가능하다.
let fruit = ['Apple', 'Banana', 'Peach'];
let [Apple,Banana, Peach, Pear='Pear'] = fruit;
console.log(Apple);
console.log(Banana);
console.log(Peach);
console.log(Pear);
마지막 Pear의 경우 fruit배열 안에 해당 값이 없지만,
기본값을 지정해줘서 해당 값이 console.log에서도 찍히는 것을 알 수 있다.
'FrontEnd > Javascript' 카테고리의 다른 글
[javaScript]JSON 과 javascript의 Object 차이 바로 알기 (0) | 2022.03.07 |
---|---|
[정규식에러/크로스브라우징] 모바일(IOS) 크롬, 사파리 에서 페이지 안뜰 때 (PC 정상 작동) (0) | 2021.12.29 |
[JavaScript/Vue] 자바스크립트로 크롬 전체 화면 실행 및 종료하기 (0) | 2021.05.25 |
[node] 노드 버전 확인과 설치된 npm 특정 버전 확인하는 방법 (0) | 2021.05.19 |
[Vue]카카오톡으로 홈페이지 URL 공유하는 방법 (카카오톡 샘플 코드) (0) | 2021.05.12 |