1. Promises와 그 Polyfill에 대한 당신의 경험은 어느 정도인가요?
Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수 있는 객체
promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다.
promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 있습니다.
2. Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?
장점
- 코드의 가독성이 좋습니다.
Promise는then()메서드를 사용하여 연속적인 비동기 코드를 작성성할 수 있습니다. 이렇게 하면 콜백 체인이 아닌 평평한 구조로 코드를 작성할 수 있으며, 콜백 지옥에서 벗어날 수 있습니다. Promise.all()을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있습니다.
단점
- 약간 더 복잡한 소스코드
- ES6 이전의 브라우저에서는
Promise를 지원하지 않는 경우가 있습니다. 이를 사용하기 위해서는polyfill을 로드해야 합니다.
3. JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?
장점
JavaScript의 오랜 문제점들을 해결하고JavaScript안티 패턴을 방지합니다.JavaScript위에 syntactic sugar를 제공함으로써 더 짧은 소스코드를 작성할 수 있도록 해줍니다.- 정적 타입은 시간 경과에 따라 유지 관리해야 하는 대규모 프로젝트에서 훌륭합니다(TypeScript의 경우).
단점
- 브라우저는 오직
JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에JavaScript로 코드를 컴파일해야 합니다. - 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.
4. JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?
- React and Redux
- React Devtools
- Redux Devtools
- JavaScript
- Chrome Devtools
- debugger statement
- Good old console.log debugging
5. 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?
오브젝트의 경우
for-in 반복
for (var property in obj) {
console.log(property);
}그러나, 이는 상속된 속성도 반복되며, 사용하기 전에 obj.hasOwnProperty(property) 체크를 추가해야 합니다.
Object.keys()
Object.keys(obj).forEach(function (property) { ... })Object.keys()는 전달하는 객체의 열거 가능한 모든 속성을 나열하는 정적 메서드입니다.
Object.getOwnPropertyNames()
Object.getOwnPropertyNames(obj).forEach(function (property) { ... })Object.getOwnPropertyNames()는 전달하는 객체의 열거 가능한 속성과 열거불가능한 모든 속성을 나열하는 정적 메서드입니다.
배열의 경우
for 반복
for (var i = 0; i < arr.length; i++)여기에 있는 일반적인 함정은 var이 함수 스코프고 블록 스코프가 아니며, 대부분 블록 스코프의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 let이 추가됐고, 이를 대신 사용할 것을 권장합니다.
그래서 다음과 같이 됩니다.
for (let i = 0; i < arr.length; i++)forEach
arr.forEach(function (el, index) { ... })필요한 것이 배열의 요소라면 index를 사용할 필요가 없기 때문에 이 구문이 더 편리 할 수 있습니다. 또한 every과 some메서드를 이용하여 반복을 일찍 끝낼 수 있습니다.
for-of 반복
for (let elem of arr) { ... }ES6는 String, Array, Map, Set 등과 같은 iterable protocol을 준수하는 객체를 반복 할 수 있게 해주는 새로운 for-of 루프를 도입했습니다. for 루프의 장점은 루프에서 벗어날 수 있다는 것이고, forEach()의 장점은 카운터 변수가 필요 없기 때문에 for 루프보다 간결하다는 것입니다. for-of 루프를 사용하면, 루프에서 빠져 나올 수도 있고 더 간결한 구문도 얻을 수 있습니다.
또한, for-of 루프를 사용할 때 각 배열 요소의 인덱스와 값에 모두 접근해야하는 경우 ES6 Array의 entries() 메소드와 destructuring을 사용하면됩니다.
const arr = ['a', 'b', 'c'];
for (let [index, elem] of arr.entries()) {
console.log(index, ': ', elem);
}6. mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.
Mutable객체는 값이 변경 가능한 객체Immutable객체는 값이 변경되지 않는 객체
7. 동기, 비동기 함수의 차이점을 설명하세요.
동기 함수
동기 함수는 호출되면 함수의 작업이 모두 완료될 때까지 코드 실행이 멈추고, 함수가 반환된 이후에 다음 코드가 실행되는 함수입니다. 즉, 함수 호출 이후에는 해당 함수가 반환될 때까지 코드 실행이 중지되며, 이후 코드는 순차적으로 실행됩니다. 이러한 방식으로 코드를 작성하면 코드의 순서가 보장되기 때문에 프로그래밍이 간단해지지만, 함수 실행 중에 다른 작업을 수행할 수 없기 때문에 시간이 오래 걸리는 작업을 수행하면 다른 코드가 실행되지 않는 문제가 발생할 수 있습니다.
비동기 함수
비동기 함수는 함수가 호출되면 함수의 작업이 백그라운드에서 실행되며, 함수가 반환된 이후에도 코드 실행이 계속됩니다. 이러한 방식으로 코드를 작성하면 코드의 순서가 보장되지 않지만, 시간이 오래 걸리는 작업을 수행하는 동안 다른 코드가 실행될 수 있기 때문에 프로그램의 성능을 향상시킬 수 있습니다. 비동기 함수는 보통 콜백(callback) 함수나 프로미스(promise), async/await 등의 기술을 사용하여 구현됩니다.
8. 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?
이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.
스택과 태스크 큐의 차이점
콜 스택은 현재 실행 중인 함수의 정보를 담는 자료구조이며, 태스크 큐는 비동기 작업이 완료되면 대기열에 추가하는 자료구조
질문
질문1
Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?
질문2
콜 스택과 태스크 큐의 차이점은 무엇인가요?
질문3
동기, 비동기 함수의 차이점을 설명하세요
질문4
JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?
