JavaScript 구조 분해 ( Destructuring )

사실 구조 분해 자체는 어려운 개념은 아닌데, 구조 분해라는 이름을 모르고 쓰고 있어가지고 이렇게 정리하게 되었다.

 

React에서 많이 사용하는 것 중 하나가

 

const { props에 있는 변수명들~~~ } = props

 

이런 코드다.

 

예시를 설명하자면

 

const player1 =

{ name: "hello",

   id: 3, 

}  

 

const { name, id } = player1

 

이렇게 한다면

name과 id에 각각 player1.name, player1.id 의 값이 저장된다.

 

따라서 console.log(name) 을 하면 "hello"가 출력된다.

 

그리고 name 값을 수정해도, player1.name의 값은 수정되지 않는다.

참조 복사가 아니라 값 복사가 이루어지기 때문이다.

 

그리고 재밌는 것은, 이것을 함수에도 활용할 수 있다는 것이다.

 

원래라면 player1의 name 값을 출력하기 위해

 

var printPlayerName = player1 => {

   console.log(player1.name)

}

 

이렇게 해주어야했다면,

 

var printPlayerName = ({ name }) =>  {

   console.log(name)

}

 

 

이렇게 출력이 가능하다.

 

또 이렇게하면 장점이 있는데, 작성자가 사용하는 변수만 코드에 작성하게 되므로,

 

작성자의 의도를 잘 알 수 있다.

 

그리고 이것을 선언적이라고 한다.

 

선언적이 무엇인지에 대해 간단히 설명하자면,

어떻게 보다 ,무엇을 할 것인지에 대해 초점을 맞추는 것이다.

 

이 부분이 궁금하다면 선언적 프로그래밍을 찾아보는 것이 좋을 것 같다.

 

그리고 배열 또한 구조 분해가 가능하다.

 

var [first] = [1, 2, 3]

 

이라면 first에는 1이 담긴다.

 

그리고 리스트 매칭 또한 활용 가능한데,

 

var [ , , third] = [1,2,3]

 

이면 third는 3이 된다.

 

리스트 매칭도 간단히 설명하자면,

배열에서 사용하지 않는 부분, 건들이지 않는 부분은 그냥 비워놓는 것이다.

 

물론 변수를 하나 뿐만 아니라 이렇게 

 

var [ first, second, third] = [1,2,3]

var [ first, , third] = [1,2,3]

 

여러 개도 가능하다.

 

아마 리스트 매칭도 선언적이다 라고 볼 수 있을 것 같다.

 

 

p.s

지금 공부하고 있는 러닝 자바스크립트에 리스트 매칭이라고 되어 있는데,

리스트 매칭이라고 검색하면 자료가 잘 없다...ㅠㅠ

 

이번에 구조 분해를 공부하면서, 선언적 프로그래밍, 리스트 매칭 등 사용하고는 있었지만, 그 이름을 몰랐는데 이름을 알게 되었다.

공부하면서 내가 쓰고 있는 것의 이름을 아는 것이 참 중요한 것 같다.

덕분에 검색하며 더 자세하고 깊게 알게 된 것 같다 ㅎㅎ