본문 바로가기

Front-end/JavaScript

[JavaScript] this & argument가 없는 화살표 함수

1. 화살표 함수에는 'this'가 없다.

--> 그래서 화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다. 이 특징은 객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회를 하는 데 사용할 수 있다.

let group = {
  title: "작두팔들",
  students: ["졍", "썬", "셩"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

--> forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해짐. (group) 즉, this.title은 group.title과 같다.

**화살표 함수가 아니라 일반함수를 사용했다면 에러가 발생함

let group = {
  title: "작두팔들",
  students: ["졍", "썬", "셩"],

  showList() {
    this.students.forEach(function(student) {
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();
// this.title이 undefined이기 때문에 에러가 발생함

2. 화살표 함수엔 'arguments'가 없다.

--> 화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다. 이 특징은 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해주는 데코레이터를 만들 때 유용하게 사용됨.

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('안녕, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("철수");

((이부분도 데코레이터 나와서 이해 잘 못함;;))

--> 데코레이터 defer(f,ms)는 함수를 인자로 받고 이 함수를 래버로 감싸서 반환하는데, 아마 this가 sayHi를 가리켜서

sayHiDefeered("철수")를 넣으면 '안녕' + '철수' 가 2초 뒤에 출력되는 방식인듯....