구조 분해 할당

자바스크립트로 코딩을 하다보면 배열이나 객체의 값을 변수에 담아 사용해야 할때가 있습니다.
그런데 배열이나 객체의 값들을 하나하나 다른 변수를 선언하여 할당 해주다 보면 코드가 길어지고 지저분해 보이겠죠?
이때 사용할 수 있는 방법이 구조분해 입니다.

구조 분해 할당

구조 분해 할당:배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

배열 분해하기

var arr = [1,2,3];
var [one,two] = arr;

console.log(one);
console.log(two);

결과
>
1
2

예제를 살펴보면 배열 arr에 있는 값 1,2가 배열처럼 선언된 one,two 변수에 할당이 된것을 알수가있습니다.
이때 당연히 선언되지않은 3은 할당되지가 않았는데 배열처럼 선언한 변수들의 index와 같은 값을 할당할 배열의 index의 값이 할당된다고 볼 수 있겠습니다.

이 점은 문자열도 동일한데요

var arr = [1, 2, 3];
var [one, two] = "123";

console.log(one, two);

결과
>
1
2

배열처럼 선언된 변수의 index와 같은 문자열의 index의 값이 할당된것을 볼 수 있습니다.

객체 분해하기

개인적으로 배열 분해보다 더많이 사용하는것 같은 객체분해입니다.

var obj = {
  title: "제목",
  writer: "작성자",
  content: "내용",
};

const { title, writer, content } = obj;
console.log(title, writer, content);

결과
>
제목 작성자 내용

객체 구조분해에 경우엔 할당할 객체안의 같은 key와 같은 이름으로 {}안에 선언하면 해당 key의 value값이 할당됩니다.

마치며

이와 같이 구조 분해를 이용하여 여러 상황이나 코딩문제에 이용하여 따로 선언하는것보다 계산시간이 큰 차이는 없지만 보다 좋은 가독성의 코딩이 가능합니다.