화살표 함수란 (Arrow function)

돼지·2022년 4월 25일

개발공부

목록 보기

6/17

function test() {}

const test () => {}

위 예제처럼 간결한 문법으로 사용할 수 있는 장점이 있다.
콜백함수에서도 화살표 함수를 사용 할 수 있다.

단, 파라미터가 하나일 경우 ()괄호 생략 가능하며
return이 한줄이어도 return과 {}를 생략 가능하다.
이렇게 되면 직관적으로 표현되어 예측이 빨라진다.

document.getElementById('Btn').addEventListener('click', (e) => {
  this; // 이렇게 쓰면 window가 나오게 되므로
  // e.currentTarget를 직접 써야 한다.
}

단점 : this값을 쓰면 새로 정의되어 사용 하는게 아닌 바깥에 있던 this값을 내부에서 그대로 사용하게 된다. (바깥 this : window)

화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

화실표 함수의 this는 일반 함수의 this와 다르게 동작한다.

일반함수로 호출되는 모든 함수 내부의 this는 전역객체를 가리킨다.
화살표 함수는 this 바인딩을 갖지 않으며, 화살표 함수 내부에서 this를 참조하면 상위 스코프 this를 참조한다(window)

코드의 간결성과 직관성을 위해 사용 하고 싶을 때

하지만 this 값을 제대로 사용하고 싶다면 그에 맞는 값을 직접 작성해야한다.

먐미