arror function은 함수를 표현하는 새로운 방식으로 자바의 lambda 식을 생각하면 되겠다.
arrow function
arrow function을 이용한 간편한 함수 선언 가능
arrow 표현식은 자바의 람다와 마찬가지로 함수 선언을 간단히 할수 있게 도와주는데 다음과 같은 간단한 규칙이 있다.
function 키워드는 생략하고 => 로 대체 한다.
구현부가 하나의 문장일 경우 {} 를 생략할 수 있다.
실행문이 return 문장 하나로 구성된 경우 {}와 함께 return 을 생략할 수 있다.
파라미터가 하나인 경우 ()를 생략할 수 있다.
arrow 표현식의 작성 예
전달된 이름을 반환하는 함수를 전통의 방식과 arrow 표현식으로 작성해보자.
let func = function (name) {
return "안녕 " + name;
};
console.log(func("kim"));
let func2 = (name) => "안녕 " + name;
console.log(func2("jang"));
arrow 함수를 통해서 객체를 반환할 때는 주의가 필요하다. 다음 함수 표현식을 살펴보자.
let myarrow = ()=> {return {}};
작성 의도는 myarrow가 호출될 때 그냥 빈 객체를 반환하려는 것이다. 한줄 뿐이므로 함수 body를 나타내는 중괄호를 생략하고 return 문장 하나로 구성되므로 그것도 역시 생략할 수 있다.
그래서 작성된 arrow 표현식은 다음과 같다.
let myarrow = ()=> {};
그런데 위 표현식을 해석하는 컴파일러는 { }를 함수의 {} 로 해석할 까? 아니면 객체의 {} 로 해석할까? 애매한 상황이 되어버린다.
따라서 위와 같이 arrow 표현식에서 객체를 반환할 때는 반환되는 객체를 ()로 묶어주어야 한다.
let myarrow = ()=>({});
콜백 함수에 찰떡궁합
arrow 함수는 특히 callback 함수에서 그 간결성이 두드러진다. 다음은 sort 함수의 callback으로 일반 함수와 arrow 함수를 전달했을 떄의 차이점이다.
function Person(name, age) {
this.name = name;
this.age = age;
}
let arr = [new Person("hong", 30),
new Person("jang", 20),
new Person("henry", 40)];
arr.sort(function (a, b) {
return a.age - b.age;
});
arr.sort((a, b) => (a.name > b.name ? 1 : -1));
forEach 함수는 배열 요소를 하나씩 순회하면서 사용할 수 있다.
arr.forEach((item) => console.log(`이름은 ${item.name}, 나이는 ${item.age}이다.`));
arrow 함수와 this
javascript에서 가장 어려운 점 중의 하나는 this에 대한 이해이다.
다행스럽게도 arrow 함수는 this를 따로 binding 하지 않고 선언된 문맥의 this를 그대로 가져간다.
function User() {
this.name = "hong";
this.normalFunc = function () {
// 함수 호출의 결과 생성된 this 확인
console.log("normal", this, this.name);
// setTimeout의 callback은 window가 호출하므로 this는 window 객체이다.
setTimeout(function () {
console.log("normal/normal-settimeout ", this, this.name);
}, 1000);
// arrow 함수에서는 this를 따로 바인딩 하지 않고 선언된 scope의 this 즉 User를 가져간다.
setTimeout(() => {
console.log("normal/arrow-settimeout ", this, this.name);
}, 1000);
};
}
const user = new User();
user.normalFunc();
특히 Vue 처럼 생성자 함수 내에서 다른 함수를 정의해야하는 상황에서 arrow 함수를 사용하면 this가 외부 객체에 고정되어 상당히 편리하다.