객체 this 바인딩 -4

let group = {
  stdAge:30,
  ages: [23, 40, 51],
  smallList(){
    return this.ages.filter(function(val){
      return val<this.stdAge;
    });
  }
};
console.log( group.smallList() );

smallList는 객체프로퍼티에 접근하기위해 this를 사용한다.

콜백을 this가있는 일반함수로 사용하면 원하는 결과를 얻지 못한다.

일반함수는 자신의 this를 가지고 특정객체와 연결되지 않으면 전역객체와 연결되기 때문에 window객체에서 stdAge변수를 찾을 것이기 때문이다.

콜백을 일반함수로 구현하려면 this를 this로 바인딩해야 한다.
내부this를 외부this로 바인딩한다.

일반함수 바인딩

let group = {
  stdAge:30,
  ages: [23, 40, 51],
  smallList(){
    let bindFunc = function(val){
      return val<this.stdAge;
    }.bind(this);
    return this.ages.filter(bindFunc);
  }
};
console.log( group.smallList() );

화살표함수 바인딩

위에서 일반함수가 콜백으로 사용될때 자신의 코드블럭으로 인해 자신의 this를 가지게되어 부득이하게 바인딩을 해야 했다.

화살표함수는 자신의 this를 가지지 않기때문에 this는 자연히 외부함수의 this가 되므로 위와 같은 콜백에는 화살표함수가 제격이다.

let group = {
  stdAge:30,
  ages: [23, 40, 51],
  smallList(){
    return this.ages.filter(val=>val<this.stdAge);
  }
};
console.log( group.smallList() );

코드가 간소화되고 가독성또한 높아졌다.