[Development] 프론트엔드 면접 예상 질문 - JavaScript(2)

 

 

1. 자바스크립트의 원시 타입(primitive type)과 참조 타입(reference type)에 대해서 설명해주세요.
2. 이벤트 버블링(event bubbling)과 캡쳐링(event capturing)에 대해서 설명하세요.
3. 이벤트 위임(event delegation)에 관해 설명해주세요.
4. 이벤트 루프(event loop)란 무엇인가요? (+ call stack, task queue 포함 )
5. 불변 객체(immutable object)에 관해 설명해주세요.

 

 

1. 자바스크립트의 원시 타입(primitive type)과 참조 타입(reference type)에 대해서 설명해주세요.

원시 타입과 참조 타입은 데이터가 메모리에 어떻게 저장되느냐에서 가장 큰 차이를 보인다.

• 원시 타입
  • 문자열, 숫자, 불린, undefined, null, Symbol 등이 있음
  • 이런 데이터들은 독립적인 메모리 안에 값 그대로 저장·할당
• 참조 타입
  • '참조에 의해' 저장되고 복사됨
  • 참조에 의해 저장된다는 것은 어떤 변수가 있을 때 변수가 객체에 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 메모리 주소값이 저장되는 것(메모리 주소값=참조값)

+) 원시 타입은 복사 시 값 자체를 담은 독립적인 메모리를 생성한다.

+) 객체의 '진짜 복사본’을 만들려면 '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign 이나 '깊은 복사’를 가능하게 해주는 _. cloneDeep(obj)를 사용하면 된다. 이때 얕은 복사본은 중첩 객체를 처리하지 못한다.

 

 

 

2. 이벤트의 버블링(event bubbling)과 캡쳐링(event capturing)에 대해서 설명하세요.

DOM 이벤트가 상위 요소로 전파되는 현상을 버블링, 하위 요소로 전파되는 현상을 캡쳐링이라고 한다.

• 이벤트 전파
  • 돔 요소에서 이벤트가 발생한 후 DOM 트리를 타고 다른 곳으로 전파되는 것
• 이벤트 플로우
  
  • 이벤트가 전파되는 흐름
  • 캡쳐링 단계-타깃 단계-버블링 단계로 진행됨
    • 캡쳐링 단계는 window부터 시작해서 이벤트가 하위로 전파됨
    • 타깃 단계는 이벤트가 실제 타깃 요소에 전달됨
    • 버블링 단계에서는 다시 하위에서 상위로 전파됨
  • 동록 된 이벤트 핸들러는 타깃 단계와 버블링 단계에서만 캐치할 수 있음
    • addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 capture 옵션을 true로 설정할 경우 캡쳐링 단계에서도 활용 가능함
  • stopPropagation은 상위 엘리멘트로의 전파를 막는 방법

+) 이벤트를 등록하는 두 가지 방법

// 인라인 이벤트 핸들러
<button onclick="alert('old-fashioned event handler!');">Click me</button>

// addEventListener을 이용한 이벤트 핸들러 추가
// 매개변수로 이벤트 타입, 이벤트 랜들러, capture 사용여부를 전달받는다
elem.addEventListener(..., true)

첫 번째 방법은 선호되지 않는다. HTML과 JavaScript 코드가 분리되지 않기 때문이다.

 

 

3. 이벤트 위임(delegation)에 관해 설명해주세요.

부모 요소에 이벤트 리스너를 붙이는 것

• 하위 요소에 이벤트가 발생하면 이벤트 버블링 때문에 부모 요소에 연결된 리스너가 실행됨
• 사용하는 이유
  • 많은 코드를 작성할 필요가 없어짐
  • 이벤트가 발생하는 요소마다 리스너를 추가할 필요 없이 부모 하나에만 추가하면 되기 때문에 사용되는 메모리의 양이 감소됨
  • 이벤트가 발생하는 요소가 추가되고 제거될 때마다 리스너를 추가하고 제거할 필요가 없음

+) 거의 모든 이벤트는 버블링이 발생한다.
     focus와 같은 몇몇 이벤트는 버블링이 발생하지 않는다.

 

 

4. 이벤트 루프(event loop)란 무엇인가요?(+ call stack, task queue 포함 )

이벤트 루프는 태스크를 처리하는 자바스크립트 내의 루프이다.

• 자바스크립트는 다른 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리
  
  • 자바스크립트 엔진은 하나의 메인 스레드로 구성됨
  • 메인 스레드는 코드를 읽어 한 줄씩 실행
• 동기 함수는 스택에 즉시 추가, 비동기 콜백은 태스크 큐에 대기하고 있다가 이벤트 루프가 스택에 추가
  
  • 비동기 응답을 받으면, 응답을 처리하는 콜백 함수를 태스크 큐에 넣음
  • 이벤트 루프는 메인 스레드에 여유가 있을 때 태스크 큐에서 함수를 꺼내 실행

 

 

5. 불변 객체(immutable object)에 관해 설명해주세요.

불변 객체란 원본 데이터를 변화시키지 않는 객체이다.

• 객체를 복사해서 내부 프로퍼티를 변경하고 싶지만 원본 객체를 유지하고 싶을 때 사용
• 기존 객체의 정보를 복사해 새로운 객체를 만들어 반환하는 방식으로 생성
• 복사하려는 객체의 depth에 따라, 즉 중첩 객체인지 아닌지에 따라 얕은 복사와 깊은 복사의 방법을 선택해서 새로운 객체를 만들어 할당하게 되면 불변 객체를 만들 수 있음

+) 불변성
기본형 데이터(문자열, boolean, null, undefined, Symbol)는 데이터 자체를 변경하려고 하면 기존 데이터가 변하는 것이 아니라 매번 새로운 메모리에 새로운 값이 할당되어 그것을 가리키게 되는데 이것을 불변성이라고 한다.

참조형의 경우도 유사하게 작동하지만 참조형 데이터의 내부 프로퍼티를 변경할 때 ‘가변성’을 띄게 된다.

+) 얕은 복사는 바로 아래 단계의 값만 복사하는 방법이고, 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다.

 

 

 

글 속에 오류가 있다면 언제든 댓글로 알려주세요 :-)