[JS기본] 인터프리터, 호이스팅, 스코프, 렉시컬 환경, 엄격모드, 가비지 컬렉터 등

---

📍자바스크립트 엔진

자바스크립트가 동작하려면 JS엔진이 필요한대, 브라우저 내에 내장되어 있고 node.js를 설치해서 로컬 컴퓨터에서 실행할 수 있다.

 

이때! 동작하는 시간을 런타임이라고 하며, 이 런타임 과정에서 코드를 한줄한줄 읽고 번역해 실행해주는 것을 인터프리터 라고 한다.

 

인터프리터란?

- 프로그래밍 언어로 작성된 소스코드를 읽어 한줄씩 해석하고 실행하는 프로그램 또는 환경을 말한다.

- 소스코드를 기계어로 컴파일 하지않고도 바로 실행할 수 있게 해주는 방식으로 동작한다. 

사용언어 : Python, Ruby, JavaScript ..

cf ) 컴파일러

- 소스코드를 한번에 컴파일하여 중간언어 또는 기계어로 변환후 실행하는 방식을 사용함

사용언어 : C, C++, JAVA ...

 

📍자바스크립트란?

• 인터프리터를 이용해 런타임시 한줄한줄 번역해준다.
• 절차지향과 객체지향모두 가능하며 싱글 스레드 이다.

 

객체지향이란?

- 프로그램작성시 "객체"라는 단위를 중심으로 생각하며, 데이터와 그 데이터를 다루는 메서드를 함께 묶어 표현한다.

- 기능별로 묶여있기 때문에 코드 재사용성과 유지보수성이 높다. 

대표적 객체지향 언어 : JAVA, C++, Python

 

절차지향이란?

- 프로그램을 일련의 절차나 단계로 순차적으로 진행되도록 작성하는 방법

대표적 절차지향 언어 : C, Pascal

 

스레드란?

- 프로세스 내에서 실행되는 작업의 단위로, 하나의 프로세스는 여러개의 스레드를 가질 수 있다. 

- 각각의 스레드는 프로그램의 코드와 데이터를 공유하면서, 별도의 실행 흐름을 갖고 동작할 수 있다. 

- 프로세스내에서 여러 스레드가 작업되는 다중스레드(multithreading) 과 하나의 실행흐름을 갖는 싱글 스레드(Single Thread) 가 있다.

 

cf) 프로세스

- 실행중인 프로그램의 인스턴스로 메모리에 로드된 프로그램의 실행환경을 나타냄.

- 프로세스는 독립된 메모리 공간을 할당받아 프로그램코드, 데이터, 실행상태, 시스템리소스 등을 포함한다. 

- 여러개의 프로세스는 서로 독립적으로 실행되며, 각각의 프로세스에는 운영체제에 의해 분리된 실행공간에서 동작한다. 그리고 프로세스간의 통신이 필요할때는 운영체제가 제공하는 IPC(Internet-process Communication)메커니즘을 통해 이루어진다.

 

스레드가 독립적인 스택 메모리영역을 필요로 하는 이유

- 독립성과 안정성
각 스레드는 독립적인 스택 메모리 공간을 가지므로 다른 스레드의 작업과 상호 간섭 없이 자신의 스택을 관리할 수 있다. 이것은 스레드 간 데이터 접근 충돌을 방지하고 스레드 간 안정성을 유지하는 데 중요합니다. 한 스레드의 스택이 손상되더라도 다른 스레드에 영향을 미치지 않는다.

- 지역 변수 및 호출 스택
각 스레드는 자신만의 호출 스택(call stack)을 가지며, 함수 호출과 관련된 지역 변수, 매개 변수 및 복귀 주소를 저장한다. 독립된 스택 메모리를 사용하면 다른 스레드와 혼동되지 않고 호출 스택을 관리할 수 있으며, 각 스레드는 자신의 호출 스택을 사용하여 함수 호출 및 반환을 수행할 수 있다.

- 재귀 함수 호출
재귀 함수 호출 시 각 호출마다 새로운 스택 프레임이 생성되어야 한다. 스레드마다 독립적인 스택 메모리가 있으면 재귀 함수 호출이 각 스레드에서 독립적으로 수행될 수 있으므로 호출 스택이 꼬이거나 상호 간섭이 발생하지 않는다.

- 스레드 로컬 변수(Thread-Local Variables)
스레드는 자신만의 로컬 변수를 가질 수 있어서, 각 스레드가 독립적으로 상태를 유지하고 관리할 수 있다. 독립된 스택 메모리는 이러한 스레드 로컬 변수를 효율적으로 지원한다.

-스레드 간 효율적인 동시성 제어
각 스레드는 자신만의 스택을 가지고 있으므로 스레드 간 동시성을 제어하기 쉽다. 예를 들어, 스레드 간 뮤텍스와 같은 동기화 메커니즘을 사용하여 스택 접근을 조절할 수 있다.

요약 : 독립적인 스택 메모리 영역은 스레드 간의 상호 간섭을 방지하고 스레드가 독립적으로 작동할 수 있도록 해주며, 스레드의 안정성과 효율성을 향상시킨다. 

 

 

📍스코프란?

• 변수를 참조할 수 있는 유요한 범위, 영역을 지정하는 것을 말함.
• 선언된 위치에 다라 유효범위가 결정되며 코드 블록 { } 안에서만 유효하다.

🔥 장점으로는 이름충돌 방지, 메모리 절약등이 있다.

스코프 체인이란?

중첩된 함수에서 변수나 함수를 찾을때, 내부 스코프에서 찾지 못하면 외부 스코프로 이동하여 검색하는 것

 

📍글로벌 스코프

// 📍 전역 변수, 전역 스코프, 글로벌 변수, 글로벌 스코프 라고한다.
const text ='global'; 

{
// 📍 지역 변수, 로컬 변수, 지역 스코프, 로컬 스코프
  const text = 'inside block1'; 
  {
    console.log(text)
  }
}

• 답은 'inside block1' 이 된다. 내부에 있는 것은 외부에 있는 것에 접근이 안되기 때문에. 만약 inside block1 값이 없다면 한 단계 위로 상위 변수에 접근할 수 있다. 쉽게 말해 가장 가까운 근접한 변수에 접근 하는 것이다.

 

📍가비지컬렉터

자바스크립트엔진 자체에서 제공해주고 백그라운드 프로세스에서 동작해준다. 하지만 비용이 발생한다.

글로벌 변수는 앱이 종료될때까지 계속 메모리에 유지되고, 블록스코프는 역할이 끝나면 자동으로 소멸된다. 이때 자동으로 소멸되는 것을 가비지 컬렉터가 메모리를 처리해주는 것이며, 가급적 글로벌하게 쓰는것은 좋지 않다.

 

📍렉시컬 환경

모든 코드블록 { } 은 렉시컬 환경이라는 내부 오브젝트를 가지고 있다. 이 것의 역할은 ‘각 블록마다 어떤 변수가 들어있는지 부모가 누구인지?’ 등을 추적한다.

 

렉시컬 환경이란  JavaScript엔진이 식별자와 해당 식별자의 값 또는 참조를 관리하는 내부 데이터 구조이다. 

const a = 1; // 전역 스코프
{
  const a = 2; // 블록 스코프 1
   {
    const a = 3; // 블록 스코프 2
   }
}

와 같이 전역 스코프 렉시컬 환경이 만들어지면, 블록 스코프1, 블록스코프2 로 이어지는 것을 스코프 체인이라고 한다.

!!! 코드블럭 밖에서 내부에 접근할 수 없지만, 내부에서 외부를 접근할 수 있는 이유가 렉시컬환경 참조와 스코프 체인을 통해 부모에 접근할 수 있기 때문이다 !!!

 

📍실행 context 환경

실행 context는 JavaScript코드가 실행되는 환경을 의미한다. 코드 실행중에 변수, 함수, 매개변수등의 정보를 저장하고 관리한다. 

 

코드의 실행 흐름과 식별자간의 상호 작용을 관리하는 역할을 한다. 

 

요약해. 실행 컨텍스트는 코드 블록이 실행되기 위해 필요한 모든 정보를 담은 '실행 환경'을 의미한다.

 

• 변수 환경(Variable Environment): 현재 스코프의 변수들과 그들의 값 또는 참조를 저장하는 공간입니다. 이곳에서 변수의 생성, 초기화, 할당 등이 관리됩니다.
• 외부 환경 참조(Outer Environment Reference): 현재 실행 컨텍스트와 연결된 외부(상위) 스코프의 실행 컨텍스트를 참조하는 링크입니다. 이를 통해 스코프 체인을 형성하며 변수 검색에 사용됩니다.
• 실행 환경(Execution Context): 함수의 매개변수, 지역 변수, this 값 등의 정보를 담고 있는 영역입니다. 이 영역에서 실제 코드 실행이 이루어집니다.

 

 

📍호이스팅

호이스팅이란 인터프리터가 코드를 읽기전, 변수와 함수, 클래스등을 끌어올려 선언 먼저 실행하게 하는 것을 말한다.

print();

function print() {
  console.log('hello');
}

호이스팅 덕분에 이런식으로 함수는 나중에 선언되었지만 먼저 호출을 해도 정상적으로 실행된다.

하지만 변수 (let, const)를 선언하기 전에 호출하면 앱이 죽어버린다.

문제의 var는 호출이 가능하며, 선언없이 할당 가능 및 재할당, 재선언이 가능하다.

따라서 var는 코드 가독성과 유지보수성에 좋지 않아 근래에는 많이 사용하지않는다.

 

호이스팅은 왜 실행되는 걸까?

 

변수 및 함수 선언의 분리 

자바스크립트 엔진은 코드실행전 스코프 내의 모든 변수 및 함수를 찾아 메모리에 올린다.

이때 선언부와 할당부가 분리되며, 선언부만 위로 끌어올려지게 된다.

 

(함수 선언식은 호이스팅되지만, 함수의 할당은 호이스팅 되지 않는다.)

 

함수 선언식

foo(); // "Hello from foo!"

function foo() {
    console.log("Hello from foo!");
}

 

함수 표현식

bar(); // TypeError: bar is not a function

var bar = function() {
    console.log("Hello from bar!");
};

 

📍엄격모드

자바스크립트의 특별한 실행모드로 일반적인 실수나 안전하지 않은 동작을 방지하고, 좀 더 일관된 동작을 유지할 수 있도록 해주는 모드

 

 

📍이벤트 루프 ⭐️ 

자바스크립트는 단일 스레드 기반 언어로, 자바스크립트 엔진이 단일 콜 스택을 가진다. 이 말은 요청이 동기적으로 처리되는 것을 의미한다.

그렇다면 비동기 요청은 어떻게 처리 될 수 있을까 ? 🤷🏻‍♀️

그것은 바로 자바스크립트를 실행하는 환경인 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행환경을 상호 연동 시켜주는 장치가 바로 이벤트 루프이다. 따라서, 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다.

태스크 큐와 마이크로태스크 큐

• 자바스크립트의 실행 환경은 2가지 큐를 가지고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크가 담기는 공간이다. 태스크가 콜백함수라면 그 종류에 따라 다른 큐에 담기며 대표적으로는 이와 같은 것들이 있다.
• 태스크 큐
  • setTimeout(), setInterval(), UI 렌더링, requsetAnimationFrame()
• 마이크로태스크 큐
  • Promise, MutationObserver

이벤트 루프는 2개의 큐를 감시하고 있다가 콜 스택이 비게 되면, 콜백함수를 꺼내와서 실행한다. 이 때 마이크로태스크 큐의 콜백함수가 우선순위를 가지고 때문에 마이크로태스크 큐의 콜백함수를 전부 실행하고나서 태스크 큐의 콜백함수들을 실행한다. (단, UI 렌더링이 태스크 큐에 속하기 때문에 마이크로태스크 큐의 태스크가 많으면 렌더링이 지연될 수 있다.)

console.log('안녕');
setTimeout(() => console.log('큐!),0);
Promise.resolve().then(() => console.log('마이크로 큐!));

위와 같은 코드가 있을 때, 결과는 이와 같다.

안녕
마이크로 큐!
큐!

처음 스크립트가 로드될 때, 스크립트 실행 이라는 태스크가 먼저 태스크 큐에 들어간다. 그리고나서 이벤트 루프가 태스크 큐에서 해당 태스크를 가져와 콜 스택을 실행하는 것이다.