기반을 다지자 ES6

화살표 함수

Jungsoomin :) 2020. 10. 1. 18:44

화살표함수

화살표 함수를 처음 접했을때는 람다(lamda) 와 같을지도 모르겠다.. 하고 조심스레 생각했다. 자바의 람다는 함수형 인터페이스에 제공되기 때문에, 분명 자바스크립트는 더 놀라울거야, 하고 기대하며 보냈다.

 

  • 매개변수가 하나라면 소괄호는 생략된다.
  • 본문이 한줄이라면 return 문과 중괄호는 생략된다.
  • 중괄호가 존재한다면 return 문도 존재해야한다.

자바에서 사용해왔던 람다의 특성을 그대로 가지고있다.

 

//

const add = function add(num1, num2){
	return num1 + num2;
}

// 화살표 함수 : 익명함수
//(매개변수) => { 본문, 리턴문 }

// 매개변수가 하나라면 소괄호 생략 가능
// 본문이 한 줄이라면 중괄효 생략 가능
// 중괄호 생략시 리턴문 생략 가능

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

console.log(arrowAdd(10,3));

const arrowAdd1 = (num1,num2) => {return num1 + num2}

console.log(arrowAdd1(5,2));

// 매개변수 하나라면 소괄호는 생략가능하다.

const arrowPow = num1 => num1 * num1;

console.log(arrowPow(5));

// 숫자를 인자로 받아 0 보다 크면 그 숫자를 리턴, 같거나 작다면 0을 리턴
const checkNum = num => (num > 0) ? num : 0;

console.log(checkNum(5));

 


자바스크립트의 화살표함수는 콜백함수의 가독성을 높인다는데에 있다.

  • 저번에 작성해본 콜백함수보다 더더더 가독성이 좋다.

얼핏보면 람다와 완전히 같아보여도, 자바스크립트의 this 를 자동적으로 binding 해준다는 것에 엄청난 파괴력을 갖는 데에 정말 이견이 없을 정도인 것 같다.

// 익명함수를 콜백으로 넘기는 중
setTimeout( () => console.log('Hello'), 3000);

 

'기반을 다지자 ES6' 카테고리의 다른 글

JS 코드 스타일  (0) 2020.10.01
배열의 정체와 길이  (0) 2020.10.01
템플릿 리터럴  (0) 2020.10.01
Let, Const  (0) 2020.10.01
CallBack  (0) 2020.10.01