Modern JS

브라우저 동작원리

웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행이 된다.

브라우저의 핵심 기능은, 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아, 브라우저에 표시하는 것이다.

브라우저는 서버로부터 HTMl, CSS, JS 이미지 파일을 응답받고 HTMl, CSS 파일은 렌더링 엔진의 HTML 파서와, CSS 파서에 의해 파싱이 된다.
그 후 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합이 된다.
이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드를 로드하고 파싱하며 실행한다.
자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.

결국 브라우저는 동기적으로 HTML, CSS, JS를 처리한다.
고로 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생하게된다.

변수

변수는 값을 저장하고 그 저장된 값을 참조하기 위해 사용한다.
변수는 위치 = 주소 를 기억하는 저장소이며,
여기서 위치는 메모리상의 주소를 의미한다.

쉽게 말하면 변수는 메모리 주소에 접근하기 위해 사람이 지정한 식별자이다.

문

프로그램(스크립트)은 컴퓨터(Client-side Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 단계별로 수행될 명령들의 집합이다.
각각의 명령을 문(statement)이라 하며 문이 실행되면 무슨 일인가가 일어나게 된다.
문은 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론( ; )으로 끝나야 한다.

다른 언어와 달리 자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않는다. 함수 단위의 유효범위(Function-level scope)만이 생성된다.

함수 단위의 유효범위(Function-level scope):

• ES5 이전의 자바스크립트에서 주로 사용되는 유효범위입니다.
• 변수를 선언한 함수 내에서만 해당 변수에 접근할 수 있습니다.
• 함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.
• 함수 외부에서 선언된 변수는 전역 변수(global variable)로 간주되어 어디에서든 접근할 수 있습니다.

function example() {
  var x = 10;
  console.log(x); // 10
}

console.log(x); // ReferenceError: x is not defined

블록 유효범위(Block-level scope):

• ES6(ES2015)부터 도입된 기능으로,
• 블록({}) 내에서 변수의 유효 범위를 제한합니다.
• 중괄호로 둘러싸인 블록 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다.
• 블록 외부에서 선언된 변수는 블록 내에서도 접근할 수 있습니다.

{
  let x = 10;
  console.log(x); // 10
}

console.log(x); // ReferenceError: x is not defined