프론트엔드 면접 준비 JS (keep updating)

Q. CSS link를 head사이에 쓰는 것과 JS script를 body뒤에 사용하는 것은 좋은 사용법일까요?

css 파서가 head 태그 사이의 link 태그를 분석하는 동안, html파서는 body 태그 내의 html요소를 분석하고 있다. 만약 link가 html의 하단에 위치했다면, html파서의 분석이 끝나는 동안, css분석이 끝나지 못했기 때문에 스타일 적용이 늦어질 수 있다.

• Javascript script태그의 경우:
  https://sub0709.tistory.com/73 (설명이 정말 잘 돼 있다.)

Q. DOM이란?

DOM(Document Object Model) : HTML문서에 대한 인터페이스 => 원본 HTML 문서의 객체 기반 표현 방식으로, html과 비슷해보이지만, 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 '다양한 프로그램'에서 사용될 수 있다는 점 -> 자바스크립트에 의해 수정될 수 있는 동적 모델이어야 한다 -> DOM의 개체구조는 노드 트리로 구성된다. (DOM != HTML)

• DOM(Document Object Model) – HTML 요소들의 구조화된 표현
• CSSOM(Cascading Style Sheets Object Model) – 요소들과 연관된 스타일 정보의 구조화된 표현

출처: https://wit.nts-corp.com/2019/02/14/5522

Q. '=='와 '===' 연산자 차이점은?

==는 동등 연산자: 피연산자의 형태(타입)가 다르면, 강제로 변환하여 비교한다.

0 == ''     //true
0 == '0'     //true
1 == true     //true
false == '0'    //true
null == undefined    //true
false == null    //false
false == undefined    //false

=== 일치 연산자: 피연산자를 더 정확히 비교, 값 뿐만 아니라 피연산자간의 유형(타입)도 확인한다.

0 === ''     //false
0 === false    //false
1 === true     //false
NaN === NaN     //false
null === undefined     //false

Q. null과 undefined의 차이점은?

null은 명시적인 값, undefined는 문자 그대로 할당되지 않은 값.
선언되지 않은 변수: var, let, const를 붙여서 선언하지 않은 변수를 코드에서 사용하는 것
Undefined 변수: 선언은 됐지만 값이 할당되지 않은 상태, 함수가 값을 리턴하지 않으면 undefined를 반환

console.log(undefined == null) // true
console.log(undefined === null) // false

Q. Closure란 무엇이며 어떻게/ 왜 사용하는가?

• 접근 불가능한 영역에 통로를 만드는 것
• 클로져는 함수의 실행이 끝난 뒤에도 함수에 선언된 변수의 값을 접근할 수 있도록 만든 함수를 말한다.
• 함수는 블럭으로 둘러싸여 있고 하나의 스쿠프를 형성한다. 함수 안에 선언된 변수는 함수 바깥에서 참조할 수 없으며, 함수가 실행된 후에는 더 이상 사용할 수 없다.
• 하지만 자바스크립트에서는 함수 리턴값을 통해 함수 안에 선언된 변수를 노출시킴으로서 클로져를 형성할 수 있다.

  출처 https://blog.rhostem.com/posts/2020-04-12-fe-interview-handbook-js-1

Q. Closure란 무엇이며 어떻게/ 왜 사용하는가?

• 동기 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행(ex.은행)
  비동기 : 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행(ex.카페)
• 클라이언트에서 서버로 데이터를 요청 했을 때, 서버가 그 요청에 대한 응답을 언제 줄지도 모르는데 마냥 기다릴 수 없어 비동기처리가 필요(즉시 처리하지 못하는 이벤트들을 Web API를 이용하여 콜백큐로 보내서 이벤트루프를 통해 콜스택이 비었을 경우 실행)

Q. let, var, const 를 사용해 선언된 변수의 차이점은?

var 키워드로 선언된 변수는, 해당 변수를 포함하는 함수 스코프에 속한다. 함수 내에서 선언된게 아니라면 전역 스코프에 해당한다.
let, const는 블럭 스코프에 해당한다. (블럭 스코프: if ~ else, for 루프) 즉, 가장 가까운 중괄호{} 로 둘러쌓인 영역 안에서만 접근이 가능하다.