1. Destructuring assignment

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

1. 배열에서의 해체
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]

2. 객체에서의 해체
({ a, b } = { a: 10, b: 20});
console.log(a) // 10
console.log(b) // 20

({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}

2. Rest parameters

• Rest 파라미터는 Spread 연산자 (...)을 사용 하여 함수의 파리미터를 작성한 형태.

1. 일반적
function getMax() {
  var max = arguments[0]
  for(var i = 0; i < arguments.length; i++) {
    if(max < arguments[i] {
       max = arguments[i];
  }
}
return max;
}

2. Rest parameters
function getMax(...args) {
  var max = args[0]
  for(var i = 1; i < args.length; i++) {
    if (max < args[i]) {
      max = args[i];
    }
  }
  return max;
}

3. Spread operator

• Spread 연산자는 연산자의 대상 배열 또는 iterable을 개별 요소로 분리한다.
• Spread 호출에서는 함수 호출문 의 파라미터에 Spread(...)연산자를 이용, 호출하면 배열이 해당 매개변수로 각각 매핑.
• Spread호출과 rest와는 다른개념, rest는 함수 선언문 의 파라미터에 Spread(...)연산자를 이용, 가변인자를 받아 배열로 만들어 사용.

1. Rest
function foo(param, ...rest) {
  console.log(param) // 1
  console.log(rest) // [ 2, 3 ]

2. Spread 호출
function bar(x, y, z) {
  console.log(x) // 1
  console.log(y) // 2
  console.log(z) // 3
}
bar(...[1, 2, 3])

4. Default parameters

• 기본 함수 매개변수를 사용하면 값이 없거나 undefined가 전달될 경우 매개변수를 기본값으로 초기화할 수 있다. default parameter를 사용하면 예외처리 없이 코딩 가능.

1. 일반적
function multiply(a, b) {
  return a * b;
}

console.log(multiply(5, 2)) // 10
console.log(multiply(5, 1)) // 5
console.log(multiply(5)) // NaN

2. b에 값을 할당
function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2)) // 10
console.log(multiply(5, 1)) // 5
console.log(multiply(5)) // 5

4. Template literals

• 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴.
  백틱(`) 을 이용. 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있다. ( $ {expression} ),
  $와 중괄호로 표기. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달된다.

1. 일반 문자 조합 
var str1 = 'code' // undefined
var str2 = 'states' // underfined
'welcome to' + str1 + str2 + '!' // "welcome to codestates!"

2. 템플릿 리터럴
`welcome to ${str1}${str2}!`
// "welcome to codestates!"

---

1. ES5 syntax 줄바꿈 
var html = [
    '<div>',
    	' <span>',
    	[1, 2],
    	'</span>',
    '</div>'
   ].join('\n');

/*
html
"<div>
	<span>
	1,2
	</span>
</div>"
*/

2. ES6 Syntax 줄바꿈
var html = 
    `<div>
	<span>
		$[1, 2]	
	</span>
</div>`

/*
html
    "<div>
    	<span>
    	$[1, 2]
    	</span>
    </div>"
*/

5. Arrow Functions

• 화살표 함수 표현은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다. 항상 익명인 함수.

• 화살표 함수의 this는 자신을 포함하는 상위 context를 가리키기 때문에
  method 함수 사용에는 좋지 않다.

• Prototype 에서도 this를 사용하기 때문에 같은 문제가 발생한다.
  화살표 함수는 생성자 함수로도 사용할 수 없다. prototype property 가 없기 때문이다.

• addEventListener 함수의 콜백함수를 화살표 함수로 사용하면 this가 window를 가리키기 때문에 사용하지 말아야 한다.

• 위의 경우들에는 일반함수를 사용함이 바람직하다.

1. ES5 Syntax
var multiplier = function(x, y) {
  return x * y;
}

2. ES6 Syntax
var multiplier = (x, y) => {
  return x * y;
}

---

1. closure 함수
function adder(x) {
  return function(y) {
    
    return x+y;
  }
}

adder(5) // f (y) { return x + y ; }
adder(6)(5) // 11

2. closure 함수를 Arrow 함수로
var adder = (x) => {
  return (y) => {
    return x + y
  }
}

adder(5) // (y) => { return x + y }
adder(5)(6) // 11

3. return 생략
var adder = x => y => x + y

adder(5) // y => x + y
adder(5)(6) // 11

---

1. regular 함수는 this 호출방식에 의해 결정되는 dynamic scoping
2. arrow 함수는 자신을 포함하고 있는 context의 this를 이어 받는다
window.x = 5;

const regular = function () {return this.x;};

const arrow = () => this.x;

console.log(regular.call({x:10})); // 10
console.log(arrow.call({x:10})); // 5
                            

6. for-of, for-in

• For-of : 반복가능한 객체를 반복하는 기능 수행, 객체의 요소들을 순회
• For-in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행, 객체의 속성들을 순회

1. ES5 Syntax
var nums = [1, 4, 6, 7];

for(var i = 0; i < nums.length; i++) {
  console.log(nums[i]);
}

var string = 'hello world'

for(var j = 0; j < string.length; j++) {
  console.log(string[i]);
}

2. ES6 Syntax (for-of)
var nums = [1, 4, 6, 7];

for(var val of nums) {
  console.log(val);
}

for(var letter of 'hellow world') {
  console.log(letter);
}

1. for in 과 for of 비교

let list = [4, 5, 6];

for(let i in list) {
  console.log(i);
} // "0", "1", "2" 인덱스를 출력 

for(let i of list) {
  console.log(i);
} // "4", "5", "6" 값을 출력