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

=>

ES6부터 추가된 화살표 함수(arrow function)의 문법입니다. 화살표 함수는 function 키워드를 사용하지 않고 함수를 간결하게 정의할 수 있습니다.

예를 들어, 일반적인 함수 선언 방식과 화살표 함수를 비교해보면 다음과 같습니다.

// 일반적인 함수 선언 방식
function add(a, b) {
  return a + b;
}

// 화살표 함수 선언 방식
const add = (a, b) => {
  return a + b;
}

화살표 함수의 특징

함수를 간결하게 표현할 수 있습니다.
function 키워드 대신 => 기호를 사용합니다.
함수 내부에서 this 키워드를 사용할 때, 일반 함수와 다르게 함수 자신의 this 값을 가지지 않고, 자신이 선언된 곳의 this 값을 사용합니다.
함수의 매개변수가 1개인 경우, 매개변수의 괄호(())를 생략할 수 있습니다. 예를 들어, x => x x는 (x) => x x와 동일한 표현입니다.
함수의 몸체가 한 줄인 경우 중괄호({})를 생략하고, 바로 반환문을 작성할 수 있습니다. 이때는 return 키워드도 생략할 수 있습니다. 예를 들어, x => x x는 { return x x } 대신에 사용할 수 있습니다.

화살표 함수의 예시

// 매개변수가 2개인 화살표 함수
const add = (a, b) => {
  return a + b;
}

// 매개변수가 1개인 화살표 함수
const square = x => {
  return x * x;
}

// 매개변수가 없는 화살표 함수
const getCurrentDate = () => {
  const date = new Date();
  return date.toDateString();
}

// 객체를 반환하는 화살표 함수
const createUser = (name, age) => ({ name: name, age: age });

// 배열의 map 메서드와 함께 사용하는 화살표 함수
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);

// this 값이 다른 함수 내부에서 사용되는 화살표 함수
const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
  sayBye: () => {
    console.log(`Bye, my name is ${this.name}`);
  }
}

person.sayHello();  // 출력: Hello, my name is John
person.sayBye();    // 출력: Bye, my name is undefined