Link
초보 개발자의 성장 일기
비 구조화 할당 본문
비 구조화 할당
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는것이다.
배열의 비 구조화 할당
const fruitList = ['apple', 'banana', 'orange'];
배열이 있을때 이 배열을 각각 호출하려고 한다.
const apple = fruitList[0];
const banana = fruitList[1];
const orange = fruitList[2];
먼저 각각의 변수에 배열의 인덱스를 넣어서 호출했다. 하지만 이 방법은 같은 배열을 불필요하게 반복하게 된다.
let [apple, banana, orange] = fruitList;
배열안에 변수를 선언하고 배열을 할당하게 되면 각각 인덱스에 맞게 데이터가 할당이 된다.
let [apple, banana, orange] = ['apple', 'banana', 'orange'];
더 간단하게도 가능하다. 배열의 선언 분리 비 구조화 할당이라고 한다.
만약, 여기서 배열에 없는 melon을 할당하려고 하면 melon은 undefinded가 출력된다. 이럴 때 기본값 설정이 가능하다.
let [apple, banana, orange, melon='melon'] = ['apple', 'banana', 'orange'];
선언을 해주면 배열이 없을 때 기본값이 출력된다.
swap
let num1 = 10;
let num2 = 50;
두 코드의 값을 서로 교환하고 싶을 때는 새 변수를 만들어 다시 값을 넣어주면 된다.
let temp = 0;
temp = num1;
num1 = num2;
num2 = temp;
서로 값이 교환된다.
[num1, num2] = [num2, num1];
간단하게 위와같이 작성하면 교환이 가능하다.
객체의 비 구조화 할당
let numbers = { num1: 'num1', num2: 'num2', num3: 'num3' };
let num1 = numbers.num1; // = numbers['num1']
let num2 = numbers.num2;
let num3 = numbers.num3;
객체에도 불필요한 반복이 생긴다.
let { num1, num2, num3 } = numbers;
위와 같이 작성하면 빠르게 할당이 가능하고 키 값으로 할당이 된다.
'Development > JavaScript' 카테고리의 다른 글
[JavaScript] Html 내장된 메소드로 유효성 검사 (0) | 2024.03.04 |
---|---|
[JavaScript] class name에 따른 동적 효과 (0) | 2024.03.04 |
[JavaScript] append와 appendChild 차이점 (0) | 2024.03.02 |
함수 매개변수 목록에서 디스트럭처링 (1) | 2023.11.15 |
화살표 함수 구문 (0) | 2023.11.15 |