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

 

 

안녕하세요.

 

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

 

 

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

 

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

 

예시를 한번 볼까요?

let a, b, rest;

[a, b] = [10, 20];

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

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

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

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

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

 

저와 같은 경우 개발 중인 프로젝트의 nest.js 서버 사이드 개발 중에 사용하게 됐는데, GET API 요청에 대해

request parameter 값을 슬래쉬(' / ') 기준으로 나누어 개별 변수에 저장하기 위해 사용했습니다.

 

아래는 간단한 그 예시 입니다.

 

예시에서 입력되는 query parameter의 file_path 값은  /[dir]/[serial]/[fileName].[extension]  형태입니다.

  async canActivate(context: ExecutionContext): Promise<boolean> {
    // request 정보 담기
    const request = context.switchToHttp().getRequest(); 
    // request 의 query parameter 정보를 쓸 수 있는 형태로 분해하여 배열 비구조화 할당
    const [serial, file] = request.query.file_path.split('/').slice(2, 4); 
    const [fileName, extension] = file.split('.');
    ....
  }

해당 query parameter를 split('/')으로 분해하면 [' ', 'dir', 'serial', 'fileName.extension'] 형태가 되며 해당 배열을 비구조화 할당에 사용합니다.

 

오늘은 배열 비구조화 할당에 대해 알아보았습니다.

 

감사합니다.