[Javascript] JS Engine, Event Loop, this 객체

자바스크립트 작동 원리

• 자바스크립트?
  • 싱글 스레드 기반으로 동작하는 자바스크립트
  • 이벤트 루프를 기반으로 동작하는 싱글 스레드 Node.js

 

JS Engine 종류

- 클라이언트에서 JavaScript를 실행하려면 JavaScript 엔진이 필요하다 -> 브라우저에 내장되어 있다.

- Chrome : V8

- Edge : Chakra

- Safari : Webkit

- Firefox : SpiderMonkey

 

JS Engine vs Rendering Engine

• Rendering Engine : HTML, CSS으로 작성된 마크업 관련된 코드를 웹 페이지에 rendering하는 역할
• Javascript Engine : Javascript으로 작성한 코드를 해석하고 실행하는 인터프리터

 

이벤트 핸들러

• 이벤트 : 브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건
• 핸들러 : 이벤트에 대한 즉각적인 반응을 할 수 있도록 해주는 것

 

 

JS Engine의 3가지 영역

• Call Stack
  • 하나의 call stack 사용 -> 하나의 함수가 실행되면 이 함수의 실행이 끝나기 전까지 다른 task 수행 불가
• Task Queue(event Queue)
  • JS의 런타임 환경에서 처리해야하는 Task들을 임시 저장하는 대기큐
  • call stack이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행
  • 자바스크립트에서 이벤트에 의해 실행되는 함수(핸들러)들은 비동기로 실행된다.
  • 비동기로 호출되는 함수는 call stack이 아닌 task queue에 enqueue
• heap
  • 동적으로 생성된 객체(인스턴스)는 힙에 저장된다.
• Event Loop
  • event loop와 queue를 이용해서 동시에 여러 작업이 처리되는 것처럼 비동기 작업을 수행한다.
  • 반복해서 call stack과 queue 사이의 작업들을 확인해서, call stack이 비워있는 경우 queue의 작업을 꺼내고 call stack에 넣는다.

function three() {
  console.log('3')
}

function two() {
  console.log('2')
}

function one() {
  console.log('1') // 1 출력
}

one() // one 실행

setTimeout(() => { // 익명함수는 event queue
  two()
}, 1000)

three() // three 실행

 

JS 엔진이 코드를 실행하기 위해 기동되면

1. 빌트인 객체(생성자 함수 포함) 생성

2. 실행 환경에 맞는 global 객체 생성

• browser 환경 : window 객체
• node.js 환경 : global 객체
• 자바스크립트 엔진이 소스코드를 불러와서 기동되면, 기본적인 빌트인 객체들을 만들어서 글로벌 객체(전역 객체)를 만들게 된다.
• 실행되는 환경에 따라 달라진다.

 

---

this 

• 자바스크립트의 모든 함수는 실행될 때 마다 함수 내부에 this 객체가 추가된다.
• arguments(유사 배열 객체)와 함께 함수 내부로 암묵적 전달
• 함수가 호출된 상황에 따라 this가 달라진다.

1. 객체의 메소드 호출을 할 경우

• 메소드 : 객체의 프로퍼티가 함수인 경우
• 메소드를 호출할 경우 메소드를 호출한 객체를 바인딩 -> 현재 사용하는 객체

2. 함수를 호출할 경우

• 함수 내부 코드에 사용된 this는 전역 객체에 바인딩 -> window

3. 생성자 함수를 통해 객체를 생성할 때

• new 연산자 사용
• this는 객체 자신 
  • 빈 객체 생성 -> this 바인딩 -> 함수를 통해 생성된 객체, 부모 프로토타입 객체와 연결되어 있다.
• return문이 명시되어 있지 않은 경우 this는 바인딩 된 새로 생성한 객체가 리턴된다.

var myObject = {
  name: "foo",
  sayName: function() {
    console.log(this);
  }
};
myObject.sayName();
// console> Object {name: "foo", sayName: sayName()}

var value = 100;
var myObj = {
  value: 1,
  func1: function() {
    console.log(`func1's this.value: ${this.value}`);

    var func2 = function() {
      console.log(`func2's this.value ${this.value}`);
    };
    func2();
  }
};

myObj.func1();
// console> func1's this.value: 1
// console> func2's this.value: 100

var Person = function(name) {
  console.log(this);
  this.name = name;
};

var foo = new Person("foo"); // Person
console.log(foo.name); // foo