Interview
Javascript
- 브라우저 자체에 내장돼있는 JS엔진으로 동작되며 코드를 한 줄 한 줄 읽고 실행하는 런타임 과정을 거친다.
- 싱글스레드이다.
스코프
- 변수를 참조할 수 있고 접근할 수 있는 영역을 말한다.
- 선언된 위치에 따라 유효 범위가 결정되며 블록 내에서만 유효하여 블록 밖에서는 참조할 수 없다.
지역변수
- 블록 외부에서 내부, 함수 외부에서 내부의 변수와 매개변수를 참조할 수 없다.
전역변수
- 지역변수와 반대되는 개념으로, 어떤 영역 내에서도 접근할 수 있는 변수를 말한다.
지역 변수와 전역 변수
- 메모리를 변수에 메모리의 주소, 메모리는 heap이라는 곳에 만들어진다.
- 메모리 안에 아무것도 없을 경우 쓰레기로 간주하고 메모리를 청소하는 엔진 동작을 거치게 되는데, 블록 스코프는 역할이 끝나면 자동으로 소멸되지만, 글로벌 변수는 앱이 종료될 때까지 남아있어 메모리 측면에서 좋지 않다.
실행 컨텍스트
- 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다.
- 실행 컨텍스트를 콜스택에 쌓아올린 후 코드의 환경과 순서를 보장한다.
렉시컬 환경
- 각 블록마다 어떤 변수가 들어있고 부모는 누구인지 추적하는 것을 말한다.
- 중첩된 스코프나 함수는 스코프 체인에 의해 모든 체인을 검사하며 돌아다니기에 성능에 좋지 않다.
호이스팅
- 스크립트 내 변수와 함수의 선언 순서와 상관없이 메모리 공간을 할당하는 것을 말한다.
- 전체 코드를 스캔하고 실행 컨텍스트를 미리 기록해놓기 때문에 가능하며, var 로 선언된 변수는 호이스팅 후 값은 할당되지 못하기 때문에 undefined를 출력한다.
- let,const는 호이스팅 후 이전 라인에서 접근하려고 한다면 에러를 발생시킨다.
클로저 함수
- 함수가 생성될 때 스코프를 기억하여, 함수가 생성된 이후에 해당 스코프에 접근할 수 있게 해준다.
- 데이터를 캡슐화하거나 은닉할 때 유용하게 사용된다.
this
- 문맥에 따라 가르키는 것이 달라진다.
- 글로벌 컨텍스트 => 브라우저(window), 노드(module)
- 생성자 함수, 클래스 => 생성될 인스턴스 자체 => 동적 바인딩(누가 될지 모르며 누가 호출하냐에 따른)
- 정적 바인딩 => bind 함수를 이용하여 수동적으로 바인딩
화살표 함수
- ES6 개념으로 깔끔한 문법과 생성자 함수로 사용이 불가능하다.
이벤트 캡쳐링과 이벤트 버블링
- 캡쳐링 : 부모 컴포넌트에서 => 자식 컴포넌트
- 버블링 : 자식 컴포넌트에서 => 부모 컴포넌트의 이벤트 호출
이벤트 루프
- 싱글 스레드 기반인 자바스크립트는 하나의 콜 스택을 가지기에 동기적으로 처리된다.
- 이때 비동기 요청은, 자바스크립트이 실행환경인 브라우저나 Node가 담당한다.
- 자바스크립트 엔진과 실행환경을 연동 시켜주는 것이 이벤트 루프이다.
- 이벤트 루프가 2개의 큐를 감시하고 있다가 콜 스택이 비게 되면 콜백 함수를 꺼내와서 실행한다.
- 마이크로 태스크 큐가 우선순위를 가지기에, 마이크로 태스크 큐의 콜백 함수를 전부 실행하고 나서 매크로 태스크 큐의 콜백함수들을 실행한다.
- 매크로 태스크 큐 :
setTimeout, setInterval, UI 렌더링, requestAnimationFrame, script, mousemove...=> 일반적인 이벤트 핸들러와 콜백함수 - 마이크로 태스크 큐 :
Promise, MutationObserver, await
prototype
- 자바스크립트의 모든 객체는 자신이 원형이 되는 객체를 가지며 이를 프로토타입이라고 한다.
- 보이지 않는 속성인 프로토타입이 자신의 프로토타입 객체를 참조한다.
prototype 체인
- 어떤 객체의 프로퍼티를 참조하거나 값을 할당할 때 해당 객체에 프로퍼티가 없으면 그 객체의 프로토타입 객체를 연쇄적으로 보면서 프로퍼티를 찾는 방식을 말한다.
브라우저에 URL을 입력하면
- 도메인을 입력 시, DNS 서버로 IP주소를 받아온다.
- 해당 IP로 리소스 파일을 요청하고 브라우저가 이를 렌더링하여 사용자에게 보여준다.