6.10 화살표 함수 다시 살펴보기

📢 화살표 함수는 단순히 함수를 짧게 쓰기 위한 용도로 사용되지 않는다. 독특하고 유용한 기능을 제공한다. 

 

◾️ 멀리 떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황

◾️ 예시

• arr.forEach(func) - func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행된다. 
• setTimeout(func) - func는 내장 스케줄러에 의해 실행된다.

◾️ 함수를 어딘가에 전달하게 되면 함수의 컨텍스트를 읽을 수 있다. ➡️ 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않는다. 

 

 

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

◾️ 화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다. 

let group = {
  title: '1모둠',
  students: [ '시목', '여진', '동재' ],
  
  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList(); // 1모둠: 시목, 1모둠: 여진, 1모둠: 동재

◾️ forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해진다. 

➡️ this.title 와 group.title과 같다. 

◾️ 화살표 함수 대신 일반 함수를 사용하면  forEach에 전달되는 함수의 this가 undefined이기 때문에 에러가 발생한다. 

let group = {
  title: '1모둠',
  students: [ '시목', '여진', '동재' ],
  
  showList() {
    this.students.forEach(function(student){
    	// TypeError: Cannot read property 'title' of undefined
      student => alert(this.title + ': ' + student)
    });
  }
};

group.showList(); // undefined: 시목, undefined: 여진, undefined: 동재

◾️ 화살표 함수는 this자체가 없기 때문에 에러가 발생하지 않는다. 

 

⚠️ 화살표 함수는 new와 함께 실행할 수 없다. 

this가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약이 있다. 화살표 함수는 new와 함께 호출할 수 없다. 

ℹ️ 화살표 함수 vs. bind

화살표 함수와 일반 함수를 .bind(this)를 사용해서 호출하는 것 사이에는 미묘한 차이가 있다. 
◾️ .bind(this)는 함수의 한정된 버전(bound version)을 만든다. 
◾️ 화살표 함수는 어떤 것도 바인딩 시키지 않는다. 화살표 함수엔 단지 this가 없을 뿐이다. 화살표 함수에서 this를 사용하면 일반 변수 서칭과 마찬가지로 this의 값을 외부 렉시컬 환경에서 찾는다. 

 

 

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

◾️ 화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다. 

➡️ 현재 this값과 arguments 정보를 함께 실어 호출을 포워딩 해 주는 데코레이터를 만들 때 유용하게 사용된다.

 

◾️ 데코레이터 defer(f, ms)는 함수를 인자로 받고 이 함수를 래퍼로 감싸 반환하는데, 함수 f는 ms밀리초 후에 호출된다. 

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

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

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred('suzu'); // 2초후 'Hi, suzu'가 출력됨

 

◾️ 일반함수로 동일한 기능을 하는 데코레이터 함수 

◾️ 일반함수에선 setTimeout에 넘겨주는 콜백 함수에서 사용할 변수 ctx와 args를 반드시 만들어줘야 한다. 

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function () {
      return f.apply(ctx, args);
    }, ms);
  };
}

 

📝 요약

◽️ 화살표 함수가 일반 함수와 다른 점 
     ◽️ this를 가지지 않는다. 
     ◽️ arguments를 지원하지 않는다.
     ◽️ new와 함께 호출할 수 없다. 

◽️ 화살표 함수는 컨텍스트가 있는 긴 코드보다는 자체 컨텍스트가 없는 짧은 코드를 담을 용도로 만들어졌다.

 

 

---

📝 오늘 새롭게 배운 내용 📝

 

✅ 화살표 함수는 this를 가지지 않았구나....

✅ function을 쓰는게 귀찮아서 단순히 화살표함수가 만들어진 줄 알았는데

본래는 자체 컨텍스트가 없는 짧은 코드를 담을 용도로 만들어졌다.

✅ 메소드 함수가 아닌 곳에 가장 적합하다 → 생성자로서 사용할 수 없다. 

✅ 화살표 함수는 항상 익명이다. 

 

 

📌 [JAVASCRIPT_INFO 화살표 함수 다시 살펴보기]

화살표 함수 다시 살펴보기

 

📌 [MDN 화살표 함수]

화살표 함수