배열의 Destructuring (구조 분해)
2025. 3. 18. 20:49ㆍCoding Study/Javascript
배열의 각 값을 변수 할당
배열의 각 값을 변수 선언 시 인덱싱 번호를 활용해서 각 변수에 할당
7번의 변수 선언이 필요
const carBrand = [
"Benz",
"BMW",
"Hyundai",
"Chevrolet",
"RENAULT",
"TESLA",
"Porsche",
"Audi",
];
const EQE = carBrand[0]
const i7 = carBrand[1]
const IONIQ9 = carBrand[2]
const EquinoxEV = carBrand[3]
.
.
.
.
// 변수 선언을 8번 진행 해야함
배열 활용 하여 Destructructuring 문법을 활용하여변수선언을 1줄의 코드로 가능
const [EQE, i7, IONIQ9, EquinoxEV, ZOE, ModelX, TaycanEV, etron] = carBrand;
console.log(EQE);
console.log(i7);
console.log(IONIQ9);
console.log(ZOE);
console.log(ModelX);

Rest parameter 활용
가장 마지막 변수에 마침표 3개를 붙여주면 함수의 레스트 파라미터처럼 이 배열을 분해해서 할당할 때 앞쪽에 있는 변수의 순서대로 요소를 할당하고 남은 나머지 요소를 이 마지막 변수의 배열로 할당하는 게 가능
레스트 파라미터와 마찬가지로 나머지 요소를 가져오기 때문에 항상 마지막 변수에만 활용할 수 있다
const [EQE, i7, IONIQ9, EquinoxEV, ...cars] = carBrand;
console.log(EQE);
console.log(i7);
console.log(IONIQ9);
console.log(cars);

할당하는 배열의길이가 변수보다 적으면 undefined
const carBrand = [
"Benz",
"BMW",
"Hyundai",
"Chevrolet",
];
const [EQE, i7, IONIQ9, EquinoxEV, cars] = carBrand;
console.log(EQE);
console.log(i7);
console.log(IONIQ9);
console.log(EquinoxEV);
console.log(cars);

변수 기본 값 할당
마지막 변수에 undefined 대신 기본 값으로 할당하면 기본값으로 출력 됨.
const carBrand = [
"Benz",
"BMW",
"Hyundai",
"Chevrolet",
];
const [EQE, i7, IONIQ9, EquinoxEV, cars = "차없음"] = carBrand;
console.log(EQE);
console.log(i7);
console.log(IONIQ9);
console.log(EquinoxEV);
console.log(cars);

변수 교환
변수를 교환시 임의의 변수를 만들고 이동 시켜 주어야 함.
const carBrand = [
"Benz",
"BMW", ,
];
let [EQE, i7,] = carBrand;
let a = EQE;
EQE = i7;
i7 = a;
console.log(EQE);
console.log(i7);

변수교환 : Desturcturing 문법활용
디스트럭처링 문법을 활용 하면 한줄로 변수 교환 가능
const carBrand = [
"Benz",
"BMW", ,
];
let [EQE, i7,] = carBrand;
[EQE, i7] = [i7, EQE];
console.log(EQE);
console.log(i7);

'Coding Study > Javascript' 카테고리의 다른 글
| 자바스크립트 var, let, const 키워드 (0) | 2025.04.18 |
|---|---|
| this (0) | 2025.04.05 |
| bind 메서드 (0) | 2025.03.31 |
| 객체의 Destructuring (구조 분해) (0) | 2025.03.18 |
| 3-3. 이벤트 핸들링 (0) | 2025.03.11 |