화살표 함수와 일반 함수의 차이

1. this 차이

const user = {
  name: 'jane',
  sayName: function () { // 일반함수
    console.log(this.name);
  },
};

const user2 = {
  name: 'lulu',
  sayName: () => { // 화살표 함수
    console.log(this.name); //this는 window를 가리킴
  },
};
user.sayName(); // jane
user2.sayName(); // undefined

 

 

일반 함수에서 this는 함수를 호출한 객체를 가리키게 되며,

화살표 함수는 this를 감싸고 있는 스코프의 this를 가지고 온다.

객체의 메소드로는 일반 함수를 사용하는 것이 좋다.

화살표 함수로 메소드를 정의하면 생성한 객체에 접근할 수 없기 때문이다.

 

 

함수 안에 내장 함수를 만들 경우

const user = {
  name: 'jack',
  main: function () {
    const inner = function () { // 일반함수
      console.log(this);
    };
    inner();
  },
  main2: function () {
    const inner = function () { // 일반함수
      console.log(this);
    }.bind({ age: 20}); // bind메소드 사용해서 객체 지정
    inner();
  },
  main3: function () {
    const inner = () => { // 화살표 함수
      console.log(this);
    };
    inner();
  },
};

user.main(); // window
user.main2(); // {age: 20}
user.main3(); // {name: 'jack', main: func, main2: func, main3: func}

user.main()이 window인 이유?

일반 함수는 호출될 때 어떻게 호출되었는지에 따라 this가 결정됨
inner()는 객체의 메서드로 호출된 것이 아니기 때문에 this는 기본적으로 전역 객체를 참조함

 

 

2. 생성자 함수 차이

function calc() {
  this.num = 1;
}

const calc2 = () => {
  this.num = 2;
};

const numCalc = new calc();
console.log(numCalc.num); // 1

const numCalc2 = new calc(); // Error

 

화살표 함수는 prototype 프로퍼티가 없기 때문에 생성자 함수로 사용할 수 없다.

왜 화살표 함수는 생성자 함수로 사용할 수 없게 만들었을까?

1. 생성자는 자기만의 this를 만들 수 있어야 하는데 화살표 함수는 this가 고정되어 있기 때문
2. 애초에 간결한 함수 표현식을 위한 문법으로 만들어졌기 때문 (목적이 다름)


화살표 함수 → 간단하고 빠르게 쓸 수 있는 계산기
생성자 함수 → 틀을 찍어내는 공장

 

3. arguments 차이

function main() {
  console.log(arguments); 
}

main(1, 2, 3); // [object Arguments] {"0": 1, "1": 2, "2": 3}

 

 

arguments는 함수가 호출될 때 자동으로 생성되는 지역 변수이다.

이 객체는 넘겨받은 인자들을 유사 배열 형태로 담고 있다.

 

const main => () {
  console.log(arguments); 
}

main(1, 2, 3); // Uncaught ReferenceError: arguments is not defined

 

화살표 함수는 arguments 객체를 생성하지 않는다.

자신만의 실행 콘텍스트(스코프)를 생성하지 않기 때문이다.

 

좀더 자세하게 설명하면,
일반 함수는 호출될 때마다 this, arguments, super 등과 같은 자체적인 실행 환경을 만들어 내지만, 화살표 함수는 자체 환경을 만들지 않고, 바깥 스코프의 것을 그대로 사용한다.

 

해결방법

 

바깥 스코프 생성 (비추)

function main() {
  const main2 = () => {
    console.log(arguments); 
  }
  
  main2()
}

main(1, 2, 3); // [object Arguments] {"0": 1, "1": 2, "2": 3}

 

 

... rest 파라미터 사용

const main = (...args) => {
  console.log(args); // [1, 2, 3]
};
main(1, 2, 3);

 

최종 정리

	일반 함수	화살표 함수
this	호출 방식에 따라 바뀜	자신을 감싸는 외부 스코프의 this를 사용
생성자 함수	✅ 가능	❌ TypeError 발생
arguments	✅ 사용 가능	❌ 없음 (에러 발생)
용도	모든 상황	간단한 함수, 콜백, this 유지가 필요한 경우

 

 

 

 

 

참조
https://ko.javascript.info/arrow-functions
https://poiemaweb.com/es6-arrow-function