자바스크립트 화살표 함수 (=>)

오늘은 자바스크립트 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() {}
};