[Questions about JavaScript Language Basics] Array Destructuring

2. Array Destructuring

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당

https://ko.javascript.info/destructuring-assignment

구조 분해 할당

 

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다. 객체를 이용하면 키를 가진 데이터 여러 개를 하나의 앤티 티에 저장할 수 있습니다. 배열을 사용하면 컬렉션에 데이터를 순서대로 저장할 수 있습니다.

 

하지만, 함수에 객체나 배열을 전달할 때, 객체나 배열에 저장된 데이터 전체가 아니라 일부만 필요한 경우가 있습니다. 이럴때 사용하는 것이 구조 분해 할당(destructuring assignment)입니다. 객체나 배열을 변수로 "분해"할 수 있게 해주는 문법입니다. 

 

1) 배열 구조 분해

var elements = [1, 2, 3, 4, 5];

 

var elements = [1, 2, 3, 4, 5];
var [first, second] = elements;
console.log(first);    //1
console.log(second);   //2

 

변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.

 

var a, b;

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

 

함수가 반환한 배열에 대한 작업을 더 간결하게 수행할 수 있습니다.

 

function f() {
  return [1, 2];
}

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

 

 

필요하지 않은 반환 값을 무시할 수 있습니다.

 

var elements = [1, 2, 3, 4, 5];

var [a, , c, , e] = elements;

console.log(a);   //1
console.log(c);   //3
console.log(e);   //5

function f() {
  return [1, 2, 3];
}

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

 

 

나머지(Rest) 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.

 

 

var elements = [1, 2, 3, 4, 5];

var [a, ...rest] = elements;

console.log(a);     //1
console.log(rest);  //[2,3,4,5]​

 

2) 객체 구조 분해

객체의 속성명과 같은 변수에 할당할 수 있습니다.

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
};

var { name, phoneNumber } = user;

console.log(name);        //1day1commit
console.log(phoneNumber); //010-1234-5678

 

객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
};

var { name: whoName, phoneNumber: whoPhoneNumber } = user;

console.log(whoName);          //1day1commit
console.log(whoPhoneNumber);   //010-1234-5678

 

객체의 프로퍼티가 없는 경우를 대비하여 "="를 사용해 기본값을 설정하는 것도 가능합니다. 

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
};

var {
  name: whoName,
  phoneNumber: whoPhoneNumber,
  email: whoEmail = "1day1commit@tistory.com",
} = user;

console.log(whoName);          //1day1commit
console.log(whoPhoneNumber);   //010-1234-5678
console.log(whoEmail);         //1day1commit@tistory.com

 

객체의 프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오는 것도 가능합니다. 

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
  email: "1day1commit@tistory.com",
};

var { email: whoEmail } = user;

console.log(whoEmail);     //1day1commit@tistory.com

 

나머지 패턴(rest pattern) 을 사용하면 배열에서 했던 것처럼 나머지를 어딘가에 할당하는 것이 가능합니다. 

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
  email: "1day1commit@tistory.com",
};

var { name, ...restInfo } = user;

console.log(name);     //1day1commit
console.log(restInfo); //{ phoneNumber: '010-1234-5678', email: '1day1commit@tistory.com' }

 

var user = {
  name: "1day1commit",
  phoneNumber: "010-1234-5678",
  email: "1day1commit@tistory.com",
};

var { name, ...restInfo } = user;

console.log(name);                  //1day1commit
console.log(restInfo.phoneNumber);  //010-1234-5678
console.log(restInfo.email);        //1day1commit@tistory.com

 

What will be the output of the following code?

const elements = [1, 2, 3, 4, 5];

function removeFirstTwo(arr) {
  const [, , ...rest] = arr;
  return rest;
}

console.log(removeFirstTwo(elements));

~$ [3,4,5]

 

추가 내용 공부

https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

ES6 In Depth: Destructuring – Mozilla Hacks - the Web developer blog