<aside> ⏳ 2022년 7월 7일

</aside>

오늘은 수업시간에 사용해 본 Destructuring Assignment(구조분해할당)을 다뤄보자.

“구조분해할당(Destructuring Assignment)”

• 배열이나 객체를 변수 묶음으로 “압축”할 수 있는 특수한 문구이다. (JS.INFO)

• 즉, 배열 혹은 객체의 각각 값(value)을 분해야하여 손쉽게 다른 변소에 담을 수 있다.

• (할당 받을 변수) = (분해 당할 대상)

• 만약, 입력받을 변수는 4개인데 중간의 값을 제외하고 입력하게 된다면?

  → 다른 변수에 원치않게 이상한 값이 입력되어 원하는 결과를 도출할 수 없음…!

  → 이런 경우 구조분해할당을 사용하자!!!

• 변수의 구조분해할당

  • 키라는 개념이 없기 때문에 어떤 이름이든지 만들고 싶은대로 만들 수 있다.
  • 내용과 변수이름이 달라도 중복이 되도 무관하다.
  • 하지만 순서가 매우매우 중요!! 다른 순서가 되는 순간 해당변수에는 원하지 않는 값이 들어갈 수 있다.

  <aside> 💡 즉, 배열을 구조분해하는데 있어서는 배열안의 이름과는 다른 변수 이름을 선언해도, 중복된 변수이름을 선언해도 중요하지 않지만, 변수를 선언하는 순서가 매우매우 중요하다. 순서가 달라지면 변수에 저장되는 데이터 내용이 변하게 된다!!!

  </aside>

  • 예시

    let [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20
    
    let [first] = [10,20];
    console.log(first);//10
    
    let [_,first] = [10,20];
    console.log(first);//20
    
    let [first,_] = [10,20];
    console.log(first); //10
    console.log(_); //20
    

• 객체의 구조분해할당.

  • 객체에서는 같은 이름의 키가 두개이상 존재 불가능하다.
  • key가 고유하기 때문에 순서가 바껴도 컴퓨터가 key에 따른 데이터(value)를 찾을 수 있다.

  <aside> 💡 즉, 객체를 구조분해하는데 있어서 변수를 선언하는 순서는 중요하지 않지만, 구조분해를 하기위한 객체안에 변수의 이름이 key값으로 존재해야한다!!! 변수의 이름과 key값이 달라지면 컴퓨터가 찾지 못해서 결국 할당을 할수가 없다!!!

  </aside>

  • 예시

    const {name, age} = {name : "철수", age : 12}
    //구조분해할당 가능
    
    const {name2, age} = {name : "철수", age : 12}
    //구조분해할당 불가능, 이름이 고유하기 때문에 객체의 같은이름의 키가 두개이상 존재 불가. 
    
    const {age, name} = {name : "철수", age : 12}
    //구조분해할당 가능
    
    //순서는 상관없는데 객체의 key이름은 항상 같아야함!!!
    

• Rest : …

  • 남은 인수를 묶어서 배열 또는 객체로 받는 것.

  • 파라미터에 쓰면 Rest 파라미터, 배열의 구조분해할당에 쓰일경우는 Rest elements

  • 예시

    let array = [1, 2, 3, 4, 5];
    let [a, b, ...rest] = array;
    console.log(rest); // [3, 4, 5];
    

잘~ 사용하면 유용하게 사용할 것같지만 그만큼 조심해야한다는 점이 많은 구조분해할당이였다. 사용할때마다 정확하게 할당을했는지 꼭 살펴보자 😎