Arrow Function

화살표 함수 기본

화살표 함수 기본

화살표 함수 다시 살펴보기

화살표 함수 다시 살펴보기

 

화살표 함수는 함수 표현식보다 단순하고 간결하게 함수를 만들 수 있는 문법이다.

 

let func = (arg1, arg2, ...argN) => expression

 이렇게 코드를 작성하면 함수가 만들어진다.

 아래 함수의 축약 버전이라고 할 수 있다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

 

 화살표 함수는 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 인수가 하나도 없을 때는 괄호를 비워놓으면 된다.

 아래 예시와 같이 함수를 동적으로 만들 수도 있다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

 

 함수 본문이 여러 줄인 함수도 화살표 함수로 만들 수 있다. 이 경우에는 함수 본문을 중괄호로 감싸주어야 한다. 그리고 return 지시자를 사용해서 명시적으로 결과값을 반환해 주어야 한다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

 

 

 하지만 화살표 함수는 단순히 함수를 '짧게' 쓰기 위한 용도로 사용되는게 아니다. 화살표 함수는 몇 가지 독특하고 유용한 기능을 제공한다.

 자바스크립트를 사용하다보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황을 자주 만난다. 그런데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있다. 이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리하다.

화살표 함수에는 'this'가 없다

 이런 특징은 객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회하는데 사용할 수 있다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

 예시의 forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 this와 동일하다. 즉 this.title은 group.title과 같다.

 

 만약 위 예시에서 화살표 함수 대신 일반 함수를 사용했다면 에러가 발생했을 것이다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

 에러는 forEach에 전달되는 함수의 this가 undefined여서 발생했다. alert함수에서 undefined.this에 접근하려 하기 때문에 에러가 출력된다. 하지만 화살표 함수는 this 자체가 없기 때문에 이런 에러가 발생하지 않는다.

 

 화살표 함수와 일반 함수를 .bind(this)를 사용해서 호출하는 것 사이에는 미묘한 차이가 있다.

• .bind(this)는 함수의 '한정된 버전(bound version)'을 만든다.
• 화살표 함수는 어떤 것도 바인딩시키지 않는다. 화살표 함수엔 단지 this가 없을 뿐이다. 화살표 함수에서 this를 사용하면 일반 변수 서칭과 마찬가지로 this의 값을 외부 렉시컬 환경에서 찾는다.

화살표 함수에는 'arguments'가 없다

 화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다.

 이런 특징은 현재 this값과 arguments정보를 함께 실어 호출을 포워딩해주는 데코레이터를 만들 때 유용하게 사용된다.

 아래 예시에서 데코레이터 defer(f, ms)는 함수를 인자로 받고 이 함수를 래퍼로 감싸 반환하는데, 함수 f는 ms밀리초 후에 호출된다.

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('안녕, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("철수"); // 2초 후 "안녕, 철수"가 출력됩니다.

 화살표 함수를 사용하지 않고 동일한 기능을 하는 데코레이터 함수를 만들면 다음과 같다.

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

 

요약

 화살표 함수는 컨텍스트가 있는 긴 코드보다는 자체 컨텍스트가 없는 짧은 코드를 담을 용도로 만들어졌다. 그리고 이 목적에 잘 들어맞는 특징을 보인다.

•  화살표 함수에는 자체 바인딩이 this에 없으며, 인수 또는 super로 사용해야 하고, 메서드로 사용해서는 안된다.
•  따라서 화살표 함수는 생성자로 사용할 수 없다.

 

 위의 주의사항을 지키지 않으면 함수의 컨텍스트에 관해서 머리가 터질 수 있기 때문에 조심하자.

 더 기술적인 설명은 아래 링크를 참조하자.

 

화살표 함수 표현식 - JavaScript | MDN

화살표 함수 표현식 - JavaScript | MDN