# 자바스크립트 예상 질문 - 2

- AJAX에 대해 설명해주세요. (11번)
:AJAX는 비동기식 자바스크립트 XML의 약자로, HTML만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술입니다. 웹 페이지를 리로드하지 않고도 서버와 데이터를 교환할 수 있는 방법을 의미합니다. 웹 페이지의 동작을 개선하고 사용자 경험을 향상시키기 위해 사용됩니다.

AJAX의 핵심 구성 요소로는 JavaScript, XMLHttpRequest 객체,XML이 있습니다.
자바스크립트는 웹 페이지의 동작을 제어하며, 서버로부터 받은 데이터를 처리하고 사용자 인터페이스를 업데이트하는 데 사용됩니다.
XMLHttpRequest 객체는 자바스크립트에서 서버와 비동기식으로 데이터를 교환하는 데 사용되고, 웹 페이지가 사용자의 작업을 방해하지 않고 서버와 통신할 수 있게 합니다.
XML은 서버와 데이터를 교환하는 데 사용되는 데이터 형식 중 하나입니다. 

사용자가 웹 페이지에서 어떤 동작을 수행하면, 자바스크립트가 이 동작을 감지하고, 필요한 데이터와 함께 xmlhttprequest객체를 사용하여 서버에 요청을 보냅니다. 서버가 요청을 처리하고, 응답을 xmlhttprequest 객체에 반환하면 자바스크립트가 응답을 처리하고, 필요에 따라 웹페이지의 ui를 업데이트 합니다.
이러한 비동기식 특성 덕분에, 사용자는 서버의 응답을 기다리는 동안 다른 작업을 계속 할 수 있습니다.

단점으로는 동적 페이지 렌더링을 하기 때문에 자바스크립트를 해석하지 못하는 검색 엔진에서는 내용이 검색되지 않는다는 문제와 레이아웃이 너무 복잡한 사이트는 속도 저하가 발생할 수 있는 문제가 있습니다.



- ⭐ var, let, const 차이를 설명해주세요. TDZ에 대해 설명해주세요. (12번)
:var로 선언된 변수는 함수스코프를 가집니다. 자신이 선언된 함수 내에서는 어디든 접근 가능하며, 함수 밖에서는 접근할 수 없고, 재선언 및 재할당이 가능합니다. 또한, var로 선언된 변수는 호이스팅되어 선언전에 참조 가능합니다.

let으로 선언된 변수는 블록 스코프를 가집니다. 자신이 선언된 블록내에서만 접근 가능하며, 블록 밖에서는 접근할 수 없습니다. let으로 선언된 변수는 재할당이 가능하지만 재선언은 불가능합니다. let 선언도 호이스팅되지만, 초기화 전에 참조하려고 하면 TDZ(Temporal Dead Zone) 때문에 에러가 발생합니다.

const로 선언된 변수는 블록 스코프를 가집니다. 그러나 const로 선언된 변수는 재선언 및 재할당이 불가능합니다. const는 상수를 선언하는 데 사용됩니다. const 선언도 호이스팅되지만, 마찬가지로 초기화 전에 참조하려고 하면 TDZ 때문에 에러가 발생합니다.

TDZ는 Temporal Dead Zone의 약자로, let과 const로 선언된 변수가 호이스팅은 되지만 초기화되기 전까지 참조할 수 없는 구간을 의미합니다. let과 const로 선언된 변수를 선언 전에 참조하려고 하면 JavaScript 엔진은 이를 TDZ에 있다고 판단하고 ReferenceError를 발생시킵니다. 이는 실수를 방지하고 코드의 예측 가능성을 높이는 데 도움을 줍니다.



- 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요. (13번)
:함수 선언형은 function 키워드를 사용하여 함수를 선언합니다. 이 선언은 호이스팅에 영향을 받아 함수 전체가 스코프의 상단으로 이동합니다. 따라서 함수 선언형으로 선언된 함수는 선언 전에 호출이 가능합니다.

함수 표현식은 변수에 함수를 할당하는 방식으로 함수를 생성합니다. 함수 표현식은 호이스팅에 영향을 받지 않습니다. 이는 함수 표현식이 변수의 값으로 저장되기 때문이며, 변수 선언만을 호이스팅하고 초기화는 호이스팅하지 않습니다. 따라서 함수 표현식은 선언 이후에만 호출이 가능합니다.

호이스팅이 필요한 상황이라면 함수 선언식을 사용하고, 콜백 함수나 IIFE 등에는 함수 표현식을 사용하면 좋습니다.



- ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요. 
   ⭐ 이벤트 위임과 이벤트 위임의 동작 방식에 대해서 설명해주세요. (14번)
: 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 DOM 트리를 따라 상위 요소로 전파되는 방식을 말합니다. 예를 들어, 버튼을 클릭하는 이벤트가 발생하면 해당 버튼에서 이벤트가 시작되어 상위 요소로 이벤트가 전파됩니다.
이벤트 캡처링은 이벤트 버블링과 반대 방향으로 이벤트가 전파되는 방식입니다. 이벤트 캡처링은 가장 상위의 요소에서 시작하여 이벤트가 실제로 발생한 요소까지 내려가는 방식으로 이벤트를 처리합니다.

이벤트 위임은 이러한 이벤트 버블링의 원리를 활용한 이벤트 핸들링 방식으로, 특정 요소에서 발생한 이벤트를 그 요소의 상위 요소가 대신 처리하도록 하는 기법을 말합니다.
이벤트 위임의 장점은 동적으로 추가되는 요소에 대해서도 이벤트 핸들러를 설정할 수 있다는 것입니다. 이벤트 핸들러를 한 곳에만 등록하면 되므로 메모리 사용량도 줄일 수 있습니다.

이벤트 위임의 동작 방식은 상위 요소에 이벤트 리스너를 추가하고, 이벤트 발생시 상위 요소에서 이벤트를 감지후, 이벤트가 발생한 대상 요소를 확인하고, 그 요소가 처리해야 할 이벤트인지 판단하고, 이벤트를 처리하는 네가지 단계로 나눌 수 있습니다.




- ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요. (15번)
:호이스팅은 JavaScript에서 변수와 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 행동을 의미합니다.
이 때문에, JavaScript에서는 변수나 함수를 선언하기 전에 참조하거나 호출하는 것이 가능하게 됩니다.
var과 let과 const로 선언된 변수와 함수 선언식 모두 호이스팅이 되지만, let과 const는 TDZ로 인해 선언 전에 접근하려고 하면 에러가 발생합니다.

호이스팅이 발생하는 이유는 JavaScript 엔진이 코드를 해석하고 실행하는 방식 때문입니다. JavaScript 엔진은 코드 실행 전에 컴파일 과정을 거치는데, 이 때 모든 변수와 함수 선언이 먼저 메모리에 저장됩니다. 이 과정에서 변수와 함수 선언이 스코프의 상단으로 끌어올려지는 현상을 우리는 '호이스팅'이라고 부릅니다.



- 스코프 (Scope)와 스코프 체인에 대해 설명해주세요. (16번)
:스코프는 변수나 함수를 참조하는 범위를 의미합니다. 어떤 변수에 액세스 할 수 있는지 결정하는데 중요한 역할을 합니다.
스코프는 전역스코프와 지역스코프로 나눌 수 있습니다.
전역 스코프에서 변수가 선언되면 어느 곳에서든지 이 변수에 접근이 가능합니다.
하지만, 지역스코프에 변수가 선언된다면, 해당 스코프 내 에서만 접근이 가능합니다.

변수를 참조하려 할때, 현재 함수의 지역 스코프 -> 상위 함수의 지역스코프 -> 전역스코프 순으로 변수를 찾습니다.

스코프 체인은 스코프가 서로 연결되어있는 구조를 의미합니다, 자바스크립트에서는 실행 컨텍스트가 생성될때마다 스코프체인이 만들어지고, 이 체인은 변수와 함수에 접근하는 규칙을 결정합니다.



- ⭐⭐⭐ 클로져(Closure)에 대해 설명해주세요. (17번)
: 클로져는 다른 함수 내부에 정의된 함수가 있는 경우, 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 해당 내부함수는 외부함수의 변수 및 범위에 액세스 할 수 있는 것을 말합니다.


이를 통해 함수 밖에서 선언된 변수에 접근하거나, 함수가 실행된 이후에도 변수를 참조하는 등의 기능을 수행할 수 있습니다.

JavaScript의 함수는 각각의 렉시컬 환경을 가지는데, 이 렉시컬 환경은 함수와 변수를 포함하고 있습니다. 함수가 선언될 때 그 위치에 따라 상위 스코프를 결정하게 되는데, 이것이 바로 렉시컬 스코핑입니다. 클로져는 이 렉시컬 스코핑의 원리를 따르며, 이 때문에 함수는 자신이 선언된 위치에 따라 상위 스코프의 변수에 접근할 수 있습니다.



-⭐⭐⭐ 실행 컨텍스트에 대해 설명해주세요.
 
:실행 컨텍스트는 개발자가 작성한 코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤, 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 것으로 코드의 환경과 순서를 보장합니다.

실행 컨텍스트의 주요 구성 요소로는 렉시컬환경, 변수환경, this 바인딩이 있습니다.

실행 컨텍스트의 생성은 두가지로 나눌 수 있습니다.
1. 전역 컨텍스트: 코드가 처음 시작될 때, 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 푸시됩니다.
2. 함수 컨텍스트: 함수 호출 시마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성되고 스택의 맨 위에 푸시됩니다. 함수 실행이 끝나면 해당 실행 컨텍스트는 스택에서 팝되어 제거됩니다.

실행 컨텍스트의 생명 주기는 생성, 실행, 종료로 크게 세 단계로 나눌 수 있습니다.
1. 생성단계 : 변수와 함수 선언의 정보가 렉시컬 환경에 저장됩니다. 변수는 undefined로 초기화되고, this 값이 결정됩니다.
2. 실행단계 : 변수에 값이 할당되고, 코드가 줄 by 줄로 실행됩니다.
3. 종료단계 : 현재 실행 컨텍스트의 실행이 완료되면 스택에서 제거됩니다.
클로저와 같은 특별한 경우를 제외하고는 모든 로컬 변수와 관련 정보는 메모리에서 해제됩니다.



- ⭐ 렉시컬 환경(Lexical Environment)에 대해 설명해주세요. (18번)
:렉시컬 환경은 코드가 실행되기 위한 환경 정보를 담은 구조로, 특히 변수와 함수 선언, 그리고 외부 환경에 대한 참조 정보를 포함합니다. 환경 레코드와 외부환경 참조로 구성되어 있습니다.
1. 환경 레코드(Environment Record): 현재 컨텍스트 내의 모든 로컬 변수, 함수 선언, 매개변수 등의 실제 식별 정보를 담고 있는 구조입니다. 변수와 함수 선언은 여기에 저장됩니다.
2. 외부 렉시컬 환경에 대한 참조(Outer Reference): 렉시컬 스코핑(Lexical Scoping)를 구현하기 위한 링크입니다. 이 참조는 현재 렉시컬 환경의 "바깥쪽"에 있는 렉시컬 환경을 가리킵니다. 이로 인해 JavaScript에서는 클로저와 같은 강력한 기능을 구현할 수 있습니다.


렉시컬 환경의 중요한 특징 중 하나는 코드가 작성된 위치에 따라 결정된다는 것입니다. 이러한 특성 덕분에 클로저가 가능하게 됩니다.



+ 렉시컬환경, 변수환경의 차이
: 종종 서로 유사하게 취급될 수 있지만, ECMAScript 명세에서는 두 개념을 분리하여 설명하고 있습니다. try-catch 문의 catch 절에서는 차이점이 발생합니다.

1. 렉시컬 환경(Lexical Environment): 현재 코드 실행 중인 환경에 있는 식별자와 그 식별자에 바인딩된 값(변수, 함수 선언 등)의 조합을 의미합니다. 또한 외부 환경에 대한 참조(outer reference)도 포함합니다. 이러한 정보는 코드 실행 중에 변경될 수 있습니다.

2. 변수 환경(Variable Environment): 렉시컬 환경의 "스냅샷"으로 볼 수 있습니다. 즉, 현재 실행 컨텍스트의 변수 정보를 초기화할 때의 상태입니다. 함수가 호출될 때 생성된 초기 상태의 렉시컬 환경을 유지하게 됩니다.

catch 절의 매개변수는 블록 내에서만 유효한 일시적인 변수입니다. 따라서 이 변수는 렉시컬 환경에 추가됩니다. 그러나 변수 환경에는 추가되지 않습니다.



- 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요. (19번)
:JavaScript에서 데이터 형변환은 특정 타입의 값을 다른 타입으로 변환하는 과정을 말합니다. 명시적으로이루어질 수도 있고, JavaScript 엔진에 의해 암시적으로 이루어질 수도 있습니다.

명시적 형변환은 개발자가 의도적으로 값을 특정 타입으로 변환하는 것을 말합니다.
boolean 타입인 변수 value가 string으로 변환되는 예시로
let value = true;
value = String(value); 를 들 수 있습니다.

암시적 형변환은 JavaScript 엔진이 연산 과정에서 자동으로 값을 적절한 타입으로 변환하는 것을 말합니다.
문자열 "3"이 숫자로 형변환되어 1이 나오는 let value = "3" - 2; 라는 예시를 들 수 있습니다.

동등 비교(==) 연산자는 피연산자의 타입이 다를 경우 암시적 형변환을 수행합니다.



- 자바스크립트가 동적 언어인 이유는 무엇인가요? (20번)
:동적언어란, 언어의 타입 체크 및 변수 바인딩이 주로 실행 시간 동안에 이루어지는 언어입니다.

JavaScript는 동적으로 타입이 결정되는 동적 타이핑 언어입니다. 이는 변수의 타입이 실행 시간에 결정되고 변경될 수 있다는 뜻입니다.
또한, JavaScript에서는 실행 중인 프로그램의 코드를 변경하거나 확장할 수 있습니다. 
마지막으로, JavaScript에서는 함수 호출 시에 함수의 매개변수와 실제 인자의 바인딩이 이루어집니다. 함수가 호출되기 전까지는 매개변수의 값이 결정되지 않습니다.



- 프로토타입에 대해 설명해주세요. (21번)
:프로토타입은 자바스크립트가 객체지향프로그래밍의 상속을 구현하는 방법입니다.

JavaScript는 프로토타입 기반 언어이므로, 모든 자바스크립트 객체는 prototype이라는 속성을 가지고 있습니다. 이 속성은 다른 객체를 가리키며, 이를 프로토타입 객체라고 부릅니다. 

객체의 메소드나 속성에 접근하려 할 때, 자바스크립트 엔진은 먼저 해당 객체 내에서 그 속성을 찾습니다. 만약 그 속성을 찾지 못한다면, 엔진은 프로토타입이 가리키는 객체에서 그 속성을 찾습니다. 이 과정은 프로토타입 체인의 끝에 도달하거나, 속성을 찾을 때까지 계속됩니다.

이를 통해 코드를 재사용할 수 있고, 메모리를 효율적으로 사용 할 수 있는 장점이 있습니다.

또한, 프로토타입 체인은 또한 객체 지향 프로그래밍에서의 상속을 가능하게 합니다. 자식 객체는 부모 객체의 프로토타입을 자신의 프로토타입 체인에 포함시킴으로써 부모 객체의 메서드와 속성을 상속받을 수 있습니다. 이는 '프로토타입 상속'이라고도 불립니다.



- ⭐ 깊은 복사와 얕은 복사에 대해 설명해주세요. (22번)
:깊은 복사는 원시 타입 뿐만 아니라 참조 타입의 값을 새로운 메모리 공간에 완전히 복제하는 방식입니다. 이렇게 되면 원본과 복사본이 서로 독립적이게 되므로, 복사본에서 참조 타입의 값을 변경해도 원본에는 영향을 미치지 않습니다. JSON.parse(JSON.stringify(original))을 사용 할 수 있습니다.
하지만, 함수, undefined, Symbol, 순환 참조 등을 제대로 복사하지 못합니다. 

얕은 복사는 원시 타입의 값들은 복사하여 새로운 공간에 할당하지만, 참조 타입의 값은 메모리 주소만 복사하는 방식입니다. 따라서 원본과 복사본이 동일한 참조 타입의 값을 공유하게 됩니다. 이 때문에 복사본에서 참조 타입의 값을 변경하면 원본도 영향을 받게 됩니다. 스프레드 연산자가 그 예시입니다



+ 스프레드 연산자는 원본 훼손은 안하지 않나?
스프레드 연산자는 원본 객체를 훼손하지 않지만, 중첩된 객체의 경우에는 참조를 공유합니다.
스프레드 연산자는 "얕은 복사"를 수행하기 때문에 객체의 최상위 레벨의 속성들만 새로운 객체로 복사하고, 그 아래의 중첩된 객체는 여전히 참조로 연결됩니다. 따라서 중첩된 객체를 변경하면, 그 변경사항은 원본 객체와 복사본 객체 양쪽에 모두 반영됩니다.


+ ⭐ 동결?
Object.freeze()메서드는 객체를 동결합니다. 
동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 사능설, 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도, 프로토타입이 변경되는 것도 방지합니다.
즉, 전달된 동일한 객체를 반환하는 것을 말합니다.


+ 얕은 비교
숫자, 문자열등 원시자료형은 값을 비교하고,
배열, 객체등 참조자료형은 참조되는 위치를 비교합니다.


+ 깊은 비교
얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교합니다.
1.Object depth가 얕은 경우에는 JSON.stringify() 사용
2.Object depth가 깊은 경우에는 lodash 라이브러리의 isEqual() 사용



- 불변성을 유지하려면 어떻게 해야하나요? (23번)
:불변성은 데이터가 한 번 생성되면 그 후에 변경될 수 없다는 원칙을 말합니다.
불변성이 유지되면 데이터의 상태를 예측하기 쉬워져 디버깅이 쉬워지고, 코드의 복잡성이 줄어드는 장점이 있습니다. 

JavaScript에서 불변성을 유지하는 방법으로는 여러가지가 있습니다.
1. JavaScript의 원시 타입들(Number, String, Boolean, Null, Undefined, BigInt, Symbol)사용하기
원시타입들은 불변성을 가집니다. 한 번 생성된 값은 변경할 수 없으며, 새 값을 할당하면 새로운 메모리 공간에 저장됩니다.
2. 새 변수 생성하기
기존 변수를 변경하는 대신 새 변수에 결과를 할당함으로써 불변성을 유지할 수 있습니다.
3. 배열 메소드 사용하기
JavaScript의 배열 메소드 중에는 원본 배열을 변경하지 않고 새 배열을 반환하는 메소드인 map(), filter(), reduce(), concat(), slice()들을 사용할 수 있습니다.
4.깊은 복사
깊은 복사는 원시 타입 뿐만 아니라 참조 타입의 값을 새로운 메모리 공간에 완전히 복제하는 방식이므로 원본과 복사본이 서로 독립적이게 됩니다. 따라서 복사본에서 참조 타입의 값을 변경해도 원본에는 영향을 미치지 않습니다.
5.불변성을 지원하는 라이브러리 사용
 Immutable.js나 Immer와 같은 라이브러리를 사용하면 불변성을 쉽게 유지할 수 있습니다.




- Blocking과 Non-Blocking에 대해 설명해주세요. (24번)
:Blocking과 Non-Blocking은 I/O 작업의 동작 방식을 설명하는 데 사용되는 용어입니다.

블로킹 방식은 I/O 작업을 요청하면 그 작업이 완료될 때까지 실행이 중지되는 방식입니다. 프로그램이 데이터를 요청하면 그 요청이 완료되어 데이터가 준비될 때까지 기다립니다. 이 방식의 문제점은 I/O 작업이 많은 시간이 걸리는 경우 프로그램이 멈추게 되어 사용자에게 응답하지 못하게 된다는 것입니다.

논블로킹 방식은 I/O 작업을 요청해도 그 작업이 완료될 때까지 기다리지 않고 즉시 다른 작업을 수행하는 방식입니다. 즉, 프로그램이 데이터를 요청하면 즉시 응답을 받지만, 데이터가 준비되지 않았을 경우에는 그 사실을 알리는 정보만 받게 됩니다. 그러면 프로그램은 다른 작업을 수행하면서 주기적으로 데이터가 준비되었는지 확인합니다.
이는 서버에서 많은 양의 I/O 작업을 처리해야 하는 상황에서 매우 효율적입니다. 서버가 클라이언트의 요청을 처리하면서 I/O 작업을 기다리는 동안 다른 클라이언트의 요청을 동시에 처리할 수 있기 때문입니다. 하지만, 문제가 복잡하거나 고수준의 동기화가 필요한 경우에는 블로킹 방식이 더 적절할 수 있습니다. 


- ⭐ 동기와 비동기에 대해 설명해주세요. (25번)
:동기 방식에서는 한 작업이 완료될 때까지 기다린 후에 다음 작업을 실행합니다. 즉, 한 작업이 끝나야 다음 작업이 시작할 수 있습니다. 이 방식의 장점은 코드의 실행 순서가 명확하고 예측 가능하다는 것입니다. 단점은 앞선 작업이 많은 시간이 걸리는 경우, 그 작업이 완료될 때까지 프로그램 전체가 멈추게 된다는 점입니다.

비동기 방식에서는 한 작업이 완료되지 않아도 다음 작업을 실행합니다. 즉, 작업이 독립적으로 실행되며, 어떤 작업이 먼저 완료될지는 알 수 없습니다. 이 방식의 장점은 긴 시간이 걸리는 작업이 있을 때도 프로그램이 계속 실행될 수 있다는 점입니다. 단점은 코드의 실행 순서가 불명확하고 예측하기 어렵다는 점입니다.

자바스크립트는 단일스레드 언어이기에 한번에 한 작업만 가능하지만, Promise, async/await 등의 기능을 사용하면 비동기 작업을 수행할 수 있습니다. 이런 기능들을 사용하면, 네트워크 요청이나 파일 I/O와 같은 시간이 오래 걸리는 작업을 백그라운드에서 처리하고, 작업이 완료되면 결과를 처리하는 콜백 함수를 실행할 수 있습니다.