JavaScript Arrow Function

화살표 함수는 기존 함수를 좀 더 가볍게 할 수 있다.

 

매개변수가 부재한 함수

function add() {

  return 5 + 5;

}

console.log(add());      // 10

 

화살표 함수

const add = () => {

  return 5 + 5;

};

console.log(add()); // 10

 

화살표 함수 축약

const add = () => 5 + 5;

console.log(add()); // 10

함수 내부의 내용에 반환값(return)만 존재한다면, 코드블록인 중괄호{}와 return도 생략가능

 

 

 

 

 

매개변수가 2개 있는 함수

function add(num1, num2) {

  return num1 + num2;

}

console.log(add(3, 4));     // 7

 

화살표 함수

const add = (num1, num2) => {

  return num1 + num2;

};

console.log(add(3, 4));     // 7

 

화살표 함수 축약

const add = (num1, num2) => num1 + num2;

console.log(add(3, 4));      // 7

마찬가지로 함수 내부의 내용에 반환값(return)만 존재했으므로, 코드블록인 중괄호{}와 return 생략가능

 

 

 

 

 

 

매개변수가 1개만 있는 함수

function add(num) {

  return num + 6;

}

console.log(add(3));    // 9

 

화살표 함수

const add = (num) => {

  return num + 6;

};

console.log(add(3));      // 9

 

화살표 함수 축약

const add = (num) => num + 6;

console.log(add(3));      // 9

 

 

 

 

 

물론 콜백함수로서도 활용가능

function callBackTestFunc(callback) {

  setTimeout(callback, 1000);

  console.log("Hello");

}

callBackTestFunc(function () {

  console.log("waited 1 second");

});

// Hello

// waited 1 second

 

화살표 함수 버전

function callBackTestFunc(callback) {

  setTimeout(callback, 1000);

  console.log("Hello");

}

callBackTestFunc(() => {

  console.log("waited 1 second");

});

// Hello

// waited 1 second

화살표 함수 역시 어엿한 함수이기에 콜백 함수로서도 얼마든지 쓰일 수 있다.