[Front-End] 기술 면접 질문 정리(JavaScript, 초급)

javascript에서 나올 수 있는 기본 개념을 정리해 보았다.

JavaScript

var, let, const의 차이점은?

• 세 가지 모두 변수 선언 키워드입니다.
• var은 ES6 이전에도 존재했던 키워드로, 함수 스코프 내에서 변수명 재사용, 값 재할당이 가능합니다.
• let과 const는 ES6부터 등장한 키워드로, 둘 다 같은 스코프 내에 변수명 재사용이 불가능하고 블록 스코프를 가집니다.
• let은 값을 재할당 할 수 있으며, const는 상수이기 때문에 선언과 동시에 초기화를 진행하고 값 재할당이 불가능합니다.(단 객체나 배열의 내부 값은 변경 가능)
• var은 변수명 재사용이 가능하기 때문에 변수명 재사용으로 인한 예기치 못한 부작용이 발생할 수 있어 const 사용을 권장합니다.
• 또한 var은 호이스팅 시 초기화 이전 undefined로 참조되지만, let과 const는 TDZ로 인해 초기화 전 참조가 불가능합니다.

호이스팅이란?

• 호이스팅이란 자바스크립트 엔진 실행 시, 변수와 함수 선언부를 코드 최상단에 끌어올리는 동작입니다.
• 결과적으로 함수의 선언과 초기화를 분리해 줍니다.
• 호이스팅을 통해 초기화 이전에도 해당 변수와 함수를 참조가능하지만, let과 const는 TDZ로 인해 참조가 불가능합니다.(var은 undefined로 참조가 됩니다.)

this란?

• this란 함수 호출 방식에 따라 동적으로 바인딩되는 참조 객체입니다.
• 예를 들어 일반 함수를 호출하면 default 값인 window(전역 객체)를 참조하게 되고, 객체 내부 메서드를 호출하면 호출자인 객체를 참조하게 됩니다.
• this는 apply, call, bind와 같은 메서드로 원하는 객체와 값을 명시적으로 바인딩해 줄 수 있습니다.
• 결과적으로 this 바인딩을 통해 코드 재사용을 가능하게 해 줍니다.
• 화살표 함수는 선언 시점의 상위 스코프에서 this 값을 정적으로 바인딩하게 됩니다.

화살표 함수와 일반 함수의 차이는?

• 일반 함수에 비해 화살표 함수는 보다 간결한 선언이 가능합니다.
• 일반 함수는 this를 사용할 때 명시적으로 바인딩을 해주어야 하지만, 화살표 함수는 선언 시점에 렉시컬 스코프에서 상위 스코프의 this 값을 정적으로 바인딩합니다.
• 따라서, 이후 따로 바인딩을 해줘도 화살표 함수의 this는 바뀌지 않으므로 바인딩으로 인해 예기치 못한 문제가 발생하는 것을 방지할 수 있습니다.

예기치 못한 문제?

• 예를 들어, a 객체에 b프로퍼티에 함수가 선언되어 있는 경우, 그리고 그 함수에 setTimeout과 같은 window 함수가 호출되어 있는 경우가 있다. 이때 setTimeout에서 console.log(this)를 출력하면 this를 호출하는 대상은 setTimeout의 window객체기 때문에 a.b를 호출해도 window 객체가 console.log()에 찍히게 된다. 만약 화살표 함수로 b프로퍼티를 구현할 경우, this는 a를 참조하게 된다!

== 와 ===의 차이점은?

• ==는 느슨한 비교로, 타입이 다른 두 대상을 암묵적으로 타입을 변환해서 비교합니다. 따라서 숫자 11과 문자 11을 동일하다고 판단합니다.
• ===는 엄격한 비교로, 타입의 차이도 비교합니다.

클로저란 무엇인가요?

• 클로저는 함수 선언 시점의 렉시컬 스코프를 기억하여 함수 종료 후에도 종료된 함수의 변수에 접근할 수 있는 구조입니다.
• 클로저를 활용하여 중요한 정보를 은닉할 수 있습니다.

프로토타입이란?

• 프로토타입이란 자바스크립트에서 객체 간 상속을 구현하는 핵심 메커니즘이자, 외부 객체의 속성/메서드에 접근할 수 있게 해주는 연결 구조입니다.

비동기 처리 방식에 대해 설명하시오

• 기본적으로 자바스크립트는 싱글 스레드로 동기처리를 지원합니다.
• 이 경우, rest api 요청이나, 타이머와 같은 비동기 요청이 필요한 부분에서 다음 코드를 진행하지 못하고 응답을 기다려야 하는 상황이 발생할 수 있습니다.
• 따라서, 자바스크립트는 Promise, async/await 등을 통해 특정 코드를 비동기적으로 처리할 수 있습니다.
• Promise는. then,. catch와 같은 체이닝 기법으로 비동기 요청을 처리하고, async/await는 try/catch문을 통해 동기적으로 보이지만 비동기적으로 응답을 처리하는 문법을 사용합니다.
• 자바스크립트는 함수를 처리할 때 Call Stack에 push 하고 처리된 함수는 pop을 합니다. 만약 비동기 함수를 만나게 되면 Callback Queue에 enqueue 하고 비동기 처리를 web api에 위임하여 처리합니다. 비동기 요청에 대한 응답이 올 때까지 자바스크립트는 Call Stack을 처리하며 다음 코드들을 실행합니다. 만약 Call Stack이 비게 되고 비동기 처리가 완료되면 Callback Queue을 dequeue 하고 Call Stack에 비동기 요청 로직을 push 하여 마저 처리합니다.

null과 undefined의 차이점은?

• null은 의도적으로 값이 없다는 것을 명시하는 것이고, undefined는 값이 할당된 적이 없는 것을 의미합니다.
• null은 객체 타입을 가지고 undefined는 undefined입니다.
• undefined는 선언만 되고 초기화는 되지 않은 상태를 의미합니다.

스코프란?

• 특정 변수나 함수를 접근할 수 있는 범위를 나타내며, 전역, 함수, 블록 스코프로 구성됩니다.
• 전역 스코프는 전역 범위를 의미하며, 함수 스코프는 특정 함수 내부의 범위, 블록 스코프는 if문, for문 안의 범위를 의미합니다.
• 현재 스코프에서 해당 변수가 있으면 스코프 체인을 따라 상위 스코프로 확장하여 변수를 탐색합니다.

렉시컬 스코프란?

• 렉시컬 스코프란 함수 선언 시점을 기준으로 상위 스코프가 결정되는 스코프 규칙입니다.
• 호출 위치가 아닌 정의된 위치를 기준으로 외부 변수에 접근합니다.

이벤트 루프란?

• 이벤트 루프는 자바스크립트의 비동기 작업을 처리해 주는 메커니즘입니다.
• 코드 실행 -> Call Stack, 비동기 실행 -> web api 등에 위임 -> 코드가 마저 실행됨 -> web api 완료 -> callback queue에 넣음 -> call stack이 empty가 될 경우 dequeue를 하고 call stack에 남은 비동기 처리를 push 해서 처리

DOM이란?

• DOM이란 Document Object Model의 약자로 HTML을 파싱 하여 자바스크립트가 조회 및 변경을 동적으로 제어할 수 있게 제공되는 트리 형태의 문서입니다.
• 트리 구조이기 때문에 자바스크립트에서 조회할 태그를 보다 빠르게 찾을 수 있으며 여러 이벤트 함수들이 내장되어 있어 다소 무거운 구조를 가지고 있습니다.