week08 QUIZ

[damdam6]

1. this가 무엇인가? 자바스크립트에서 어떤식으로 바인딩 되는지 설명하시오.

2. this 바인딩의 동적 결정을 예시 코드를 들어 설명하시오.

3. 다음 코드에서 'this'에는 무엇이 바인딩 되는가?

function getThisBinding(){
return this;
}

const thisArg = { a : 1 };

console.log(getThisBinding());
console.log(getThisBinding.apply());
console.log(getThisBinding.call());

console.log(getThisBinding.bind(thisArg));
console.log(getThisBinding.bind(thisArg)());

4. 자바스크립트에서 소스코드의 평가와 실행이 어떻게 다른지 설명하고, 자바스크립트 엔진의 작동 순서를 설명하세요.

5. 실행 컨테스트 스택과 렉시컬 환경을 구분하고, 각각의 정의를 설명하시오.

[gabalja]

1. this가 무엇인가? 자바스크립트에서 어떤식으로 바인딩 되는지 설명하시오.
   : this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 변수로, js에서 바인딩 되는 방식은 일반 함수 호출, 메서드 호출, 생성자 함수 호출, Function.prototype의 메서드인 apply/call/bind 호출로 나뉩니다.
2. this 바인딩의 동적 결정을 예시 코드를 들어 설명하시오.
   : 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스에 바인딩됩니다.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// 반지름이 5인 Circle 객체를 생성
const circle1 = new Circle(5);
// 반지름이 10인 Circle 객체를 생성
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

3. 다음 코드에서 'this'에는 무엇이 바인딩 되는가?
   : console.log(getThisBinding())은 전역 객체에 바인딩되고, console.log(getThisBinding.apply()), console.log(getThisBinding.call())에서는 thisArg에 바인딩되고, console.log(getThisBinding.bind(thisArg))은 전역 객체에, console.log(getThisBinding.bind(thisArg)())은 thisArg에 바인딩됩니다.
4. 자바스크립트에서 소스코드의 평가와 실행이 어떻게 다른지 설명하고, 자바스크립트 엔진의 작동 순서를 설명하세요.
   : 평가 과정에서는 실행 컨텍스트 생성, 변수, 함수 (선언문) 실행, 생성된 식별자를 실행 컨텍스트가 관리하는 스코프에 등록하는 과정이 있고, 그 후 소스코드가 순차적으로 실행됩니다. 소스코드 실행에 필요한 정보는 (변수 등) 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득하고, 소스코드의 실행 결과 (변수값 변경 등)를 실행 컨텍스트가 관리하는 스코프에 등록하게 됩니다.
5. 실행 컨텍스트 스택과 렉시컬 환경을 구분하고, 각각의 정의를 설명하시오.
   : 자바스크립트 엔진이 코드를 실행하게 되면 전역코드를 평가하여 전역 실행 컨텍스트를 생성하고, 이후 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성하게 됩니다. 이는 스택 자료구조로 관리되는데 이를 실행 컨텍스트 스택이라 부릅니다. 각 실행 컨텍스트 안에는 렉시컬 환경이 있는데, 환경 레코드(현재 실행중인 코드 환경의 this값과 선언된 모든 변수와 함수가 저장되는 곳)과 외부 렉시컬 환경(외부 렉시컬 환경의 참조값)으로 이루어져 있습니다.

[hunteac]

1. this는 현재 실행 중인 함수에 바인딩된 객체를 가리키는 키워드다. 함수가 어떻게 호출되는지에 따라 this가 가리키는 대상이 동적으로 결정된다.

2. 아래 예시에서 greet 함수가 호출될 때, this는 호출 방식에 따라 동적으로 결정된다. Person.greet()의 경우 this는 Person을 가리키고, otherPerson.greet()의 경우 this는 otherPerson를 가리킨다.

const Person = {
  name: 'hunteac',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Alice'
};

Person.greet(); // 출력: "Hello, hunteac!"
otherPerson.greet = Person.greet;
otherPerson.greet(); // 출력: "Hello, Alice!"

3. 처음 세 개의 console.log에서는 getThisBinding() 함수가 일반적인 함수 호출이므로 this는 전역 객체인 Window 또는 global object에 바인딩된다. 다음 두 개는 bind 메서드를 사용하여 thisArg 객체에 바인딩한 새로운 함수를 생성한 후 호출하면 this는 thisArg 객체를 가리킨다.

4. 평가 단계에서는 변수 및 함수 선언을 메모리에 등록한다. 이 단계에서는 변수와 함수의 존재가 확인되고, 적절한 스코프에 위치시킨다. 변수에 할당된 값이나 함수의 본문은 아직 실행되지 않는다.
   실행 단계에서는 코드가 한 줄씩 실행되면서 변수에 값이 할당되고, 함수가 호출된다. 이 단계에서는 실제로 코드가 실행되어 기능이 동작한다.

5. 실행 컨텍스트는 코드가 실행될 때 생성되는 환경 정보를 담고 있는 객체다. 함수 실행, 전역 코드 실행 등과 같은 실행 컨텍스트가 생성될 때마다, 컨텍스트는 스택에 쌓인다.
   렉시컬 환경은 변수와 함수의 식별자를 값에 바인딩하고, 스코프 체인과 같은 정보를 포함하는 객체다. 스코프 체인은 중첩된 스코프에서 변수 및 함수에 접근할 수 있는 방법을 제공한다. 렉시컬 환경은 화살표 함수에서 외부 스코프의 this를 캡처하는 등, 클로저와 관련된 중요한 역할을 한다.

[sgryu23]

1. this가 무엇인가? 자바스크립트에서 어떤식으로 바인딩 되는지 설명하시오.

• this는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있는 키워드이다.
• this는 함수가 호출되는 방식에 따라 바인딩 되는 대상이 달라진다.
  1. 일반 함수 호출 시 기본적으로 전역 객체가 바인딩된다.
  2. 메서드 호출을 할 경우, 마침표 연산자 앞에 기술한 객체가 바인딩된다.
  3. 생성자 함수를 호출할 경우 미래에 생성되는 인스턴스가 바인딩된다.
  4. 화살표 함수는 this가 없기 때문에 선언될 시점의 상위 스코프가 바인딩된다.

2. this 바인딩의 동적 결정을 예시 코드를 들어 설명하시오.

• 콜백함수에서 this 바인딩의 동적 결정 예시

var value = 1;

const obj = {
    value = 100;
    foo() {
        console.log(this);  // {value: 100, foo: f}
        
        // 콜백함수의 내부의 this에는 전역 객체가 바인딩된다.
        setTimeout(function() {
            console.log(this);  // window
            console.log(this.value);  // 1
        }, 1000)
    }
};

// 메서드로 호출
obj.foo();

3. 다음 코드에서 'this'에는 무엇이 바인딩 되는가?

function getThisBinding(){
return this;
}

const thisArg = { a : 1 };

// 1. 전역 객체를 가리킵니다.
console.log(getThisBinding());  // window
// 2. `apply()` 메서드는 첫 번째 인자로 `this`에 바인딩할 객체를 받는데 인자가 없으므로 전역 객체에 `this`가 바인딩됩니다.
console.log(getThisBinding.apply());  // window
// 3. `call()` 메서드는 첫 번째 인자로 `this`에 바인딩할 객체를 받는데 인자가 없으므로 2. 와 마찬가지로 전역 객체에 `this`가 바인딩됩니다.
console.log(getThisBinding.call());  // window

// 4. `bind()` 메서드를 호출만하고 반환된 새 함수를 호출하지는 않습니다. 따라서 출력 값은 바인딩된 함수 자체입니다. (함수의 복사본을 가리키는 참조)
console.log(getThisBinding.bind(thisArg));
// 5. `bind()`를 사용하여 `thisArg` 객체({a: 1})에 `this`를 명시적으로 바인딩한 새 함수를 생성하고 바로 그 함수를 호출하므로 `this`는 `{a: 1}`을 가리킨다.
console.log(getThisBinding.bind(thisArg)());  // { a : 1 }

4. 자바스크립트에서 소스코드의 평가와 실행이 어떻게 다른지 설명하고, 자바스크립트 엔진의 작동 순서를 설명하세요.

• 평가 과정에서는 실행 컨텍스트를 생성하고, 그 실행 컨텍스트에 있는 렉시컬 환경의 환경 레코드에 변수와 함수 식별자를 등록합니다. 이 평가 과정이 끝나면 순차적으로 소스 코드가 실행됩니다.
• 소스 코드가 실행되는 시간을 런타임이라고 합니다.
• 이 과정에서 필요한 변수나 함수의 참조는 실행 컨텍스트가 관리하는 스코프 체인에서 검색하여 값의 변경이 발생하면 해당 스코프 체인 자료구조의 내용을 변경합니다.

5. 실행 컨테스트 스택과 렉시컬 환경을 구분하고, 각각의 정의를 설명하시오.

• 함수를 호출한 후 호출된 함수에 실행 컨텍스트를 생성합니다.
• 이를 실행 컨텍스트 스택에 push합니다.
• 그 후 본인의 렉시컬 환경을 생성합니다.
• 코드의 실행이 끝나면 실행 콘텍스트 스택에서 해당 콘텍스트를 pop하여 제거합니다.

실행 컨텍스트 스택: 실행 컨텍스트가 관리되는 자료구조를 의미합니다.
렉시컬 환경: 함수 본인 내부의 식별자 그리고 식별자에 바인딩 된 값 등을 기록하고 있는 자료구조입니다.