[TIL] JavaScript: ➡ Arrow "=>"

ECMA Script 6 에서 추가된 arrow function에 대해 알아볼까요?

• => 모양이다

• ECMA Script 6(2015) 에서 만들어졌다.

• 함수를 더 간단하게 표현할 수 있는 방법이다.

• 기본 함수 표현

//ES5
function() {}


//ES6
() => {}

• 이름이 있는 함수 표현

//ES5
function getName() {}


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

// 호출은 둘 다 같음 
// getName()

• 1개의 인자를 받는 함수표현.

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


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

한개의 인자를 받을 때에는 ()를 생략할 수 있습니다.

• 2개의 인자를 받는 함수표현.
  그러나 인자가 2개 이상이면 생략할 수 없어요~!

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


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

• return하는 함수 1

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


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

• return하는 함수 2
  함수가 실행내용은 없이 return만 할 경우 키워드와 중괄호 생략 가능

//ES5
function getName(name) {
  return name;
}


//ES6
1.
name => { return name };

2.
name => name;