arrow function(화살표 함수)란?
ES6에서 도입된 새로운 함수 표현 방식. 기존의 함수 표현 방식보다 구문이 간결함.
화살표 함수의 특징
1. function 키워드 없이 작성됨. 인자와 반환 값을 화살표로 구분하며, 간결한 표현으로 코드 작성 가능함.
// 기존 함수 표현
function add(a, b) {
return a + b;
}
// 화살표 함수
const arrowAdd = (a, b) => a + b;- 함수 본문이 단일 표현식인 경우 return 키워드 생략 가능함.
- 함수 본문이 단일 표현식인 경우 return 키워드 생략 가능함.
2. 일반 함수와 this 바인딩 방식의 차이가 있음.
function User() {
this.name = 'Kim';
this.sayHi = function () {
console.log('Hello, ' + this.name + ' !');
};
this.sayHiArrow = () => {
console.log(`Hello, ${this.name} !`);
};
}
const user = new User();
user.sayHi(); // Outpit: "Hello, Kim !"
user.sayHi.call({ name: 'Lee' }); // call 메서드 사용, Output: "Hello, Lee !"
user.sayHiArrow(); // Output: "Hello, Kim !"
user.sayHiArrow.call({ name: 'Lee' }); // Output: "Hello, Kim !" (상위 스코프의 this만 참조)- 일반 함수의 경우 함수가 호출 시점에서 this 값이 결정. (달라질 수 있음)
- 화살표 함수에서는 함수 정의 시점에서 결정됨. (상위 스코프의 this 값을 가리키며 자체 this 바인딩 없음.)
3. 생성자 함수를 사용할 수 없음.
// 일반 함수
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person('Kim', 10);
console.log(person1); // Output: Person { name: 'Kim', age: 10 }
// 화살표 함수
const PersonArrow = (name, age) => {
this.name = name;
this.age = age;
};
const person2 = new PersonArrow('Lee', 20); // Output: TypeError: PersonArrow is not a constructor
- this가 없기 때문에 new 연산자와 함께 사용할 수 없음.
4. arguments 없음.
// 일반 함수
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // Outpust: 6
// 화살표 함수
const sumArrow = () => {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
};
console.log(sumArrow(1, 2, 3)); // Output: 0[object Object]function require(path) { ... }
// 해결 방법
const sumArrow2 = (...args) => {
let total = 0;
for (let i = 0; i < args.length; i++) {
total += args[i];
}
return total;
};
console.log(sumArrow2(1, 2, 3)); // Output: 6- 일반 함수와 달리 화살표 함수는 자체 arguments 가 없음. 화살표 함수에서 arguments 키워드를 사용할 경우, 해당 인수는 상위 스코프에서 참조된 것으로 의도치 않은 결과 초래할 수있음.
reference
벨로그로 이사 중