JavaScript 구조분해할당

구조분해할당은 ECMA(European Computer Manufacturers Association)는 국제 표준화 기구로 프로그램 언어 및 정보통신 시스템에 대한 표준을 제정하는 역할을 합니다. 여기서 발표한 자바스크립트의 표준을 ECMAScript라고 하며 줄여서 ES 라고 함.
ES6(ECMAS 2015)에서 추가된 구조분해할당을 잘 활용하지 못하고 있는것같아 이번 기회에 정리하고 넘어가고자 한다.

참고 : MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EC%9D%BC%EB%B6%80_%EB%B0%98%ED%99%98_%EA%B0%92_%EB%AC%B4%EC%8B%9C%ED%95%98%EA%B8%B0

구조분해할당

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

예시

var a, b, rest;

[a, b] = [10, 20]; //선언에서 분리한 할당
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]  //변수에 배열의 나머지 할당

({ a, b } = { a: 10, b: 20 }); // 선언 없는 할당 (..)이 필수
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
--------------------------------
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

배열 구조 분해

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

//기본값 활용
var a, b;

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7  => 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

//일부 반환값 무시(전체 무시도 가능)
function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

객체 구조 분해

//새로운 변수 이름으로 할당하기
var o = { p: 42, q: true };
var { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true

//기본값
var { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

//기본값 갖는 새로운 이름의 변수에 할당
var { a: aa = 10, b: bb = 5 } = { a: 3 }; // 새로운 변수명 할당과 기본값 할당을 동시에 함.

console.log(aa); // 3
console.log(bb); // 5

//함수 매개변수의 기본값 설정하기
function drawES2015Chart({
  size = "big",
  cords = { x: 0, y: 0 },
  radius = 25,
} = {}) {
  console.log(size, cords, radius);
  // 차트 그리기 수행
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30,
});
//이 함수가 어떠한 매개변수 없이도 호출할 수 있길 원한다면 지금 형태가 유용하고, 
무조건 객체를 넘기길 원하는 경우에는 빈 객체 할당을 하지 않는 것이 유용할 수 있습니다.

중첩된 객체 및 배열의 구조 분해

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: "/ko/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"

함수 매개변수로 전달된 객체에서 필드 해체하기

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"

객체 구조분해에서 rest

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

MDN만 잘 읽어도 구조분해할당 이해 완!
잘 쓰기만 하면 코딩테스트때도 시간을 줄여줄 고마운 친구다.
공부하면서 '이런것도 된다고??' 생각이 들었는데 자바스크립트의 유연함이 좋은걸까, 사람들이 천재인걸까.