1. 화살표 함수 사용법
2. 화살표 함수의 this
화살표 함수는 es6에서 나온 문법이며, function을 사용하여 함수를 만드는 것보다 간단하게 함수를 작성할 수 있다는 장점이 있다. 화살표 함수의 특징을 보자면 아래와 같다.
- this, super에 대해 바인딩할 수 없다.
- 메소드로 사용할 수없다.
- call, apply, bind 메소드를 사용할 수 없다.
- 생성자 함수로 사용할 수 없다.
- 항상 익명 함수이다.
1. 화살표 함수 사용법
// 매개 변수가 없는 화살표 함수
const foo = () => {
console.log("sik");
};
// 매개 변수가 있는 화살표 함수
const foo = (a, b) => {
return a + b;
};
foo(1, 2) // 3
// return이 없는 경우
const foo = (a, b) => {
a + b;
};
foo(1, 2) // undefined
// 콜백 함수
const nums = [1, 2, 3, 4, 5];
const makeArr = nums.map( x => x + 1);
console.log(makeArr); // [2, 3, 4, 5, 6]
2. 화살표 함수의 this
일반함수의 this는 함수를 호출하는 방식에 의해 값이 정해졌는데 화살표 함수의 this는 선언되는 시점에서 결정되며, 상위 스코프의 this를 가리킨다. 이러한 이유 때문에 화살표 함수를 메소드로 사용할 수 없다.
const name = 'Park';
const test1 = {
name: 'Kim',
printName: function() {
console.log(this.name);
}
};
// 일반 함수는 호출되는 방식에 따라 this값이 정해짐 test1을 통해 호출했으므로 this = test1
test1.printName(); // 'Kim'
--------------------------------------------------------------------------------
window.name = "Sik"
const test2 = {
name: 'Lee',
printName: () => {
console.log(this.name);
}
};
// 화살표 함수는 선언되는 시점에서 this가 결정되고 상위 스코프의 this를 가리기키 때문에
// window객체에 있는 name을 가리킨다. 이러한 이유때문에 화살표함수는 메소드로 사용 불가하다
test2.printName(); // 'Sik'
'study > JavaScript' 카테고리의 다른 글
Js - this에 대하여 (0) | 2023.03.08 |
---|---|
Js - 자바스크립트 동작 원리(런타임 환경) (0) | 2023.02.20 |
Js - 불변성(immutability) React와 Vue의 불변성 차이 (0) | 2023.02.15 |
Js - 어휘적 환경(Lexical Environment)과 클로저(Closure) (0) | 2022.11.18 |
Js - 스코프(Scope) (0) | 2022.11.17 |