[ JavaScript ] 자바스크립트 화살표 함수

 

 

 

화살표 함수(Arrow Function)?

기존의 JavaScript 의 일반 function 대신에 ES6 부터는

 

보다 간략하게 함수를 정의할 수 있는 화살표 함수(Arrow Function)을 제공한다.

 

화살표 함수의 기본적인 문법과 일반 함수와 차이점에 대해 알아보자.

 

 

 

화살표 함수 기본 문법

1. 매개변수(인자)를 사용할 경우

// 매개변수가 없을 경우
() => { ... }

// 매개변수가 하나일 경우 - 소괄호 생략 가능
data => { ... }
(data) => { ... }

// 매개변수가 두 개 이상일 경우 = 소괄호 생략 불가
(data1, data2, data3) => { ... }

매개변수가 하나일 경우 소괄호 ( ) 를 생략 가능하고 두 개 이상일 때는 불가능하다는 것만 짚고 넘어가자.

 

 

2. 함수의 블록 범위

// 한 줄 구문이라면 중괄호 생략 가능, return 이 기본 설정되있음.
data => console.log(data)

// 위와 같은 기능이지만 { } 로 감싸면 안의 내용을 따로 return 해주어야 함.
data => { return console.log(data) }

// 두 줄 이상의 구문이면 중괄호 { } 생략 불가능
data => { 
    const msg = data;
    return msg;
}

기본적으로 화살표 함수는 구문 내에 암묵적으로 return 이 설정되어 있다.

 

그러니 따로 적지않아도 => 안의 내용들을 return 시켜주지만,

 

중괄호 { } 로 감싼다는건 하나의 코드 블럭을 명시하며 감싼 내부의 것들은 따로 return 해주어야 한다.

 

 

 

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

1. this

보통 일반 함수 내부에서 this 를 참조하면 현 함수를 호출한 인스턴스를 참조하게 된다.

 

버튼을 클릭해 호출을 하던, 어떤 행위에 의해 호출을 하던 그때 그때 다르게 동적으로 this 가 할당된다.

 

하지만 화살표 함수의 this 는 동적 할당이아니라 정적으로 할당된다.

 

무슨 말인가 하니, 일반 함수를 선언 후 이를 호출하면 그 순간에 호출한 인스턴스를 this 로 잡으나,

 

화살표 함수는 함수를 선언하는 그 순간 함수가 만들어지는 시점을 this 로 잡아버린다.

 

그리고 그 시점에 누구를 잡냐? 본인의 상위 스코프를 this 로 잡는다.

 

 

예제 소스를 살펴보자.

let obj = {
    name: '사과',
    //일반 함수
    test1: function() {
        console.log(this);
    },
    //화살표 함수
    test2: () => {
        console.log(this);
    }
}

obj.test1();
obj.test2();

 

obj 라는 객체 내에 test1(일반 함수) 와 test2(화살표 함수) 를 선언해 this 를 콘솔로 찍는 코드이다.

 

test1(일반 함수) 는 obj.test1() 이 호출 될 때 현 스코프의 obj 를 this 로 바라보게 되고,

 

test2(화살표 함수) 는 선언될 때 해당 화면의 스코프보다 상위 스코프인 window 를 바라보게 된다.

 

 

실행 결과는 다음과 같다.

 

 

2. 생성 주기

만약 아래와 같은 일반 함수가 있다고 가정해보자.

make(); //첫 번째 호출

function make() {
    console.log('test1');
}

make(); //두 번째 호출

 

make 함수를 선언해 그 이전과 후, 이렇게 두 번을 호출했다.

 

성공적으로 실행이 될까?

 

콘솔 두 개가 잘 찍힌걸 확인할 수 있다.

 

어? 두 번째 호출은 그렇다 쳐도, 첫 번째 호출은 함수 생성 전인데 안되야 되는게 아닌가?

 

할 수 있는데 일반 함수에서 함수 선언은 말 그대로 선언이지 생성을 해 놓는 것이아니다.

 

make 라는 함수를 만들어 놓은게 아닌 make 함수가 호출 됐을 때 어떤 일을 하도록 선언해놨을 뿐이다.

 

그러니 첫 번째 호출에서 현 스코프내에 선언문을 찾고, 해당 로직을 수행하게 된다.

 

그럼 이번엔 위와 같은 기능이지만, 화살표 함수를 적용시킨 코드를 살펴보자.

 

 

예제 코드는 다음과 같다.

make(); //첫 번째 호출

make = () => console.log('test1');
        
make(); //두 번째 호출

 

이번에도 잘 돌아가지 않을까?

 

실행 결과는 다음과 같다.

 

이전의 일반 함수와는 달리 make 함수를 찾지 못한다.

 

이유는 화살표 함수는 선언이 아닌 생성에 속하기 때문이다.

 

아직 make 함수가 생성되질 않았고 그 이전에 호출했으니 에러가 나게 되는 것이다.

 

아래처럼 함수 생성후에 호출하면 문제없이 잘 돌아갈 것이다.

make = () => console.log('test1');
        
make();

 

실행 화면