화살표 함수와 일반 함수의 차이점

Jean Young Park·2023년 11월 13일
0

javascript

목록 보기
9/15

리액트를 배우기 시작했을 때 es6문법을 처음 접하게 되었다.
그때는 마냥 새로운 문법이 재미있어서 우와우와 하면서 배웠던것 같다.
그러다가 면접을 준비하는 이 시점에 가장 당연하게 사용하던 화살표 함수에 대해 궁금증이 생겼다.

'어 근데 화살표함수랑 일반함수 차이점이 뭐지..?'

그래서 이 글을 작성하게 되었다.

문법

우선 문법부터가 다르다. 첨엔 낯설었지만 이제는 아주 편하다..

  • 일반 함수
function add(a, b) {
	return a + b;
}
  • 화살표 함수
const add = (a, b) => a + b;

this 바인딩

  • 일반 함수
    함수가 호출될 때, this는 호출된 컨텍스트에 동적으로 바인딩된다.

  • 화살표 함수
    화살표 함수는 자신만의 this를 생성하지 않는다. 대신, 화살표 함수는 선언된 시점에서 외부 스코프의 this를 캡처한다. 이를 lexical scoping이라고 부른다.

이 내용이 조금 헷깔렸을 때 내가 봤던 강의이다. 또 헷깔리면 다시 봐야겠다.
일반 함수와 화살표 함수의 THIS

arguments 객체

  • 일반 함수
    arguments 객체를 사용하여 함수에 전달된 인자에 접근할 수 있다.

  • 화살표 함수
    화살표 함수에는 arguments 객체가 없다. 대신, 부모 스코프의 arguments를 참조한다.

생성자 함수로 사용 불가

  • 일반 함수
    new 키워드를 사용하여 객체를 생성할 수 있다.

  • 화살표 함수
    화살표 함수는 항상 익명이며 생성자 함수로 사용할 수 없다.

0개의 댓글