[javascript] ES6 - 화살표 함수(Arrow function)

INTRO

---

 

개발을 진행하면서, 모호했던 javascript의 개념들을

다시 한번 정리하기 위한 포스팅이다.

 

ES6(2015)의 기능인 화살표 함수에 대해서 알아본다.

 

 

 

---

 

0. 서론

- 화살표함수는 간단히 얘기해서,

- 함수를 선언하는 방식을 보다 가독성 좋게 표현해주는 문법이다.

- 아래의 예시를 보자. 명확한 차이를 알 수 있다.

// 기존 함수 선언시
const normal = function(x) {
  return x + x;
}

// 화살표 함수 선언시
const arrow = (x) => {
  return x + x;
};

- 아래는 특징을 알아본다.

 

 

1. 익명 함수로만 사용 가능

- 화살표 함수는 익명함수로만 사용 가능해서, 익명함수의 특성을 따른다.

- 익명함수의 특징은 추후 포스팅에서 다룰 예정이나, 사실 크게 주의해야 할 사항은 없다.

- 선언 전에 사용 가능한지, 불가한지의 차이만 알아둬도 실무에서 코드를 짤 때 실수를 줄일 수 있다.

// 기명 함수(선언적 함수) 사용시
console.log(named(5)); // 10
function named(x) {
  return x + x;
}

// 익명 함수 사용시
console.log(anonymous(5)); // Cannot access 'anonymous' before initialization
const anonymous = function (x) {
  return x + x;
};

// 화살표 함수는 익명 함수로만 사용 가능
console.log(arrow(5)); // Cannot access 'arrow' before initialization
const arrow = (x) => {
  return x + x;
};

 

2. 생략할 수 있는 것들

- 화살표 함수에서는 아래의 내용들을 생략할 수 있는 특징이 있다.

(1) 매개변수가 1개일 경우 매개변수가 들어갈 공간인 소괄호()를 생략 가능.

(2) 해당 함수의 구문이 1줄로 끝난다면, 함수의 몸체가 들어가는 공간인 중괄호{}와 return 문을 생략 가능.

const skip = x => x + x; 
// 생략하지 않았을 경우 아래와 같다.
const nonSkip = (x) =>{return x+x;}

- 매개변수가 없거나 2개 이상이라면 괄호 생략이 불가하다.

 

3. 자기 자신의 this가 없고, 상위 스코프의 this를 가리킨다.

- 이 부분을 이해하는데 시간이 좀 걸렸다.

- 우선 아래와 같은 예시로 많은 블로그들에서 화살표함수의 this의 특징을 설명한다.

let arrow = {
  name: 'choi',
  func() {
    console.log(this.name); // choi (1) 객체의 프로퍼티 내 this는 객체를 가리킴
    const tempFunc = () => {
      console.log(this.name); // choi (2) '화살표'함수에서의 this 는 상위 스코프의 this.. 
    };
    tempFunc();
  },
};
arrow.func();

let normal = {
  name: 'choi',
  func() {
    console.log(this.name); // choi (3) 객체의 프로퍼티 내 this 는 객체를 가리킴
    const tempFunc = function () {
      console.log(this.name); // undefined (4) 객체 안이든 밖이든, '함수'내의 this 는 전역 객체를 가리킴...
    };
    tempFunc();
  },
};
normal.func();

- 위 예제의 (4)번의 경우를 보면, this를 사용했음에도 불구하고 choi를 가져올 수 없다.

- 그 이유는 일반적인 자바스크립트의 this는 함수 내에서 참조할 경우 전역 객체(브라우저의 경우 window)를 참조하며,

- window 객체에 name 프로퍼티가 없어 undefined가 출력되는 것이다.

 

- 반면에 화살표함수 내 this 는 상위 스코프의 this를 참조하기때문에, choi를 가져오는 모습을 볼 수 있다.

- 이러한 케이스 때문에 아래와 같이 메서드로 사용할 경우 

- 화살표함수를 사용하면 의미가 없다.

let meaningless = {
  name: 'choi',
  func: () => {
    console.log(this.name); // undefined
  },
};
meaningless.func();

- 이해하기 어려운 글을 쓰는것 같아 마음이 좋지 않다.. 

- 우선 위 내용까지만 이해해도 코드를 짤 때 실수를 많이 줄일 수 있다!

- 실제로 this 를 활용하는 순간이 오면 그 때 다시 정리해도 늦지 않다.

- 이외에도 call, bind, apply 등을 이용하여 this 를 변경 가능하나,

- 그 부분은 arrow 함수의 this에만 국한된 것이 아닌 내용이므로

- 본 포스팅이 아닌 별도의 정리가 필요하지 않나 싶다.

 

- 또한 실무에서 종종 사용되는 setTimeout, addEventListener등에서의 this 가 

- 일반 함수일 때, 화살표 함수일 때 어떻게 동작하는지에 대해서도 한번 찾아보면 좋을 것 같다.

 

마무리

es6의 화살표 함수에 대해 알아보았다.

추가적으로 화살표 함수에 대해 더 깊게 들어가면, 세세하게 많은 개념들이 등장한다.

하지만 이 포스팅에서 정리한 내용정도만 숙지하고 실제 사용해도 크게 무리가 없어보인다.

 

부족한 부분에 대해선 지속적 보완을...

 

참고 : https://poiemaweb.com/es6-arrow-function

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!