Javascript

async/await 는 ES2017에 도입된 비동기 처리 문법입니다.
이 문법을 통해 비동기 작업을 보다 직관적이고 간결하게 작성할 수 있습니다.
async 함수는 항상 Promise 객체를 반환하며, 내부에서 await 키워드를 이용해 비동기 작업이 완료될 때까지 기다릴 수 있습니다. await 는 비동기 작업의 결과를 받을 때까지 대기하는 역할을 하여, 코드 흐름을 동기식으로 작성한 것처럼 읽기 쉽게 만들어 줍니다. async/await 는 기존의 .then()을 이용한 Promise 체인보다 가독성을 높이고, 복잡한 비동기 로직을 간편하게 처리할 수 있게 해줍니다.

호이스팅은 자바스크립트에서 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상입니다. 이를 통해 코드에서 변수를 선언하기 전에 참조할 수 있지만, 주의할 점이 있습니다:

1. 변수 호이스팅
   • var로 선언된 변수는 선언만 호이스팅되며 초기화는 실제 코드 위치에서 이루어집니다. 따라서 초기화 전에 접근하면 undefined가 반환됩니다.
   • let과 const는 호이스팅되지만 일시적 사각지대(Temporal Dead Zone) 가 존재하여 선언 전에 접근하면 오류가 발생합니다.
2. 함수 호이스팅
   • 함수 선언문(function)은 선언과 동시에 호이스팅되므로, 선언하기 전에 호출할 수 있습니다.
   • 함수 표현식(const fn = function() )은 변수 호이스팅의 규칙을 따르므로, 선언 전에 호출하면 오류가 발생합니다.

호이스팅은 변수와 함수의 선언을 최상단으로 끌어올리는 메커니즘이지만, 변수의 경우 let, const와 var에 따라 동작이 다르므로 주의가 필요합니다.

크게 6가지 단계로 나뉘게 됩니다.

1. HTML 을 파싱 후, DOM 트리를 생성합니다.
2. CSS 를 파싱 후, CSSOM 트리를 생성합니다.
3. JavaScript 를 실행합니다.
   3-1. 이때, HTML 중간에 <script> 태그가 있다면, HTML 파싱을 중단하고 JavaScript를 실행합니다.
4. DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
   4-1. 렌더 트리는 화면에 표시되는 요소만으로 구성됩니다.
   4-2. 예를 들어, display: none으로 숨겨진 요소는 렌더 트리에 포함되지 않습니다.
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 위치와 크기를 계산합니다.
   5-1. 이 단계를 Layout 단계라고 부릅니다.
6. 계산한 위치와 크기를 바탕으로 화면에 픽셀을 그립니다.
   6-1. 이 단계를 Paint 단계라고 부릅니다.

직역하면 어휘적 범위로, 함수를 어디서 호출했는지가 아닌 어디에 선언했는지에 따라 결정되는 스코프입니다.
자바스크립트는 렉시컬스코프를 따르는데요, 이는 함수를 선언할 때의 위치에 따라 상위 스코프가 결정된다는 것을 의미합니다. 따라서 함수를 어디에서 호출했는지가 아닌, 함수를 어디에 선언했는지에 따라 상위 스코프가 결정됩니다.
간단하게 말하면, 함수를 선언할 때의 위치에 따라 함수의 상위 스코프가 결정되는 것입니다.

가비지 컬렉션(Garbage Collection)은 메모리에 할당된 객체 중 더 이상 사용되지 않는 객체를 탐지하여 자동으로 메모리에서 해제시키는 과정을 말합니다. 이 작업은 가비지 컬렉터(Garbage Collector) 가 담당하며, 자바스크립트 엔진은 이를 통해 메모리 누수를 방지하고 안정적인 프로그램 실행을 지원합니다.

가비지 컬렉터는 주기적으로 실행되며, 특정 기준을 통해 ‘더 이상 필요하지 않은 객체’를 탐지합니다. 여기서 ‘더 이상 필요하지 않다’라는 판단 기준은 객체에 닿을 수 없는 상태를 의미합니다. 이 닿을 수 있는 상태는 **roots(전역 변수)**를 기준으로 결정됩니다. 즉, 전역 변수에서 참조되거나, 참조의 참조를 통해 도달할 수 있는 객체들은 ‘사용 중’으로 간주됩니다. 이러한 객체들은 가비지 컬렉션 대상에서 제외됩니다.

가비지 컬렉터가 사용하는 대표적인 알고리즘 중 하나는 Mark-and-Sweep 입니다. 이 알고리즘에서 가비지 컬렉터는 다음과 같은 과정을 거칩니다.

1. Mark 단계: roots 에서 시작하여 ’도달 가능한 객체들(reachable objects)’을 탐색하고, 이들을 true 로 표시합니다.
2. Sweep 단계: false 로 표시된 객체들은 ’도달 불가능(unreachable)’한 객체로 간주되어 메모리에서 해제됩니다.

이러한 과정을 통해 가비지 컬렉터는 개발자가 메모리 관리에 직접 신경쓰지 않고도, 불필요한 객체를 자동으로 해제하여 메모리 누수를 방지하고, 프로그램의 성능을 유지할 수 있도록 돕습니다.