TIL - 20220709

 오늘은 모던 JavaScript 튜토리얼에서 구조 분해 할당(https://ko.javascript.info/destructuring-assignment)에 대하여 공부했다. 구조 분해 할당은 실제 많이 사용하는 개념이기 때문에 친숙하게 집중하며 공부할 수 있었던 것 같다. 작성한 질문은 다음과 같다.

 

 

 구조 분해 할당을 사용하는 경우는 객체나 배열에서 데이터를 가져오면서 전체 데이터가 아닌 데이터 일부만 필요할 때, 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당 문법을 사용한다. 함수도 매개 변수가 많을 때, 구조 분해 할당을 사용하면 좋다.

 

 배열에서 나머지 값들을 한데 모아서 저장하고 싶을 때, '...'를 사용하면 나머지 값들이 한 배열 안에 모두 저장된다. 단, '...'는 마지막에 사용해야 한다. 처음에 사용하고 나중에 다른 변수를 할당받는다거나 중간에 사용할 수 없다.

 

 할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 커도 아무런 문제가 일어나지 않는다. 왜냐하면, 할당받지 못한 변수들에는 undefined가 들어가기 때문이다.

 

 배열을 구조 분해 할당할 때에 비해 객체에서 구조 분해 할당할 때는 순서를 고려하지 않아도 된다. 배열은 요소 순서대로 하나하나 할당되지만, 객체는 순서가 존재하지 않기 때문이다.

 

 객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장하고 싶으면 ':'를 사용하면 된다.

(객체에 존재하는 프로퍼티 키): (원하는 변수 이름)처럼 사용하면 된다. 만약 프로퍼티가 없는 경우를 대비하여 '='를 사용해 기본값을 만들어주면 대비할 수 있다.

 

 정말 많이 사용하는 구조 분해 할당이지만, 지금까지 객체 구조 분해 할당을 많이 해서 그런가 객체 구조 분해 할당은 순서가 상관이 없다는 점을 새로 배우게 됐고, 이 외에도 객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장하고 싶으면 ':'를 사용하면 된다는 점과 객체 프로퍼티가 존재하지 않는 경우 기본값을 따로 설정해줄 수 있다는 점을 새로 배우게 됐다. 배움엔 끝이 없으며 배운 것을 최대한 활용할 수 있도록 앞으로도 계속 노력해야겠다.