JavaScript(화살표 함수)

■ 짧은 문법

 

화살표 함수는 기존 함수를 정의하는 법보다 간단하게 정의할 수 있습니다.

내부 코드 블록이 한 줄일 경우 { } 중괄호 없이 return도 생략할 수 있습니다.

변수가 하나일 경우 ( ) 괄호를 생략할 수도 있습니다.

// 일반 함수
const myFunc1 = function(x) {
  return x + 3;
}

// 화살표 함수
const myFunc2 = x => x + 3;

// 일반 함수
const myFunc1 = function(x, y) {
  return x + y;
}

// 화살표 함수
const myFunc2 = (x, y) => {
  var 합계 = x + y;
  return 합계;  // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
  };

 

 

■ this 바인딩

 

화살표 함수 안에서 쓰이는 this 는 일반 함수와 다르게 새로운 this를 생성하지 않으며 상위 스코프의 this를 가리킵니다.

화살표 함수를 사용하면 내부 함수의 this가 전역 객체를 참조하는 것을 회피해서 사용할 수 있다는 장점이 있습니다.

const obj = {
  name: 'kim',
  func: () => {
    console.log(this.name);
  }
};

obj.func(); // undefined

const obj = {
  name: 'kim',
  func() {
    console.log(this.name);
  }
};

obj.func(); // "kim"