[JavaScript] 자바스크립트 면접 질문

BeomBe 2024. 4. 12. 23:41

자바스크립트 관련하여 면접시 받을 수 있는 질문들입니다.

Promise와 Callback 차이

자바스크립트에서 Promise와 Callback은 비동기 코드의 처리 방식을 다르게 다루는 개념입니다. 다음은 각각에 대한 설명입니다:

1. Callback:

Callback은 비동기 작업이 완료되었을 때 실행되는 함수를 의미합니다. 일반적으로 비동기 함수의 매개변수로 콜백 함수를 전달하여 사용합니다. 비동기 작업이 완료되면 해당 콜백 함수가 호출되어 결과를 처리하거나 다음 동작을 수행할 수 있습니다. Callback은 비동기 작업의 순서와 결과 처리를 보장하기 위해 사용됩니다. 하지만 콜백 함수를 중첩하여 사용하면 코드가 복잡해지고 가독성이 떨어질 수 있으며, 에러 처리와 예외 처리가 어려울 수 있습니다.

2. Promise:

Promise는 콜백 헬(callback hell)을 해결하기 위해 도입된 개념으로, 비동기 작업의 상태와 결과를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다: 대기(pending), 이행(fulfilled), 거부(rejected). 비동기 작업이 시작되면 대기 상태가 되고, 작업이 완료되면 이행 상태 또는 거부 상태가 됩니다. Promise는 then()과 catch() 메서드를 통해 이행 상태와 거부 상태에 대한 처리를 할 수 있습니다. 또한, Promise는 비동기 작업의 결과를 다른 Promise와 연결하여 순차적으로 처리하거나 병렬로 처리할 수 있는 장점이 있습니다.

Promise는 콜백 함수를 사용하지 않고도 비동기 작업을 보다 명확하고 간결하게 처리할 수 있게 해줍니다. 또한, Promise는 에러 처리와 예외 처리를 편리하게 할 수 있고, 비동기 작업의 결과를 체이닝하여 다양한 작업을 수행할 수 있습니다.

콜백지옥(Callback hell)을 해결하는 방법

자바스크립트에서 Callback hell을 해결하기 위해 다음과 같은 방법들을 사용할 수 있습니다:

1. 콜백 체이닝 (Callback Chaining):

콜백 체이닝은 여러 개의 비동기 작업을 순차적으로 연결하여 처리하는 방식입니다. 각 비동기 작업의 콜백 함수에서 다음 비동기 작업을 호출하고, 그 작업이 완료되면 다음 콜백 함수를 호출하는 방식입니다. 이를 통해 콜백 함수를 중첩하지 않고도 코드를 보다 명확하게 작성할 수 있습니다.

asyncFunc1(function(result1) {
  asyncFunc2(result1, function(result2) {
    asyncFunc3(result2, function(result3) {
      // 작업 완료 후 처리
    });
  });
});

//위의 코드를 콜백 체이닝으로 변경하면 다음과 같이 됩니다:
asyncFunc1()
  .then(function(result1) {
    return asyncFunc2(result1);
  })
  .then(function(result2) {
    return asyncFunc3(result2);
  })
  .then(function(result3) {
    // 작업 완료 후 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

2. Promise 사용:

Promise를 사용하여 비동기 작업을 처리하면 콜백 헬을 피할 수 있습니다. 비동기 작업을 Promise로 감싸고, then() 메서드를 사용하여 다음 작업을 연결하고, catch() 메서드로 에러 처리를 할 수 있습니다.

asyncFunc1()
  .then(function(result1) {
    return asyncFunc2(result1);
  })
  .then(function(result2) {
    return asyncFunc3(result2);
  })
  .then(function(result3) {
    // 작업 완료 후 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

3. async/await 사용:

async/await 구문을 사용하면 Promise를 더욱 간편하게 다룰 수 있습니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다린 후 결과를 반환할 수 있습니다. 이를 통해 코드를 동기적으로 작성할 수 있으며, 콜백 헬을 피할 수 있습니다.

async function myFunction() {
  try {
    const result1 = await asyncFunc1();
    const result2 = await asyncFunc2(result1);
    const result3 = await asyncFunc3(result2);
    // 작업 완료 후 처리
  } catch (error) {
    // 에러 처리
  }
}

myFunction();

위의 방법들을 사용하면 Callback hell을 효과적으로 해결할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

async, await 사용 방법을 설명

async/await은 자바스크립트에서 비동기 작업을 동기적으로 다룰 수 있도록 도와주는 문법적 설탕입니다. 아래는 async/await의 사용 방법을 설명한 예시입니다:

1. async 함수 선언:

비동기 작업을 처리하기 위해 async 함수를 선언합니다. 함수 선언부에 `async` 키워드를 추가하여 해당 함수가 비동기 함수임을 나타냅니다.

async function myFunction() {
  // 비동기 작업 처리
}

2. await 키워드:

`await` 키워드를 사용하여 비동기 작업이 완료될 때까지 기다리고, 작업의 결과를 반환합니다. `await` 키워드는 `async` 함수 내에서만 사용할 수 있습니다.

async function myFunction() {
  const result = await asyncFunc();
  // 작업 완료 후 처리
}

3. Promise 반환:

`await` 키워드는 Promise를 반환하는 비동기 함수 앞에 사용됩니다. `await` 키워드 뒤에 오는 비동기 함수가 완료될 때까지 기다린 후, 해당 작업의 결과를 반환합니다.

async function myFunction() {
  const result = await asyncFunc(); // asyncFunc()는 Promise를 반환하는 비동기 함수
  // 작업 완료 후 처리
}

4. 에러 처리:

`async/await` 구문에서 에러 처리는 `try-catch` 문을 사용하여 처리합니다. 비동기 작업 중 에러가 발생하면 `catch` 블록으로 제어가 이동하여 에러를 처리합니다.

async function myFunction() {

  try {
    const result = await asyncFunc();
    // 작업 완료 후 처리
  } catch (error) {
    // 에러 처리
  }

}

5. 호출:

`async` 함수를 호출할 때는 함수 이름 뒤에 소괄호를 붙여 호출합니다. `async` 함수는 Promise를 반환하므로, `.then()` 메서드를 사용하여 작업 완료 후의 처리를 수행할 수 있습니다.

myFunction()
  .then(function(result) {
    // 작업 완료 후 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

위의 예시를 참고하여 `async` 함수를 선언하고, `await` 키워드를 사용하여 비동기 작업을 처리하면 됩니다. `async/await` 구문을 사용하면 비동기 코드를 보다 동기적으로 작성할 수 있으며, 가독성과 유지 보수성을 향상시킬 수 있습니다.

Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이

1. 가독성: async/await를 사용하면 비동기 코드를 동기적으로 작성할 수 있어 가독성이 향상됩니다. 코드가 위에서 아래로 실행되는 구조로 작성되므로 비동기 작업의 흐름을 이해하기 쉽습니다.

2. 에러 처리: async/await를 사용하면 try-catch 문을 사용하여 비동기 작업 중 발생한 에러를 캐치하고 처리할 수 있습니다. 이로 인해 에러 처리가 간편해집니다.

3. 코드 작성 방식: Promise를 사용하는 경우 .then()과 .catch() 메서드를 연속적으로 체인으로 작성해야 하지만, async/await를 사용하면 비동기 작업을 보다 직관적으로 작성할 수 있습니다.

둘 다 비동기 작업을 처리하는 방법이지만, async/await를 사용하는 것이 코드의 가독성과 작성 편의성 면에서 더 나은 선택이 될 수 있습니다.

var,let,const 차이

1. var

var는 전역범위 또는 함수 범위로 지정

재선언되고, 업데이트 가능

초기 변수에 값이 지정되어있지 않을경우 Undefined 로 초기화

이미 선언된 변수를 재선언할 수 있기 때문에, 의도치않게 다른 결과를 초래할수있음 => let과 const의 필요성

2. let

let으로 선언된 변수는 해당 블록 내에서만 사용 가능

let은 업데이트 될 수 있지만, 재선언은 불가능 * 단 다른 범위 내에서 정의 된다면 사용 가능!

3. const

블록범위 내에서 접근 가능

업데이트도, 재선언도 불가능 * 단, 개체의 속성일 경우 업데이트 가능

* var는 전역 범위 또는 함수 범위, let과 const는 블록 범위

* var는 업데이트 및 재선언 가능, let은 업데이트 가능, 재선언 불가능, const는 업데이트와 재선언 불가능.

* 세가지 모두 최상위로 호스팅! var변수는 undefined로 초기화, let, const는 초기화 X

* var와 let은 초기화하지 않은 상태에서 선언 가능, const는 선언중에 초기화

호이스팅(hosting)에 대해 설명

호이스팅은 변수, 함수선언이 해당 스코프의 맨 위로 끌어올려지는 동작으로 변수와 함수를 사용하기 전에도 사용할수있는 특징

*선언전에 변수에 접근하면 undefined가 할당
*선언전에 함수호출하면 해당 함수 호출

2024.02.07 - [Javascript/배경 & 실무 지식] - [JavaScript] 호이스팅(Hoisting)

[JavaScript] 호이스팅(Hoisting)

1. 호이스팅(Hoisting) 호이스팅(Hoisting)은 자바스크립트에서 변수 선언과 함수 선언이 해당 스코프의 맨 위로 "끌어올려지는" 동작을 말합니다. 이는 코드 실행 전에 변수와 함수가 메모리에 할당

beombe.tistory.com

데이터 타입에 대해 설명

1. 기본 데이터 타입(Primitive Data Types)

숫자(Number): 정수와 실수를 포함한 모든 숫자 값을 나타냅니다.

문자열(String): 문자들의 시퀀스로 이루어진 데이터를 나타냅니다.

불리언(Boolean): true(참) 또는 false(거짓) 값을 나타냅니다.

undefined: 값이 할당되지 않은 변수를 나타냅니다.

null: 값이 없음을 나타냅니다.

심볼(Symbol): 유일하고 변경 불가능한 기본 데이터 타입입니다.

2. 객체(Object)

객체는 키(key)와 값(value)의 쌍으로 이루어진 속성(property)의 집합입니다.

배열(Array), 함수(Function), 정규 표현식(RegExp) 등도 객체의 일종입니다.

객체는 참조 타입으로, 변수에는 객체의 메모리 주소가 할당되며, 해당 주소를 통해 객체에 접근합니다.

자바스크립트에서 일어나는 데이터 형 변환에 대해 설명

자바스크립트에서는 데이터 형 변환(Type Conversion)이 자동적으로 이루어지기도 하며, 필요에 따라 명시적으로 수행할 수도 있습니다. 데이터 형 변환은 다양한 연산자나 함수를 사용하여 이루어집니다.

1. 암시적 형 변환(Implicit Type Conversion):

암시적 형 변환은 자바스크립트 엔진이 자동으로 데이터 형을 변환하는 것을 의미합니다. 이는 연산자나 함수에 의해 수행될 때 주로 발생합니다. 일반적인 암시적 형 변환의 예시는 다음과 같습니다:

- 숫자와 문자열 간의 연산: 숫자와 문자열이 함께 사용될 경우, 자바스크립트 엔진은 문자열을 숫자로 변환하여 연산을 수행합니다.

- 논리 연산자: 논리 연산자인 &&(논리 AND)와 ||(논리 OR)는 불리언(Boolean) 값이 아닌 경우에도 결과를 반환합니다. 이때, 다른 데이터 형은 불리언 값으로 암시적으로 변환됩니다.

2. 명시적 형 변환(Explicit Type Conversion):

명시적 형 변환은 개발자가 직접 데이터 형을 변환하는 것을 의미합니다. 이를 위해 자바스크립트에서는 몇 가지 유용한 함수와 연산자를 제공합니다. 주요한 명시적 형 변환 방법은 다음과 같습니다:

- Number(): 문자열을 숫자로 변환합니다.

- String(): 숫자나 불리언 값을 문자열로 변환합니다.

- Boolean(): 다른 데이터 형을 불리언 값으로 변환합니다.

- parseInt(): 문자열을 정수로 변환합니다.

- parseFloat(): 문자열을 부동 소수점 숫자로 변환합니다.

명시적 형 변환은 데이터 형을 명확하게 지정하거나, 연산이나 조건문에서 원하는 동작을 수행하기 위해 사용됩니다. 개발자는 명시적 형 변환을 통해 코드의 가독성과 예상 동작을 증진시킬 수 있습니다.

데이터 형 변환은 자바스크립트에서 중요한 개념이며, 코드를 작성하거나 분석할 때 고려해야 할 요소 중 하나입니다. 적절한 형 변환을 통해 코드의 정확성과 일관성을 유지할 수 있습니다.

자바스크립트가 유동적인 언어인 이유

자바스크립트가 유동적인 언어인 이유는 몇 가지가 있습니다:

1. 동적 타입 언어(Dynamically Typed Language):

자바스크립트는 동적 타입 언어로 분류됩니다. 이는 변수의 데이터 형을 선언 시 명시적으로 지정하지 않고, 실행 중에 변수에 할당되는 값에 따라 데이터 형이 자동으로 결정된다는 것을 의미합니다. 예를 들어, 동일한 변수에 숫자, 문자열 또는 객체를 할당할 수 있습니다. 이러한 유연성은 개발자가 더 유연하게 코드를 작성하고 수정할 수 있도록 합니다.

2. 동적 객체 모델(Dynamic Object Model):

자바스크립트는 Prototype 기반의 객체 지향 언어로서, 동적 객체 모델을 가지고 있습니다. 객체의 구조와 속성은 실행 중에 동적으로 변경될 수 있습니다. 새로운 속성을 추가하거나 삭제하고, 객체의 동작을 확장하는 등의 작업이 가능합니다. 이는 개발자가 객체를 다양하게 조작하고 활용할 수 있도록 합니다.

3. 유연한 문법과 기능:

자바스크립트는 다양한 문법과 기능을 제공하여 개발자가 코드를 유연하게 작성할 수 있도록 합니다. 예를 들어, 함수는 일급 객체로서 변수에 할당하거나 매개변수로 전달할 수 있으며, 익명 함수나 클로저와 같은 고급 개념을 활용할 수 있습니다. 또한, 배열과 객체 리터럴을 사용하여 데이터를 표현하는 방식도 유연성을 제공합니다.

4. 동적인 실행 환경:

자바스크립트는 웹 브라우저나 Node.js와 같은 실행 환경에서 동작합니다. 이러한 실행 환경은 동적인 특성을 가지며, 런타임에 HTML 문서와 상호작용하거나 외부 리소스에 접근할 수 있습니다. 이는 자바스크립트가 동적인 웹 애플리케이션 개발에 적합하고 유연성을 제공하는 이유 중 하나입니다.

자바스크립트의 유동적인 특성은 개발자에게 많은 자유와 창의성을 부여하지만, 동시에 주의를 요구하기도 합니다. 데이터 형 변환과 객체 동적 변경 등의 기능을 적절하게 활용하면 더욱 효과적인 코드를 작성할 수 있습니다.

프로토타입에 대해 설명 + 상속

1. 프로토타입(Prototype)

프로토타입(Prototype)은 객체 지향 프로그래밍에서 상속과 관련된 개념입니다. 프로토타입은 객체 간의 상속을 구현하고, 객체가 다른 객체의 속성과 메서드를 공유할 수 있도록 도와줍니다.

모든 객체는 프로토타입을 가지고 있으며, 객체의 프로토타입은 해당 객체를 생성한 생성자 함수의 프로토타입 객체를 가리킵니다. 프로토타입 객체에는 해당 생성자 함수로부터 생성된 모든 객체에서 공유할 수 있는 속성과 메서드가 포함됩니다.

2. 상속(Inheritance)

상속은 한 객체가 다른 객체의 속성과 메서드를 상속받아 사용하는 것을 말합니다. 자바스크립트에서는 프로토타입 체인(Prototype Chain)을 통해 상속을 구현합니다. 객체에서 속성 또는 메서드에 접근할 때, 해당 객체의 프로퍼티를 먼저 찾고, 없으면 상위 프로토타입으로 이동하여 찾는 식으로 계속해서 상위 프로토타입을 탐색합니다. 이러한 프로토타입 체인을 통해 상위 객체의 속성과 메서드를 상속받아 사용

requrestAnimationFrame을 사용해본적 있나?

-웹 브라우저에게 애니메이션을 실행하고자 함을 알리는 함수입니다. 이 함수를 호출하면 브라우저는 다음 프레임을 그리기 전에 애니메이션을 업데이트하는 적절한 시점에 지정한 콜백 함수를 호출합니다. 이를 통해 부드러운 애니메이션을 구현할 수 있습니다.

깊은 복사와 얕은 복사에 대해 설명

얕은 복사- 객체의 최상위 프로퍼티만 복사하는 방법. 중첩된 객체는 참조값으로 유지
깊은 복사- 중첩된 객체까지 모두 복사하여 완전히 독립적인 복사본을 만드는 것
얇은 복사는 중첩된 객체에 대해서는 참조값을 복사하므로 원본과 복사본이 중첩된 객체를 공유
반면 깊은 복사는 중첩된 객체까지 모두 복사하므로 원본과 복사본은 완전히 독립적

불변성을 유지하려면 어떻게 해야하나?

불변성은 데이터의 변경을 허용하지 않고, 기존 데이터를 유지하면서 새로운 데이터를 생성하는 개념입니다.

불변성을 유지하는 것은 코드의 안정성과 예측 가능성을 높이는 중요한 원칙입니다. 이를 통해 버그를 줄이고 코드를 더 쉽게 디버깅하고 유지보수할 수 있습니다. 따라서, 자바스크립트에서 불변성을 유지하려면 const 키워드를 사용하고, 객체나 배열을 복사해서 활용하며, 순수 함수 및 라이브러리나 프레임워크를 활용

this에 대해 설명

자바스크립트에서 `this`는 현재 실행 중인 함수의 컨텍스트를 나타내는 특별한 키워드입니다. `this`를 사용하면 함수 내에서 현재 객체에 접근할 수 있습니다. 그러나 `this`의 동작은 함수가 호출되는 방식에 따라 달라질 수 있습니다. 다음은 `this`의 동작과 사용법에 대한 설명입니다:

1. 함수 호출 시 `this`:

- 일반 함수 호출: 일반 함수 내에서 `this`는 전역 객체를 가리킵니다. 브라우저 환경에서는 `window` 객체가 전역 객체입니다.

- 메서드 호출: 객체의 메서드로 호출될 때, `this`는 해당 메서드를 호출한 객체를 가리킵니다. 즉, 메서드가 속해 있는 객체에 접근할 수 있습니다.

- 생성자 함수 호출: `new` 키워드로 생성자 함수를 호출할 때, `this`는 새로 생성되는 객체를 가리킵니다.

2. 화살표 함수와 `this`:

- 화살표 함수에서 `this`는 함수가 정의된 위치에서 상위 스코프의 `this`를 상속받습니다. 따라서, 화살표 함수 내에서 `this`를 사용하면 주로 화살표 함수를 감싸고 있는 함수의 `this`가 됩니다.

3. `call`, `apply`, `bind` 메서드:

- 함수의 `call`, `apply`, `bind` 메서드를 사용하여 `this`를 명시적으로 설정할 수 있습니다. `call`과 `apply` 메서드는 함수를 호출하면서 `this`를 지정할 수 있고, `bind` 메서드는 함수에 바인딩된 새로운 함수를 생성하면서 `this`를 지정할 수 있습니다.

`this`는 함수의 컨텍스트를 동적으로 결정하기 때문에 주의가 필요합니다. 함수 호출 방식에 따라 `this`의 값이 달라질 수 있으므로, 코드를 작성할 때 `this`를 정확히 이해하고 사용해야 합니다. 함수 내에서 현재 객체에 접근해야 할 경우에 `this`를 사용하여 해당 객체에 접근할 수 있습니다.