배열 구조 분해(비구조화할당)

배열을 사용하기를 원하지 않고 배열 안의 각 요소를 개별 값으로 사용하고 싶은 경우가 있을 수 있습니다.

 

예시 코드와 함께 배열 안 요소를 분리하여 사용하는 방법을 정리해보도록 하겠습니다.

 

 

 

 

const nameData = ["Lee", "SH"];

const firstName = nameData[0];

const lastName = nameData[1];

인덱스로 배열의 각 요소에 접근하여 상수에 값을 할당할 수도 있지만 아래의 방법을 사용하시면 보다 간편하게 값을 분리하여 할당할 수 있습니다.

 

 

const nameData = ["Lee", "SH"];

const [firstName, lastName] = nameData;

console.log(firstName, lastName); // Lee SH 출력

const 키워드 뒤에 []를 추가하고 =의 오른쪽에는 참조할 배열을 할당합니다.

 

[] 안에는 각각의 요소를 담을 상수 이름을 넣어주게 되면 각각의 상수에는 분리된 요소가 담기게 됩니다.

 

즉 첫 번째 상수 firstName에는 배열의 첫 번째 요소인 "Lee"가 할당되고

 

두 번째 상수 lastName에는 배열의 두 번째 요소인 "SH"가 할당되게 됩니다.

 

 

const personData = ["Lee", "SH", "M", "28"];

const [firstName, lastName, ...orderInformation] = personData;

console.log(firstName); // Lee 출력
console.log(lastName); // SH 출력 
console.log(orderInformation); // ['M', '28'] 출력

만약 배열 안의 여러 요소 중에 이름에 해당하는 요소만 사용하고 나머지 정보는 묶어서 사용하고 싶은 경우 Rest 연산자를 사용하게 되면

 

상수에 할당되지 않은 배열에 남아 있는 모든 요소를 모아 변수에 할당하게 됩니다.