자바스크립트의 화살표 함수(arrow function)

화살표 함수의 추가

es6에서 추가된 화살표 함수를 통해서 기존 문법에서 조금 단축되고, 약간의 차이점들이 생겼습니다. 비교해가면서 하나씩 적어보도록 하겠습니다. 

 

const func = function(name){
  console.log("hello " + name);
};
func("lemon"); //hello lemon

기존의 함수표현식은 위와 같은 형태였습니다. 하지만 똑같은 내용을 화살표 함수로 적으면 어떻게 될까요?

const func = (name) => {
  console.log("hello " + name);
};
func("lemon"); //hello lemon

function이라는 단어도 없애면서, 함수에 매개변수가 하나라면 괄호도 생략하셔도 됩니다. name => {}이라는 형태를 적어도 된다는 뜻입니다. 또 표현식이 하나라면 중괄호와 return도 생략할 수 있습니다.

const func = name => console.log("hello " + name);
func("lemon"); //hello lemon

단 한줄로 표현되었습니다. 화살표 함수는 다양한 예제에서 많이 보여지니 형태를 꼭 눈에 익혀두시기 바랍니다.

화살표 함수는 이름을 가질 수 없기 때문에 변수에 할당만 가능합니다. 

일반 함수와의 차이점 

이전 포스팅에 new 생성자와 생성자 함수로 객체를 만들었습니다. 

new 생성자로 객체 만들기

화살표 함수로는 객체를 만들 수 없습니다. 객체를 만들 필요가 있다면 기존의 방식으로 만들어야 합니다. 

그리고 arguments 객체를 사용할 수 없습니다. 

function sum(){
  return arguments[0] + arguments[1]  
}
sum(1, 2); //3

arguments 객체는 함수의 인수를 참조할 수 있는 객체입니다. 위의 sum이란 함수는 매개변수를 따로 정의하지 않았지만 arguments 객체를 통해 인수를 가져와서 더한 값을 반환합니다. 

const sum = () => arguments[0] + arguments[1]  
sum(1, 2); // 에러가 납니다. 

const sum2 = (...par) => par[0] + par[1];
sum2(2, 4); //6

화살표 함수에서는 확산연산자를 통해서 나머지 값들을 받아와서 사용하셔야 에러가 나지 않습니다. 마지막 차이는 중첩된 함수에서 this가 가리키는 것이 다르다는 것입니다.

var name = "outer";
var e = {
  name: "inner",
  func(){
    console.log(this.name);
    function func2(){
      console.log(this.name);
    };
    func2();
  }
};
e.func();

전역변수 name의 값은 "outer"이고, e라는 객체엔 name 속성의 값을 "inner"로 주었습니다. 그리고 func라는 메소드를 실행하면 name의 값을 묻고 함수를 하나 더 정의하고 실행시킵니다. 함수가 중첩된 것입니다. 그리고 메소드 안에 있는 함수에서 다시 name의 값을 묻습니다. e.func()는 어떻게 나올까요? "inner" "outer"라고 나타날 것입니다. 

함수가 중첩되었을 때 this는 전역객체 window나 undefined를 나타내게 됩니다.

스트릭트 모드에서는 undefined가 되고, 아닐 경우 전역객체 window입니다. 하지만 화살표 함수를 사용했다면 어떻게 될까요?

var name = "outer";
var a = {
  name: "inner",
  func(){
    console.log(this.name);
    var func2 = () => {
      console.log(this.name);
    };
    func2();
  }
};
a.func();

a.func()는 "inner"와 "inner"가 됩니다.

화살표 함수를 사용했을 때는 this가 정확히 a라는 객체를 가리키고 있다는 것을 기억해주세요.

공감은 제작자에게 큰 힘이 됩니다.