반응형
오늘은 자바스크립트 ES6에서 추가된 주요 기능 중 화살표함수( => )에 대해 알아보겠습니다.
[ 목차 ]
1. 화살표 함수
기존의 function으로 함수를 표현하는 방식을 좀 더 간결하게 표현하기 위해 화살표( => ) 함수가 도입되었습니다. 아래의 두 함수는 모두 동일한 역할을 하는 함수입니다.
const test1 = function(a,b){
return a+b;
}
const test2 = (a,b) => {
return a+b;
};
const test3 = (a,b) => a+b;
2. 화살표 함수 주의점(this)
일반적인 자바스크립트 함수에서의 this는
- 전역 객체
- 메소드 호출시 호출한 해당 객체
를 나타냅니다.
// 일반 함수
const obj1 = {
name: '홍길동',
func1(){
console.log(this.name);
}
};
obj1.func1();
// 홍길동
const obj2 = {
name: '홍길동',
func1: function() {
const func2 = function() {
console.log(this.name);
}
func2();
}
};
obj2.func1();
// undefined위 두번째 obj2에서 this는 함수를 호출했을 때 지정되지 않았습니다. 곧 전역객체인 Window를 가리킵니다. 하지만 전역 객체 Window에 name이란 속성이 존재하지 않아서 undefined가 나타납니다.
반면 화살표 함수에는 this는 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색하고, 해당 스코프에서 없으면 다시 또 상위를 검색합니다.
// 화살표 함수
const obj2 = {
name: '이순신',
func1: function() {
const func2 = ()=> {
console.log(this.name);
}
func2();
}
};
obj2.func1(); // 이순신
javascript에서의 this는 상당히 헷갈리고 어려운 개념으로 가볍게 다루기엔 좀 부담되는 주제이긴 합니다. 자세한 사용법은 다음에 공부해서 포스팅 하도록 하고, 오늘은 이만 마치겠습니다.
(ps) 참고로 메서드 축약선언
var obj = {
foo: function() {},
bar: function() {}
};
// 이를 아래로 줄일 수 있습니다:
var obj = {
foo() {},
bar() {}
};반응형
'Programming > Javascript' 카테고리의 다른 글
| Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 (0) | 2023.06.23 |
|---|---|
| 자바스크립트 전개 연산자 (...) (0) | 2023.06.22 |
| 자바스크립트 filter 사용법 (0) | 2023.06.20 |
| 자바스크립트 Reduce사용법 (0) | 2023.06.17 |
| 자바스크립트 Map사용법 - 객체 배열(object array) 요소 변경하기 (0) | 2023.06.16 |
