프론트엔드 짧은 간단 지식 정리 - 자바스크립트의 일반 함수와 화살표 함수

• 자바스크립트에서는 함수 정의 방법은 일반 함수와 화살표 함수의 두 가지 주요 스타일이 있다.
  - 일반 함수와 화살표 함수는 무엇이고, 이 둘의 차이는 무엇인지 알아보도록 하자.

 

1. 일반 함수

• 일반 함수는 function 키워드를 사용하여, 함수를 정의하는 방법이다.

function regularFunction(param1, param2) { 
 // 함수 본
}

• 특징은 아래와 같다.

1. this 바인딩
   • 일반 함수는 호출되는 컨텍스트에 따라 this가 다르게 바인딩된다.
   • 함수가 호출되는 위치에 따라 this의 값이 달라질 수 있다.

2. arguments 객체 o
   • 일반 함수는 arguments 객체를 사용할 수 있다.
   • 이 객체는 함수에 전달된 인수들을 배열 형태로 제공한다.

3. 생성자 함수 사용 가능
   • 일반 함수는 new 키워드를 사용하여 생성자 함수로도 사용할 수 있다.

4. 이름 붙은 함수 표현식
   • 일반 함수는 이름을 붙여 정의할 수 있다.

 

2. 화살표 함수

• 화살표 함수는 함수를 간단하게 표현할 수 있는 ES6 문법이다.
  - 화살표 함수는 => 구문을 사용하여 함수를 정의하는 방법이다.

const arrowFunction = (param1, param2) => {
	// 함수 본문
};

• 일반함수는 this가 호출하는 대상에 따라, 동적으로 바인딩된다. 그러나, 화살표함수를 사용했을 때의 this는 상위 스코프의 this를 가리키게 된다.
  • 이를 Lexical this라고 한다.

• 특징은 아래와 같다.

1. this 바인딩
   • 화살표 함수는 자신만의 this를 가지지 않으며, 외부 함수의 this를 그대로 사용한다. (함수가 호출되는 위치에 따라 this의 값이 달라질 수 있다.)
   • 이 때문에 콜백 함수나 이벤트 핸들러에서 유용하게 사용할 수 있다.

2. arguments 객체 x
   • 화살표 함수는 arguments 객체를 사용할 수 없다.
   • arguments 객체를 사용하지 못하는 대신, rest parameter를 사용할 수 있다.

3. 생성자 함수 사용 불가
   • 화살표 함수는 생성자 함수로 사용할 수 없다.
   • 즉, new 키워드와 함께 사용할 수 없다.

4. 짧은 문법
   • 함수 본문이 한 줄인 경우 중괄호와 return 키워드 없이도 사용할 수 있다.

const add = (a, b) => a + b;

 

3. 요약

1. this 바인딩: 일반 함수는 동적으로 this를 바인딩하지만, 화살표 함수는 외부의 this를 그대로 사용한다.
2. arguments 객체: 일반 함수는 arguments 객체를 제공하지만, 화살표 함수는 제공하지 않는다.
3. 생성자 함수: 일반 함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 사용할 수 없다.
4. 문법: 화살표 함수는 더 간결한 문법을 제공한다.