가장 많이 묻는 면접 질문과 답변 & 온라인 테스트
면접 준비, 온라인 테스트, 튜토리얼, 라이브 연습을 위한 학습 플랫폼

집중 학습 경로, 모의고사, 면접 준비 콘텐츠로 실력을 키우세요.

WithoutBook은 주제별 면접 질문, 온라인 연습 테스트, 튜토리얼, 비교 가이드를 하나의 반응형 학습 공간으로 제공합니다.

Prepare Interview
/ 면접 주제 / Frontend Developer
WithoutBook LIVE Mock Interviews Frontend Developer Related interview subjects: 20

Interview Questions and Answers

Know the top Frontend Developer interview questions and answers for freshers and experienced candidates to prepare for job interviews.

Total 30 questions Interview Questions and Answers

The Best LIVE Mock Interview - You should go through before interview

Know the top Frontend Developer interview questions and answers for freshers and experienced candidates to prepare for job interviews.

Interview Questions and Answers

Search a question to view the answer.

Experienced / Expert level questions & answers

Ques 1

Explain the concept of closures in JavaScript.

Closures allow a function to access variables from its outer (enclosing) scope even after the outer function has finished executing. They help in creating private variables and methods.

Example:

```javascript
function outer() {
  let x = 10;
  function inner() {
    console.log(x);
  }
  return inner;
}

const closureExample = outer();
closureExample(); // Outputs 10
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 2

How does CSS specificity work?

Specificity is a set of rules that determines which style declarations are applied to an element. It is based on the importance, specificity, and source order of CSS rules.

Example:

```css
#id-selector {
  color: red; /* higher specificity */
}

.class-selector {
  color: blue;
}
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 3

Explain the concept of event delegation in JavaScript.

Event delegation involves attaching a single event listener to a common ancestor rather than individual elements. It leverages event bubbling to handle events on multiple child elements.

Example:

```javascript
// HTML: 
  • Item 1
  • Item 2

  • const list = document.getElementById('myList');
    list.addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        console.log('Clicked on:', event.target.textContent);
      }
    });
    ```
    복습용 저장

    복습용 저장

    이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

    내 학습 라이브러리 열기
    도움이 되었나요?
    Add Comment View Comments
    Ques 4

    What is the Virtual DOM, and how does it improve performance in frameworks like React?

    The Virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize updates by comparing the virtual DOM with the real DOM and making minimal changes. This reduces the number of manipulations needed on the actual DOM, improving performance.
    복습용 저장

    복습용 저장

    이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

    내 학습 라이브러리 열기
    도움이 되었나요?
    Add Comment View Comments
    Ques 5

    What is a closure in the context of JavaScript's event handling?

    In the context of event handling, a closure allows a function to retain access to variables in its lexical scope even after the outer function has finished executing. This is often used to maintain state across multiple event callbacks.

    Example:

    ```javascript
    function createCounter() {
      let count = 0;
      return function() {
        console.log(count++);
      };
    }

    const counter = createCounter();
    counter(); // Outputs: 0
    counter(); // Outputs: 1
    ```
    복습용 저장

    복습용 저장

    이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

    내 학습 라이브러리 열기
    도움이 되었나요?
    Add Comment View Comments
    Ques 6

    Explain the 'callback hell' phenomenon in JavaScript and how to mitigate it.

    'Callback hell' occurs when multiple nested callbacks make the code hard to read and maintain. Mitigate it by using named functions, promises, or async/await syntax to improve code readability and maintainability.
    복습용 저장

    복습용 저장

    이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

    내 학습 라이브러리 열기
    도움이 되었나요?
    Add Comment View Comments

    Most helpful rated by users:

    Copyright © 2026, WithoutBook.