CODE:H

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

 
  • Jun 09, 2021

화살표 함수(Arrow Function)란

화살표함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한표현으로 간단하게 사용가능하다.

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

const arrFun = () => { // 화살표 함수
  ...
};

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

1. this

:heavy_check_mark: 일반함수
자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.
아래는 일반 함수에서 this가 바인딩 되는 상황이다.

  1. 함수 실행시에는 전역(window) 객체를 가리킨다.
  2. 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
  3. 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

:heavy_check_mark: 화살표 함수
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

예를 들면

function fun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {
      console.log(this.name);
    },
  };
}

function arrFun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {
      console.log(this.name);
    },
  };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

일반함수로 사용했을때는 바이가 찍히고 화살표함수를 사용했을때는 하이가 찍힌다.
일반 함수는 자신이 종속된 객체를 this로 가리키고 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

2. 생성자 함수로 사용 가능 여부

:heavy_check_mark: 일반 함수는 생성자 함수로 사용할 수 있다.
:heavy_check_mark: 화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

function fun() {
  this.num = 1234;
}
const arrFun = () => {
  this.num = 1234;
};

const funA = new fun();
console.log(funA.num); // 1234

const funB = new arrFun(); // Error

3. arguments 사용 가능 여부

:heavy_check_mark: 일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.
:heavy_check_mark: 화살표 함수에서는 arguments 변수가 전달되지 않는다.

function fun() {
  console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

일반함수는 arguments변수가 전달되어 [1,2,3]이 찍히지만

const arrFun = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);

화살표함수는 arguments를 정의할 수 없다고 뜬다.



참고자료 : https://poiemaweb.com/es6-arrow-function
참고자료 : https://ko.javascript.info/arrow-functions

Search