[Java Script] 화살표 함수와 일반 함수 차이

자바스크립트에 화살표 함수와 일반 함수에 몇 가지 차이가 있다고 하는데 한번 알아보겠습니다.

1. this

| 일반함수

함수를 호출할 때 this 결정

• 일반적으로 함수를 실행하면 전역 객체인 window를 가리킴
• 객체의 메서드로 함수를 실행하면 해당 메서드를 소유한 객체를 가리킴
• 생성자로 실행하면 생성자로 만들어진 객체를 가리킴

function func() {
  console.log(this);
}

const object = {
  name: "Yi",
  func1: func,
};

func(); // 전역객체 window
object.func1(); // 해당 object객체
const nFunc = new func(); // 생성된 객체인 nFunc

| 화살표 함수

함수를 선언할 때 this 결정

• 화살표 함수의 this는 함수가 선언된 시점 상위 스코프의 this를 가리킴 (Lexical this)

const object = {
  age: 25,
  aFunc: () => {
    console.log(this.age); // this 가 선언 시 결정
  },
  rFunc() {
    console.log(this.age); // this 가 호출 시 결졍
  },
  Func() {
    const aFunc = () => {
      console.log(this.age);
    };
    aFunc();
  },
};

object.aFunc(); // this는 선언 시 결정 된 window이므로 window.age는 undefined
object.rFunc(); // this는 호출 시 결정된 object이므로 따라서 object.age는 25
object.Func(); // this는 선언 시 결정된 object이므로 따라서 object.age는 25

2. arguments의 사용

| 일반함수

arguments 사용 가능

function func() {
  console.log(arguments[0], arguments[1]);
}

func(1, 2); // 1 2 출력

| 화살표 함수

arguments 사용 불가

const func = () => {
  console.log(arguments[0], arguments[1]);
};

func(1, 2); // 에러 발생

3. 생성자로 사용

| 일반함수

생성자로 사용 가능

function Func(name) {
  this.name = name;
}

const nFunc = new Func("Yi");
console.log(nFunc.name); // "Yi" 출력

| 화살표 함수

생성자로 사용 불가

const Func = (name) => {
  this.name = name;
};

const nFunc = new Func("Yi"); // 에러 발생
console.log(nFunc.name);

4. call, apply, bind 메서드의 사용

| 일반함수

사용가능

const object = {
  age: 25,
  func: function () {
    console.log(this.age);
  },
};

const func1 = object.func.bind({ age: 30 });
func1(); // 30 출력

| 화살표 함수

사용 불가

const object = {
  age: 25,
  func: () => {
    console.log(this.age);
  },
};

const func1 = object.func.bind({ age: 30 });
func1(); // undefined 출력