Arrow Function

화살표 함수 (Arrow Function)

- 이름이 없는 익명 함수

- 이름을 가진 변수에 할당하거나 다른함수에 Argument를 선언할때 주로 사용

- argument 객체가 없음

const getTwice = function(number) {
  return number * 2;
};

console.log(getTwice(5)); // 10

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', function() {
  console.log('button is clicked!');
}

 

Arrow Function으로 바꾸기

- function 삭제

- 소괄호 () 오른쪽에 => 추가

const getTwice = (number) => {
  return number * 2;
};

console.log(getTwice(5)); // 10

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
}

 

- 더 간결하게 Arrow Function 생성가능

// 기본형
const getTwice = function(number) {
  return number * 2;
};

// Function
function getTwice(number) {
  return number * 2;
}

// Arrow Function
const getTwice = number => number * 2;

console.log(getTwice(6));

 

* 파라미터가 1개인 Arrow Function일 경우

// Arrow Function 기본형
const getTwice = (number) => {
  return number * 2;
};

console.log(getTwice(3));

 

- 파라미터를 감싸는 소괄호를 생략가능

// Arrow Function 소괄호 생략가능
const getTwice = number => {
  return number * 2;
};

console.log(getTwice(3));

- return 키워드도 생략가능

// Arrow Function return 생략가능
const getTwice = number => return number * 2;

console.log(getTwice(3));

 

QUIZ

다음 중 아래 코드를 화살표 함수로 올바르게 변환한 보기를 선택해주세요.

const getObject = function(a, b, c) {
  return {0: a, 1: b, 3: c};
}

const getObject = (a, b, c) => ({0: a, 1: b, 3: c});