Home

오늘의 기억

[JavaScript] 비구조 할당


기존에 객체 또는 배열같은 정형화 된 변수를 다른 변수에 대입하거나, 초기화 하는 구문은 항상 아래 예제처럼 사용해왔다.

// 기존의 배열 선언
var arr = [1, 2, 3, 4, 5];
// 배열의 값을 다른 변수에 대입
var arrTmp = arr[0];

// 기존의 객체 선언
var obj = {a:10, b:20, c:30}
// 객체의 값을 다른 변수에 대입
var objTmp = obj.a;

이러한 방식을 비정형화 된 별개의 변수를 이용하는 걸 비구조 할당 이라 말한다. 여기서는 그러한 비정형화 된 변수를 ‘비구조 객체’, ‘비구조 배열’ 이라고 설명한다.


비구조 배열 (Destructuring Array)

배열의 값을 다른 변수에 대입하는 방법을 비구조 배열 이라는 새로운 문법을 이용하여 할 수 있다.

비구조 배열이란 배열의 실체없이 배열을 만드는 것을 말하며, 변수의 선언과 동시에 비구조 배열을 만들 수도 있고, 이미 선언된 변수를 비구조 배열로 만들 수도 있다.

var a, b, c;  // 변수 선언
[a, b, c];    // 선언된 변수로 비구조 배열 생성
var [a, b, c];  // 변수 선언과 동시에 비구조 배열 생성

비구조 배열의 특징은 별도의 배열 Reference가 존재하지 않는다는 것이다. 그렇기 때문에 배열 내의 요소들은 실제 원형 요소들을 직접 참조하게 된다. 따라서 비구조 배열을 생성할 때는 변수 선언과 동시에 생성하거나, 실제 Reference 상에 존재하는 값만 요소에 넣어서 생성할 수 있다. 좀 더 자세한 내용은 밑에서 계속해서 설명하겠다.

비구조 배열 사용 방법

먼저 비구조 배열은 별도의 Reference가 존재하지 않아서 배열 내의 요소들은 실제 원형 요소들을 참조한다고 하였다.

이를 이용하면 비구조 배열의 요소를 변경하면 실제 원형 데이터가 변경된다는 뜻이 된다.

var arr = [1, 2, 3];          // 초기화 할 배열 생성
var [one, two, three] = arr;  // 변수 선언과 동시에 비구조 배열 생성, 위에서 생성한 배열로 초기화
console.log(one, two, three); // 1, 2, 3
var arr = [1, 2, 3];           // 초기화 할 배열 생성
var one, two, three;           // 변수 선언
[one, two, three] = arr;       // 선언된 변수로 비구조 배열을 생성, 맨 위에서 생성한 배열로 값 할당
console.log(one, two, three);  // 1, 2, 3

비구조 배열에 다른 대상 배열로 덮어씌우게 되면 비구조 배열의 순서대로 대입이 된다. 따라서 대상 배열 중간 값을 건너뛰고 싶을때는 비구조 배열 중간에서도 건너뛰면 된다.

var arr = [1, 2, 3];
var [one, ,three] = arr;
console.log(one, three);  // 1, 3

또한 비구조 배열을 이용하여 변수의 값을 서로 바꾸는 것도 손쉽게 가능하다.

var one = 1;
var two = 2;
[one, two] = [two, one];
console.log(one, two);    // 2, 1

비구조 객체 (Destructuring Object)

배열의 비구조 대입과 마찬가지로, 객체의 특정 프로퍼티를 다른 변수에 대입하는 방법을 비구조 방식으로 비구조 객체 라는 새로운 문법을 이용하여 할 수 있다.

비구조 객체란 객체의 선언 없이 객체를 만드는 것을 말하며, 비구조 배열과 동일하게 변수의 선언과 동시에 비구조 객체를 만들 수도 있고, 이미 선언된 변수를 비구조 객체로 만들 수도 있다.

여기서 중요한 점은 JavaScript 객체는 Key-Value 형식이라는 것이다. 이 형식은 비구조 객체에서도 동일하다. 비구조 객체에서의 Value가 실제 변수가 되며, 비구조 객체에서의 Key는 Value에 접근할 때 사용되는 Key이다.

자세한건 계속해서 설명하겠다.

var a, b, c;  // 변수 선언
({keyA:a, keyB:b, keyC:c});  // 비구조 객체 생성
var {keyA:a, keyB:b, keyC:c}; // 변수 선언과 동시에 비구조 객체 생성

비구조 배열과 약간 다른 점은 이미 선언된 변수를 비구조 객체로 만들때 단순히 { ... } 이렇게 사용하면 블록 단위의 statement 와 동일하기 때문에 비구조 객체의 리터럴이 될 수 없다. 따라서 앞뒤에 괄호를 넣어서 ({ ... }) 이렇게 써야한다.

비구조 객체 사용 방법

비구조 객체는 비구조 배열과 마찬가지로 별도의 Reference가 존재하지 않고, 비구조 객체 생성에 쓰인 원형 변수를 직접 참조하게 된다.

이를 이용하여 다른 객체를 이용하여 비구조 객체 생성에 쓰인 변수를 초기화 하거나, 값을 할당할 수 있다.

var obj = {keyA:1, keyB:2, keyC:3};   // 초기화 할 객체 생성
var {keyA:a, keyB:b, keyC:c} = obj;   // 변수 선언과 동시에 비구조 객체 생성, 위에서 생성한 객체로 초기화
console.log(a, b, c); // 1, 2, 3
var obj = {keyA:1, keyB:2, keyC:3};   // 초기화 할 객체 생성
var a, b, c;                          // 변수 선언
({keyA:a, keyB:b, keyC:c}) = obj;       // 생성된 변수로 비구조 객체 생성, 맨 위에 생성한 객체로 값 할당
console.log(a, b, c); // 1, 2, 3

만약 초기화 할 객체에 존재하는 Key와, 비구조 객체에 쓰이는 변수의 이름이 동일하다면 데이터타입 - object 에서 언급한 간소화된 프로퍼티 선언을 이용할 수 있다.

var obj = {a:1, b:2, c:3};    // 초기화 할 객체 생성
var {a, b, c} = obj;          // 변수 선언과 동시에 비구조 객체 생성, 위에서 생성한 객체로 초기화
console.log(a, b, c); // 1, 2, 3

추가로 비구조 객체 선언 시 값을 초기화하는 구문을 넣을 수도 있다. 이 구문의 의미는 비구조 객체를 통해 생성된 변수의 초기값 이라는 의미를 가지고 있다.

초기화하는 구문은 = 을 이용하며, 프로퍼티명 : 프로퍼티값 = 초기값 이런식으로 사용한다.

var obj = {keyA:1, keyB:2};   // 초기화 할 객체 생성
var {keyA:a=10, keyB:b=20, keyC:c=30} = obj;  // 변수 선언과 동시에 비구조 객체 생성, 각각 초기화 값을 할당 & 위에서 생성한 객체로 초기화
console.log(a, b, c);     // 1, 2, 30     a와 b는 맨 위 객체로 값 할당, c는 비구조 객체의 초기화 값으로 값 할당

이러한 비구조 객체를 이용하면 함수 매개 변수의 기본 값을 좀 더 간결(?)하게 작성할 수 있다.

function example( {size = 'big', cords = {x:0, y:0}, radius = 25} = {} ) {
  console.log(size, cords.x, cords.y, radius);
}
example({
  cords: {x:10, y:20},
  radius: 30
});   // big, 10, 20, 30

마지막으로 데이터타입 - object 에서 언급한 동적 프로퍼티명을 이용해서도 비구조 객체를 사용할 수도 있다.

var getKey = function() {
  return 'keyA';
};
var obj = {keyA : 123};
var { [getKey()] : foo } = obj;

console.log(foo);	// 123

이러한 비구조 할당 문법은 기존 JavaScript와는 너무 이질적인 부분이 많이 있어서 혼란이 올 수 있다. 하지만 ES6에서 공식 릴리즈에 포함이 되었기 때문에 알아두면 상황에 따라 좀 더 간결한 코드를 작성할 수 있을 것이다. 또한 코드의 흐름이 빠른 오픈 소스 프로젝트에 참여하고 싶은 개발자들은 꼭 알아두는게 좋을 것이다.

20161214 Charyum.Park