[TIL-20] arrow function

ES6부터 추가된 arrow function에 대해 공부해보았다.

arrow function

• ES6버전에서 추가된 함수 표현식이다.

// ES5
function() {}

// ES6
() => {}

//======================

//ES5
function getName() {}

//ES6
const getName = () => {}

호출

• 호출 방식은 동일하다.

getName();

• 변수에 저장할 수 있다. (원래 function키워드를 사용한 함수도 당연히 변수에 저장 가능)

//ES5
//Function Declaration
function getName() {}

//ES5
//Function Expression
const getName = function() {}

• 인자를 받을 수 있다.
• 인자가 하나일 때는 소괄호를 생략할 수 있다.
• 인자가 두개 이상이면 소괄호를 반드시 써야 한다.

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

return

//ES5
function sayHi(text) {
  text += '하세요';
  return text;
}

//ES6
const sayHi = text => { 
  text += '하세요';
  return text 
};

• return 이외의 로직이 없으면 return 키워드와 중괄호를 생략할 수가 있다.
• 이 경우에는 화살표 오른쪽에 리턴될 값만 작성한다.

//ES5
function introduce(name) {
  return "제 이름은 " + name + "입니다.";
}

//ES6
const introduce = name => {
  return "제 이름은 " + name + "입니다.";
};
const introduce = name => "제 이름은 " + name + "입니다.";

//==================================================================

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const getFullName = (first, family) => { 
  return first + family 
};
const getFullName = (first, family) => first + family;

계속 function 키워드만 사용하다보니 눈에 잘 들어오지 않는다.. 앞으로 자주 사용해봐야겠다.