[JavaScript] Arrow Function

[일반 함수 표현]

 

다음 코드를 실행하면,

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

console.log(getTwice(5));

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

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

10 이 출력된다.

---

[Arrow Function 표현]

 

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

console.log(getTwice(5));

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

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

 

function 키워드를 지우고 파라미터의 소괄호 오른편에 화살표 기호를 표현하면 됨.

 

위와 똑같은 결과가 출력됨.

 

 

다른 식들과 비교해 봤을 때, 다음과 같이  Arrow function 을 사용하면 간결하게 사용할 수 있음.

const getTwice = function(number) { // 함수 선언식
  return number * 2;
};

function getTwice(number) { // 함수 표현식
  return number * 2;
}

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

console.log(getTwice(3)); // 6

 

그러나 파라미터가 두개 이상이거나 파라미터가 없을 경우 반드시 소괄호 작성을 해주어야 함.

const getTwice = number => number * 2;
// const getTwice = (number) => number * 2;

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

const getName = () => {
  return { name: '신짱구',};
};

console.log(getTwice(3)); // 6
console.log(sum(3, 2)); // 5
console.log(getName()); // { name : '신짱구' }

 

이처럼 가독성을 위해 파라미터가 한개인 경우에도 소괄호를 작성해줄수도 있음.

 

---

[객체 리턴]

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

리턴값이 객체인경우 ,

 

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

소괄호를 감싸서 표현할 수 있음.

---

[arguments]

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

const arrow = () => {
  console.log(arguments);
}

normal(1,2,3) // { '0': 1, '1': 2, '2': 3 }
arrow(1,2,3) // Error

주의할 점은, 화살표 함수에서는 아규먼트 객체가 없음.