ES 6の関数

1.ES 6の関数を区別する

2.方法

3.矢印関数

3.1. 制定法

// ()는 매개변수가 들어갈 자리, 한 줄일 경우 return 생략 가능
const arrow1 = () => console.log("화살표 함수");

// 매개변수가 있을 시 () 생략 가능
const arrow2 = (x) => x * x;

// 매개변수가 두 개 이상일 경우 () 생략 불가
const arrow3 = (x, y) => x * y;

// 코드가 두 줄 이상인 경우 {} 생략 불가
const arrow4 = (x, y) => {
  console.log(x);
  console.log(y);
};

3.2. 長所

3.3. 矢印関数のthis

// 즉시 실행 함수의 this는 전역 객체를 가리킨다.
// call을 사용하여 호출가 동시에 새 객체를 this에 바인딩한다.
// 화살표함수는 자체적 this 바인딩이 없어 상위 스코프의 this를 찾는다
// 따라서 새 객체가 화살표 함수의 this가 된다.
(function () {
  const foo = () => console.log(this);
  foo();
}.call({ a: 1 })); // { a: 1 }

window.name = "Yu";

const arrow = () => console.log(this.name);

arrow.call({ name: "Kim" }); // Yu

3.4. 矢印関数のsuper、arguments

class Base {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    return `Hi! ${this.name}`;
  }
}

class Derived extends Base {
  // super 키워드는 ES6 메소드 내에서만 사용 가능하다.
  // 화살표 함수는 함수 자체의 super 바인딩이 없다.
  // 화살표 함수 sayHi의 상위 컨텍스트는 constructor이다.
  // 화살표 함수 sayHi의 super는 constructor의 super를 가리킨다.
  // 클래스 필드 정의 제안으로 클래스 필드에 화살표 함수를 할당한다.
  sayHi = () => `${super.sayHi()} how are you doing?`;
}

// Derived의 constructor는 Derived.prototype에 존재한다.
// 따라서 constructor의 super는 Base.prototype이 된다.
console.log(Object.getOwnPropertyNames(Derived.prototype)); // [ 'constructor' ]

4.Restパラメータ

function sum(...args) {
  // Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]이 할당된다.
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

5.パラメータデフォルト

function logName(name = "Lee") {
  console.log(name);
}

logName(); // Lee
logName(undefined); // Lee
logName(null); // null