당신이 알아야 할 필수 JavaScript 인터뷰 질문

저는 수많은 JavaScript 인터뷰를 진행한 사람으로서 내 기술과 핵심 개념에 대한 이해를 테스트하는 필수 질문 목록을 정리했습니다. 시리즈의 첫 번째 부분에서는 기본부터 주요 인터뷰 주제까지 모든 내용을 다루면서 제가 개인적으로 겪었던 질문 40개를 공유하겠습니다.

이러한 질문은 단지 이론적인 것이 아닙니다. 실무적인 지식과 문제 해결 능력을 입증하도록 요구합니다. 프런트엔드 역할을 준비하든 풀 스택 역할을 준비하든 이 질문은 귀하의 기술을 연마하는 데 도움이 될 것입니다.

Chalo Shuru karte hai!

1. javaScipt는 동적형 언어인가요, 아니면 가변형 언어인가요?

답변: JavaScript는 동적으로 유형이 지정되는 언어입니다. 즉, 변수 유형은 컴파일 타임에 설정되는 대신 런타임에 변경될 수 있습니다.

2. 백엔드에 http 요청을 어떻게 보내나요?

정답: Fetch API, Axios, XMLHttpRequest

3. 실행컨텍스트란 무엇인가요?

답변: JavaScript에서 실행 컨텍스트는 코드가 실행되는 환경이며 사용할 수 있는 변수, 개체 및 함수를 결정합니다. 함수가 실행될 때마다 자체 변수와 범위를 보유하는 해당 함수에 대해서만 새로운 실행 컨텍스트가 만들어집니다.

각 실행 컨텍스트에는 두 가지 주요 단계가 있습니다.

1. 메모리 생성 단계: JavaScript는 먼저 코드를 스캔하고 변수와 함수에 메모리를 할당합니다.
2. 실행 단계: 코드가 한 줄씩 실행됩니다.

4. 어휘환경이란 무엇인가요?

답변: JavaScript의 어휘 환경은 모든 외부 범위에 대한 참조와 함께 현재 범위에 정의된 변수 및 함수를 저장하는 데이터 구조입니다. 어휘 범위라고도 합니다.

5. null과 정의되지 않음의 차이점은 무엇인가요?

답변: null: 변수가 개체를 가리키지 않음을 의미하는 할당 값으로, 특정 값이 없음을 나타냅니다.

정의되지 않음: 변수가 선언되었지만 할당된 값이 없으며 변수 자체에 값이 누락되었음을 의미합니다.

null 유형은 객체입니다.
정의되지 않은 유형은 정의되지 않았습니다.

6. JavaScript가 메모리를 어떻게 처리하나요?

답변: JavaScript는 주로 자동 가비지 수집을 통해 메모리를 관리합니다. 즉, 코드 실행 중에 메모리를 자동으로 할당하고 해제합니다.

7. 이벤트 루프를 설명하시겠습니까?

답변: JavaScript는 단일 스레드 언어입니다. 즉, 단일 호출 스택 내에서 한 번에 하나의 작업만 실행할 수 있습니다. 그러나 이러한 단일 스레드 특성에도 불구하고 JavaScript는 이벤트 루프 덕분에 비동기식, 비차단 작업을 수행할 수 있습니다.

이벤트 루프는 비동기 작업을 처리하는 JavaScript의 기본 메커니즘입니다. HTTP 요청이나 DOM 이벤트와 같은 작업이 시작되면 브라우저 API로 전달됩니다.

이벤트 루프는 호출 스택과 작업을 지속적으로 모니터링합니다.
대기열. 호출 스택이 비어 있으면 이벤트 루프는 먼저
를 확인합니다. 보류 중인 작업에 대한 마이크로태스크 대기열을 만들고 실행합니다.

마이크로태스크 대기열이 비어 있으면 이벤트 루프는 매크로태스크 대기열을 확인하고 거기에서 실행을 위해 호출 스택으로 작업을 이동합니다. 이 프로세스를 통해 우선순위가 높은 작업(마이크로태스크)이 우선순위가 낮은 작업(매크로태스크)보다 먼저 실행됩니다.

8. 호이스팅과 시간적 데드존?

답변: 호이스팅은 변수와 함수를 선언하기 전에 사용할 수 있게 해주는 JavaScript 기능입니다. 즉, 코드에 정의되기 전에 변수와 함수를 사용할 수 있습니다. 호이스팅은 변수와 함수의 선언을 "범위"

의 맨 위로 이동하는 JavaScript 엔진에 의해 수행됩니다.

JavaScript에서 코드를 실행하기 전에 JavaScript 엔진은 호이스팅이라는 메모리 준비 단계를 수행합니다. 이 단계에서 엔진은 변수와 함수에 메모리를 할당합니다.

함수 선언은 완전히 호이스팅됩니다. 즉, 실제 선언 줄 이전에도 해당 범위 내 어디에서나 호출할 수 있습니다.

var로 선언된 변수는 호이스팅되고 undef로 초기화됩니다. 이는 선언 전에 var 변수에 액세스할 수 있지만 해당 값은 정의되지 않음을 의미합니다.

반면, let 및 const로 선언된 변수도 호이스팅되지만 초기화되지 않은 상태로 유지됩니다. 코드에서 선언되기 전에 액세스하면 ReferenceError가 발생합니다.

시간적 데드존:

블록 시작부터 let 또는 const 변수의 실제 선언까지의 이 기간을 임시 데드존(TDZ)이라고 합니다. TDZ는 블록의 시작부터 변수가 선언되고 초기화되는 라인까지 존재합니다.

시간적 데드존은 JS에서 let 및 const 선언과 관련된 개념입니다. let 또는 const 선언이 있는 변수는 해당 범위의 맨 위로 끌어올려지지만 코드에서 즉시 사용할 수는 없습니다. 즉, 변수가 선언되기 전에는 사용할 수 있지만 변수 값은 값이 할당될 때까지 정의되지 않습니다.

9. 스코프와 스코프체인?

답변: 범위는 코드의 다양한 부분에 있는 변수의 접근성을 관리합니다. 변수에 액세스할 수 있는 위치를 결정하고
그럴 수 없는 곳.

스코프에는 세 가지 유형이 있습니다.

전역 범위: 전역 범위에 선언된 변수는
코드 어디에서나 액세스할 수 있습니다.
로컬 범위: 함수 내에서 선언된 변수는
해당 기능 내에서 액세스할 수 있습니다.
블록 범위: 블록 내부에 선언된 변수(예: curly
중괄호 {})는 해당 블록 내에서만 액세스할 수 있습니다.

스코프 체인:

스코프 체인은 참조 체인을 의미합니다. JavaScript는 포기하지 않습니다. 변수에 대한 사냥 메커니즘이 있습니다. 변수를 계속 검색합니다. 먼저 로컬 범위에서 변수에 액세스할 수 있는지 확인합니다. 그렇지 않은 경우 외부 범위를 살펴봅니다. 전역 범위 또는 전역 실행 컨텍스트에 도달할 때까지 계속 진행됩니다. 체인 중에 변수를 지속적으로 찾는 것을 범위 체인이라고 합니다. 실행 컨텍스트는 항상 내부 범위에서 외부 범위로 검색하지만 외부 범위에서 내부 범위로 이동할 수는 없습니다.

10. 프로토타입 상속?

답변: 상위 클래스의 속성을 공유하고 활용하기 위해 상위 개체의 프로토타입을 하위 개체에 연결합니다. 이는 프로토타입을 통해 속성과 메서드를 한 개체에서 다른 개체로 전송할 수 있다는 의미입니다.

예를 들어 .join 및 .length와 같은 메소드는 프로토타입 상속의 일부입니다. 이러한 속성은 JavaScript의 기본 Object 클래스에서 가져오고 객체에서 사용할 수 있기 때문입니다.

JavaScript에서는 모든 것이 객체이므로 객체가 속성을 공유할 수 있습니다. 이는 배열이 객체의 메서드를 사용할 수 있고 문자열도 동일한 작업을 수행할 수 있음을 의미합니다.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

오래된 방식:

engineer.__proto__ = faang;

새로운 방식:

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

11. JavaScript로 Promise를 설명하시겠습니까?

답변: 약속은 JavaScript에서 비동기 작업을 처리하는 방법입니다. 이를 통해 메인 스레드를 차단하지 않고 비동기적으로 실행될 수 있는 코드를 작성할 수 있습니다. Promise 생성자를 사용하여 Promise를 생성하고 then 메소드를 사용하여 서로 연결할 수 있습니다.

JavaScript의 Promise는 나중에 해결하거나 거부할 수 있는 자리 표시자 역할을 합니다.

약속에는 보류, 이행, 거부의 세 가지 상태가 있습니다. 약속이 보류 중이면 비동기 작업이 아직 진행 중이라는 의미입니다. 약속이 이행되면 비동기 작업이 성공적으로 완료되었음을 의미합니다. 약속이 거부되면 비동기 작업이 실패했음을 의미합니다.

약속 처리

Promise는 비동기 작업의 결과를 처리하는 방법을 제공합니다.

.then(): 이행 상태를 처리하고 해결된 상태를 얻는 데 사용됩니다.
값입니다.
.catch(): 거부된 상태를 처리하고 오류를 포착하는 데 사용됩니다.
실행 중에 발생한 일입니다.
.finally(): 이 메서드는 promise가
일 때 콜백을 실행합니다. 이는 약속이 이행되거나
실행되는지 여부에 관계없이 실행된다는 의미입니다. 거부되었습니다.

12. Async Await에 대해 설명해주세요.

답변: Async/await는 비동기 코드를 보다 동기적인 방식으로 작성할 수 있는 JavaScript의 구문 기능입니다. async 및 wait 키워드를 사용하여 비동기 기능을 정의합니다

JavaScript의 비동기 함수는 Promise를 반환합니다. wait 키워드는 기다리고 있는 약속이 해결될 때까지 비동기 함수의 실행을 일시 중지합니다. 나머지 비동기 함수를 기다린 후 마이크로태스크 대기열에 들어갑니다. 이를 통해 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 만들 수 있습니다.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

13. 이 키워드를 설명하시겠습니까?

답변: “this” 키워드는 현재 함수를 실행하고 있는 개체를 나타냅니다. 그 값은 함수가 호출되는 상황에 따라 달라집니다. 전역 컨텍스트(예: 브라우저)에서 이는 창 개체를 나타냅니다

14. 클로저와 어휘 범위를 설명하시겠습니까?

답변: 클로저는 외부 함수의 실행이 완료된 후에도 외부 범위에서 변수에 액세스할 수 있는 함수입니다.

다음은 JavaScript 클로저의 예입니다.

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

이 예에서 externalFunction 함수는 externalVariable 변수와 externalVariable에 액세스할 수 있는 innerFunction 함수를 정의합니다. innerFunction은 나중에 호출할 수 있는 externalFunction 함수를 반환합니다.

DOM과 관련된 클로저의 예 중 하나는 addEventListener 메소드입니다. addEventListener 메소드를 사용하면 이벤트 리스너를 DOM의 요소에 연결할 수 있습니다. 이벤트 리스너 함수는 요소가 DOM에서 제거된 후에도 요소의 속성과 메서드에 액세스할 수 있습니다.

다음은 클로저와 함께 addEventListener 메소드를 사용하는 예입니다.

engineer.__proto__ = faang;

이 예에서 handlerClick 함수는 addEventListener 메소드 내부에 정의됩니다. HandleClick 함수는 버튼 요소가 DOM에서 제거된 후에도 버튼 요소에 액세스할 수 있습니다.

어휘 범위:

JavaScript에서 어휘 범위는 선언을 기반으로 변수의 범위를 결정하는 개념입니다. 이는 변수의 범위가
의 코드 블록에 의해 결정됨을 의미합니다. 사용되는 코드 블록이 아니라 선언됩니다.

15. 자바스크립트는 단일 스레드인가요, 아니면 다중 스레드인가요?

답변: JavaScript는 단일 스레드 언어입니다. 즉, 하나의 호출 스택과 하나의 메모리 힙이 있습니다. 코드를 순서대로 실행하여 한 코드 조각을 완료한 후 다음 코드로 넘어갑니다. 이 구조를 통해 JavaScript는 메인 스레드를 차단하지 않고 비동기 작업을 처리할 수 있습니다.

비동기 동작을 통해 setTimeout, AJAX 및 promise와 같은 기능을 사용할 수 있습니다. 이러한 기능은 JavaScript 자체가 아닌 브라우저에 의해 관리되므로 이러한 작업이 완료될 때까지 기다리는 동안 메인 스레드가 다른 코드를 자유롭게 실행할 수 있도록 도와줍니다.

16. 자바스크립트 엔진이 어떻게 작동하는지 설명해주세요.

답변: JavaScript 엔진은 JavaScript 코드를 실행하는 프로그램입니다. JavaScript를 호스팅하는 웹 브라우저 및 기타 환경에서 발견됩니다. 가장 널리 사용되는 JavaScript 엔진은 Google의 V8, SpiderMonkey 및 JavaScriptCore입니다. 이 엔진은 C로 작성되었으며 JavaScript 코드를 실행하는 데 사용됩니다.

17. var, let, const의 차이점은 무엇인가요?

정답:

-var: "var" 키워드로 정의된 변수의 범위는 해당 변수가 정의된 "함수"로 제한됩니다. 함수 외부에서 정의된 경우 변수의 범위는 전역입니다. var의 기본값은 정의되지 않았습니다.

• let: "let" 또는 "const" 키워드로 정의된 변수의 범위는 중괄호(예: {})로 정의된 "블록"으로 제한됩니다. let의 기본값은 초기화되지 않았습니다.
• const: "const" 키워드로 정의된 변수의 범위는 중괄호로 정의된 블록으로 제한됩니다. 그러나 변수가 const 키워드로 정의되면 재할당될 수 없습니다. const의 기본값은 초기화되지 않았습니다.

18. 자바스크립트에는 다양한 유형의 데이터 유형이 있나요?

답변: JavaScript에는 주로 기본 데이터 유형과 객체(참조) 데이터 유형의 두 가지 유형의 데이터 유형이 있습니다.

기본 데이터 유형은 JavaScript의 기본 데이터 유형입니다. 여기에는 숫자, 문자열, 부울, null 및 정의되지 않음이 포함됩니다. 기호는 고유 식별자를 나타내는 기본 데이터 유형이기도 합니다.

객체 데이터 유형은 다른 데이터 유형을 포함하는 데이터 유형입니다. 객체 리터럴이나 생성자 함수를 사용하여 생성됩니다. 객체, 배열 및 함수는 객체 데이터 유형의 예입니다.

19. 콜백에 대해 논의하시겠습니까?

답변: 콜백 함수는 다른 함수에 인수로 전달되어 특정 이벤트가 발생할 때 호출되는 함수입니다. 이는 일반적으로 JavaScript에서 HTTP 요청 만들기 또는 파일 읽기와 같은 비동기 작업을 처리하는 데 사용됩니다.

20. 콜백 지옥을 토론하시겠습니까?

답변: 콜백 지옥은 함수가 서로 중첩되어 코드를 읽고 이해하기 어렵게 만드는 JavaScript의 문제입니다. 이로 인해 콜백이 여러 번 호출되거나 전혀 호출되지 않아 예기치 않은 동작이 발생할 수 있습니다.

콜백 지옥의 예는 다음과 같습니다.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

21. 자바스크립트에서 객체를 생성하는 방법은 무엇입니까?

답변: 객체는 JavaScript의 기본 데이터 유형입니다. 객체 리터럴이나 생성자 함수를 사용하여 생성할 수 있습니다.

객체 리터럴은 중괄호 {}로 묶여 있으며 키-값 쌍으로 객체를 생성하는 데 사용됩니다. 다음은 객체 리터럴의 예입니다.

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

생성자 함수는 사용자 정의 속성과 메서드를 사용하여 객체를 생성하는 데 사용됩니다.

engineer.__proto__ = faang;

객체를 생성하는 다른 방법(예: Object.create() 메서드 사용)이 있지만 객체 리터럴과 생성자 함수는 JavaScript에서 객체를 생성하는 가장 일반적인 방법입니다.

22. JavaScript에서 객체를 복제하는 방법은 무엇입니까?

답변:

1. 객체.할당() 사용:

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

1. 확산 연산자 사용:

async function fetchData() {
  try {
    const response = await fetch('https://api.freeapi.app/v1/jokes/random');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData()
  .then(() => console.log('Data fetched'))
  .catch(error => console.error(error));

23. 자바스크립트의 나머지 연산자와 스프레드 연산자는 무엇인가요?

답변: 나머지 연산자와 스프레드 연산자는 배열과 객체를 더 간결하고 읽기 쉬운 방식으로 작업할 수 있게 해주는 JavaScript의 두 가지 중요한 기능입니다.

나머지 연산자를 사용하면 배열이나 객체를 인수로 가져와 함수 호출에 사용할 수 있습니다.

확산 연산자를 사용하면 배열이나 개체를 개별 요소로 확장할 수 있습니다.

function outerFunction() {
  const outerVariable = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVariable); // Output: I am an outer variable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: I am an outer variable

이 예에서 sum 함수는 나머지 연산자를 사용하여 숫자 배열을 인수로 사용합니다.
스프레드 연산자는 배열을 개별 요소로 확장한 다음 축소 함수에 전달하는 데 사용됩니다.

24. 자바스크립트의 고차함수란 무엇인가요?

답변: 고차 함수는 다른 함수를 인수로 사용하거나 함수를 결과로 반환하는 함수입니다. 이는 더욱 유연하고 재사용 가능한 코드를 작성할 수 있게 해주는 JavaScript의 강력한 도구입니다.

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

25. 자바스크립트에서 ES6의 몇 가지 기능을 말해 보세요.

답변: ES6의 주요 기능 중 일부는 다음과 같습니다.

• 화살표 함수: 화살표 함수는 함수 작성을 위한 보다 간결한 구문을 제공합니다. =>를 사용하여 정의됩니다. 연산자입니다.
• 템플릿 리터럴: 템플릿 리터럴을 사용하면 문자열 안에 표현식을 삽입할 수 있습니다. 백틱(`)으로 묶여 있으며 여러 줄 문자열을 만드는 데 사용할 수 있습니다.
• 구조 분해 할당: 구조 분해 할당을 사용하면 배열이나 객체에서 값을 추출하여 변수에 할당할 수 있습니다. = 연산자를 사용하여 수행됩니다.
• 확산 연산자: 확산 연산자를 사용하면 배열이나 객체를 개별 요소로 확장할 수 있습니다. 함수에 여러 인수를 전달하는 데 사용됩니다.
• 클래스: 클래스는 속성과 메서드를 사용하여 객체를 정의하는 방법을 제공합니다. class 키워드를 사용하여 정의됩니다.
• 모듈: 모듈을 사용하면 코드를 별도의 파일로 분할하고 파일 간에 가져오기/내보내기 기능을 사용할 수 있습니다. 이는 가져오기 및 내보내기 키워드를 사용하여 정의됩니다.
• 프라미스: 프라미스는 JavaScript에서 비동기 작업을 처리하는 방법을 제공합니다. 비동기 작업의 최종 완료 또는 실패를 나타내는 데 사용됩니다.
• 제너레이터: 제너레이터를 사용하면 일시 중지하고 다시 시작할 수 있는 기능을 정의할 수 있습니다. 이는 function 키워드를 사용하여 정의됩니다.
• 맵과 세트: 맵과 세트는 키-값 쌍을 저장할 수 있는 데이터 구조입니다. 이는 Map 및 Set 생성자를 사용하여 정의됩니다.

이러한 질문이 중요한 이유

이러한 질문은 제가 인터뷰 중에 접한 핵심 개념을 반영합니다. 실제 시나리오에서 JavaScript에 대한 이해도를 테스트하도록 설계되었습니다.

JavaScript 인터뷰를 준비 중이신가요? 이 질문을 다시 살펴보고 답변을 연습해 보세요. 보다 심층적인 학습 경험을 원하시면 Quicknxt.com에서 제 강좌를 확인하여 실습 지식을 얻고 코딩 기술을 향상시키세요. 앞으로도 함께 배워보아요!

위 내용은 당신이 알아야 할 필수 JavaScript 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!