기술면접 예상 질문(Javascript)

by Kyojin Hwang

📚카테고리 (Category)

• 📌 Javascript
  • 💡 Sync와 Async의 차이점은?
  • 💡 Blocking과 Non-Blocking의 차이점은?
  • 💡 콜백함수란?
  • 💡 콜백지옥과, 콜백지옥 해결방법은?
  • 💡 Event Loop에 대해 설명해 주세요.
  • 💡 Event Delegation에 관해 설명해주세요.
  • 💡 this의 의미를 설명하세요.
  • 💡 함수선언식과 표현식의 차이점은?
  • 💡 호이스팅에 대하여 설명해주세요.
  • 💡 이벤트 버블링과 캡처링에 대하여 설명해주세요.
  • 💡 렉시컬환경에 대하여 설명해주세요.
  • 💡 클로저에 대하여 설명해주세요.
  • 💡 렉시컬 스코프에 대하여 설명해주세요.
  • 💡 실행 컨텍스트에 대하여 설명해주세요.
  • 💡 자바스크립트는 어떤 언어인가요?
  • 💡 스코프와 스코프체인에 대하여 설명해주세요.
  • 💡 Promise와 async의 차이점에 대하여 설명해주세요.
  • 💡 map과 forEach의 차이점에 대하여 설명해주세요.
  • 💡 var, let, const의 차이점은?
  • 💡 일반함수와 화살표함수의 차이점은?

📌 Javascript

💡 Sync와 Async의 차이점은?

• Sync: 작업이 순차적으로 실행되며, 앞의 작업이 완료되어야 다음 작업이 실행됩니다. 따라서 작업 시간이 길어질 경우 전체 실행이 지연됩니다.
• Async: 작업이 동시에 실행되며, 현재 작업이 끝나지 않아도 다른 작업을 진행할 수 있습니다. 주로 네트워크 요청이나 파일 읽기 등에서 사용되며, 성능과 응답성을 높일 수 있습니다.

💡 Blocking과 Non-Blocking의 차이점은?

• Blocking : 작업이 끝날 때까지 다른 작업이 대기해야 하는 방식입니다. 특정 코드가 실행 중일 때, 해당 작업이 완료될 때까지 프로그램의 흐름이 멈추며, 이후의 코드가 실행되지 않습니다. 주로 동기(Sync) 방식에서 나타나며, 작업이 오래 걸릴 경우 전체 응답성이 저하됩니다.

• Non-Blocking : 작업이 끝날 때까지 기다리지 않고, 바로 다음 작업을 실행하는 방식입니다. 특정 코드가 실행되는 동안에도 다른 코드가 동시에 실행될 수 있어 프로그램이 멈추지 않습니다. 주로 비동기(Async) 방식에서 나타나며, 서버 요청, 파일 읽기 등 시간이 오래 걸리는 작업에 많이 사용되어 효율성을 높입니다.

💡 콜백함수란?

• 콜백함수는 함수의 매개변수로 다른 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다.
• 보통 비동기 처리시 콜백함수를 사용합니다.

💡 콜백지옥과, 콜백지옥 해결방법은?

콜백지옥이란?

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

해결방법

• 콜백지옥에 빠지면 가독성이 떨어지기 때문에, Promise나 Async/Await를 이용해 보완할 수 있습니다.

💡 Event Loop에 대해 설명해 주세요.

개념

• 자바스크립트의 이벤트 루프는 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘입니다.
• 이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성됩니다.
• Micro task queue에는 Promise, async/await 과 같은 작업.
• Macro task queue(Task Queue)에는 Web API (setInterval, setTimeout)와 같은 작업.

작동 방식

• 이벤트 루프는 Call stack을 확인하고, Call stack이 비어있는 경우 Micro task queue의 작업을 Call stack으로 옮깁니다. 그리고 Micro task queue가 비어있는 경우, Macro task queue의 작업을 Call stack으로 옮기고 처리합니다.

💡 Event Delegation에 관해 설명해주세요.

개념

• Event Delegation (이벤트 위임)
• 상위 요소에 이벤트 리스너를 추가하여, 자식 요소의 이벤트를 처리하는 기법입니다.

작동방식

• 이벤트 버블링을 이용하여, 특정 자식 요소에서 발생한 이벤트가 부모 요소로 전파되도록 하고, 부모 요소에서 이벤트가 발생한 대상(target)을 확인하여 처리합니다.

장점과 단점

• 장점
  • 메모리 절약 : 부모 요소에 하나의 리스너만 추가하므로 메모리 사용이 줄어듭니다.
  • 유지보수 용이 : 이벤트 처리 로직을 수정할 때 한 곳만 수정하면 되어서 유지보수가 쉬워집니다.
  • 동적 요소 처리 : 동적으로 추가된 요소들에 대해 별도로 리스너를 추가할 필요가 없습니다.
• 단점
  • 이벤트 타겟 식별필요 : event.target을 사용하여 조건문을 통해 필터링해야 합니다. 코드가 복잡해질 수 있습니다.
  • 깊이 있는 요소 처리어려움 : 특정 요소에만 적용하려면 코드가 복잡해질 수 있습니다.
  • 상위 요소 이벤트 버블링 영향 : 자식 요소들이 의도치 않게 부모의 이벤트 리스너에 의해 처리될 수 있습니다.

예시코드

<ul id="parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const parent = document.getElementById('parent')

  // 부모 요소에만 이벤트 리스너를 추가
  parent.addEventListener('click', (event) => {
    // 클릭한 요소가 li 요소인지 확인
    if (event.target.tagName === 'LI') {
      console.log(`Clicked on: ${event.target.textContent}`)
    }
  })
</script>

💡 this의 의미를 설명하세요.

개념

• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며, 함수의 호출 방식에 따라 특정 객체를 바인딩하게 됩니다.

작동방식

1. 생성자 함수 내부에서 'this'는 생성자 함수가 생성할 인스턴스에 바인딩됩니다.
2. Call, Apply, 또는 Bind 메서드를 사용할 때는, 'this'는 함수에 첫 번째 인자로 전달된 객체에 바인딩됩니다.
3. 객체 내부의 메서드에서 호출될 때는 'this'는 해당 객체에 바인딩됩니다.
4. 위의 세 가지 경우를 제외한 일반 함수 호출에서는 'this'는 전역 객체에 바인딩됩니다.
5. 화살표 함수 내부에서 'this'를 사용할 경우, 'this'는 해당 화살표 함수가 선언된 상위 스코프의 'this'에 바인딩됩니다.

💡 함수선언식과 표현식의 차이점은?

• 함수 선언형(Function Declaration)

  • function 키워드를 사용하여 함수를 정의합니다.
  • 함수 선연형은 호이스팅 되기 때문에 코드가 실행되기 전에 로드되고 선언하기 전에도 호출이 가능합니다.

• 함수 표현식(Function Expression)

  • 변수에 함수를 할당하는 방식으로 함수를 정의합니다.
  • 함수 표현식은 함수가 선언된 이후에만 호출이 가능하며, 함수가 할당된 변수가 접근 가능한 스코프 내에서만 호출할 수 있습니다.

💡 호이스팅에 대하여 설명해주세요.

• 코드가 실행되는 과정에서 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 한다.
• var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생합니다. 반면 let이나 const의 경우엔 선언과 초기화 단계가 동시에 일어나지 않고, 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄집니다.
  

호이스팅 자세한 설명

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

• 이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소에서 상위 요소로 이벤트가 전파되는 과정을 말합니다.
• 이벤트 캡처링(Event Capturing)은 이벤트가 상위 요소에서 하위 요소로 이벤트가 전파되는 과정을 말합니다.

버블링캡처링 자세한 설명

💡 렉시컬환경에 대하여 설명해주세요.

• 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행컨텍스트를 구성하는 컴포넌트다.
• 스코프 체인 및 클로저 기능을 지원하는 중요한 메커니즘으로, 코드가 실행될 때 변수에 대한 접근 방식을 결정하는 핵심적인 역할을 합니다.

💡 클로저에 대하여 설명해주세요.

• 클로저란(Closure), 함수가 속한 렉시컬 스코프(Lexical scope)를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있는 함수를 의미합니다.
• 클로저는 주로 캡슐화와 정보 은닉을 위해서 활용됩니다.

💡 렉시컬 스코프에 대하여 설명해주세요.

• 렉시컬 스코프(Lexical scope)란 함수가 선언되는 위치에 따라서 상위 스코프가 결정되는 개념을 의미합니다.
• 다른 말로 정적 스코프(Static scope)라고도 부릅니다.

💡 실행 컨텍스트에 대하여 설명해주세요.

• 실행 컨텍스트(Execution Context)는 코드가 실행될 때 생성되는 환경을 나타내는 추상적인 개념입니다.
• 실행 컨텍스트에는 변수 객체, 스코프 체인, this와 같은 정보들이 포함되며, 스택 구조로 관리됩니다. 그리고 실행이 완료되면 해당 실행 컨텍스트는 스택에서 제거됩니다.

💡 자바스크립트는 어떤 언어인가요?

• 단일 스레드와 하나의 콜스택을 사용해 코드를 실행합니다.
• 이벤트 루프와 콜백 큐를 통해 비동기 작업을 효율적으로 처리합니다.
• 동적 언어로, 변수의 타입이 실행 중에도 변경될 수 있습니다.

💡 스코프와 스코프체인에 대하여 설명해주세요.

스코프 개념

스코프란 변수(식별자)에 접근할 수 있는 유효한 범위를 뜻합니다.

스코프 종류

• 전역 스코프(Global scope)
  • 어디에서든지 접근할 수 있는 범위.
• 지역 스코프
  • 함수나 블록 내에서만 유효한 범위로, 함수 스코프와 블록 스코프로 나뉩니다.

지역스코프

• 함수 스코프
  • 함수 내에서만 유효.
• 블록 스코프(Block scope)
  • 블록단위{} 내에서만 유효한 범위를 갖게 하는 스코프
  • let 이나 const 변수는 블록 스코프를 가진다.

스코프체인

• 현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식을 의미합니다.
• 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 해당 변수를 참조하는 코드의 스코프부터 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

스코프 자세한 설명

💡 Promise와 async의 차이점에 대하여 설명해주세요.

• Promise는 자바스크립트에서 비동기 작업의 결과를 처리하는 객체로, resolve와 reject로 상태를 관리합니다. 하지만 체이닝이 길어지면 가독성이 떨어질 수 있습니다.
• async/await는 이 문제를 해결하는 구문으로, async 함수는 항상 Promise를 반환하고, await는 Promise가 해결될 때까지 기다립니다. 이를 통해 비동기 코드를 동기 코드처럼 작성할 수 있어 코드가 더 직관적이고 가독성이 높아집니다. 즉, async/await는 Promise를 더 간편하게 다룰 수 있게 해주는 방법입니다.

💡 map과 forEach의 차이점에 대하여 설명해주세요.

• map은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다.
• forEach는 반환 값이 없으며, 원본 배열을 직접 변경합니다.

💡 var, let, const의 차이점은?

• var

  • 중복 선언 가능
  • 재할당 가능
  • 함수레벨 스코프

• let

  • 중복 선언 불가능
  • 재할당 가능
  • 블록레벨 스코프

• const

  • 중복 선언 불가능
  • 재할당 불가능
  • 블록레벨 스코프

💡 일반함수와 화살표함수의 차이점은?

📚Move