ES6

JS ES6 에서 아직 부족한 개념을 정리, 공부

Spread Operator

---

• Spread Operator는 연산자의 대상 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.
• Spread Operator는 Rest Parameter와 달리 중간에 위치해도 된다.

function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
const arr = [1, 2, 3];
foo(...arr); 

let arr = [1, 2, 3];
console.log([...arr, 4, 5, 6]);//[1, 2, 3, 4, 5, 6];

let a = {x: 1, y: 2}
let b = {...a, z: 3};
console.log(b); // { x: 1, y: 2, z: 3 }

Rest Parameter

---

• Rest Parameter는 Spread 연산자를 사용하여 함수의 파라미터를 작성한 형태.
• Spread 연산자를 이용하면 파라미터로 오는 값들을 "배열"로 받을 수 있다.

function foo(...rest) {
  console.log(rest);
}
foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

// 
function foo2(a, b, ...rest) {
  console.log(rest);
}
foo(1, 2, 3, 4, 5);// [3, 4, 5]

• 두 번째 코드처럼 ...rest를 파라미터 마지막에 사용할 수 있다. 다만, 마지막에만 사용가능!

Destructuring

---

• Destructuring은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것.

Array Destructuring

//ES5
let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];

console.log(a, b, c); // 1 2 3

• ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스 이다.
• Destructuring을 사용할 때는 반드시 초기화를 해줘야 한다.(선언만 하면 안된다)
• 할당 연산자 왼쪽에 배열 형태의 변수 리스트가 있어야 한다.

//ES6
let arr = [1, 2, 3];

let [a, b, c] = arr;

console.log(a, b, c); // 1 2 3

//if..
let [a, b, c]; //  SyntaxError: Missing initializer in destructuring declaration


// 왼쪽 변수 리스트와 오른쪽 배열은 배열의 인덱스를 기준으로 할당된다.
let a, b, c;
[a, b] = [1, 2];
console.log(a, b);// 1 2 

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

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

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

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

[a, b = 5, z = 3] = [1, 2];//b에 5가 할당되어 있지만 2로 덮어씌워짐.
console.log(a, b, c);// 1 2 3

[x, ...y] = [1, 2, 3]; // x = 1, ...y에는 2, 3이 들어가고 배열로 나온다. Rest문법
console.log(x, y); // 1, [2, 3]

Object Destructuring

//ES5
let obj = { username: '김코딩', text: '안녕하세요' };
let name = obj.username;
let text = obj.text;

console.log(name, text); //김코딩 안녕하세요

• ES6의 객체 디스트럭처링은 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당
• 이 때 할당 기준은 프로퍼티 이름(키) 다. 순서는 상관이 없고 키만 맞추면 된다.

//ES6
let obj = { username: '김코딩', text: '안녕하세요' };

let { username, text } = obj;
console.log(username); //김코딩
console.log(text); // 안녕하세요

let { text, username } = obj;
console.log(username); //김코딩
console.log(text); // 안녕하세요

let { a, b } = obj;
console.log(a); //undefined;
console.log(b); //undefined;

• 객체 디스트럭처링을 위해서는 할당 연산자 왼쪽에 객체 형태의 변수 리스트가 필요

// 프로퍼티 키가 prop1인 프로퍼티의 값을 변수 p1에 할당
// 프로퍼티 키가 prop2인 프로퍼티의 값을 변수 p2에 할당
let { prop1: p1, prop2: p2 } = { prop1: 'a', prop2: 'b' };
console.log(p1, p2); // a b

//위에 있는 코드와 같은 코드
const { prop1, prop2 } = { prop1: 'a', prop2: 'b' };
console.log({ prop1, prop2 }); // { prop1: a, prop2: b}

• 객체 디스트럭처링은 객체에서 프로퍼티 이름(키)으로 필요한 프로퍼티 값만을 추출할 수 있다.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 요소인 객체로부터 completed 프로퍼티만을 추출한다.
const completedTodos = todos.filter(({ completed }) => completed);
console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } 


//중첩객체
const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;
console.log(city); // 'Seoul'