[JavaScript] 구조분해할당

 안녕하세요! 오늘은 구조분해할당에 대해서 포스팅하겠습니다. 구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

---

1. 배열

    밑의 코드는 구조 분해 할당을 이용한 예제입니다. 원래 방식은 하나하나 직접 인덱싱하는 방법이고, 구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 자리를 맞추는 방식입니다. 

    배열 ex의 0번 자리에 a변수가 들어가있으므로 a=1입니다. b,c,d,e,f 변수도 똑같습니다. 

 

//원래 방식
const ex=[1,2,3,4,5]
const a=ex[0];
const b=ex[1];
const c=ex[2];

//구조 분해 할당 방식
const [a,b,c,d,e]=ex;

console.log(a); //1

   

    구조 분해 할당에서는 ...을 사용해서 Rest elements를 나타낼 수 있습니다. ...은 대응되고 남은 인수를 묶어서 배열로 만들어줍니다. 다음 예제를 보시면 a=1, b=2, rest=[3,4,5] 임을 알 수 있습니다. 

 

const ex=[1,2,3,4,5];
const [a,b,...rest]=ex;

console.log(rest); //[3,4,5]

 

    구조 분해 할당을 할 때 배열의 크기를 굳이 안맞춰도 괜찮습니다. 왼쪽 변수에 오른쪽 배열의 첫번째 요소부터 값을 대입합니다.

    또한, 배열의 인덱스를 맞춰서 , 로 칸을 나눠준다면 원하는 위치의 값을 변수에 대입할 수 있습니다. 다음 예제에서는 [1,2,3,4,5] 배열에서 노란색 부분만 변수가 있기 때문에 해당 위치에 맞춰서 변수를 대입해서 x=1,y=2,z=5임을 알 수 있습니다. 

 

const ex=[1,2,3,4,5];
const [one,two]=ex;

console.log(one) //1
console.log(two) //2

const [x,y,,,z]=ex;
console.log(x); //1
console.log(y); //2
console.log(z); //5

---

2. 객체

 배열에서 인덱싱을 구조 분해 할당으로 했다면, 객체에서는 객체 내부의 프로퍼티 값을 구조 분해 할당으로 간편하게 분해할 수 있습니다. 이때, 객체 구조 분해 할당은 프로퍼터리를 기준으로 하기 때문에 순서가 바뀌어도 문제없이 해당 프로퍼티를 가져올 수 있습니다. 

 

// 객체
const obj={
  status:{
    name: 'node',
    count: 5,
    age: 21,
  }
};

// 원래 방식
var name=obj.status.name;
var count=obj.status.count;

// 구조 분해 방식
var{status:{name,count}}=obj;

 

   객체 프로퍼티에서는 Rest Properties를 이용해서 다양하게 구조 할당 분해를 할 수 있습니다. Rest Properties를 사용할 경우 배열과 같이 ...를 사용해서 나머지 값들을 rest에 넣어줍니다. rest에는 name을 제외한 프로퍼티 값이 들어가게됩니다. 

 

var{name,...rest}=obj;

console.log(rest); //{count:5,age:21}

 

    주의해야할 점은 구조 분해 할당을 사용하면 함수의 this가 달라질 수 있다는 점입니다. 달라진 this를 바꿔주려면 bind 함수를 따로 사용해야합니다.

 

---

이상입니다. 감사합니다!