[javascript] 배열 비구조화 할당에 대해 아시나요?

 

 

안녕하세요.

 

오늘은 업무 중에 배열 비구조화 할당이라는 좋은 방법을 알게 되어 소개하고자 합니다.

 

 

배열 비구조화 할당이란, 공식적인 표현으로는 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

쉽게 말하자면, 배열의 내용을 한번에 여러 개의 변수에  할당시키는 편리한 방법이라고 생각하시면 됩니다.

 

예시를 한번 볼까요?

const [a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

console.log(rest);
// expected output: Array [30,40,50]

 

위의 예시와 같이 활용할 수 있습니다.

 

일반적으로 주로 아래와 같은 경우 사용하게 됩니다!

 

- 파일을 이름, 확장자로 나누어 변수에 할당하는 경우

- 파일 경로를 디렉터리 별 나누어 변수에 할당하는 경우

- 2중 배열 변수를 순회하는 경우 (주로 Object의 entries 함수와 같이 사용하기도 합니다.)

 

const tempObject = {
  a: 10,
  b: 20,
  c: 30
};

Object.entries(tempObject).forEach(([key, value]) => {
	console.log(key, value)
    // expected result
    // a, 10
    // b, 20
    // c, 30
})

 

배열 비구조화 할당 기능을 통해 좀 더 클린한 코드를 작성해보세요!

 

감사합니다 :)