JavaScript Quiz - AJAX, 스코프, 실행 컨텍스트, 클로저

1. AJAX에 대해 설명해주세요.

• AJAX는 Asynchronous JavaScript and XML의 약어로 JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다.
  • AJAX는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작합니다.
  • XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공합니다.

1.1 AJAX의 장단점에 대해 설명해주세요.

• 장점
  1. 변경할 부분을 갱신하는데 필요한 데이터만 서버로부터 전송받기 때문에, 불필요한 데이터 통신이 발생하지 않습니다.
  2. 변경할 필요가 없는 부분은 리렌더링하지 않기 때문에, 화면이 순간적으로 깜박이는 현상이 발생하지 않습니다.
  3. 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않습니다.
• 단점
  1. 주소창의 URL이 변경되지 않으므로 history 관리가 동작하지 않습니다. 새로고침시 언제나 첫페이지가 다시 로딩됩니다.
  2. 동일한 하나의 URL로 동작하므로 SEO 이슈가 발생합니다.

2. var, let, const 차이에 대해 설명해주세요.

• var로 선언한 변수는 함수 레벨 스코프를 가지고, let, const로 선언한 변수는 블록 레벨 스코프를 가집니다. var로 선언한 변수는 선언과 동시에 undefined로 초기화됩니다. 변수 선언문 이전에 참조할 수 있습니다.
• let, const로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 있어서 선언문을 실행할 때 초기화가 됩니다. 선언문이 실행되기 전까지 참조할 수 없습니다. const로 선언한 변수는 선언과 동시에 초기화를 해야하고 재할당이 금지됩니다.

2.1 TDZ에 대해 설명해주세요.

• TDZ는 Temporal Dead Zone의 약어로 let으로 선언한 변수의 스코프 시작 지점부터 초기화 시작 지점까지 변수를 찹조할 수 없는 구간을 말합니다.
  • let으로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 있기 때문에, 선언문이 실행될 때까지 초기화가 되어 있지 않아서 변수를 참조할 수 없습니다. 그래서 참조 에러가 발생합니다.

3. 함수 선언문과 함수 표현식의 차이에 대해 설명해주세요.

• 함수 선언문으로 선언한 함수는 함수 호이스팅이 발생하고, 함수 표현식으로 선언한 함수는 변수 호이스팅이 발생합니다.
  • 함수 호이스팅은 함수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 것을 말합니다. 함수 호이스팅에 의해 함수 선언문 이전에 함수를 참조할 수 있습니다.
  • 변수 호이스팅은 변수 선언문이 코드의 선두에 끌어 올려진 것처럼 동작하는 것을 말합니다. 함수 표현식으로 선언한 함수는 할당문이 실행되는 시점에 함수 객체가 생성되어 할당됩니다.

4. 이벤트 버블링과 캡처링에 대해 설명해주세요.

• 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 것을 말하고, 이벤트 캡쳐링은 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 것을 말합니다.

4.1 이벤트 위임에 대해 설명해주세요.

• 이벤트 위임은 여러 개의 하위 요소에 이벤트 핸들러를 등록하는 대신에 상위 요소에 이벤트 핸들러를 등록하는 방법을 말합니다.

4.2 이벤트 위임의 동작 방식에 대해 설명해주세요.

• 하위 요소에 이벤트가 발생하고, 이벤트 버블링에 의해 상위 요소에 전파되면 상위 요소의 이벤트 핸들러에서 이벤트를 처리합니다.

5. 호이스팅과 발생하는 이유에 대해 설명해주세요.

• 호이스팅은 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 특징을 말합니다.
• 모든 선언문은 런타임 이전 단계에 실행되기 때문에 호이스팅이 발생합니다.

6. 스코프에 대해 설명해주세요.

• 스코프는 식별자를 참조할 수 있는 유효 범위를 말합니다.
  • 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정됩니다.

6.1 스코프 체인에 대해 설명해주세요.

• 스코프 체인은 스코프가 계층적으로 연결된 것을 말합니다. JavaScript 엔진은 스코프 체인을 통해 변수를 검색하여 참조합니다. 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

6.2 전역 변수와 지역 변수에 대해 설명해주세요.

• 전역 변수는 전역에서 선언되서 전역 스코프를 갖는 변수를 말합니다. 전역 변수는 어디서든지 참조할 수 있습니다.
• 지역 변수는 지역(함수 내부)에서 선언되어 지역 스코프를 갖는 변수를 말합니다. 지역 변수는 자신의 지역 스코프와 하위 스코프에서 참조할 수 있습니다.

7. 클로저에 대해 설명해주세요.

• 클로저는 함수가 중첩되어 있고 외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 상위 스코프인 외부 함수를 기억하고 있기 때문에 이미 생명 주기가 종료된 외부 함수의 변수를 참조할 수 있습니다. 이러한 중첩 함수를 클로저라고 합니다.

8. 실행 컨텍스트에 대해 설명해주세요.

• 실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘입니다.
• 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리합니다.

8.1 렉시컬 환경에 대해 설명해주세요.

• 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조를 말합니다.
• 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리합니다.
• 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경에 대한 참조 컴포넌트로 구성됩니다.
  • 환경 레코드는 키와 값을 갖는 객체 형태의 스코프를 생성하여 식별자를 키로 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소를 말합니다.
  • 외부 렉시컬 환경에 대한 참조는 상위 스코프를 가리킵니다. 이때 상위 스코프는 해당 실행 컨텍스트를 생성한 소스 코드를 포함하는 상위 스코프의 렉시컬 환경을 말합니다. 외부 렉시컬 환경에 대한 참조를 통해 단방향 연결 리스트인 스코프 체인을 구현합니다.

8.2 실행 컨텍스트 스택에 대해 설명해주세요.

• 실행 컨텍스트 스택은 코드의 실행 순서를 관리하는 스택 자료 구조를 말합니다.
  • 소스코드가 평가되면 실행 컨텍스트가 생성되고 실행 컨텍스트 스택의 최상위에 쌓입니다.
  • 실행 컨텍스트의 최상위에 존재하는 실행 컨텍스트는 현재 실행 중인 코드의 실행 컨텍스트입니다.

참고

• 모던 자바스크립트 Deep Dive Chap. 43 Ajax
• 모던 자바스크립트 Deep Dive Chap. 15 let, const 키워드와 블록 레벨 스코프
• 모던 자바스크립트 Deep Dive Chap. 4 변수
• 모던 자바스크립트 Deep Dive Chap. 13 스코프
• 모던 자바스크립트 Deep Dive Chap. 23 실행 컨텍스트
• 모던 자바스크립트 Deep Dive Chap. 40 이벤트