[자바스크립트 js] Arrow Function / 화살표 함수

• ES2015에서 새롭게 등장했다.
• 기존의 함수선언 방식을 보다 간결하게 만들어준다.
• arguments 객체가 없다.
  arguments 객체를 사용하는 함수라면 arrow function 사용 불가.
• rest parameter를 사용하거나, 파라미터의 기본값을 지정하는 방식들은 대부분 화살표 함수로 변환 가능하다.
• 익명함수라서 이름을 가질 수 없다.
• this를 사용할 경우, this의 값은 일반함수처럼 호출한 대상에 따라 상대적으로 변하지 않는다.
  arrow function이 선언되기 직전에 유효한 this 값과 똑같은 값을 가지고서 동작한다.
• 메소드를 만들 때 this에 메소드로 호출한 객체를 가리키고 싶다면, arrow fucntion 보다는 일반 함수를 사용해야 한다.

 

  파라미터가 하나일 때, 기존 방식

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

funtion getTwice(number) {
	return number * 2;
};

console.log(getTwice(3));

 

 

 

  파라미터가 하나일 때, arrow function

• 파라미터의 소괄호 생략 가능하다.
• 하지만, 파라미터라는 것을 정확히 나타내기 위해 소괄호를 그대로 쓰자는 의견도 있다.
• 내부의 내용이 retrun 내용만 있다면, 중괄호와 return도 생략 가능하다. (그 외에 다른 내용 있으면 생략 불가)

const getTwice = number => number * 2;

console.log(getTwice(3));

 

 

 

  파라미터가 두개 이상일 때, arrow function

• 리턴값이 객체일 때는 소괄호를 사용할 것.
• 내부의 내용이 retrun 내용만 있다면, 중괄호와 return도 생략 가능하다. (그 외에 다른 내용 있으면 생략 불가)

// return문만 있을 때
const sum = (a, b) => {
	return a + b;
};

const sum = (a, b) => a + b;


// 리턴값이 객체일 때
const sayTooktak = () => {
	return {name: 'Tooktak', };
};

const sayTooktak = () => ({name: 'Tooktak', });


console.log(sum(10, 30));
console.log(sayTooktak());


//30
//{name: 'Tooktak')

 

 

 

  콜백 함수로 활용

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