화살표 함수에 대하여

Dorogono·2022년 5월 9일
0

JS 알아보기

목록 보기
9/19
post-thumbnail

화살표 함수는 정말 간단하다.

let pow = function (x) { return x * x; };

let pow = (x) => x * x;

function 8글자를 더 치지 않아도 되고, 깔끔해진다.

하지만, 편하고 간단하다고 무턱대도 쓰면 안 된다.

let whatIsThis = () => {
  console.log(this); // window
};

위 코드와 같이 this가 일반 함수 선언식과는 다르게 작동한다.

화살표 함수this에 바인딩할 객체가 동적으로 결정된다는 것을 뜻한다.

크게 문제될 것은 아니지만, 이 특성때문에 화살표 함수로 된 class와 같은 생성자 함수로는 사용하지 못한다는 걸 의미한다.

// 화살표 함수
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

// 일반 함수
const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

// 화살표 함수 프로토타입
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);

person.sayHi(); // Hi undefined

// 일반 함수 프로토타입
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi Lee

화살표 함수의 this = 상위 객체를 가리키고 있기에 적용이 되지 않는다.

그래서 콜백 함수 혹은 간단히 함수를 표현하고 싶을 때만 사용하는 것이 좋다고 생각한다.

다른 생성자 함수와 같이 this가 들어가야 할 곳은 되도록이면 사용하지 않는 편이 좋다.

profile
3D를 좋아하는 FE 개발자입니다.

4개의 댓글

comment-user-thumbnail
2022년 5월 9일

자바스크립트를 처음 배웠을 때 신기했던 문법 중 하나가 화살표 함수였는데, 아무것도 모르고 화살표 함수로 this를 사용했다가 오류가 났던 경험이 생각나네요 ㅎㅎ 코드가 간단해져서 너무 편하지만 개념을 잘 모르고 사용하면 위험하니 숙지해두는 게 중요할 것 같네요 ㅎㅎ 오늘도 수고하셨습니다 🤗🤗

답글 달기
comment-user-thumbnail
2022년 5월 9일

화살표함수를 늘 사용하지만 this와 관련된 내용은 처음 접하네요. 새로 조심해야할 점을 알게되어서 좋습니다!👍

답글 달기
comment-user-thumbnail
2022년 5월 9일

화살표의 이런 특성 때문에 this를 많이 사용하는 자료구조 강의 특성상 사용을 하지 않고, 저도 사용을 안하게 되는데, 선언 방식이 여러개 있다는 건 좋지만 용도에 적절한 사용방법에 대해서 항상 생각하고 사용해야겠어요. `(>﹏<)′

답글 달기
comment-user-thumbnail
2022년 5월 10일

화살표 함수를 잘 모르고 사용했었는데 this에 대한 내용을 보니 생각보다 복잡하네요🥲 어려운 자바스크립트의 세계...

답글 달기