ES6 Syntax

• Destructuring
• Spread Operator
• Rest Parameters
• Default Parameters
• Template Listrals
• Arrow Functions
• for...of loog

Destructuring

---

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

let user = {
  first: 'Benji',
  last: 'Marinacci',
  age: 32
};

let {first, last} = user;
first; // 'Benji'
// user의 key인 first, last가 value값과 함께 할당된다.

---

let user = {
  first: 'Hyunsoo',
  last : 'Kim',
  age : 25
}

let greet = function ({first, last}) {
  console.log(first + last);
}

greet(user) // HyunsooKim
// {first, last} = user 방식을 응용하여 
//매개변수를 위와 같이 설정하여 호출시 구조 분해 할당 방식으로 인자를 호출 

---

let numbers = [1, 2, 3, 4];
let [first, second, third] = numbers;
first; // 1
second; //2

//순서에 맞춰서 f, s, th 에 순서대로 할당된다.
//짝이 맞지 않는 4는 할당되지 않는다.
---

let numbers = [1, 2, 3, 4];

let countToTwo = function([first, second]) {
  console.log(first + ',' + second);  
}
countToTwo(numbers); // 1,2
//매개변수를 위와 같이 정하면 호출 시 인자로 numbers가 입력되면 
//구조 분해 할당이 일어나 first, second에 number의 첫 번째, 두 번째 요소가 들어간다.

Spread Operator

---

인자로 배열을 정하고 함수 호출을 할 경우 f(...args) 를 이용하면 배열의 [ ] 를 벗겨내고 매개 변수 하나씩 배열안의 요소를 할당할 수 있다.

function someFunction(a, b, c, d) {
  console.log(a + b + c + d);
}
let arr = [1, 2, 3, 4];
someFunction(...arr); // 10
// [1, 2, 3, 4]를 인자로 하고 함수를 호출하면 
//[ ]가 벗겨지고 a = 1, b = 2, c = 3, d = 4가 할당된다.

Rest Parameters

---

Spread operator가 함수 호출 할 때 사용한다면
Rest parameters는 함수의 매개 변수에 사용하는 문법이다.

let multiplyByNum = function (x , ...nums) {
  nums.forEach(function (num) {
  	console.log(x * num);
  })
} 

let arr = [1, 2, 3, 4];
multiplyByNum(5, ...arr) //5, 10, 15, 20
// 함수 호출 시는 Spread Opeartor => 즉 [1, 2, 3, 4]의 대괄호가 벗겨져서 인자로 들어간다.
// multiplyByNum의 매개변수에 설정된 ...nums가 rest parameters다. 
//대괄호가 벗겨져서 들어온 인자가 Rest Parameters를 만나면 다시 대괄호가 씌워진다. 하지만 배열은 아니고 NodeList라 불리는 유사배열이 된다.
//즉, [1, 2, 3, 4] => 1, 2, 3, 4 => [1, 2, 3, 4] 이 순서다.

Default Parameters

---

이를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있다.

let generateAddress = function(city, state, country = 'USA') {
  return city + ',' + state + ',' + country;
}

generateAddress('Oakland', 'CA'); // 'Oakland, CA, USA
generageAddress('Oakland', 'CA', 'Canada');//'Oakland, CA, Canada'

Template Literals

---

let generateAddress = function(city, state, country = 'USA') {
  return `${city}, ${state}, ${country}`
}

Arrow Function

---

규칙

• 매개변수가 하나뿐인 경우 소괄호는 선택사항
• 매개변수가 없는 경우 소괄호가 필요
• return 과 {} 은 한 쌍
• 나머지 매개변수 및 기본 매개변수를 지원한다.
• 매개변수 목록 내 구조분해 할당도 지원한다.
• 객체 리터럴 표현을 반환하기 위해서는 함수의 body을 괄호속에 넣는다.

let doubleValues = function (values) {
  return values.map(function (value) {
  	return value * 2;
  }
}
              
let doubleValues = function (values) {
  return values.map(value => value * 2)  
}
  
let doubleValues = values => values.map(value => value * 2);  

---

function Person() {
  var that = this;  
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}
//화살표 함수는 자신의 this가 없다. 대신 화살표 함수를 둘러싸는 렉시컬 범위의 this가 사용된다. 따라서 현재 setInterval의 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는다. 

for...of Loop

let nums = [1, 4, 6, 7];
for(let num of nums) {
  console.log(num);
}
//1, 4, 6, 7