CodeStates

IM 2일차 (ES6 문법)

Juveloper 2021. 1. 12. 22:19

오늘 배운 것 : 화살표 함수, 구조 분해 할당, 실행 콘텍스트에 따른 this의 5가지 값, call/apply/bind 메서드

 

1. 화살표 함수

 

  프리 코스 때부터 의도적으로 쓸려고 노력해서 크게 어렵지 않았다. 무난하게 과제를 수행할 수 있었음.

  코드가 길어지면 {}가 필요한데 이때 명시적으로 return을 해줘야 한다는 점만 주의하면 됨!

 

 

 

2. 구조 분해 할당

 

  rest/spread syntax와 함께 중첩된 객체를 구조 분해하는 경우를 제외하곤 괜찮았다.

  또한 하나의 객체가 다른 객체에서 rest parameter로 들어가 있는 경우 만약 같은 key를 가진 property가 있다면

  뒤에 나온 property가 앞에 있는 property를 덮어 씌우게 된다!

 

 

 

3. this

 

  조금 헷갈리긴 했지만 그래도 괜찮았다. 익숙해지면 괜찮을 것 같다. 그래도 개념은 다시 한번 정리하고 가야 할 것 같다.

 

  this는 함수 실행 시 호출(invocation) 방법에 의해 결정되는 특별한 객체다.

  함수 실행시 결정되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다.

 

  3 - 1) 함수 실행에 따른 this의 5가지 바인딩 패턴

 

  • Method 호출 : 부모 객체 (실행 시점에 온점 왼쪽에 있는 객체), 중첩된 객체가 있더라도 바로 본인의 부모를 가리킴.
  • new 키워드를 이용한 생성자 호출 : 이 때는 new 키워드로 만들어진 instance가 this가 가리키는 값이 된다.
  • . call 또는. apply 호출 : 첫 번째 인자로 전달된 객체, 즉 사용자가 명시적으로 this 값을 주어야 함!
  • Global : 브라우저의 경우 -> window (strict mode에서는 undefined) 객체, node.js -> module.exports
  • function 호출 : 브라우저 -> window (strict mode에서는 undefined) 객체, node -> global

  global, function 호출의 경우 애초에 this를 사용하지 않을 것을 권고.

 

 

 

4. .call/.apply/.bind 메서드

 

  .call, .apply, .bind는 this값을 명시적으로 지정하고 싶을 때 사용한다.

  .call과 .apply는 매우 유사하다. 지정된 this 콘텍스트와 추가적인 인수를 사용하여 함수를 호출한다.

  .call과 .apply의 유일한 차이점은 .call은 인수를 하나씩 전달해야하며 .apply는 인수를 배열로 취한다는 것이다.

 

  예시를 통해 알아보자.

 

  4 - 1) .call, .apply

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}

function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}

summary()

    summary 함수와 객체 book은 어떠한 connection이 없다.

    때문에 summary를 호출하면 전역 객체에서 해당 속성을 찾을 때 undefined가 나타날 것이다.

 

    그러나 call 및 apply를 사용하여 함수에서 객체 book의 this 콘텍스트를 호출할 수 있다.

summary.call(book)
// or:
summary.apply(book)

//"Brave New World was written by Aldous Huxley."

    이러한 방법을 적용하면 이제 객체와 함수가 연결된다.

    그리고 this 값은 우리가 명시적으로 전달해준 객체 book이 된다.

 

    두 개의 메서드의 차이점은 위에서 언급했듯이 call은 추가적인 인수를 하나씩 받는 반면 apply는 배열에 모두 담아 전달해야 한다.

 

 

 

  4 - 2) .bind

 

    call과 apply는 모두 일회성 사용 방법이다.

    this 콘텍스트를 사용하여 메서드를 호출하면 그대로 유지되지만 원래 함수는 변경되지 않는다.

    때로는 다른 객체의 this 콘텍스트와 함께 메서드를 반복해서 사용해야 할 수 있다.

    이 경우 bind 메서드를 사용하여 명시적으로 바인딩된 새로운 함수를 만들 수 있다.

 

    마찬가지로 예시를 통해 알아보자.

const braveNewWorldSummary = summary.bind(book)

braveNewWorldSummary() // Brave New World was written by Aldous Huxley.

const book2 = {
  title: '1984',
  author: 'George Orwell',
}

braveNewWorldSummary.bind(book2)

braveNewWorldSummary() // Brave New World was written by Aldous Huxley.

    이 예에서는 braveNewWorldSummary를 호출할 때마다 항상 바인딩된 원래 this 값을 반환한다.

    새로운 this 콘텍스트를 바인딩하려는 시도는 실패하므로 항상 바인딩된 함수를 신뢰하여 예상한 this 값을 반환할 수 있다.

    

 

 

*참고 : dev.to/digitalocean/understanding-this-bind-call-and-apply-in-javascript-dla

저작자표시 (새창열림)