화살표 함수(Arrow Function)
// es6 이전
function(){
}
// es6 이후
() => {}
function(){}; 이렇게 생긴 함수를 () => ; 화살표로 구문을 짧게 표현할 수 있다.
//es6 이전
var add = function (x, y) {
return x + y;
}
console.log(add(2, 10));
//es6 이후
const add2 = (x, y) => x + y;
console.log(add2(2, 10));
화살표 함수는 함수 이름을 쓸 수 없다. 핸들링 하기 위해 변수에 넣어서 사용하면 된다.
//es6 이전
var newArr = [1, 2, 3, 4, 5].map(function (value) {
return value * 2;
});
console.log(newArr); //[2,4,6,8,10]
//es6 이후
let newArr2 = [1, 2, 3, 4, 5].map((v) => v * 2);
console.log(newArr2); //[2,4,6,8,10]
- 화살표함수에서는 return 값 생략 가능
- this, arguments, super, new()를 사용할 수 없음
- 항상 익명 함수임
let arrFunc = (...args) => { console.log(args) };
arrFunc(1, 2, 3) //[1,2,3]
화살표 함수의 this는 this를 사용하고 있는 상위 스코프 체인 순서 대로 (중괄호 기준) 아래 hoisting 기초, spread operator 참고
인자값으로 ...args(펼침 연산자)를 사용하면 배열로 받아올 수 있다.
2021/01/04 - [웹/JavaScript] - ES6 배열. spread operator 펼침연산자 ...arr, Array.from
2020/08/25 - [웹/JavaScript] - var let const, hoisting 기초
'웹 > JavaScript' 카테고리의 다른 글
ES6. Class 클래스 (0) | 2021.01.19 |
---|---|
ES6. rest parameter, spread operator 차이 (0) | 2021.01.18 |
인수 매개변수 파라미터(parameter) 아규먼트(argument) 차이 (0) | 2021.01.16 |
ES6. Template(`) 백틱 tagged template literals (0) | 2021.01.16 |
ES6. map (0) | 2021.01.11 |
댓글