[기술 면접] 📒 JavaScript

📋 기억하고 싶은 내용

📌 콜백 지옥 (Callback hell)

• 비동기 로직 처리 중 콜백 함수를 연속해서 사용할 때 발생
• 콜백 함수 안에 또 다시 함수 호출이 반복되면서 코드의 들여쓰기가 보기 힘든 수준까지 간 상황
• 비동기 함수의 결과는 예상할 수 없기 때문에 콜백을 사용함

문제점

• 코드 가독성 떨어짐
• 예외 처리 복잡도 증가

해결 방법

• ES6 문법 중 하나인 Promise를 사용
• 보통 async/await 문법 사용을 많이 사용하는데, Promise 문법의 경우 then 안에 Promise 호출 시 콜백 지옥이 발생할 수 있음

📌 Promise VS async/await

• 공통적으로 자바스크립트에서 비동기 처리를 다루는 방법들
• resolve와 recject 키워드로 결과 값을 반환 받음

Promise

• ES6에서 추가된 문법
• 3가지 상태
  • Pending - 비동기 처리 완료 전
  • Fulfilled - 비동기 처리 완료
  • Rejected - 비동기 처리 실패

async/await

• ES8에서 추가된 문법
• Promise를 사용한 비동기 처리를 조금 더 쉽게 처리해주기 위해 나옴
• await 키워드를 통해 반환 값을 받음
• 단점으로는 에러를 핸들링할 수 있는 기능이 없기 때문에 try/catch를 사용해서 에러 처리를 해줘야 함

📌 클로져(Closure)

• 내부 함수가 외부 함수의 맥락(context)에 접근할 수 있는 것

스코프(Scope)

• 변수가 접근할 수 있는 범위
• 전역 스코프(Global Scope) - 어느 곳에서든 해당 변수로 접근이 가능
• 지역 스코프(Local Scope) - 해당 지역(함수) 내에서만 접근이 가능

클로저가 필요한 이유

• 불필요한 전역 변수를 줄여서 실수를 방지하고, 코드 재사용성을 높이기 위함

📌 var VS let VS const

• 변수를 선언하는 방식

var

• 변수의 중복 선언이 가능하여 변수에 할당된 값이 변할 수 있는데, 이때 오류를 추적하기 힘들어짐
• 함수 외부에서 선언한 변수는 모두 전역 변수로 취급
• 위와 같은 문제점을 해결하기 위해 let과 const가 나옴

let

• 변수의 중복 선언은 불가능하지만, 재할당은 가능

const

• 선언과 초기화를 동시에 해야함
• 재선언과 재할당이 불가능
• 주의해야할 점은 원시 값의 재할당은 불가능하지만, 객체는 가능

변수의 스코프는 최대한 좁게 선언되도록 하는 것이 좋다.

📌 깊은 복사 VS 얕은 복사

얕은 복사 (shallow copy)

• 참조에 의한 할당
• 해당 데이터의 참조 값(메모리 주소)를 전달하는 방식으로 하나의 데이터를 공유하는 것

깊은 복사(deep copy)

• 기존 객체를 그대로 복사하여 사용하는 경우에는 원본 데이터가 변형될 수 있는 위험을 내포하고 있음
• 주의해야 할 점은 1depth까지만 허용하기 때문에 객체 내부의 객체는 얕은 복사가 이루어짐

📌 프로토타입(Prototype)

• 자바스크립트는 객체지향언어
• 객체지향언어에서 상속을 받기 위해 클래스를 사용하는데, 자바스크립트는 클래스라는 개념을 가지고 있지 않음.
• 그래서 프로토 타입이 필요함
• 프로토타입을 사용하는 이유는 상속 개념을 활용해 코드를 재사용하기 위함

📌 타입스크립트

• 마이크로소프트(MS)에서 개발한 언어
• 자바스크립트 기반의 언어

사용 이유

• 정적 타입(미리 타입을 지정)을 지원하기 때문에 컴파일 단계에서 오류를 잡을 수 있는데, 이는 자바스크립트의 치명적 단점을 보완함
• 타입일 미리 지정해주기 때문에 메모리 절약
• 컴파일 과정에서 ES6+ 문법을 ES5 혹은 ES3로 변경해주기 때문에 브라우저 호환성 문제를 해결할 수 있음

📌 require() VS import()

• 외부 파일 또는 라이브러리를 로드할 때 사용

require()

const express = require('express');

• 내장 Node.js 키워드
• 코드의 어느 지점에서나 호출 가능

import()

import express from 'express';

• ES6 모듈에서 도입된 키워드
• 코드의 맨 위만 실행 가능
• from 키워드를 통해 필요한 모듈만 불러올 수 있음

📌 호이스팅

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
• 자바스크립트의 변수는 선언 -> 초기화 -> 할당을 거쳐 생성

var 키워드의 라이프 사이클

1. 변수를 선언하기 전에 선언 및 초기화 단계를 동시에 진행
2. 실행 컨텍스트에 변수 객체를 등록하고 메모리를 undefined를 만듦

변수에 값을 할당하기 전에 호출을 하면 undefined가 호출 됨

📌 TDZ(Temporal Dead Zone)

• 선언과 초기화 단계의 사이에서 발생하는 현상

let 키워드의 라이프 사이클

1. 선언 단계와 초기화 단계가 분리되어서 진행
2. 실행 컨텍스트에 변수가 등록된 상태이지만, 메모리 할당이 되지 않아 참조 에러(ReferenceError)가 발생

실행 컨텍스트에 등록됨 (호이스팅)
-> TDZ 구간에 의해 메모리 할당이 되지 않아 참조 에러가 발생

🔗 참고 래퍼런스

• 콜백 지옥 탈출하기! 비동기 처리 방법
• Promise와 async/await 차이점
• 클로져는 무엇이며, 어떻게/왜 사용하는가?
• var, let, const 차이
• Object prototypes - MDN
• 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트
• require와 import 차이
• 호이스팅이란?
• TDZ이란?