자바스크립트 면접 리스트

브라우저의 렌더링 과정

브라우저 주소창에 www.naver.com 치면 -> 네이버 서버를 찾아간다. -> DNS(실제 서버가 어디에있는지 알고 있는 서버)가 연결해줄 곳을 찾음 -> (여기서 주소 앞에 https가 붙었다면 https방식으로 통신) -> 서버의 기본설정이 대부분 index.html되어 있어 서버에서 이파일을 클라이언트로 보냄 -> 브라우저는 텍스트로 이루어진 index.html 파일을 파싱한다. -> 한줄한줄 읽으면서 DOM트리를 만들어나감. -> 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를 파싱함 -> CSS파싱이 끝나면 중단된 html을 다시읽고 DOM트리를 완성 -> 완성된 DOM트리와 CSSOM트리를 합쳐 Render Tree를 만들고 그린다.javascript는? -> 중간에 HTML파서는 Script태그를 만나게 되면 javascript 코드를 실행하기 위해 파싱을 중단 -> 제어권한을 자바스크립트 엔진에게 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행함.

Http와 Https 통신 방식의 차이?

결정적 차이는 보안이다.

1. http방식은 네트워크상에서 정보를 누군가가 마음대로 열람, 수정이 가능하지만, https는 누가 볼수없도록 막음.

2. http방식이 https방식보다 빠르다.

3. Http방식은 민감한정보를 다룰 때 항상 변조, 해킹 가능성을 생각해야한다. Https는 설치 및 인증서를 유지하는데 추가적인 비용이 발생. -> 따라서, 민감한 정보가 있는 페이지의 경우 Https 그럴필요가없으면 http로 만들면 된다.

함수형 프로그래밍(Function Programming)

함수형 프로그래밍이란

함수형 프로그래밍은 순수함수와 보조 함수의 조합을 통해 로직내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

함수형 프로그래밍에 개념에서 순수함수란 무엇인가

순수함수는 같은 입력이 주어지면, 같은 출력을 반환해야하고, side effect(부작용) 이 없어야한다.
결국, 함수형 프로그래밍은 순수함수를 통해 sideeffect를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 한 방법이다.

OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇인가

객체지향은 객체 안에 상태를 저장하고, 이 상태를 이용해서 메소드를 추가하고 상태변화를 설정하고 조정하기위해 다양한 기능을 사용한다. 이에 반해 함수형 프로그래밍은 상태를 제어하는것보다 상태를 저장하지 않고 없애는데 주력한다.
예를들면, 객체 지향은 상태를 저장하는 필드와 그 필드들을 이용해 기능을 제공하는 메소드를 만들고 클래스를 만듭니다. 반면 함수형은 몇몇 자료구조(list, map, set) 등을 이용해 최적화된 동작을 만들어내는 것이다.

웹 프로토콜

웹 프로토콜이란?

웹 프로토콜은 웹에서 쓰이는 통신규약이다. 통신규약이라는 것은 쉽게 설명하면, 통신을 할때 내가 이렇게 할게 너는 이렇게 해줘 라고 약속하는 것.

Http 통신이란?

웹 프로토콜중 하나로 HTTP가 가장 많이 쓰이는데 Hyper text Transfer Protocol의 약자이다.
쉽게말하면, 인터넷에서 데이터를 주고 받을 수 있는 통신규약 정도로 보면 된다. 요청과 응답으로 이루어져있어 '어떤 데이터 주세요'하고 요청하면, '이 데이터 줄게요' 라고 응답하는 것이다.

Http 1.1과 2.0의 차이는?

가장 큰 차이는 속도이다. 2.0같은 경우는 헤더를 압축해서 보내기도하고, 한번의 연결로 동시에 여러 메시지를 주고 받을 수도 있다.

비동기 프로그래밍(Asynchronous)

AJAX란 무엇인가

자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식.
보통은 서버로부터 웹페이지가 반환되면 전체를 갱신해야하는데 AJAX를 사용하면, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다. 즉, 갱신이 필요한 부분만 로드하여 갱신하면 되므로 빠르고, 부드러운 화면효과를 기대할 수 있다(SPA)

Promise와 Callback의 차이점은 무엇이며 각각의 장단점에 대해 설명해달라

둘 다 자바스크립트에서 비동기처리를 위해서 사용되는 패턴이며,
Callback 같은 경우 함수의 처리 순서를 보장하기 위해서 함수를 중첩하게 사용되는 경우가 발생해 콜백헬이 발생하는 단점과 에러처리가 힘들다라는 단점이 있다.
그래서 나온게 Promise이며 ES6부터 정식 채택되어 사용중이다.
Promoise 생성자 함수를 통해 인스턴스화하며,

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

비동기 처리에 성공하면 resolve메소드를 호출해서 비동기 처리 결과를 후속처리 메소드로 전달한다.
비동기 처리에 실패하면 reject메소드를 호출해서 에러메시지를 후속처리 메소드로 전달한다.
후속처리메소드는 then과 catch가 있다. 둘다 Promise를 반환한다.
then 을 가지고 메소드 체이닝을 통하여서 콜백헬 문제를 해결 할 수 있다.

Async, Await와 Promise의 차이는

Promise를 더욱 쉽게 사용할 수 있도록 한 ES2017(ES8) 문법이다.
함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.
async, await를 사용할 경우 코드가 간결해지지만, 에러처리를 잡기 위해 try catch를 사용해야한다. 동기적인 코드흐름으로 개발이 가능하다.

자바스크립트의 타입

자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가

다른언어에는 int double 등 숫자타입의 다양함이 있지만, number는 하나만 있다.
정수만을 위한 타입이 없고, 모든 수를 실수로 처리한다.

자바스크립트의 원시 타입은 몇가지인가? 종류는?

boolean, string, number, undefined , null , symbol 이렇게 6가지 종류다.
undefined는 선언만 되어있고 값은 없는 상태 , null은 자료형이 객체이며 빈값을 의미한다.

실행 컨텍스트(Execution Context)

자바스크립트의 코드들이 실행되기 위한 환경.

scope, this binding, hoisting, closuer 등의 동작원리를 담고 있는 핵심개념이다!

자바스크립트에서 컨텍스트는 전역 컨텍스트 ,함수 컨텍스트 이렇게 2가지가 존재한다.

js엔진이 javascript 파일을 파싱후, 실행을 하면 글로벌 실행 컨텍스트가 생성이 된다.

전역 컨텍스트 하나 생성 후에 함수 호출할 때마다 함수 컨텍스트가 생성
컨텍스트를 생성시에 변수객체, 스코프 체인, this가 생성된다.

컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프체인을 따라 올라가며 찾음.

함수 실행이 마무리되면 해당 컨텍스트는 사라짐.
페이지가 종료되면 전역 컨텍스트가 사라짐.

실행 컨텍스트는 실행 스택 도는 콜 스택 구조에 생성되고 소멸이 된다. 스택구조이기 때문에 LIFO를 따른다.

자바스크립트의 호이스팅(Hoisting)은 어떻게 이루어져 있는가

변수를 선언하고 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상

예를들어, 코드 상단에서 console.log(a)를 찍고 하단에서 var a=1; 이라고 하였을때 a는 undefined라고 나온다.

이런 현상을 호이스팅이라고 한다. 함수의 경우 함수표현식은 호이스팅이 적용되지 않으나 일반 함수선언문은 함수 호이스팅이 적용된다.

클로저(Closure)란 무엇이며, 왜 이러한 패턴을 사용하는가

렉시컬 스코프(정의에 따라 상위스코프를 결정)를 기억하여 접근이 가능한 상태를 의미한다.

어렵다...
풀이하자면,
반환된 내부함수가 자신이 선언됬을때의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수라는 것이다.

클로저에서 참조하고 있는 변수를 자유변수라고 한다.

function outer(){
  const name = 'outer name';
  return function inner() {
     console.log(name);
  }
}

const func = outer();
func();

inner() 함수는 자신에 상위스코프인 outer() 함수에 스코프에 접근이 가능하다.(정의되는 시점에 스코프가 결정이 됩니다)

outer() 함수를 실행 후, func() 를 실행하면 여전히 name 변수에 접근이 가능하여 outer name 을 출력하는걸 확인이 가능합니다. 이처럼 outer() 함수에 생명주기는 끝났지만, inner() 함수에서 상위 스코프를 기억하여 참조하는걸 클로저라고 부른다.

사용 하는 이유 :

1) 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
2) 전역 변수의 사용을 억제 하기위해
3) 정보를 은닉하기 위해

자바스크립트의 순환참조란? 어떤게 문제이고 해결방법은?

function f(){
  var o = {};
  var o2 = {};
  o.a = o2; // o는 o2를 참조한다.
  o2.a = o; // o2는 o를 참조한다.

  return "azerty";
}

f();

위와 같이 서로 순환되어서 참조되어져서 가비지컬렉터가 작동하지 않고 메모리 누수가 발생된다.
해결방법은 null을 할당해서 연결을 끊는 방법을 사용한다.
대부분의 브라우저에서는 Mark and sweep알고리즘을 사용. 그래서 가비지컬렉터가 참조되지 않는 객체가 있을 때 동작하는 것이 아니라 접근 할 수 없는(닿을 수 없는) 객체 일 때 동작한다.

자바스크립트의 배열이 실제 자료구조 배열이 아닌데 그 이유는?

자바스크립트의 배열은 실제 자료구조의 배열과 다르게 HashMap으로 구현되어있다. 이 HashMap을 구현하기 위해서는 연결리스트로 구현하게 되는데 연결리스트에서 값을 찾기 위해서는 탐색해나가면서 값을 찾는 불상사가 발생한다. 이를 해결하기 위해서 타이핑된배열(Int8Array,Float32Array 등) 이 추가되고 있다.

이벤트 루프에 대해서 설명, 동시성 모델에 대해서 설명

자바스크립트는 싱글 스레드 기반 언어이다. 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고 스택의 맨위에서부터 아래로 한번에 하나의 함수만 처리 할 수 있다.(LIFO)
하지만, 자바스크립트에는 이벤트 루프라는것을 통해 동시성을 지원한다. (동시에 일어나는 것이 아니라 동시에 일어나는 것처럼 보이게 하는것이다!)

이벤트 루프는 콜 스택에서 실행 중인 게 있는지 확인하고, Event queue에 작업이 있는지 확인해서 콜스택이 비어있다면 이벤트큐 내의 작업이 콜스택으로 이동되어서 실행된다.

프로토타입이란?

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거(중복 제거 방법은 기존의 코드를 재사용하는것!!)

즉, 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메소드를 프로토타입에 미리 구현해 놓음으로써 또 구현하는것이 아니라 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.

proto 접근자 프로퍼티로 자신의 프로토타입, 즉 Prototype 내부슬롯에 접근 할 수 있음.

프로토타입체인이란? 객체의 프로퍼티에 접근하려고 할때 객체에 접근하려는 프로퍼티가 없으면, proto접근자 프로퍼티가 가리키는 링크를 따라 자신의 부모역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.

프로로타입체인의 최상위 객체는 Object.prototype이다. 이 객체의 프로퍼티와 메소드는 모든 객체에게 상속된다.

prototype 프로퍼티는 생성자함수가 생성할 인스턴스의 프로토타입을 가르킨다.

This란?

this는 함수 내에서 함수호출 context을 의미.
함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라진다.

일반함수의 this는 window(전역)을 가르키며, 화살표 함수의 this는 언제나 상위스코프의 this를 가르킴

Call, Apply, Bind 함수

3가지 방법은 this를 바인딩하기 위한 방법이다.
Call은 this를 바인딩하면서 함수를 호출하는 것, 두번째 인자를 apply와 다르게 하나씩 넘기는 것
Apply는 this를 바인딩하면서 함수를 호출하는 것, 두번째인자가 배열
Bind는 함수를 호출하는 것이 아닌 this가 바인딩 된 새로운 함수를 리턴함.

use strict모드에서의 this?

일반함수에서의 this는 undefined가 바인딩 됨.

크롬 정도의 브라우저를 제외하곤 ES6 스펙에 대한 지원이 완벽하지 않다. 해결방법은?

Babel을 사용한다. ES6이상의 문법의 코드들을 브라우저가 이해할 수 있게끔 ES5이하의 문법으로 변환

Babel이란?

Babel은 트랜스파일러이다. 컴파일은 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는것(C-> 어셈블리어)
트랜스파일러는 한언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환
(C++>C, ES6->ES5)

ES6 에서 추가된 스펙

let, const, rest parameter, class, arrow function...

var 와 let, const의 차이점

var은 함수 레벨 스코프를 지원, let,const는 블록레벨 스코프를 지원.

함수스코프에서 var 키워드를 사용하지 않고 변수를 정의하면 전역변수가 된다. 이는 예기치 못한 에러를 발생시킬 수 있다.

그걸 방지하기 위해 나온 것이 let, const이다. 이들은 블록스코프이기에 블록을 벗어나면 참조가 불가능하기 때문이다.

const로 정의한 변수는 재할당이 불가능하며, let, const는 중복정의를 허용하지 않는다.

Class 는 무엇이고, Prototype, fucntion의 ES5 스펙만으로 Class를 구현할수 있는가

구현가능하다. 자바스크립트에는 프로토타입이라는 것이 존재하여 클래스처럼 구현할 수 있다.
클래스는 자바스크립트의 프로토타입 기반 패턴의 문법적 설탕이다.

출처

https://sunnykim91.tistory.com/121
https://m.blog.naver.com/z1004man/222051088407