[JS] 화살표 함수 vs 일반 함수

문법

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

const arrowFunc = () => { // 화살표 함수 (ES6에 새로 추가됨)
  //...
}

함수 표현식을 간결하게 표현한 것이 화살표 함수이다.

 

차이

1. this

결론: 일반함수를 써서 가리키는 객체가 달라져서 오는 혼동을 막기위해, 화살표 함수를 쓰기도 한다.

 

🔶 일반함수

JS에서 모든 함수는 실행 때 마다 함수 내부에 this 객체가 추가 된다.

 

함수에서 this가 바인딩 되는 3가지 상황

1. 함수 실행 시 전역객체를 가리킨다.

function test1() {
    console.log(this)
}
test1() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

2. 메소드 실행 시 메소드를 소유한 객체를 가리킨다.

const obj = {
  name: 'test',
  test1: function () {
    console.log(this)
  }
}
obj.test1() //obj {name: 'test', test1: ƒ}

3. 생성자 실행 시 새로 만들어진 객체를 가리킨다.

class Test {
  constructor(name) {
    this.name= name;
  }
  test()  {
    console.log(this)
  }  
}

const test4 = new Test("Bob")
test4.test() // Test {name: 'Bob'}

👎 즉, 일반함수는 함수를 선언 시 this에 바인딩 될 객체가 정적으로 결정되는 것이 아니다.

함수가 어떻게 호출되는지 상황에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

 

 

🔷 화살표 함수

함수 선언 시 this에 바인딩 할 객체가 정적으로 결정된다.

화살표 함수의 this는 항상 상위 스코프의 this를 가리킨다. (렉시컬 스코프)

👍 즉, 어떻게 호출하든 고정된 스코프를 가지고 있다는 말이다.

 

1. 화살표 함수 실행 시

const 테스트 = () => {
  console.log(this)
}
테스트() // Window

2. 메소드 실행 시

const obj = {
  name: 'test',

  test2: () => {
    console.log(this)
  },
}

obj.test2() // Window

3. 생성자 실행 시

class obj2 {
  constructor(name) {
    this.name = name 
  }
  test3() {
    console.log(this)
  }
}

const test4 = new obj2('존')
test4.test3() // obj2 {name: '존'}

 

일반함수 vs 화살표 함수 | 생성자 함수 호출로 메서드를 사용할 때

일반함수 : 자기가 속한 객체를 this로 가리킴.

화살표함수: 자기가 속한 인스턴스를 가리킴.

function func() {
  this.이름 = "밖";
  return {
    이름: "안",    // ←←←←←←←←←←←←←
    speak: function () {     //   ↑
      console.log(this.이름) //→→→↑
    }
  }
}

function arrowFunc() {
  this.이름 = "밖";  // ←←←←←←←←←←←
  return {                   //   ↑
    이름: "안",              //   ↑
    speak: () => {           //   ↑
      console.log(this.이름) //→→→↑
    }
  }
}

const test1 = new func()
test1.speak() // 안

const test2 = new arrowFunc()
test2.speak() // 밖

 

2. 생성자 함수 사용 여부

👍일반함수 :  생성자 함수 사용 가능. (prototype 프로퍼티 존재 하기 때문)

👎화살표함수 : 생성자 함수 사용 불가.

function 일반함수() {
  this.name = '일반함수야'
}

const 화살표함수 = () => {
  this.name = '화살표함수야'
}

const test1 = new 일반함수()
console.log(test1.name) // 👍 일반함수야

const test2 = new 화살표함수()
console.log(test2.name) // 👎 TypeError: 화살표함수 is not a constructor

 

https://ko.javascript.info/function-prototype

함수의 prototype 프로퍼티

 

3. arguments 사용 여부

👍일반함수 : 함수 실행 시 암시적으로 arguments 변수가 인자로 전달됨

👎화살표함수 : arguments 변수가 인자로 전달 안됨

function 일반함수() {
  console.log(arguments)
}
일반함수(10, 20, 30) // 👍 Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ


const 화살표함수 = () => {
  console.log(arguments)
}
화살표함수(10, 20, 30) // 👎 ReferenceError: arguments is not defined

 

참고

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

https://ko.javascript.info/arrow-functions

화살표 함수 다시 살펴보기