JS Day 10 구조 분해 할당

JS Day 10 구조 분해 할당

1. 구조 분해 할당(Destructuring Assignment)

   • 배열 분해하기

   let zoo = ["fox", "mouse"];
   let [first, second] = zoo;
   console.log(first); // fox
   console.log(second); // mouse
      
   // 쉼표로 요소 무시하기
   let zoo = ["fox", "mouse", "horse"];
   let [first, ,second] = zoo;
   console.log(first); // fox
   console.log(second); // horse
   

   • 배열 이외에도 구조 분해 할당 적용이 가능

   let [a,b,c] = "abc"; // ["a", "b", "c"]
      
   let zoo = {};
   [zoo.name, zoo.age] = "fox 13".split(' ');
   console.log(zoo); // {name: "fox", age: "13"}
   

   • 변수 교환 트릭

   let first = "fox";
   let second = "mouse";
   [first, second] = [second, first];
      
   console.log(first); // mouse
   console.log(second); // fox
   

   • … 으로 나머지 요소 가져오기

   let [first, second, ...rest] = ["fox", "mouse", "rabbit", "horse"];
   console.log(first); // fox
   console.log(second); // mouse
   console.log(rest[0]); // rabbit
   console.log(rest[1]); // horse
   

   • default

   /* 할당하고자 하는 변수의 개수가 배열보다 크면 undefined 반환 */
   let [first, second] = ["fox"];
   console.log(first);
   console.log(second);
      
   /* =으로 default value 설정 가능 */
   let [first = "rabbit", second = "horse"] = ["fox"];
   console.log(first); // fox
   console.log(second); // horse
   

   • 객체 분해

   let zoo = {
       first: "fox",
       second: "horse",
       third: "rabbit",
   };
      
   let {first, second, third} = zoo;
   console.log(first); // fox
   console.log(second); // horse
   console.log(third); // rabbit
      
   /* 변수를 설정하여 할당하는것도 가능 (default 설정과 중첩 가능)*/
   let {first: myAnimal, second: yourAnimal, third} = zoo;
   console.log(myAnimal); // fox
   console.log(yourAnimal); // horse
   console.log(third); // rabbit
      
   /* 원하는 값만 뽑기 */
   let {first} = zoo;
   console.log(first); // fox
      
   /* key값과 동일한 변수명 사용하기 */
   let first, second, third;
   ({first, second, third} = zoo); // 괄호로 감싸면 error가 안난다
   

참고 자료

JAVASCRIPT.INFO