Destructuring Assignment

송지현·2022년 8월 26일
0

구조분해할당(Destructuring Assignment)

자바스크립트에서 가장 많이 사용되는 2가지 데이터 구조는 객체와 배열이다.

  • 객체를 사용하면 키별로 데이터 항목을 저장하는 단일 엔터티를 만들 수 있다.
  • 배열을 사용하면 데이터 항목을 정렬된 목록으로 수집할 수 있다.

하지만 함수에 전달할 때 객체, 배열 전체가 아닐 수도 있다.
구조 분해 할당은 배열이나 결제를 변수 묶음으로 압축할 수 있는 특수 구문이다.

배열분해

다음은 배열이 변수로 분해되는 기본적 예시다.

let arr = ["송", "지현"]

// sets name= arr[1] // 배열의 자리 두번째
// and familyName= arr[0] // 배열의 자리 첫번째

alert(name); // 지현
alert(familyName); // 송

이제 배열 멤버 대신 변수로 작업할 수 있다.
split 또는 다른 배열 반환 방법과 결합하면 멋지게 보인다.

let [name, familyName] = "지현 송".split(' '); // 빈 칸을 기준으로 배열을 나눈다.
alert(name); // 지현
alert(familyName); //송

⭐️ 배열모양이 찢어졌는데도 배열이 보존 돼?

항목을 변수에 복사하여 "구조화 해제"하기 때문에 "구조화 해제 할당"이라고 한다. 그러나 배열 자체는 수정되지 않는다.
다음과 같이 작성하는 방법이 더 짧다.

// let [firstName, surname]= arr;
let firstName = arr[0];
let surname = arr[1];

⭐️ 쉼표를 사용하여 요소를 무시할 수 있다.

배열의 원하지 않는 요소는 추가 쉼표를 통해 버릴 수도 있다.

// second element is not needed
let [Name, , title]=["Julius", "Caesar", "Consul", "of the Roman Republic"]

alert(title); //Consul

참고 자료 : https://javascript.info/destructuring-assignment

profile
열심히 구르는 감자

0개의 댓글