YoTo Blog

자바스크립트 화살표 함수

화살표 함수

화살표 함수는 함수 표현식을 간략하게 표현할 수도 있다.
화살표 함수는 this를 가지고 있지 않아, 상위 this를 그대로 사용도 가능하게 해준다.

사용방법

사용법 1

const fn01 = () => { console.log('화살표 함수')}
 
fn01();
// 화살표 함수

사용법 2

const fn02 = () => console.log('화살표 함수');
 
fn02();
// 화살표 함수

사용법 3 return이 있을 경우

const fn03 = () => { 
  return '화살표 함수';
}
 
fn03();
// 화살표 함수

사용법 4 return이 있을 경우

const fn04 = () => '화살표 함수';
 
fn04();
// 화살표 함수
// # 대괄호를 생략해도 return이 가능하다.

this

화살표 함수는 this를 가지고 있지 않다. 그러므로 상위 this를 그대로 사용할 수 있다.

this 01

const fn01 = () => console.log(this);
 
fn01();
// window 객체

this 02

const ex = {
  v: 'ex01',
  fns: function() {
    const fn02 = () => {
      console.log(this.v);
    }
    fn02();
  }
}
 
ex.fns();
// ex01

기타

화살표 함수는 함수를 간략하게도 하지만, 자바스크립트에서는 this를 좀더 효율적으로 사용할 수도 있게 해준다.
적절하게 사용한다면, 소스가 많이 간략해질 것이다.