티스토리 뷰
구조분해 할당(Destructuring assignment)
1. 문법
구조분해의 기본 문법은 아래의 코드와 같습니다.
var a, b, rest; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4, 5] ({a, b} = {a:1, b:2}); console.log(a); // 1 console.log(b); // 2
구조분해 할당의 좌변은 값을 넣을 변수, 우변에는 값이 되는 변수가 됩니다.
var x = [1, 2, 3, 4, 5]; var [y, z] = x; console.log(y); // 1 console.log(z); // 2
구조분해
2. 배열 구조분해
기본 변수 할당
배열 구조분해에 변수에 값을 할당하는 기본 방법은 밑의 코드와 같습니다.
var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three"
기본 변수 할당
foo에 one, two, three를 각각 저장한 후, 변수 one two three에 구조분해로 할당되어 출력되는 것을 확인 할 수 있습니다.
선언에서 분리한 할당
변수를 선언과 할당을 분리하여 배열 구조분해 할당을 할 수 있습니다.
var a, b; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2
기본값 설정
배열 구조분해는 기본값 설정이 가능합니다.
var a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7
기본값 설정
a=5, b=7로 기본값이 할당되어 있습니다. [a=5, b=7] = [1]을 함으로 a에는 1이 할당되어 1을 출력하고, b에는 기본 값인 7을 출력하고 있는것을 확인 할 수 있습니다.
값 교환
스와핑, 두개의 값 교환을 배열 구조분해를 사용하면 한줄로 표현이 가능합니다.
var a = 1; var b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1
값 교환
함수의 반환된 배열
함수에서 반환된 배열로도 구조분해 할당이 가능합니다.
function f() { return [1, 2]; } var a, b; [a, b] = f(); console.log(a); // 1 console.log(b); // 2
함수의 반환된 배열
f 함수에서 배열 [1, 2]를 리턴합니다. 이 리턴 값으로 구조분해 할당하여 변수 a와 b에 값이 출력되는 것을 확인 할 수 있습니다.
값 무시하기
배열 구조분해 할당된 값을 무시할 수도 있습니다.
function f() { return [1, 2, 3]; } var [a, , b] = f(); console.log(a); // 1 console.log(b); // 3 [a, , b] = [4, 5, 6]; console.log(a); // 4 console.log(b); // 6
값 무시하기
리턴된 값 2와 할당된 값 5가 무시된 체 출력되는 것을 확인 할 수 있습니다.
모든 값을 무시하는 것도 가능합니다.
[,,] = [1, 2, 3];
나머지 변수에 저장
...으로 시작하는 나머지 변수에 배열 구조분해 할당이 가능합니다.
var [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3]
나머지 변수에 저장
마지막에 컴마 ','가 들어가면 SyntaxError가 발생하여, 나머지 변수를 사용할 때 유의해야 합니다.
var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma
나머지 변수로 구조분해 할당 할 경우 ,로 끝이 나면 안됩니다.
정규식에서 값 가져오기
배열 구조분해 할당을 사용하면 정규화된 배열에서 값을 가져오기 쉽습니다.
var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] var [, protocol, fullhost, fullpath] = parsedURL; console.log(protocol); // "https"
구조분해 할당을 사용하면 정규화된 배열에서 값을 가져오기 쉽습니다.
3. 객체 구조분해
기본 변수 할당
var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true
기본 변수 할당
선언에서 분리한 할당
var a, b; ({a, b} = {a:1, b:2}); console.log(a); console.log(b);
선언에서 분리한 할당
새로운 변수 이름에 할당
객체 구조분해를 사용하여 새로운 변수 이름에 값을 할당할 수 있습니다.
var o = {p: 42, q: true}; var {p: foo, q: bar} = o; console.log(foo); // 42 console.log(bar); // true
새로운 변수 이름에 할당
기본값 설정
객체 구조분해 또한 기본값 설정이 가능합니다.
ES5에서 default parameter 구현
function drawES5Chart(options) { options = options === undefined ? {} : options; var size = options.size === undefined ? 'big' : options.size; var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; var radius = options.radius === undefined ? 25 : options.radius; console.log(size, cords, radius); // now finally do some chart drawing } drawES5Chart({ cords: { x: 18, y: 30 }, radius: 30 });
ES5에서 defalut parameter 구현
ES6에서 default parameter 사용
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { console.log(size, cords, radius); // do some chart drawing } drawES2015Chart({ cords: { x: 18, y: 30 }, radius: 30 });
ES6에서 default parameter 사용
객체 구조분해에 기본값을 사용할 경우 ES6에서 ES5와 달리 간결하게 구현할 수 있습니다.
중첩된 객체와 배열 구조분해
var metadata = { title: "Scratchpad", translations: [ { locale: "de", localization_tags: [ ], last_edit: "2014-04-14T08:43:37", url: "/de/docs/Tools/Scratchpad", title: "JavaScript-Umgebung" } ], url: "/en-US/docs/Tools/Scratchpad" }; var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; console.log(englishTitle); // "Scratchpad" console.log(localeTitle); // "JavaScript-Umgebung"
중첩된 객체와 배열 구조분해
for ... of 문에서 구조분해
var people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith" }, age: 35 }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones" }, age: 25 } ]; for (var {name: n, family: { father: f } } of people) { console.log("Name: " + n + ", Father: " + f); } // "Name: Mike Smith, Father: Harry Smith" // "Name: Tom Jones, Father: Richard Jones"
for .. of 문에서 구조분해
매개변수에서 구조분해
매개변수에서 구조분해를 사용할 수도 있습니다.
function userId({id}) { return id; } function whois({displayName: displayName, fullName: {firstName: name}}){ console.log(displayName + " is " + name); } var user = { id: 42, displayName: "jdoe", fullName: { firstName: "John", lastName: "Doe" } }; console.log("userId: " + userId(user)); // "userId: 42" whois(user); // "jdoe is John"
구조분해가 익숙하지 않다면, 난해한 코드가 될 수 있지만,,, 구조분해를 사용하여 간결한 코드를 작성할 수 있습니다.
계산되어진 변수 이름 사용
런타임 중에 계산된 값을 구조분해 변수 이름으로 사용할 수 있습니다.
let key = "z"; let { [key]: foo } = { z: "bar" }; console.log(foo); // "bar"
계산되어진 변수 이름 사용
* 참고
ES6에서, 리털럴 객체를 초기화 할 때, 런타임 동안에 계산된 값을 프로터피 이름으로 사용하는 방식이 추가되었습니다.
// Computed property names (ES2015) var i = 0; var a = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i }; console.log(a.foo1); // 1 console.log(a.foo2); // 2 console.log(a.foo3); // 3 var param = 'size'; var config = { [param]: 12, ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 }; console.log(config); // { size: 12, mobileSize: 4 }
ES6에서 리터럴 객체에서 런티임 동안 계산 된 값을 프로퍼티의 이름으로 사용할 수 있습니다.
'JavaScript' 카테고리의 다른 글
[자바스크립트] ES6(ECMA Script 6) - for ... of 문 (0) | 2017.01.20 |
---|---|
[자바스크립트] ES6(ECMA Script 6) - 화살표 함수(Arrow function) (3) | 2017.01.19 |
[자바스크립트] ES6(ECMA Script 6) - 기본 매개변수(Default parameter) (1) | 2017.01.17 |
[자바스크립트] ES6(ECMA Script 6) - 나머지 매개변수(Rest parameter) (1) | 2017.01.16 |
[자바스크립트] OOP, ES6(ECMA Srcipt 6) - 클래스(Class) (0) | 2017.01.16 |