배열의 Destructuring (구조 분해)

2025. 3. 18. 20:49Coding 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