자바스크립트 핵심개념 4탄 (Arrow Function 개념에 대해)

이병수·2020년 11월 8일

ES6의 가장 큰 문법적 변화사항을 꼽자면 역시나 Arrow function이다. 오늘 그 개념과 사용법에 대해 자세히 알아보자 ~!~! 🥁🥁🥁🥁

1. Arrow function 문법

화살표 함수는 기본적인 문법은 아래와 같다. 함수 작성 시에 많은 부분을 생략할 수 있고, 화살표(=>)를 사용하여 조금 더 간결하게 코드를 작성할 수 있다.

일반함수 표현에 비해 구문이 간단하다!

() => {...}  // 인수가 없을 때 
x => {...} // 인수가 하나 일 때
(x, y) => {...} // 인수가 여러 개 일 때
x => { return x * x } // 블록을 사용한 방식
x => x * x // 표현식이며 위와 같음

간단한 예제를 살펴보자!
ES5 방식

var func = function(x) { return x * x }
console.log(func(5)) //25

ES6 화살표함수

var func = x => return x * x 
console.log(func(5)) //25

화살표 함수를 이용하면 기존(ES5) 보다 훨씬 직관적이고 간결해진 것을 알 수있다.

2. Arrow function 활용

2-1 일반함수 선언

ES5 방식의 함수 작성 예를 같이보자

var square = function(x){  // (A)
    return x*x;
}
console.log(square(10)); // 100
 
function add(a, b){   //(B)
    return a + b;
}
console.log(add(1,2)); //3

ES5에서는 함수를 두 가지 방식으로 쓸 수 있는데, (A)와 같은 방식을 함수 표현식
(B)와 같은 방식을 함수 선언식 이라고 한다.

위 예에서 콘솔의 순서를 아래와 같이 바꾸면 어떻게 나올까?

console.log(add(1,2)); //3
console.log(square(10)); //100??
 
var square = function(x){
    return x*x;
}
 
function add(a, b){
    return a + b;
}

_결과는 첫 번째 콘솔은 3이 똑같이 나오지만 두 번째 콘솔은 Uncaught TypeError가 뜬다.

아니 둘 다 함수가 선언되기 전에 실행됐는데 왜 첫 번째 콘솔은 실행이 되고 두 번째는 안될까?

이유는 함수 선언식이 호이스팅의 영향을 받기 때문이다. 즉 선언식으로 쓰여진 함수는 브라우저에서 아래와 같은 순서로 해석된다.

var square;
 
function add(a, b){
    return a + b;
}
 
console.log(add(1,2)); //3
console.log(square(10)); //100??
 
square = function(x){
    return x*x;
}

둘다 호이스팅으로 위로 끌어 올려지지만 console.log(square(10)) 이 실행되었을 때는 변수 square는 선언만 됐지 할당이 안됐기 때문이다.

그렇기 때문에 ES5에서는 둘의 차이를 인지하고 있어야 한다.

2-2 화살표 함수 호출

하지만 ES6의 화살표 함수를 쓰면 고민할 필요가 없다. 왜냐면 화살표 함수는 오직 익명함수이다. 다시말해 함수 표현식만 사용할 수 있다.

ES5

var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

ES6 화살표 함수

const pow = x => x * x;
console.log(pow(10)); // 100

또한 콜백 함수로 사용 가능하다. 이 경우 일반적인 함수 표현식보다 표현이 간결하다

ES5

var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;
});

console.log(pow); // [ 1, 4, 9 ]

ES6 화살표 함수

const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

3. this

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

3-1 일반함수 this

자바스크립트에서 this는 그 용법이 특이하다. 요약하자면 ES5에서의 this는 아래와 같다

함수 실행시에는 전역(window) 객체를 가리킨다.

메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.

생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

function Person () { 
 this.age = 0;
 console.log("첫번째",this.age);
 
 setTimeout(function growUp() {
  console.log("두번째",this.age);
  this.age++;
  },1000);
 }
var p = new Person();
console.log(p);

첫 번째 콘솔은 메소드를 소유하고 있는 객체를 가리키므로 0을 반환한다.
하지만 두 번째 콘솔은 전역객체 window를 가리키므로 undefined를 반환한다. 이는 이는 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리키기 때문이다.

3-2 화살표 함수 this

기존 자바스크립트는 함수 선언 시 this에 바인딩 할 객체가 동적으로 결정된다. 하지만 화살표함수는 함수 선언 시 this가 바인딩 할 객체가 정적으로 결정된다. 이 말은 즉 일반함수와 달리 화살표 함수의 this는 항상 상위 scope의 this를 가리킨다. 이를 Lexical this라고 한다

위 예에서 내부함수를 화살표 함수로 바꾸어보자.

function Person () { 
 this.age = 0;
 console.log("첫번째",this.age);
 
 setTimeout(()=> {
  this.age++;
  console.log("두번째",this.age);
  },1000);
 }
 Person()