TIL.자바스크립트 면접정리 2

1. 이벤트 버블링이란 무엇인가?

DOM이벤트가 상위요소로 전파되는 현상

DOM에서 이벤트가 발생했을 때 거기에 등록된 이벤트 리스너 함수가 있으면 실행을 시도한다. 그리고 이벤트는 부모요소를 통해 DOM트리 위쪽으로 전파되며 거쳐가는 DOM요소마다 같은 일(이벤트 리스너 확인 및 실행)이 반복된다. 이 버블링은 최상위 요소인 document까지 진행된다.

2. ===과 ==연산자의 차이는?

== 추상적인 등가 연산자,===엄격한 등가 연산자다.
==는 loose equality연산자라고도 한다.

1 == "1"; // true
1 == [1]; // true
1 == true; // true
0 == ""; // true
0 == "0"; // true
0 == false; // true

==는 사용하지 말아야 한다. 예외가 있다면 null과 undefined를 비교할 때는 편리한 측면도 있다.

3.SPA앱이 무엇인지, SEO는 어떻게 해야하는지

전통적으로 웹사이트는 브라우저를 통해 서버에서 HTML을 받아서 렌더링하는 방식이었다. 사용자가 다른 URL로 이동하면 페이지 전체가 새로고침되고 서버가 이동할 URL에 맞는 새 HTML을 전달해준다. 이것을 서버사이드렌더링이라고 부른다.

그러나, 최신의 SPA에서는 클라이언트 사이드 렌더링을 사용한다. 브라우저는 초기 페이지와 함께 앱에 필요한 스크립트,스타일시트를 내려받는다. 사용자가 다른 페이지로 이동하면 페이지 새로고침은 발생하지 않는다. SPA는 초기 로딩 때 가져온 자바스크립트를 사용해 데이터와 페이지를 동적으로 업데이트 한다.

장점

• 사용자에게 앱이 보다 반응성있게 느껴지고 페이지 전환 사이에 화면 깜빡임과 새로고침 딜레이를 보지 않아도 된다.
• 서버에 더 적은 수의 HTTP리퀘스트가 간다.
• 서버와 클라이언트 사이의 확실한 역할 구분이 이뤄진다.

단점

• 스크립트,스타일시트 등 필요한 리소스가 많아서 초기 로딩이 더 무거워진다.
• SPA는 컨텐츠의 렌더링을 자바스크립트에 의존한다. 하지만 모든 검색엔진이 크롤링 중에 자바스크립트를 실행하지 않는다. 이는 검색엔진 최적화(SEO)에 장애물이 된다.
  SEO가 필요하다면 서버사이드렌더링을 사용하면 된다.

4. 콜백대신 프로미스를 사용하는 것의 장단점은?

비동기를 더 쉽게 구현할 수 있는 것이 장점이다.

장점

• 가독성이 떨어지는 콜백지옥에서의 탈출
• .then()을 사용해서 순차적인 비동기 작업을 가독성있게 작성할 수 있다.
• Promise.all을 사용해서 병렬로 실행되는 비동기 작업을 쉽게 작성할 수 있다.
• 프로미스가 있으면 콜백만 사용하는 코딩에서 발생하는 아래와 같은 일들이 발생하지 않는다!

  1. 콜백을 너무 빨리 실행 2.콜백 너무 늦게 실행하거나 실행하지 않음 3. 콜백을 너무 적게 또는 너무 많이 실행4.필요한 환경변수/파라미터의 전달 실패 5.확인해야 하는 에러,예외가 숨어버린다.

단점

• 조금 더 복잡한 코드
• ES2015를 지원하지 않는 구형 브라우저에서는 사용할 수 없다.

5. 객체 속성,배열항목 반복에는 어떤 방법을 사용하는가?

객체: for-in + hasOwnProperty, Object.keys 배열:for,forEach,for-of

1) 객체

• for-in루프
  for(var property in obj){console.log(property);}
  하지만 상속받은 속성도 포함한다. 그래서 obj.hasOwnproperty(property)를 사용해서 검사해야 한다.

2)배열

• for 루프
  `for (var i=0; i<arr.length; i++)``
  ES2015에서는 변수명 충돌을 방지하기 위해 var대신 블록 스코프 변수 키워드 let을 사용하는 것을 추천한다.
• forEach
  arr.forEach(function (el,index){...})
  이 방법은 index변수가 필요없다면 굳이 선언하지 않아도, 코드에서 생략해도 되기 때문에 더 편리하다.
• for-of 루프
  for(let elem of arr){...}
  for-of 문법은 (string,array,map,set)등으로 반복문을 만들 수 있다. for 루프와 forEach메소드의 장점을 조합한 것이라 할 수 있다. for-of문법은 둘의 장점을 가진다. for 루프보다는 forEach 메소드를 더 많이 사용한다. 하지만 이제 ES6를 사용할 수 있으므로, for - of 문법을 더 많이 활용한다.

6.mutable,immutable객체의 차이점

이미 선언된 값의 수정 가능, 불가능 여부

불변성은 함수형 프로그래밍에서 핵심 개념이다. 가변(mutable)객체는 만들어진 후에 그 값이 변경될 수 있는 객체다. 불변(immutable)객체는 만들어진 후에 변경될 수 없다.

불변객체의 예) 자바스크립트에서 몇몇 내장 타입(숫자,문자열)은 불변이다.하지만 커스텀 객체는 일반적으로 가변적이다. 불변객체로는 Math,Date가 있다.

7.동기,비동기 함수의 차이점

코드의 순차적인 실행 vs 콜백에 전달된 코드를 나중에 실행

동기함수는 앞에 있는 코드의 실행이 완료되어야 다음으로 넘어간다. 실행 순서가 보장되지만,어떤 코드의 실행시간이 길어진다면 프로그램이 멈춘 것처럼 보이게 될 것이다.

비동기 함수는 보통 콜백함수를 파라미터로 받고 실행 즉시 다음라인에 있는 코드로 넘어간다. 콜백은 비동기 작업이 완료되고 콜 스택이 비었을 때 실행된다.웹 서버로부터 데이터를 불러오는 등의 무거운 작업은 비동기적으로 실행되어야 한다.

8. 이벤트 루프란 무엇인가? 콜 스택과 태스크 큐의 차이점은?

동기 함수는 스택에 즉시 추가, 비동기 콜백은 태스크 큐에 대기하고 있다가 이벤트 루프가 스택에 추가

이벤트 루프는 싱글 스레드 루프로 콜 스택을 모니터링하면서 태스크 큐에 실행해야할 작업이 있는지 확인한다. 만약 콜 스택이 비어있고 태스크 큐에 콜백함수가 있다면, 함수는 큐에서 제거되고 실행을 위해 콜스택에 추가된다.

console.log같은 동기 함수는 스택에 바로 들어가 실행된다. 하지만 비동기 web api인 setTimeout은 스택에 들어간 후 바로 지워지고 대신 웹브라우저에서 타이머를 실행시킨다. 타이머가 끝나면 콜백을 태스크 큐에 추가하고, 모니터링하고 있던 이벤트 루프가 콜백을 스택에 추가해서 실행한다. 콜백 안에 비동기 함수가 있다면 비슷한 과정이 반복될 것이다.

태스크 큐 (TASK Queue)
태스크 큐는 생성된 태스크가 적재되는 큐이다.
태스크 큐는 javascript 실행환경인 브라우저에 위치한다.
태스크는 web API를 사용하는 경우 생성된다(Window,Document,Event,Fetch)
일종의 대기열과 같은 개념. setTimeout,setInterval,setImmediate등과 같은 비동기 처리나 이벤트리스너의 콜백과 같은 처리는 태스크 큐로 들어간다.
콜스택(Call stack)
실행컨텍스트가 적재되는 스택
콜 스택은 자바스크립트 엔진에 위치한다.
작동되는 순서에 따라 차례대로 콜 스택에 들어가고, 값을 반환하면 콜 스택에서 지워진다. 자바스크립트는 싱글 스레드를 기반으로 하기에 단 한줄의 콜 스택만 존재한다.