면접카타 1,2번 - TIL 250210

1. var, let, const 에 대해 설명해주세요.

var, let, const는 javascript에서 변수를 선언할 때 사용하는 키워드 입니다.

	var	let	const
재선언	⭕	❌	❌
값의 수정	⭕	⭕	❌
호이스팅	⭕	⭕	⭕
호이스팅시 값할당 이전값	undefined	ReferenceError	ReferenceError

 

호이스팅(Hoisting)이란  JS 코드의 함수 내의 변수 및 함수 선언을 각 유효 범위의 최상단으로 끌어 올려주는것을 말합니다.

컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가됩니다.

 

함수와 클래스 선언식은 호이스팅 되지만 함수와 클래스 표현식은 호이스팅 되지 않습니다.

// 함수 선언식
function hoisted() {
  console.log('This function has been hoisted.');
};

// 함수 표현식
var expression = function() {
  console.log('Will this work?');
};

// 클래스선언식
console.log(Foo); // ReferenceError: Cannot access 'Foo' before initialization

class Foo {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const fooInstance = new Foo("Alice");
fooInstance.sayHello(); // Hello, my name is Alice

// 클래스 표현식
console.log(Foo); // ReferenceError: Cannot access 'Foo' before initialization

const Foo = class {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const fooInstance = new Foo("Alice");
fooInstance.sayHello(); // Hello, my name is Alice

 

 

호이스팅되면 초기값을 할당하기 이전에는, var 선언은 undefined로(출력시  undefined 가 나옴)초기화되지만 let 및 const 선언은 선언만 될뿐, 초기화가 이루어지지 않는 메모리 할당이 아직 되지 않은  Temporal Dead Zone( TDZ ) 상태에 있습니다. 출력시 ReferenceError가 나옵니다.

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 20;

 

var을 지양하는 이유

호이스팅 시 undefined로 초기화되므로, 의도치 않게 버그가 생길 가능성이 있기에 호이스팅을 의도적으로 사용하는 경우가 아니라면 Temporal Dead Zone 으로 초기화 되는 let, const, 함수 표현식을 사용하는 것을 권장합니다.

 

 

 

2. Promise란 무엇인지 설명해주세요.

Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드 실행이 가능합니다.

 

Promise의 장점

콜백 지옥(Callback Hell)을 방지 → 콜백 함수의 중첩을 줄이고,  코드 가독성이 좋아짐.

체이닝 가능 → then, catch, finally를 연결해서 사용 가능. then은 여러번 사용 가능합니다.

비동기 흐름 제어가 쉬움 → 여러 개의 비동기 작업을 순차적으로 실행 가능.

 

Promise의 상태와 결과

상태(state)	설명
pending	초기 상태, 처리 중
fulfilled	작업 성공 (resolve() 호출)
rejected	작업 실패 (reject() 호출)

 

상태 변화	결과(result)
undefined → resolve(value)	성공 시 값 value 반환
undefined → reject(error)	실패 시 error 반환

 

executor(실행자): new Promise가 생성될 때 자동 실행되는 함수를 의미합니다. 여기서 원하는 일이 처리됩니다. 처리가 끝나면 executor는 처리 성공 여부에 따라 resolve나 reject를 호출합니다.

 

 

Promise 사용 예시

const myPromise = new Promise((resolve, reject) => {
	// 비동기 작업 수행
    const data = fetch('서버로부터 요청할 URL');
    
    if(data)
    	resolve(data); // 만일 요청이 성공하여 데이터가 있다면
    else
    	reject("Error"); // 만일 요청이 실패하여 데이터가 없다면
})

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    success ? resolve("작업 성공!") : reject("작업 실패!");
  }, 1000);
});

myPromise
  .then(result => console.log(result)) // 성공 시 실행
  .catch(error => console.error(error)) // 실패 시 실행
  .finally(() => console.log("작업 완료!")); // 항상 실행

 

 

Promise 소비자 메서드

프라미스 객체는 executor( new promise선언시 실행코드)와 결과나 에러를 받을 소비 함수를 이어주는 역할을 합니다.

소비함수는 .then, .catch, .finally 메서드를 사용해 등록(구독)됩니다.

 

- then()

resolve() 호출 시 실행.

then을 여러 번 호출 가능.

promise.then(
  result => console.log(result),
  error => console.log(error)
);
//첫 번째 함수: 성공 시 실행,
//두 번째 함수: 실패 시 실행.

 

- catch()

reject() 호출 시 실행.

.then(null, errorHandler)와 동일. catch(errorHandlingFunction)사용해도 됨 

.catch는 .then에 null을 전달하는 것과 동일하게 작동합니다.

promise.catch(error => console.log(error));

 

- finally()

성공/실패 관계없이 항상 실행.
프라미스가 처리되면(이행이나 거부) f가 항상 실행된다는 점에서 .finally(f) 호출은 .then(f, f)과 유사합니다.

쓸모가 없어진 로딩 인디케이터(loading indicator)를 멈추는 경우같이, 결과가 어떻든 마무리가 필요하면 finally가 유용합니다.

promise.finally(() => console.log("작업 완료"));

new Promise((resolve, reject) => {
  /* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
})
  // 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
  .finally(() => 로딩 인디케이터 중지)
  .then(result => result와 err 보여줌 => error 보여줌)

 

• 공통적인 정리 작업(로깅, 리소스 정리 등) 이 필요하다면 .finally()를 사용하세요.
• 성공과 실패에 대한 개별적인 처리가 필요하다면 .then(f, f)를 사용하세요.

 

 

 

 

참고

https://ko.javascript.info/promise-basics

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-Promise