let func = (arg1,ar2,..argN) =>expression
이렇게 코드를 작성하면 인자 arg1...argN를 받는 함수 func이 만들어집니다. 함수 func는 화살표(=>)우측의 표현식(expression)을 평하하고,평가 결과를 반환
아래의 함수 축약 버전
let func = function(arg1, arg2, ...argN) {
return expression;
};
let sum = (a, b) => a + b;
/* 위 화살표 함수는 아래 함수의 축약 버전입니다.
let sum = function(a, b) {
return a + b;
};
*/
console.log( sum(1, 2) ); // 3
let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.
console.log( double(3) ); // 6
let sayHi = () => console.log("안녕하세요!");
sayHi();
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert("안녕하세요!");
welcome();
그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.
let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
let result = a + b;
return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};
console.log( sum(1, 2) ); // 3
화살표 함수는 단순히 함수를 '짧게' 쓰기 위한 용도로 사용되지 않습니다. 화살표 함수는 몇가지 독특하고 유용한 기능을 제공
자바스크립트는 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야하는 상황
예시
이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽습니다.
그런데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있습니다. 이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리합니다.
메서드와 this 챕터에서 화살표 함수엔 this가 없다는 것을 배운 바 있습니다. 화살표 함수 본문에서 this에 접근하면,외부에서 값을 가져옵니다.
이런 특징은 객체의 메서드(showList())안에서 동일 객체의 프로퍼티(students)를 대상으로 순회
let group = {
title: "1모둠",
students: ["보라", "호진", "지민"],
showList() {
this.students.forEach(
student => console.log(this.title + ': ' + student)
);
}
};
group.showList();
예시의 forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해집니다. 즉 this.title은 group.title과 같습니다.
위 예시에서 화살표 함수 대신 '일반' 함수를 사용했다면 에러 발생
let group = {
title: "1모둠",
students: ["보라", "호진", "지민"],
showList() {
this.students.forEach(function(student) {
console.log(this.title + ': ' + student)
});
}
};
group.showList();
//undefined: 보라
//undefined: 호진
//undefined: 지민
이런 특징은 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용됩니다.
아래 예시에서 데코레이터 defer(f, ms)는 함수를 인자로 받고 이 함수를 래퍼로 감싸 반환하는데, 함수 f는 ms 밀리초 후에 호출됩니다.
function defer(f, ms) {
return function() {
setTimeout(() => f.apply(this, arguments), ms)
};
}
function sayHi(who) {
console.log('안녕, ' + who);
}
let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("철수"); // 2초 후 "안녕, 철수"가 출력됩니다.
function defer(f, ms) {
return function(...args) {
let ctx = this;
setTimeout(function() {
return f.apply(ctx, args);
}, ms);
};
}
위 내용은 javascript.info사이트에서 공부한 내용 정리
자세한 내용은 아래 링크를 참고하세요
https://ko.javascript.info/arrow-functions-basics