프론트엔드 면접 정리 - JavaScript

£€€.T.$·2023년 8월 1일
면접

거두절미하고 시작!

ES6에 대해서 설명해주세요

ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전이다.

1. 변수 선언 방식의 차이 (var, let, const)

  • var은 재정의와 재선언 모두 가능하다.
  • let은 가변변수로 재정의가 가능하지만 재선언은 불가능하다.
  • const는 불변변수로 재선언과 재정의 모두 불가능하다.
  • 재선언: 똑같은 이름의 변수를 다시 만드는 것
  • 재정의: 값이 지정된 변수에 값을 바꾸려는
  • 스코프(scope) : 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위

2. 템플릿 리터럴 (Template literals)

문자열 생성시 따옴표 대신, 백틱()을 사용한다. 따옴표와 달리 백틱 안에서는 줄바꿈이 반영된다. 또한, 문자열 사이에 변수나 연산을 넣을 때는 ${} 사이에 표현식을 삽입한다. // 기존 코드 console.log("이건 " + jsp + "입니다."); // 템플릿 리터럴 방식 console.log(이건 ${jsp}입니다.`);

3. 화살표 함수 (Arrow function)

4. 모듈 내보내고 가져오기 (export/import)

// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';

5. 클래스 (class)

6. 구조분해할당 (destructing)

const introduce = {name: 'unknown', age: 23};
// key와 같은 이름으로 변수 선언
const { name, age } = introduce;
// 다른 이름으로 변수 선언 -> 변수이름: 키값
const { myName: name, myAge: age } = introduce;

console.log(myName) // unknown
console.log(myAge) // 23

8. forEach() / map() / reduce()

자바스크립트는 무슨 언어인가요?

본래 브라우저를 제어하는 언어였으나 Node.js 라는 새로운 실행 환경의 등장으로 자체 어플리케이션을 만들 수 있게 된 언어.
프론트엔드와 백엔드 코드를 모두 작성할 수 있다.

Node.js란?
V8의 출현으로 우리가 흔히 사용하는 Node.js가 등장하게 되었다. Node.js 는 V8 엔진을 기반으로 하는 JavaScript 런타임 프로그램이다. JavaScript는 원래 브라우저라는 실행환경에서만 동작하는 언어였는데 이제 Node.js라는 실행환경 위에서도 작동할 수 있게 된 것이다. 덕분에 우리는 Node.js 로 웹서버를 구축하는 등 자체 어플리케이션을 만들 수 있게 되었다. JavaScript 하나로 프론트엔드, 백엔드를 모두 다룰 수 있게 되었기 때문에 JavaScript는 최고의 인기 언어로 떠오르게 되었다.

로컬환경도 만들어 줄 수 있고 다양한 환경에서 Javascript를 사용 할 수 있게 만들어주는 것이 Node.js다!

변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.

선언
변수 선언 단계는 자바스크립트 엔진에 변수 객체를 등록하는 단계을 말하며 var, let, const 키워드를 통해 할 수 있다.

초기화
자바스크립트 엔진에 등록한 변수의 메모리 공간이 생성되고, 값이 없다면 undifind로 초기화되고, 변수에 메모리 주소값이 저장되는 단계이다.

할당
undifind로 할당된 변수나 이미 값이 들어있는 변수에 사용자가 원하는 값을 할당 연산자(=)를 통해 변수에 값을 할당하는 단계이다.

호이스팅이란?
자바스크립트 함수가 실행되기 전에 함수 내부에 필요한 변수 값들을 모아 유효 범위의 최상단에 선언하는 것을 말한다.
다시말해, 함수가 실행되기 전에 자바스크립스 Paser가 함수 실행전에 해당 함수를 훑는 과정에서 함수 내(함수 블록 "{...}")에서 존재하는 내용 중 함수가 실행에 필요한 값들을 끌어올리는 것이다.

데이터 타입에 대해 설명해주세요.

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다.

  • 원시타입
    • number
    • String
    • Boolean
    • null
    • undefined
    • symbol (ES6에서 추가됨)
  • 객체 타입 (object / reference type)

var let const 차이점

var
중복 선언 가능. 재할당 가능.

var title = 'book';
console.log(title); // book

var title = 'movie';
console.log(title); //movie

title = 'music';
console.log(title);//music

var 는 원조 변수선언방식으로, 위 코드와 같이 선언한 변수가 동일한 이름으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다.
변수를 유연하게 사용할 수 있지만, 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있다.
특히 간단한 코드가 아닌, 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘들다.
이를 보완하기 위해 ES6 부터 추가된 변수선언 방식이 let 과 const 이다.

let
중복선언 불가. 재할당 가능.

const
중복선언 불가. 재할당 불가

생성자 함수에 대해서 설명해주세요

객체를 사용하기 위해 사용되는 특수한 함수. new연산자를 호출한다

⭐ this에 대해 설명해주세요.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다

잘 정리된 영상이 있다 꼭 보자!

call, apply, bind에 대해 설명해주세요.

셋 다 모두 this를 바인딩 할 때 사용한다
call 메소드와 apply 메소드는 호출 주체인 함수를 즉시 실행한다
bind 메소드는 함수를 즉시 실행하지 않고 새로운 함수를 반환한다.

call()
this를 맘대로 지정할 수 있다.

const dog = {
  age: 12 
}
function printDogAge() {
  console.log(this.age)
}
printDogAge.call(dog)    // 12

apply()
call과 유사하지만 배열을 인자로받는다.

const dog = {
  age: 12 
}
function printDogAge(name, location) {
  console.log(this.age, name, location)
}
printDogAge.apply(dog, ['mike', 'seoul'])   // 12, mike, seoul

bind
함수를 즉시 실행하지 않고 넘겨받은 인수를 바탕으로 새로우 ㄴ함수를 반환한다.

⭐ 콜백 함수에 대해 설명해주세요.

다른 함수에 매개 변수로 넘겨지는 함수를 말한다.
매개 변수로 넘겨받은 함수는 일단 넘겨 받고 때가 되면 나중에 호출(called back) 한다는 것이 콜백 함수의 개념이다.

필요한 이유는 무엇일까?

주로 비동기처리에 사용된다. 비동기 처리란 특정 코드의 실행이 끝날 때 까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미한다.
대표적으로 setTimeout() 이 있다.

⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.

콜백 지옥이란, 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

이러한 콜백 지옥을 해결하기 위해 새로운 비동기 처리 방법으로 Promise가 탄생한 것이다. Promise에 대해 알아보도록 하자.

Promise

Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다.

Promise의 상태는 프로세스가 기능을 수행하고 있는 중인지, 기능 수행이 완료되어 성공했는지 실패했는지에 대한 상태를 말하며, 다음 3가지의 상태를 갖는다.

① 대기(pending) : 진행 상태, Promise 객체가 생성되어 사용될 준비가 된 상태
promise의 객체는 new Promise()로 생성할 수 있으며, 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
new Promise(function(resolve, reject) {})

② 이행(Fulfilled) : 성공 상태, 비동기 처리에 의해 원하는 올바른 결과를 얻어와 그 결과를 정상적으로 처리하고자 resolve가 호출된 상태

③ 거부(Rejected) : 실패 상태, 무언가 잘못되어 예외로 처리하고자 reject가 호출된 상태

promise 메서드 체인 (then/catch/finally)

  • 체이닝(chaining) : 동일한 객체에 메서드를 연결할 수 있는 것

• then() - 성공(resolve) 시에는 then 메서드에 실행할 콜백 함수를 인자로 넘긴다.
• catch() - 실패(reject) 시에는 catch 메서드에 실행할 콜백 함수를 인자로 넘긴다.
• finally() - 성공/실패 여부와 상관없이 모두 실행 시에는 finally 메서드에 실행할 콜백 함수를 인자로 넘긴다.

Promise.all은 여러 작업을 동시에 처리하고, 작업이 모두 다 실행 완료되면 모두 다 반환한다.

⭐ Promise와 Callback를 비교 설명해주세요.

둘다 비동기 처리에 사용되는 객체다

콜백함수는 비동기 로직의 결과값을 처리하기 위해서 callback 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다.
=> 프로미스를 사용하면 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이해진다.

⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.

async/await는 비동기적인 작업을 처리할 수 있는 ES2017 문법 이다. async 함수를 정의하면 함수 내부에서 await 키워드를 이용하여 비동기적으로 처리되는 작업이 완료될 때까지 기다린 후, 결과값을 반환하는 처리를 할 수 있다. async/await는 Promise를 기반으로 하며, 코드를 보다 간결하고 직관적으로 작성할 수 있도록 해준다. async 함수는 항상 Promise 객체를 반환하며, await 키워드를 이용하여 비동기 처리 결과를 기다린다.

⭐ Promise와 Async, Await의 차이를 설명해주세요.

1.promise에서의 then을 사용하하지만 Async에서는 코드가 간결해져서 코드 흐름을 이해하기 쉽다.

  1. async는 에러 핸들링이 차이점이 있다. promise 에는 .catch()문을 통해 에러를 핸들링 해야 하지만. try catch(error)를 이용해서 에러를 확인할 수 있다.

⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.

이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려간다.

divs.forEach((div) => {
  div.addEventListener("click", clickEvent, { capture: true });
});

이벤트 전파를 막을 수도 있는데 event.stopPropagation() 를 사용한다.

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

이벤트 위임이란 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말한다.

이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.

예시로 상단 메뉴 클릭 시 해당 되는 내용으로 스크롤이 자동으로 내려가게 될 때 각 요소마다 핸들러를 할당 하지않고 이벤트를 위임하여 내려가는 이벤트 하나만 작성하여주면 코드가 더 간결해진다.

⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.

  1. 자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다.
  2. 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이기 때문에
  3. 어디에서든 함수나 변수를 호출할 수 있다. (심지어 제일 위에서도!)

⭐ 클로져(Closure)에 대해 설명해주세요.

일단 스코프 체인이있다.

스코프 체인은 각 함수마다 변수의 값을 들여다 볼 수 있는 스코프라고 생각하면 이해하기 편하다. 각 함수는 그 안에 새로운 함수를 담을 수 있는데 이때 가장 안에 있는 내부 함수에서 변수를 찾는 이벤트가 발생하게 된다면 내부 -> 외부 -> 전역 순으로 각각의 스코프들을 열어보면서 변수를 찾게된다 이러한 현상을 스코프 체인이라고 한다.

이러한 스코프 체인은 함수가 선언 될 때 모든 변수와 함수를 포함하는 렉시컬 스코프를 형성하는데 외부 함수가 실행되고 반환 된 후에도 외부 함수 안에 있는 함수에 체이닝을 할 수 있는 함수가 클로저다. 이 때 실행이 완료되어 내부 함수의 변수를 볼 수 있을까? 보지 못한다! 정보의 은닉을 주 목적으로 사용한다.
설명이 부족 할 수 있으니 해당 링크 영상을 꼭 시청하자

⭐ 동기와 비동기에 대해 설명해주세요.

우선 차이점부터 설명하자면, 동기는 '직렬적' 으로 작동하는 방식이고 비동기는 '병렬적' 으로 작동하는 방식이다. 즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리를 예로 Web API, Ajax, setTimeout 등이 있다.

profile
£€€.T.$
Be {Nice} Be {Kind}
이전 포스트

프론트엔드 면접 정리 - HTML,CSS

다음 포스트

프론트엔드 면접 정리 - 전반

0개의 댓글