JS 기술면접 스터디 6주차: immutable 객체부터 이벤트 루프까지

기술면접 스터디 5주차에 이어 6주차를 진행하고 관련 내용을 정리합니다. 이전의 내용이 궁금하시다면 다음을 클릭해주세요.

• 1주차: 이벤트 위임부터 코드구성까지
• 2주차: 호스트 객체부터 Ajax까지
• 3주차: 호이스팅부터 이벤트 버블링까지
• 4주차: 전역스코프부터 Promise까지
• 5주차: Math.max()부터 프로토타입 기반 상속까지

이번 글은 지난 1~4주차 글들처럼 다르게는 front-end-interview-handbook의 질문을 다루며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다.

 

6주차 질문은 Math.max()와 Math.min(), 컴퓨터가 다루는 소수, 지멋대로의 진법 변화, 함수 표현식과 선언식의 차이, 키워드 없는 변수 할당, 객체지향 프로그래밍과 함수형 프로그래밍, 선언적/명령형 프로그래밍의 차이, 프로토타입 기반의 상속 등에 대한 내용입니다.

1. JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?

debugger과 크롬 개발자도구를 사용하면 크롬에서 쉽게 코드 디버깅을 할 수 있습니다. 보통 console.log 함수를 이용해 디버깅을 하는 경우가 많지만, debugger 키워드를 JavaScript 코드 중간에 삽입하면 크롬에서 debugger가 적힌 부분까지 해당 코드를 실행하고 일시정지하고, 해당 부분까지의 컨텍스트를 보여줍니다. 최종결과만을 보여주며 코드를 복잡하게 만드는 console.log 함수로 체크하는 것보다 훨씬 더 효율적이고 정확하게 디버깅이 가능합니다.

 

이 외에도 React로 개발할 시 React Devtool을 사용하면 컴포넌트와 컴포넌트별 상태를 파악할 수 있습니다.

2. 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?

keys는 enumerable의 true일 때문 가능

• 객체(오브젝트) 속성 반복
  • for-in문
  • Object.keys()
  • Object.getOwnPropertyNames()
• 배열의 요소 반복
  • for문: break를 통해 반복 정지 가능, index 사용으로 코드가 불필요하게 복잡해질 수 있음
  • forEach문: index를 사용하지 않아도 되어 코드가 간결해지지만, 반복을 중간에 정지할 수 없음
  • for-of문: index를 사용하지 않고, break를 ㅗㅌㅇ해 반복을 중지할 수도 있습니다. Iteration Protocol을 준수하는 객체(String, Map, Set, Array)에 모두 사용가능합니다.
    .
    for-of 루프를 사용할 때 각 배열 요소의 인덱스와 값에 모두 접근해야하는 경우 ES6 Array의 entries() 메소드와 destructuring을 사용할 수 있습니다.

const arr = ['a', 'b', 'c'];
for (let [index, elem] of arr.entries()) {
    console.log(index, ': ', elem);
}

3. mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.

원시값과 객체에 대한 질문인가? 질문의 의도를 파악하지 못함

• JavaScript에서 immutable 객체의 예는 무엇인가요?
• Immutability의 장점과 단점은 무엇인가요?
• 자신의 코드에서 어떻게 immutability를 얻을 수 있나요?

4. 동기, 비동기 함수의 차이점을 설명하세요.

동기 함수는 다음 명령문이 실행되기 전에 이전의 명령문이 완료되어야 함. 이전 명령문이 오랜 시간이 걸리면 프로그램은 그 그 작업이 끝날때까지 아무 것도 못하게 일시정지됨

비동기 함수는 일반적으로 파라미터를 통해서 콜백함수을 받고, 비동기 함수가 호출된 후 즉시 다음 줄 실행이 계속됩니다.

콜백은 비동기 작업이 완료되어 호출 스택이 비어있을 때 호출된다. 서버에서 데이터를 로드하는 등의 무거운 작업을 비동기식으로 수행하여 블로킹되지 않고 다른 작업을 계속할 수 있다.

5. 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?

자바스크립트는 싱글쓰레드로 그 자체로는 비동기 작업을 할 수 없지만, 웹 브라우저의 도움을 받아 이를 구현합니다. 이벤트 루프는 이를 위해 웹 브라우저에서 사용되는 기능 중 하나입니다.
https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html

6. function foo() {}와 var foo = function() {} 사이에서 foo 사용의 차이에 대해 설명하세요.

전자는 함수 선언인 반면, 후자는 함수 표현식입니다. 주요한 차이점은 함수 선언은 함수바디가 호이스트되지만, 함수 표현식의 바디는 호이스트되지 않습니다(변수와 동일한 호이스팅 동작을 가짐). 호이스팅에 대한 자세한 설명은 질문 위의 호이스팅을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고 하면 Uncaught TypeError : XXX is not function 에러가 발생합니다.

7. let, var, const를 사용하여 생성된 변수들의 차이점은 무엇인가요?

var 키워드를 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성된 함수에 전역 오브젝트로 적용됩니다. let과 const는 블록 스코프입니다. 즉, 가장 가까운 중괄호(function, if-else 블록, for-loop) 내에서만 접근할 수 있습니다.

 

var는 선언 전 접근, 재선언, 재할당 모두 가능합니다.

그러나 let, const는 선언 전 접근이 불가능하고, 재선언이 불가능합니다. 재할당의 경우 let은 가능하나, const는 불가능합니다.

8. ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?

관련자료

9. 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?

화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 합니다.

window.x = 1;  
const normal = function () { return this.x; };  
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10  
console.log(arrow.call({ x: 10 })); // 1

• 화살표 함수를 사용하면 안되는 경우(this 사용이 왜곡되거나 prototype 프로퍼티가 필요한 경우)
  • 메소드(this가 window로 잡힘)
  • prototype(메소드의 경우와 동일)
  • 생성자 함수(화살표 함수는 prototype 프로퍼티가 없기 때문에 생상자 함수로 기능불가)
  • addEventListener의 콜백함수(this가 이벤트 건 엘리먼트가 아니라 window로 잡힘)

---

 

틀렸거나 더 좋은 설명이 있다면 댓글로 알려주세요. 많은 분들에게 큰 도움을 줄 수 있습니다.

 

도움이 되셨다면 좋아요(공감)와 댓글 부탁드립니다. 감사합니다.