[JavaScript] 화살표 함수(Arrow function)란 ?? 화살표 함수에서 this 바인딩

화살표 함수(Arrow function)란 ?? 

자바스크립트의 화살표 함수(arrow function)는 함수를 선언하는 다른 방법 중 하나입니다.

ES6(2015)에서 소개되었으며, 일반 함수보다 간결하고 가독성이 높으며, this 바인딩에 대한 동작 방식이 다릅니다.

화살표 함수는 다음과 같은 구문으로 선언됩니다.

(parameter1, parameter2, ..., parameterN) => { 
   // function body 
};

여기서 parameter1, parameter2, ..., parameterN는 함수에 전달할 매개변수이고, {} 안에 있는 function body는 함수가 실행될 때 수행할 코드입니다.

화살표 함수는 다음과 같은 특징을 가집니다.

1. 함수의 매개변수가 하나뿐이면 괄호를 생략할 수 있습니다.
2. 함수의 코드 블록이 한 줄이면 중괄호와 return을 생략할 수 있습니다.
3. 함수 내부에서 this는 상위 스코프의 this를 가리킵니다.
4. 생성자 함수로 사용할 수 없습니다.

아래는 예시 코드입니다.

// 기존 함수 선언 방식
function double(x) {
  return x * 2;
}

// 화살표 함수 선언 방식
const double = (x) => x * 2;

// 함수 내부 코드 블록이 한 줄일 경우
const double = (x) => x * 2;

// 매개변수가 하나인 경우 괄호 생략 가능
const double = x => x * 2;

// 상위 스코프의 this를 가리키는 예시
const obj = {
  value: 1,
  printValue: function() {
    setTimeout(() => {
      console.log(this.value);
    }, 1000);
  }
};

화살표 함수에서 this 바인딩에 대한 동작 방식

코드를 통해 화살표 함수는 어떻게 this바인딩이 되는지 확인을 해보겠습니다.

functionBlackDog() {  
	this.name ='흰둥이';  
    return {
    	name:'검둥이',
        bark: function() {
        	console.log(this.name +':멍멍!');
            }  
        }
    } 
    
 const blackDog = newBlackDog();
 blackDog.bark(); //검둥이:멍멍! 
 
 
 functionWhiteDog() {  
 	this.name ='흰둥이';  
    return {
    	name:'검둥이',
        bark:() => {
        	console.log(this.name +':멍멍!');    
        }  
     }
 } 
 
 const whiteDog = newWhiteDog();
 whiteDog.bark(); //흰둥이:멍멍!

function()을 사용했을 때는 검둥이가 나타나고, ()=>를 사용했을 때는 흰둥이가 나타납니다.

일반 함수는 자신이 종속된 객체를 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있습니다.

 

또한 화살표 함수는 일반 함수보다 간단하고 가독성이 좋아서, 콜백 함수나 배열의 map, filter, reduce와 같은 고차 함수 등에서 자주 사용됩니다.