[JS] 화살표 함수, 쉽고 빠르게 정리하기

화살표 함수, 쉽고 빠르게 정리하기

---

화살표 함수(Arrow function)란?

함수 표현식보다 단순하고 간단한 문법으로 함수를 만드는 방법이다.

const arrowFunc = (arg1, arg2, ...argN) => expression;

function originFunc(arg1, arg2, ...argN) {
    return expression;
}

• arrowFunc 는 arg1~argN 을 인자로 받는 화살표 함수 이다.
• 화살표 함수는 화살표(=>) 우측의 표현식(expression) 을 평가하고 평가 결과를 반환(return)한다.
• arrowFunc는 originFunc 의 축약 버전이라고 할 수 있다.

구체적 예시

let sum = (a, b) => a + b;

/* 위 화살표 함수의 원본 */
let sum = function(a, b) {
    return a + b;
};

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

• (a, b) => a + b는 인수 a와 b를 받는 함수이다.
• (a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환한다.

// 인수가 하나일 경우(n) 감싸는 괄호 생략 가능
let double = n => n * 2;
let sayHi = () => alert("안녕하세요");

• double 인수가 하나일 경우(n) 감싸는 괄호 생략 가능
• sayHi 인수가 하나도 없을 때는 괄호를 비워두면 된다. 이 때 괄호는 생략 불가능

본문이 여러 줄인 화살표 함수

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

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

표현식이나 구문이 여러 개인 함수일 경우, 중괄호( { } ) 안에 평가해야 할 코드를 넣어주어야 한다.
그리고 return 지시자를 사용해 명시적으로 결과값을 반환해주어야 한다.

화살표 함수에서의 'this'

자바스크립트에서 함수는 1급 객체 이므로, 함수가 다른 함수의 인자로 전달되어 사용되는 경우가 있다.

예시

• list.map(func) - func map이 호출될 때, 배열 list 의 요소 전체를 대상으로 실행된다.
• setTimeout(func) - func 는 내장 스케줄러에 의해 실행된다.

하지만 함수가 전달되면 함수의 context 를 잃을 수 있다. 이럴 때 화살표 함수를 사용하면 현재 context를 잃지 않아 편리하다.

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

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

group.showList();

• forEach 로 전달된 함수는 일반 함수가 전달되었다.
• 함수 내에서 this.title 의 this 는 window 객체를 가리킨다.
• window 객체에는 title property 가 없으므로 undefined 가 출력된다.

let group = {
    title: "1모둠",
    student: ["보라", "호진", "지민"],
    showList() {
        this.students.forEach(
            student => alert(this.title + ': ' + student);
        );
    }
};

group.showList();

• forEach 로 화살표 함수가 전달되었다.
• this.title 은 화살표 함수 바깥에 있는 메서드인 showList 가 가리키는 대상(group)과 동일해진다.
• 이 때는 원하는 결과가 출력된다.

화살표 함수는 생성자 함수로 사용할 수 없다.

화살표 함수는 this 가 없기 때문에 new 키워드와 함께 호출할 수 없어 생성자 함수로 사용할 수 없다.

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

화살표 함수는 유사 배열 객체인 arguments 를 지원하지 않는다.

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

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 를 가지지 않는다.
• arguments 를 지원하지 않는다.
• new 와 함께 호출할 수 없다.

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