TIL_ES6 문법

1. Immersive Prep

Scope & Closure (ES6)

20분 - Arrow Function

___CURRYING___

function sum3(x) {
  return function(y){
    return function(z){
      return x + y + z;
    };
  };
}
console.log(sum3(1)(2)(3)) // 6


___ARROW FUNCTION___

function sum3(x){
  return y => {
    return z => {
      return x + y + z;
    }
  }
}
console.log(sum(1)(2)(3)) // 6

var sum3 = x => y => z => x + y + z;
console.log(sum3(1)(2)(3)) // 6

26분 - Template Literal

var str1 = 'code'
var str2 = 'states';

___기존방식___
> 'welcome to ' + str1 + str2 + '!'
< "welcome to codestates!"

___template literal___
>`welcome to ${str1}${str2}!`
<"welcome to codestates!"

var template = (username) => `<div>
  ${username}
</div>

>template('hello')
<"<div>
    hello
  </div>"

27분 50초 - Template Literal + Arrow Function

29분 - Rest Parameter (Arguments의 대체제)

// getMax(1,2,4,6) ==> 6;

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

> getMax(1,3,5,6,1);
< 6

function getMax(...args){
  var max = args[0]
  for(var i=1; i < args.length; i++){
    if(max < args[i]) {
       max = args[i];
    }
  }
  return max;
}
// 여기서 arguments는 유사배열 형태라 forEach를 사용할 수 없지만, rest parameter는 배열이라 forEach 사용이 가능하다.
ex
function getMax(...args){
  args.forEach 어쩌구저쩌구..
  ...
}
// 그리고 앞 몇개의 요소는 따로 지정이 가능하다. 앞의 몇개 요소는 따로 함수 내에서 사용하고 나머지를 ...args 로 묶는다.
ex
function getMax(a, b, ...args){
  어쩌구저쩌구..
  ...
}

33분 25초 - Default Parameter

//아무것도 입력 안했을 때에 어떤 값을 출력하도록 세팅해놓는 parameter

var template = (username = 'codestates') => {
  return `<div>
    ${username}
</div>
}

> template()
<"<div>
    codestates
</div>"

> template('asdf')
<"<div>
    asdf
</div>"