[JavaScript] Destructuring(구조분해할당) 이해하기

안녕하세요. 이번글에는 구조분해할당에 대해 알아보도록 하겠습니다.

구조 분해 할당이란?

배열이나 객체 내 변수들을 편히고 쉽게 만들어서 사용할 수 있게 해주는 아주 고마운 ES6 문법입니다

코드 살펴보기

기존 ES5 문법에서 배열의 각 인덱스 값들을 변수에 담기 위해선 이렇게 해왔습니다.

      let array = [1, 3, 5, 6];
      let a = array[0];
      let b = array[1];
      //1
      console.log(a);
      
      //3
      console.log(5);

하지만 ES6 이후 부터는 구조분해할당을 이용하여 훨씬 더 편리하게 이용 가능합니다.

      let [a, b, c, d] = [1, 3, 5, 6];
	
    	//1
      console.log(a);

이런식으로 훨씬 더 직관적으로 만들어낼 수 있습니다

또한 갯수를 모두 다 맞추지 않아도 기본값 지정을 하여 만들 수 있습니다.

	//d 변수명에 값이 들어오지 않으면 기본값 10
    let [a, b, c, d = 10] = [1, 3, 5];
		
       //10
     console.log(d);

배열뿐 아니라 객체에도 이용이 가능합니다.

      let obj = { name: "shin", age: 27 };
      let { name, age } = obj;
      //shin
      console.log(name);

이런식으로 객체의 키값을 변수로 할당하여 구조분해할당이 가능합니다.

객체 또한 기본값을 설정할 수 있습니다

    let { name = "shin", age } = { age: 27 };
    //shin
     console.log(name);

이렇게 해당 키값이 없으면 설정한 기본값으로 출력해낼 수 있습니다.

또한, 변수명을 받아서 간편하게 객체를 만들어낼수도 있습니다.

    let name = "shin",
       age = 28;

     let obj = {name : name, age : age}
     
     //key값과 value값이 동일하면 이렇게 하나로도 생략이 가능합니다
     let obj2 = { name, age };

     //{name: "shin", age: 28}
     console.log(obj);
     //{name: "shin", age: 28}
     console.log(obj2);

이런식으로 편리하게 생성도 가능합니다.

또한, 이렇게 많은 키밸류도 한번에 구조분해할당이 가능합니다.

      let person = {
        name: {
          lastName: "shin",
          firstName: "hoon",
        },
        body: {
          height: 171,
          weight: 66,
        },
        hobby: ["영화보기", "기타치기", "여행가기"],
      };

      let {
        name: { lastName, firstName },
        body: { height, weight },
        hobby: [취미1, 취미2, 취미3],
      } = person;

      //shin
      console.log(lastName);
      //171
      console.log(height);
      //영화보기
      console.log(취미1);

이런식으로 깔끔하게 많은 양의 키밸류값들도 구조분해할당하여 편하게 변수처리를 할 수 있습니다.

감사합니다

---

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment