[Javascript] 화살표 함수(arrow function)

 

자바스크립트에서 함수를 만들 때에는 function 키워드를 사용하여 정의할 수 있다. 예를 들어 두 수의 합을 구하는 함수는 다음과 같이 작성할 수 있다.

function sum(a, b) {
  return a + b;
}

 

그리고 ES6부터는 화살표 함수(arrow function)라는 새로운 문법으로 함수를 만들 수 있게 되었다. 화살표 함수는 => 기호를 사용하여 function 키워드를 생략할 수 있다.

 

따라서 위의 함수를 화살표 함수로 바꾸면 아래와 같이 구성할 수 있게 된다.

let sum = (a, b) => {
  return a + b;
}

// 만약 함수가 단순한 return문만 있다면 한 줄로 더 심플하게 줄일 수 있다.
const sum = (a, b) => a + b;

 

 

 

화살표 함수 문법 표현

 

자바스크립트의 화살표 함수를 표현할 수 있는 여러 가지 방식은 다음과 같다.

 

 

파라미터 표현

 

파라미터가 하나뿐이면 파라미터의 소괄호 부분을 생략할 수 있다.

// 파라미터가 없을 경우
() => { ... } 

// 파라미터가 한 개인 경우. 소괄호 생략 가능.
x => { ... } 

// 파라미터가 여러 개인 경우, 소괄호 생략 불가.
(x, y) => { ... }

 

 

함수 몸체 표현

 

함수 몸체 내의 코드가 한 줄이고 단순히 return문밖에 없다면 중괄호와 return 키워드를 생략할 수 있다.

// single line block
x => { return x * x }  

// 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 아래 코드는 위 코드와 동일하다.
x => x * x

 

 

객체 리터럴 반환

 

객체 리터럴을 반환하려면 소괄호로 감싸야 한다. 왜냐하면 달랑 중괄호 { }만 쓰면 이게 함수 블록인지 객체 블록인지 판단할 수 없기 때문.

() => { return { a: 1 }; }

() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

 

 

조합 표현

// 매개변수 기본값
(a = 1, b = 2) => a + b; 

// 나머지 매개변수
(...args) => args; 

// 구조 분해 할당
([a, b] = [1, 2]) => a + b;

 

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

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

welcome();

 

 

---

 

 

화살표 함수의 특징

 

자바스크립트의 화살표 함수는 fucntion 함수를 축약하여 표현하는 문법이지만 일반적인 함수와 다른 몇 가지 고유한 특징을 가진다. 이러한 특징은 화살표 함수를 유용하게 만들기도 하지만 때로는 함정이 될 수 있기 때문에 유의 깊게 살펴보아야 한다.

 

 

화살표 함수에는 this가 없다

 

우선 화살표 함수에는 this가 존재하지 않는다. 그래서 화살표 함수에서 this 키워드로 접근하면 자신이 아닌 외부에서 값을 가져오게 된다.

 

예를 들어 아래 예시의 user라는 객체의 sayHi의 프로퍼티가 어떠한 형태의 함수로 이루어져 있느냐에 따라 this.name이 가리키는 값이 달라지게 된다. 화살표 함수는 자신만의 this를 가지지 않기 때문에 자신을 감싸는 외부 환경의 this를 그대로 따르기 때문이다. 즉 화살표 함수에서 this는 정적으로 결정된다.

var name = "Global";

let user = {
  name: "monkey",
  sayHi: function() { // 일반 함수
    console.log(this.name); 
  }
};

user.sayHi(); // monkey

 

var name = "Global";

let user = {
  name: "monkey",
  sayHi: () => { // 화살표 함수
    console.log(this.name); 
  }
};

user.sayHi(); // Global

 

이러한 특징 때문에 화살표 함수 내에서 this 키워드를 사용할 때에는 굉장히 주의 깊게 따져봐야 한다. 사람이 생각하는 this와 엔진이 할당하는 this 값은 완전히 다르기 때문.

 

그런데 이러한 화살표 함수의 this 특징 때문에 자바스크립트의 콜백 함수에서 유용하게 쓰이는 경우도 있다. 예를 들어 아래 예시의 group이라는 객체에 class와 students 프로퍼티를 정의하고 이 정보를 forEach() 반복문으로 출력하는 showList() 메서드가 있다고 해 보자.

/* 일반 함수로 쓸 경우 */
let group;

group = {
  class: "해바라기반",
  students: ["짱구", "철수", "훈이", "유리", "맹구"],

  showList() {
    group.students.forEach(
      function(student) { 
        // this ==== window
      	console.log(this.class + ': ' + student) 
      } 
    );
  }
};

group.showList();

 

만약 일반 함수로 forEach()의 콜백 함수에 넣게 된다면 이 콜백 함수 내의 this는 group이 아닌 window 객체를 가리켜 결과적으로 this.class의 출력 값은 undfined가 된다(정의하지 않았으니까).

 

반면 화살표 함수를 사용하게 되면 forEach()의 콜백 함수 내 this는 정확히 group 객체를 가리키게 된다. 콜백 함수는 별도의 자신만의 this를 가지게 되어 window 객체를 가리키게 되지만 화살표 함수는 자신만의 고유의 this가 없기 때문에 외부(group)의 this를 따르기 때문이다.

/* 화살표 함수로 쓸 경우 */
// 화살표 함수의 this는 상위의 this를 그대로 가져온다.
let group;

group = {
  class: "해바라기반",
  students: ["짱구", "철수", "훈이", "유리", "맹구"],

  showList() {
    group.students.forEach(
      (student) => { 
        // this ==== group
      	console.log(this.class + ': ' + student) 
      } 
    );
  }
};

group.showList();

 

즉 화살표 함수 내에서 this.class는 group.class와 같다.

 

---

 

 

화살표 함수에는 arguments가 없다

 

자바스크립트 함수의 arguments는 일반적인 함수가 호출될 때 전달된 인수들을 담고 있는 유사 배열 객체이다.

function argsFunc() {
  console.log(arguments);
}

argsFunc(1, 2, 3); // [1, 2, 3]

 

화살표 함수는 일반적인 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다. 따라서 실행하면 아래와 같이 에러가 발생한다.

let argsFunc = () => {
  console.log(arguments);
}

argsFunc(1, 2, 3); // ! Error

 

대신 나머지 매개변수(rest parameter)를 사용하여 인수들을 배열로 받을 수는 있다.

let argsFunc = (...args) => { // ...나머지 매개변수
  console.log(args);
}

argsFunc(1, 2, 3); // [1, 2, 3]

 

 

---

 

 

화살표 함수는 생성자 함수가 없다

 

생성자 함수란 new 연산자와 함께 호출되어 객체를 생성하는 함수를 말한다.

function User(name) {
  this.name = name;
}

let user = new User("Alice");
console.log(user.name); // Alice

 

역시 화살표 함수는 this가 없기 때문에 new와 함께 실행할 수 없다. 따라서 화살표 함수는 new와 함께 호출할 수 없다.

let User = (name) => {
  this.name = name;
}

let user = new User("Alice"); // TypeError: User is not a constructor

 

결국 화살표 함수는 객체를 생성하는 용도로 사용할 수 없다. 그래서 화살표 함수는 보통 콜백 함수나 익명 함수로 사용되는 편이다.

 

추가로 화살표 함수에는 클래스 관련 키워드인 super도 없다.