프론트앤드 면접 질문 정리(Javascript)

L·2023년 3월 28일

자바스크립트 프론트앤드

프론트앤드 면접 정리

목록 보기

1/2

꾸준히 추가중입니다.👍

✔ 자바스크립트에 대해 설명해주세요.

자바스크립트의 특징은 싱글스레드를 이용하면서 논-블로킹 언어.

싱글스레드
- 자바스크립트는 단일 작업 1개만을 처리할수있으며 스레드에는 작업순서를 담당하는 콜스택과 메모리정보를 관장하는 힙으로 구성되어있다.
논 블로킹 언어
- 논-블로킹은 기존에 함수를 실행하고있어도 비동기처리 ,setTimeout,이벤트 처리 같은 내용들은 이전에 실행하고있던 내용들을 막지않기 때문에 논 블로킹 언어라고 하는것임.
🔍참고
- https://beomy.github.io/tech/javascript/javascript-runtime/
- https://velog.io/@nittre/%EB%B8%94%EB%A1%9C%ED%82%B9-Vs.-%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EB%8F%99%EA%B8%B0-Vs.-%EB%B9%84%EB%8F%99%EA%B8%B0

✔ Promise와 Callback의 차이점

공통점: 비동기를 처리하기 위한 방법
Callback은 어떤 코드에 인자로 넘겨주는 함수를 말하며, 인자를 받은 함수가 어느 시점에 부를것인가에 대한 제어권을 가지는것이 특징
Promise는 비동기 작업을 할수 있는 객체를 말하며, 비동기 처리가 끝나면 Promise객체를 리턴해줌.
- 대기(결과에 상관없이 처리가 완료되지 않은상태,pending), 이행(처리가 성공된 상태,fulfilled), 거절(처리가 실패한 상태,rejected) 총 3가지 상태를 가지고 있음.
Callback은 중간과정이 계속해서 주가되면, 코드의 들여쓰기가 깊어지는등 가독성에 문제가 있어서, 지금은 콜백 방식을 지양하고 있음(콜백지옥). 이를 개선하기위해 Promise에서는 then메소드의 메소드 체이닝 기법을 이용하여 가독성 좋게 비동기 처리를 할 수 있다.
Promise는 최종 호출된 결과값을 리턴할수 있기 때문에, 외부에서 사용할수있지만, Callback은 콜백함수 밖에서는 결과값을 사용할수가 없는것이 차이점.

🔍참고

✔ 콜백 지옥이란?

자바스크립트 코드가 복잡해지면서, 콜백함수 안에 또다른 콜백함수를 중첩해서 사용하다보면 쌓여가는 들여쓰기 때문에 코드의 가독성이 나빠지는 현상.
이를 대신하기 위해 Promise와 async~await를 이용 하면 가독성을 해치지않는 선에서 비동기를 처리할 수 있다.

🔍 참고
- https://www.daleseo.com/js-async-callback/#google_vignette

✔ async~await

비동기처리 함수를 일반함수처럼 처리하기 위한 문법.
사용방법은 async구문을 비동기 처리 내용이 있는 function 앞에 붙인다(async function asyncFunc(){...}).
- async 함수는 무조건 Promise객체를 리턴하며, 만약 async 함수의 반환값이 Promise가 아니라면 암묵적으로 Promise로 감싸진다.
await는 async를 붙인 함수를 호출할때 붙이며, await안의 내용의 실행이 끝날때까지 다음 소스내용은 동작하지않음. (const result = await asyncFunc()).
- 단 아래와 같은 경우에 대해서는 문법 오류가 발생한다.
  - await를 일반 함수에 붙이면 오류가 발생한다.
  - await는 최상위 레벨 코드에서 작동하지 않음.
🔍 참고
- https://ko.javascript.info/async-await
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

✔ Promise와 async~await의 차이점?

Promise는 Promise.all를 이용하여 여러개의 비동기 처리를 병렬식으로 처리가 가능.
async~await는 await를 붙여 호출하는 비동기 로직이 처리될때까지, 아래 내용이 실행이 연기 되는것의 차이.
Promise는 then()과 catch() 메서드를 통한 에러처리. async~await는 try~catch 구문을 이용하여 에러처리.

🔍참고

✔ 실행 컨텍스트

함수 호출 시 함수 내 실행 환경과 식별자 정보들을 담은 일종의 객체이며, 담긴 정보는 총 3가지가 있음.
1. Variable Environment
  - 현재 실행 환경(Environment Record)와 외부 환경 정보(OuterEnvironment Reference)가 담겨져 있으며, 스냅샷 형태로 저장.
2. Lexical Environment
  - Variable Environment와 똑같은 정보이지만 변경사항이 실시간으로 변경.
3. This Binding
  - this객체의 정보
코드가 실행되는 순간 전역 컨텍스트(ex.전역변수)가 쌓이고, 함수가 호출될때마다 콜 스택에 해당 함수의 실행 컨텍스트가 쌓임. 모든 함수 실행이 끝났을때, 전역 컨텍스트 콜스택이 빠져 나가고 콜 스택이 전부 비워짐으로써 코드 실행이 종료가 됨. 즉, 먼저 끝나는 순서대로 콜 스택에서 빠져 나감(FILO)

✔ Lexical Environment

실행 컨텍스트 내부의 식별자와 외부 환경정보를 일종의 사전 처럼 구성하고 있는 내용을 말한다.(컨텍스트 안에는 식별자 a,b,c 있으며 외부 환경 정보는 d를 참조하고 있다.)
1. 현재 실행환경(Environment Record): 실행 컨텍스트 내부의 식별자 정보들.
2. 외부 환경정보(OuterEnvironment Reference): 실행 컨텍스트 바깥에서 참조하고 있는 실행환경 정보들.

✔ 호이스팅

함수를 실행하기전에 자바스크립트 엔진은 식별자(함수 선언, 변수)들을 먼저 수집함. 그래서 식별자 정보들은 실제로는 맨위에 올라가지않지만, 편의상 식별자 선언문이 맨 위로 올라가는 있는것 처럼 간주하는 현상을 말함.
변수는 선언 부문만 호이스팅이 되며, 초기화(할당)은 이 후에 이루어짐. 다만, let,const는 호이스팅이 발생하지만, 초기화가 되지않기때문에 에러가 발생.

✔ 클로저

함수 또는 함수 선언될 시점의 Lexical Environment의 관계를 나타내는 개념인데, 함수 선언 시 만들어지는 Scope Chain을 함수를 호출할 때 클로저가 생성.
즉, 외부함수의 실행이 끝나더라도 내부함수가 외부함수의 변수를 참조하는 한, 외부함수의 변수는 계속 사용할 수 있는 현상.

function outer(){
	let string = 'Hello';
  	return function(){
    	let innerString = 'JS';
        console.log(`${string} ${innerString}`);//함수 선언시 외부환경인 string변수를 참조하고있었기때문에, 함수를 호출시, string은 클로저가 생성이 되어 Hello JS가 나올수가 있음.
      
    }
}
const func = outer();
console.log(func());

주로 접근제한제어(private 접근자 흉내), debounce 기법에서 많이 사용.

✔ var,let,const

변수를 선언하고 값을 할당받기위해 사용하는 키워드

	var	let	const
재선언	가능	불가능	불가능
재할당	가능	가능	불가능(객체&배열의 요소는 변경 가능)
유효 범위	함수scope	블록scope({})	블록scope({})
호이스팅	발생	발생하지만,초기화X	발생하지만,초기화X

✔ 메소드 체이닝 기법이란?

메소드가 사슬고리처럼 함수에서 객체를 반환하면, 객체안에 있는 메서드를 줄줄이 이어서 호출을 할 수 있는 패턴을 말한다. 대표적인 예는 아래와 같다
1. js Array 메서드(map,filter등) : 호출하면 결과배열객체를 리턴해주기 때문에 배열 메소드를 이어서 사용할 수 있다.
2. Promise:then() 메서드 호출 시 새로운 프로미스 객체가 반환되기때문에 지속적으로 then() 또는catch() 를 사용 할 수 있다.

🔍참고

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

✔ 이벤트 버블링과 캡쳐링

이벤트 버블링은 물안에 있는 공기방울이 물 위로 떠오르는것처럼 이벤트 발생 시 선언한 곳에서 최상단까지(body) 이벤트가 발생하는것을 말함.
브라우저는 기본적으로 이벤트를 감지했을 때 해당 요소의 이벤트가 발생하고, 이벤트가 전파되어 최상단 요소의 등록된 이벤트까지 발생이 됨.
이벤트 캡쳐링은 반대로 최상단으로부터 이벤트 선언부까지 이벤트가 전파되어 발생하는 것을 말함.
이벤트 캡쳐링을 하고싶다면, addEventListener(type, listener, options) API 에서 마지막파라미터인 options 객체에서 capture속성값을 true로 하면 됨.

🔍참고
- https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
- https://ko.javascript.info/bubbling-and-capturing

✔ 이벤트 위임에 대해 설명해주세요.

이벤트 위임이란 특정 요소에만 이벤트를 선언하는것이 아닌, 상단요소에 이벤트를 선언함으로써, 하단 노드들의 이벤트 제어를 위임하는 패턴을 말함.
주로 동적으로 추가되는 요소에 대한 이벤트를 일일히 주기보다는 상단 요소에 이벤트를 선언. 요소가 추가될때마다 이벤트를 추가하는 작업을 안해도 된다는것이 장점.

🔍참고
- https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

✔ javscript의 this란?

실행컨텍스트가 생성이 되었을때 결정.

일반적으로 window객체.nodejs 는 global객체.
객체에서 메서드 호출 시 호출하는 객체를 가리킴
함수를 호출했을 당시에 this는 누가 호출을 했느냐에 따라 달라짐.

const obj={
	outerFunc(){
      console.log(this);//{outerFunc: ƒ}
      const innerFunc = function(){
        console.log(this);
      }
      innerFunc();//단독으로 호출했기때문에 window객체를 가리킴
      const obj2 = {
        outerFunc:innerFunc
      }
      obj2.outerFunc(); // this를 로그에 출력하는 함수이지만, obj2객체에서 호출했기때문에 {innerMethod: ƒ}가 나옴.
    }
}
obj.outerFunc();

화살표 함수는 this를 바인딩 과정이 없기때문에, 스코프 체인으로 인해 상위 스코프에 있는 this를 그대로 활용

<div class="div1"></div>
<div class="div2"></div>
document.querySelector('.div1').addEventListener('click',function(){
console.log(this); //<div class="div1"></div>
})
document.querySelector('.div2').addEventListener('click',()=>{
console.log(this); //window
})

콜백함수 호출시에 this

const callFunc = function(){
  console.log(this);
}
const obj = {
 execute:function(cb){
   cb(); //window
   cb.call(this);//{execute: ƒ}
 }
}
obj.execute(callFunc);

생성자 함수 내부에서의 this

function Human (name,age){
	this.name=name;
	this.age=age;
  console.log(this); // {name:'홍길동',age:30}
}
const HongGilDong = new Human('홍길동',30);

bind,apply,call을 통한 명시적으로 binding하는 this.(call,apply는 바인딩 즉시 실행)

const obj ={
callFunc(){
  const innerFunc = function(){
    console.log(this); //{callFunc: ƒ, bindFunc: ƒ, applyFunc: ƒ}
  }
  innerFunc.call(this);
},
bindFunc(){
  const innerFunc = function(){
    console.log(this);//{callFunc: ƒ, bindFunc: ƒ, applyFunc: ƒ}
  }.bind(this)
  innerFunc();
},
applyFunc(){
  const innerFunc = function(){
    console.log(this);// {callFunc: ƒ, bindFunc: ƒ, applyFunc: ƒ}
  }.apply(this);
}
}
obj.callFunc();

✔ 기본형과 참조형 변수

기본형 변수는 Number,String,Boolean,null,undefined이고, 참조형 변수는 Object,Array,Function,Date등을 가리킴
두 변수의 차이점은 할당시 값이 복제되느냐 주솟값이 복제 되느냐의 차이이지만, 정확하게는 기본형도 주소값을 가리키고 있지만, 기본형은 값이 담긴 주소값을 담고 있고, 참조형은 변수들이 있는 묶음의 주솟값을 담고 있음.
기본형에서 값을 복사하는 경우에는, 같은변수지만, 담긴 주소값이 다르기때문에, 하나를 변경해도 다른 변수에 영향이 없음.
참조형은 변수들 묶음의 주솟값을 담고 있기때문에, 어느 참조형변수 하나의 값이 바뀌면, 묶음의 주솟값을 가지고있는 모든 변수가 바뀌는것임.

✔ 얉은 복사와 깊은 복사의 차이점

얉은 복사는 객체에서 아래 단계의 값만을 복사. 중첩객체가 있을때, 중첩된 객체의 주소값을 복사하기때문에, 원본 객체가 변경되면 복사된 객체의 중첩객체의 프로퍼티도 변경이 되는 문제가 있음.
깊은 복사는 얉은 복사에 중첩된 객체 끝까지 찾아서 값을 전부 복사하는 방법.
(JSON.stringfy 메서드를 통해 간단한 깊은 복사 가능)

✔ 객체의 불변성

객체의 불변성은 파라미터로 객체를 넘겼을때, 원본 객체는 변경없이 유지가 되어야하는것을 말한다.
객체의 불변성을 유지하는 방법
1. Object 리턴
2. 비구조화 할당을 통한 객체 생성
3. Object.assign을 이용.

✔ javscript에서 일반 for문과 배열 메서드인 forEach와 map중 어떤게 속도가 더 빠른가요?

🔍 면접 문제 참고

다음 포스트