구조 분해 할당 구문

구조 분해 할당 구문을 자주 사용하지 않아 그 이해도가 떨어지고, 이해도가 떨어지니 계속 사용을 지양하게 되는 악순환이 반복되었다. 하지만 구조 분해 할당 구문은 코드의 가독성 측면을 생각하면 절대 무시할 수 없는 부분이고 또 다른 사람의 코드를 이해하기 위해서는 언제까지나 기피할 수는 없기에 이번 글을 통해 구문을 정리하고 익히려고 한다.

 

 

구조 분해 할당 구문이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS의 표현식이다.

객체나 배열에서 데이터 전체가 아닌 일부만 필요한 경우 필요한 부분만을 변수로 분해하여 사용할 수 있다.

 

 

배열 구조 분해

 

1. 기본 형태

const box = [1, 2];
function test () {
 return [1, 2]
};

// 1. 기본 형태
const [one, two] = box;
// 2. 배열 원본
const [one, two] = [1, 2] ;
// 3. 배열 return 함수
const [one, two] = test();

console.log(one); // 1
console.log(two); // 2

아래와 같이 기본값을 넣어놓을 수도 있다.

const [one=3, two=4, three=5] = box; // 기본값 넣을 수 있음
console.log(one); // 1
console.log(two); // 2
console.log(three); // 5

 

2. 변수에 배열의 나머지 할당

const [a, ...b] = [1, 2, 3];
console.log(a) = 1;
console.log(b) = [2, 3];

3. 사용 예시

 

1) 변수 값 교환

let a = 1;
let b = 2;

const [a, b] = [b, a];
console.log(a); // 2
console.log(a); // 1

 

2) 특정 문자열 분리 후 사용

mdn web docs의 예시를 그대로 가져왔습니다.

function parseProtocol(url) {
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); 
  // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(
  parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"),
); // "https"

 

 

배열 구조 분해

 

1. 기본 형태

const box = {a: 1, b: 2};

// 1. 기본 형태
const {a, b} = box;
// 2. 객체 원본 
const {a, b} = {a: 1, b: 2};

console.log(a); // 1
console.log(b); // 2

쉽게 이해하려면 {a} = box는 곧 box.a라고 읽으면 될 것이다.

 

아래와 같이 기본값을 넣어놓을 수도 있다.

const {a=3, b=4, c=5} = box;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 5

별도의 선언 없이 변수에 값을 할당할 수도 있다.

아래에서 할당문을 둘러싼 ()을 사용한 이유는 {a, b}를 객체 리터럴이 아닌 블록으로 간주하기에 ()를 사용하여 할당 가능하게끔 해준 것이다. 

const a, b;

({a, b} = box);
console.log(a); // 1
console.log(b); // 2

 

 

2. 새로운 속성명 할당

객체의 속성을 다른 변수명으로 바꿀 수 있다.

const box = {a: 1, b: 2};

const {a: test1, b: test2} = box;
console.log(test1); // 1
console.log(test2); // 2

정확히 말하면 속성을 다른 변수명으로 변경했다기보단 test1 = box.a의 형태로 새로운 변수에 기존 값을 할당하는 것이다.

 

새로운 속성명 할당과 동시에 기본값을 넣을 수도 있다.

const {a: test1 =3, b: test2=4, c: test3=5} = box;
console.log(test1); // 1
console.log(test2); // 2
console.log(test3); // 5