함수(function)와 화살표 함수(arrow fucntion) 차이 5가지와 예시

자바스크립트에서 일반 함수(function)와 화살표 함수(arrow function)는 모두 함수를 생성하는 방법이지만 분명한 차이가 있다. 이 차이 때문에 function과 화살표 함수는 서로 다른 용도로 사용된다. function은 일반 함수로 사용되며, 객체의 메서드로 사용할 수 있다. 반면에 화살표 함수는 단순한 함수를 만드는 데 사용되며, 특히 callback 함수로 많이 사용된다.

 

아래는 5가지 차이점와 예시이다.

 

1. this

function 키워드를 사용하여 생성된 함수 내에서 this는 함수가 호출된 컨텍스트에 의해 결정된다. 이것은 실행 컨텍스트의 this 바인딩과 동일하다.

const myObject = {
  value: 10,
  getValue: function() {
    return this.value;
  }
}

화살표 함수에서 this는 함수를 생성할 때의 외부 컨텍스트에서 상속된다. 이는 함수를 호출하는 컨텍스트에 의해 결정되지 않으며, 일반적으로 상위 스코프의 this를 참조한다.

const myObject = {
  value: 10,
  getValue: () => this.value
}

2. arguments 유무

function 키워드를 사용하여 생성된 함수 내에서 arguments 객체를 사용할 수 있다.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

 

화살표 함수는 arguments 객체를 지원하지 않는다. 하지만 rest 파라메터를 사용하여 유사한 동작을 구현할 수 있다.

const sum = (...args) => {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
};

 

3. 생성자

function 키워드를 사용하여 생성된 함수는 생성자 함수로 사용할 수 있다.

function Person(name) {
  this.name = name;
}
const john = new Person("John");

 

하지만 화살표 함수는 생성자 함수로 사용할 수 없다. new 키워드와 함께 화살표 함수를 사용하면 에러가 발생한다.

 

 

4. Generator 사용

fucntion은 아래처럼 Generator를 사용한다.

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

 

화살표 함수도 제너레이터 함수를 생성할 수 있지만 fucntion과는 조금 다른 방식으로 제너레이터 함수를 생성해야 한다. 화살표 함수를 사용하여 Generator 함수를 생성하려면, function* 대신에 function 키워드를 사용한 일반 함수를 생성한 다음 화살표 함수를 이용하여 생성된 함수를 반환하는 방법을 사용해야 한다.

const myGenerator = () => {
  function* innerGenerator() {
    yield 1;
    yield 2;
    yield 3;
  }
  return innerGenerator();
};

 

5. prototype

fucntion은 prototype이 있다. 화살표 함수는 없다.