ES6가 무엇일까?

// 기존의 함수 사용법
var power = function (x) {
  return x * x
}

------------

// Arrow Function 사용 (매개변수 1개일 시, 소괄호 생략가능. 나머지는 필수)
var power = x => { return x * x }

------------

// 매개변수에 default값 설정 가능
var num = (x = 3) => { console.log(x) }

num() // 3
num(10) // 10

------------

// args를 사용한 가변인자 전달
var sum = (...args) => { return args.reduce((pre, cur) => pre + cur) }

console.log(sum(1,2,3,4)) // 10

------------

// lexical this
const person = {
  name : 'Lee',
  sayName : () => { console.log(`hi + ${this.name}`) }
}

// arrow function은 this를 lexical하게 binding하므로, 선언한 곳의 상위 context의 this에 binding된다.
// 그렇기 때문에 해당 객체의 method에 arrow function을 사용하면, 객체의 상위 context의 this인 window 객체에 binding된다.

obj1.sayName() // 그러므로 undefined 

// Instead of this
let firstName = arr[0]
let surname = arr[1]

// Using this
let [firstName, surname] = arr

------------

// No need to using 2nd element
let [firstName, , title] = ['Julius', 'Caesar', 'Consul', 'of the Roman Republic']

console.log(firstName) // Julius
console.log(title) // Consul

------------

// `...` syntax means 'REST OF THINGS THAT I DON'T ASSING'
let [name1, name2, ...rest] = ['Julius', 'Caesar', 'Consul', 'of the Roman Republic']

console.log(name1) // Julius
console.log(name2) // Caesar

// `rest` is array
console.log(rest[0]) // Consul
console.log(rest[1]) // of the Roman Republic
console.log(rest.length) // 2

------------

// If the left array length is longer than right one, that value is undefiend
let [name1, name2, name3, name4] = ['Julius', 'Caesar', 'Consul']

console.log(name1) // Julius 
console.log(name2) // Caesar
console.log(name3) // Consul
console.log(name4) // undefined

------------

// So we can assign 'default' value to it
let [name = 'Guest', surname = 'Anonymous'] = ['Julius']

console.log(name)    // Julius
console.log(surname) // Anonymous

------------

// We should carefully use syntax when we assign it array, but object are not
let options = {
  title: 'Menu',
  width: 100,
  height: 200
}

let {title, width, height} = options

console.log(title)  // Menu
console.log(width)  // 100
console.log(height) // 200

// Same output
let {height, width, title} = options

console.log(title)  // Menu
console.log(width)  // 100
console.log(height) // 200

// Also can extract specific value from object

let {height} = options

console.log(height) // 200

// Default
let [name = 'Guest', surname = 'Anonymous'] = ['Julius']

console.log(name)    // Julius
console.log(surname) // Anonymous (Default)

------------

// Rest
let [name1, name2, ...rest] = ['Julius', 'Caesar', 'Consul', 'of the Roman Republic']

console.log(name1) // Julius
console.log(name2) // Caesar
console.log(rest) // ['Consul', 'of the Roman Republic']

------------

// Spread
var addInArray = function (one, two, three) {
  return one + two + three
}

var arr = [1,2,3]

addInArray.apply(null, arr) // 6, legacy version
addInArray(...arr) // 6, spread(ES6) version

// forEach
var items = ['item1', 'item2', 'item3']

items.forEach(function(item) {
    console.log(item)
})


// for ... in
var obj = {
    a: 1, 
    b: 2, 
    c: 3
}

for (var prop in obj) {
    console.log(prop, obj[prop]) // a 1, b 2, c 3
}

// for ... of
var iterable = [10, 20, 30]

for (var value of iterable) {
  console.log(value) // 10, 20, 30
}