var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.
var는 이미 선언한 변수와 동일한 이름으로 중복 선언이 가능한데, 마지막으로 할당된 값이 최종 변수에 저장되어 어떤 부분에서 값이 변경되어 문제가 발생하는지 파악하기 힘들다.
let은 중복선언 시에 에러가 나지만 변수에 값을 재할당하는 것은 가능하다.
const는 중복선언과 재할당이 모두 불가능하다.
var는 함수레벨 스코프로, 함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 내에서는 블록 내외부에 관계없이 유효하다.
let과 const는 블록레벨 스코프로, 모든 코드블록 내부에서 선언된 변수는 코드 블록 내부에서만 유효하고 블록을 벗어나면 참조할 수 없다.
호이스팅에서도 차이가 있는데 var는 변수가 선언되기 전에 참조되어도 에러가 발생하지 않는다. 코드가 실행되기 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 했기 때문이다.
let, const로 변수를 선언하는 경우에는 자바스크립트 내부에서 코드 실행 전에는 변수 선언만 해두고 코드 실행 과정에서 변수 선언문을 만났을 때 초기화한다. 그래서 호이스팅이 발생하기는 하지만 참조할 수가 없어서 호이스팅이 발생하지 않는 것처럼 보인다. 이것은 변수 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(temporal dead zone)에 빠져서 생기는 현상이다.
브라우저가 어떻게 동작하는지 설명해 주세요.
-
URL 입력 및 요청: 사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보낸다.
-
서버 응답 및 데이터 수신: 서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보낸다.
-
HTML 파싱 및 DOM 생성: 브라우저는 HTML을 파싱하여 Document Object Model (DOM) 트리를 만든다. 이 트리는 웹 페이지의 구조를 나타낸다.
-
CSS 파싱 및 CSSOM 생성: CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성된다. 이것은 페이지의 스타일을 정의한다.
-
렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 이 트리는 페이지의 시각적 표현을 나타내며, 각 요소의 크기와 위치를 포함한다.
-
레이아웃 단계: 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산한다.
-
페인팅: 계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그린다. 여기에는 텍스트, 이미지, 다른 시각적 요소들이 포함된다.
-
JavaScript 실행: 필요한 경우 JavaScript가 실행되어 동적인 기능을 추가하거나 페이지를 변경한다.
-
로드 완료: 모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료된다. 사용자는 이제 페이지와 상호 작용할 수 있다.
