arrow function
은 es6에서 추가된 새로운 함수 표현방법이다.
//ES5 - 일반 함수
function() {}
//ES6 - arrow function
() => {}
//ES5 - 일반 함수
function getName() {}
//ES6 - arrow function
const getName = () => {}
두 함수 모두 동일한 방법으로 호출 할 수 있다.
getName()
ES6의 arrow function은 함수를 이미 getName
이라는 변수에 저장한다.
ES5의 함수도 getName
이라는 변수에 저장이 가능하다.
//ES5 - Function Expression
const getName = function() {}
ES6의 arrow function은 인자가 하나일 때는 소괄호 생략이 가능하며, 인자가 두 개일 때는 괄호를 생략할 수 없다.
//ES5
const getName = function(name) {}
//ES6
const getName = (name) => {}
const getName = name => {}
//ES5
const getName = function(name, age) {}
//ES6
const getName = (name, age) => {}
//ES5
function hi(text) {
text += '하세요';
return text;
}
//ES6
const hi = text => {
text += '하세요';
return text
};
ES6의 arrow function은 실행내용없이 return만 한다면 return 키워드와 중괄호가 생략가능하다. 화살표 오른쪽에는 리턴될 "값"만 써야 한다.
example 1)
//ES5
function getName(name) {
return name;
}
//ES6
const hi = name => { return name };
const hi = name => name;
example 2)
//ES5
function getFullName(first, family) {
return first + family;
}
//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;
ES는 ECMA Script의 줄임말로, ECMA Script는 JavaScript를 표준화 시키려고 탄생했다. 현재는 ES10 버전 까지 나왔으며, 현재 주로 쓰이는 것은 ES6이며, ES6은 버전 이름이고 ES 2015라고도 한다.
1) ES5 > ES6 로 변환
//ES5
function welcome(name){
return "안녕하세요" + name
}
welcome(name);
//ES6
const welcome = name =>
{
return "안녕하세요" + name
};
welcome(name);
1) ES6 > ES5 로 변환
//ES6
const handleBio = (nickname, bio) => {
const user = {
nickname : nickname,
bio : bio,
};
return user
};
handleBio(nickname, bio);
//ES5
function handleBio (nickname, bio){
const user = {
nickname : nickname,
bio : bio
}
return user;
}
handleBio(nickname, bio);