함수선언식과 화살표 함수의 차이

ArrowFunction 은 자바스크립트의 전통적 함수의 축약표현으로 사용합니다. 다만 이걸 함수와 똑같다 라고 생각하고 사용하다보면 언젠간 문제가 발생하게됩니다. 이때 일반함수와 ArrowFunction 의 차이를 알지 못한다면 꽤나 고생하게 될겁니다.

 

arguments

function test() {
  console.log(arguments)
}
test(1, 2, 3, 4) // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }


// arrow function
const testArrow = () => {
  console.log(arguments)
}

testArrow(1, 2, 3, 4) // Uncaught ReferenceError: arguments is not defined

 

일반함수는 매개변수를 따로 받지 않아도 함수의 생성과 동시에 arguments 를 통해서 값을 사용할 수 있습니다. 그러나 ArrowFunction 에는 해당 객체가 바인딩 되지 않습니다. 

 

생성자함수

function Function () {
  this.test = 123
}

const test = new Function();
console.log(test) // Function {test: 123}


// arrow function
const TestArrow = () => {
  this.test = 123
}

const test2 = new TestArrow();
console.log(test2) // Uncaught TypeError: TestArrow is not a constructor

 

일반함수같은경우 생성자 함수로 사용할때 자동으로 constructor 를 호출합니다. 그러나 ArrowFunction 에는 constructor 가 존재하지않습니다. 때문에 위와같은 에러가나고 생성자함수로서 사용할 수 없습니다.

 

Method

const obj = {
  name: 'kim',
  nameFunc: function () { console.log(this.name + 'test') }
}
obj.nameFunc() // kimtest

// arrow function
const obj2 = {
  name: 'kim',
  nameFunc: () => { console.log(this.name + 'test') }
}
obj2.nameFunc() // test

 

일반함수같은경우 메소드로 사용되었을때 this 는 자기 자신을 호출한 객체를 대상으로 합니다. 

화살표 함수같은경우 어디서 호출하더라도 this 는 전역객체를 가르킵니다. 전역에 name 이라는 값이 없기때문에 test 만 출력합니다.

 

prototype

function func() {}
console.log(func.prototype) // {constructor: ƒ}

// arrow function
const test = () => {}
console.log(test.prototype) // undefined

 

일반함수는 prototype 객체가 존재하지만 ArrowFunction 에는 prototype 객체가 존재하지않습니다.