🏹 화살표 함수에 대해 일반함수와 비교하여 알아보자.

기술 면접을 대비해 개념을 🍰 한입 크기로 잘라 정리합니다.
깃허브가 궁금하다면 놀러오세요!
👉 깃허브 보러가기 (Since 2023.05.10 ~ )

🏹 화살표 함수(Arrow Function)

화살표 함수는 ES6에 새롭게 추가된 문법으로, 기존 함수 표현식에 비해 간단하게 사용 가능합니다.

또한 화살표 함수는 익명 함수로만 사용할 수 있어, 화살표 함수를 호출하기 위해 함수 표현식을 사용합니다.

// 일반 함수
function foo() {
 ...
}

// 화살표 함수
const foo = () => {
 ...
}

1. This

자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this 객체가 추가됩니다.

✅ 일반함수

일반 함수는 함수 선언 시점이 아닌 호출 시점 에 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

일반 함수의 this 바인딩

• 함수 내부에서 실행시 → 전역 객체(window)를 가리킵니다.
• 메소드 내부에서 실행시 → 메소드를 소유하고 있는 객체를 가리킵니다.
• 생성자 함수에서 실행 시 → 새롭게 만들어진 객체를 가리킵니다.

✅ 화살표 함수

화살표 함수는 함수를 선언 할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 때문에 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킵니다.

또한 call, apply, bind 메소드를 통해 this를 변경할 수 없습니다.

2. 생성자 함수로 사용 가능 여부

✅ 일반함수

생성자 함수로 사용 가능합니다.

✅ 화살표 함수

prototype 프로퍼티를 가지고 있지 않아, 생성자 함수로 사용할 수 없습니다.

// <------ 일반 함수 ------>
function foo() {
	this.num = 1234;
}

const fooA = new foo();
console.log(fooA.num); // 1234

// <------ 화살표 함수 ------>
const arrFoo = () => {
	this.num = 1234;
}

const fooB = new arrFoo(); // Error

3. arguments 사용 여부

arguments는 함수에 전달된 인수 값을 담은 배열 객체를 말하며, 함수 내부에서 접근할 수 있습니다.

✅ 일반함수

함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있습니다.

✅ 화살표 함수

화살표 함수는 arguments 변수가 전달되지 않는다.

// <------ 일반 함수 ------>
function foo () {
  console.log(arguments[0]);
}

foo("a", "b", "c"); // "a"

// <------ 화살표 함수 ------>
const foo = () => {
  console.log(arguments[0]);
}

foo("a", "b", "c"); 
// ReferenceError: arguments is not defined at foo

화살표 함수에서 arguments객체는 부모 스코프의 값을 상속 받기 때문에, 화살표 함수에 arguments 변수를 사용하면 ‘Uncaught ReferenceError: arguments is not defined ’와 같이 arguments를 정의할 수 없다는 참조에러가 발생합니다.
따라서 화살표 함수로 arguments에 접근하려면 아래와 같이 rest 파라미터를 사용해 명시적으로 작성하면 해결할 수 있습니다.

const foo = (...arg) => {
  const pick = arg[0];
  console.log(pick); // "a"
}

foo("a", "b", "c");

📎 참고문서

• JavaScript - 화살표 함수와 일반 함수의 차이
• [JS] 화살표 함수를 주의해서 사용해야 하는 경우