Today 요약

1. 과제

1. What I Learned?

1.1 과제

this에 대한 설명으로 올바른 것은?

① Javascript 함수 호출시 인자 외에 this만 암묵적으로 전달 받는다.

② this가 지정되지 않았다면 브라우저에서는 global 객체, node에서는 window 객체를 의미한다.

③ 콜백함수를 실행하는 메서드의 경우 this는 전역 객체에 바인딩 된다.

④ call()메소드는 apply()와 기능은 같지만 두번째 인자에서 인자대신 배열을 받는다.

정답은 1번..

2번은 브라우저에서 window 객체, node에서 global 객체를 의미

3번은 메서드의 경우 함수(메서드)를 호출하는 객체에 this가 바인딩 된다.

const obj = {
  name: 'John',
  sayHello: function () {
    console.log(`Hello, ${this.name}!`)
  }
}
setTimeout(obj.sayHello, 1000)

해당 코드를 보면 sayHello 메서드는 obj 객체에 바인딩 됩니다.

4번은 apply 메서드가 인자의 목록대신 배열을 받고, call 메서드가 인자의 목록을 받는다.

따라서 함수 호출시 this가 암묵적으로 바인딩되는 1번이 정답이라고 생각한다.

클로저와 var의 스코프로 인한 문제

다음 코드를 실행했을 때 예상되는 결과는?

클로저의 스코프 범위가 어디까지 인지 한 번 고민하기..

function setter(aryUnits) {
  for (var i = 0; i < aryUnits.length; i++) {
    var id = i + 1
    console.log(id)
    aryUnits[i] = new Object()
    aryUnits[i].getId = function () {
      return id
    }
  }
}

var ary = new Array(5)
setter(ary)

document.write(ary[3].getId())

var로 선언한 변수는 함수 스코프를 가지며, 해당 함수 스코프 내에서 선언한 변수는 함수 내부 어디서든 접근 가능 이러한 특성으로 인해 반복문에서 선언한 i 변수는 함수 내에서 클로저로 사용될 때 반복문의 마지막 값에 대한 참조를 공유하게 된다. 따라서 클로저가 모두 동일한 i를 참조하게 되어 마지막 값에 접근한다. 즉 5를 출력한다.

만약 let으로 변수를 선언하면 블록 스코프를 가지게 되기 때문에 반복문 내에서 선언한 let i 변수는 해당 반복문 블록 내에서만 유효하며, 각 반복마다 새로운 스코프가 형성되어 고유한 i 값을 가진다. 이러한 동작으로 인해 let을 사용한 경우 반복문에서 변수를 사용할 때 각 반복에서 다른 i 값을 참조하게 된다.

그렇기 때문에 let으로 선언하면 4를 출력한다. 그리고 ary[4].getId()로 접근해야 5를 출력한다.