난 후후훗, 화살표 함수

김재만·2022년 4월 22일

화살표 함수(Arrow Function)

ES6에 추가된 간략한 함수 선언 방법이다. 기존의 함수 표현식에서 function 키워드를 삭제하고 인자를 받는 매개변수의 ()괄호와 {}코드블록 사이에 =>화살표를 추가하면 화살표 함수(Arrow Function) 표기가 된다. (1)

함수 내부의 내용이 반환값(return)만 있다면 코드블록(함수의 몸통)인 중괄호({})와 return 을 생략할 수 있습니다. 반환값이 객체이면 생략할 수 없다. (2)

인자를 하나만 받는다면 매개변수의 괄호()도 생략 가능하다. 인자가 없으면 생략할 수 없다. (3)

//함수 표현식
var f = function () {
  return console.log("f")
  }

//화살표 함수(1)
var f = () => {
  return console.log("f")
  }
  
//화살표 함수(2)
var f = () => condole.log("f")

//**화살표 함수(3)
var f = a => console.log(a)

화살표 함수의 특징

1. this에 대한 바인딩이 없다.

** this에 대한 바인딩이란, this가 가리키는 값을 연결해주는 동작을 의미한다.

기존 함수 선언 방식은 함수를 실행하는 순간, 관련한 데이터를 모두 가져오기 때문에 성능 측면에서 그다지 효율적이지 못했다. 해당 문제를 해결하기 위한 대안이 화살표 함수이기 때문에, this 바인딩을 하지 않는다.

//함수표현식
const obj = {
  a : function () {
    console.log(this); // obj
    
    const b = function() {
      console.log( this ); // this 바인딩하는 객체가 window
    };
    
    b();
  }
};

obj.a();

//화살표 함수
const obj2 = {
  a : function () {
    console.log(this); // obj
    
    const b = () => {
      // this 를 바인딩하는 동작 자체를 하지 않음
      console.log( this ); // obj
    };
    
    b();
  }
};
obj2.a()

위 코드에서 확인해 보면 일반 함수에서 함수 자체가 실행되는 순간에 this 를 바인딩하는 작업을 하게 되는데 위 코드에서 this 를 찾는데 바인딩할 대상이 없으니 자동으로 전역객체를 바인딩하여 window 가 출력된 것이고 Arrow Function(화살표 함수) 은 실행 컨텍스트가 생성될 때 this 를 바인딩하는 작업 자체를 하지 않도록 설계되어 있어서 위 코드상에서는 this 를 찾으려고 하니 b의 실행 컨텍스트에 없으니 스코프 체이닝을 통해 외부 스코프에서 this 를 찾게 되어 obj 가 출력되는 것입니다.

출처: https://webclub.tistory.com/649 [Web Club]

실행 컨텍스트

먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다.

컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다.

컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다.

함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.

화살표 함수는 '함수 스코프'를 생성하지만, 실행 컨텍스트 생성시 this 를 바인딩하지 않는다.