JavaScript

JavaScript와 관련된 질문과 답변

var, let, const 타입의 차이는?

타입	var	let	const
호이스팅	O	X	X
재선언	O	X	X
재할당	O	O	X

1. var은 재선언과 재할당이 가능한 변수 타입으로 함수 스코프를 가집니다.

2. 변수의 선언부는 호이스팅되어 코드의 최상단에서 undefind 로 초기화 됩니다.

3. let과 const는 ES6에서 추가된 새로운 문법으로 블록 스코프를 가집니다.

4. 선언부가 호이스팅되긴 하지만, 원래 선언부에 도달하기 전까지는 Temporal Dead Zone에 저장되기 때문에 변수에 액세스 할 수 없습니다.

5. let은 재선언이 불가능한 변수타입입니다.

6. const는 재할당, 재선언이 모두 불가능한 상수 타입이다.

동기와 비동기 프로그래밍의 차이는?

• 동기 방식은 순서대로 작업을 처리하며 하나의 작업이 끝나면 다음 작업을 수행하는 방식입니다.

• 비동기 방식은 작업을 시작하고 끝날 때까지 다른 작업을 수행할 수 있는 방식으로

• 오래 걸리는 작업이나 종료 시점을 정확히 알 수 없는 작업에 사용됩니다.

• 비동기 프로그래밍을 통해 응답을 기다리는 동안 사용자는 다른 작업을 수행하여 사용자 경험을

• 향상시킴과 동시에 전체적인 작업 시간을 줄일 수 있습니다. 또한 싱글 스레드로 동작하는 자

• 스크립트는 한 번에 하나의 작업만 수행할 수 있지만, 비동기를 통해 여러 작업을 처리하는 효과를 낼 수 있습니다.

Async/Await에?대해서 설명해주세요.

1. Promise는 비동기 작업의 상태와 결과 값을 가지는 자바스크립트의 내장 객체입니다.

2. 가질 수 있는 상태는 pending, fulfilled, rejected가 있습니다.

3. async와 await는 비동기 작업을 다루는 방법 중의 하나로

4. async는 비동기 함수를 정의하기 위해서 사용하며,

5. await는 비동기 작업을 동기 작업처럼 작업이 끝나기를 기다리게 합니다.

6. 기존에는 then 구문을 이용한 callback 방식을 통해 비동기 작업을 처리할 수 있었지만,

7. async…await를 사용하면 동기 함수처럼 코드를 선형적으로 작성할 수 있어

8. 더 직관적이고 가독성을 높일 수 있습니다

다량의 데이터에 대해 무한 스크롤을 적용할 때 고려해야 할 점은?

1. 무한스크롤은 많은 데이터를 자연스럽게 보여 줌으로써 사용자 경험을 높일 수 있는 좋은 방법 중 하나입니다.

2. 하지만 몇 가지 고려해야 할 점이 있습니다.

3. 무한 스크롤을 사용해야 한다면 페이지네이션과 결합하여

4. 내가 현재 어느 위치의 데이터를 보고 있는지를 url을 통해 보여주는 것이 좋습니다.

5. 이렇게 하면 사용자는 자신이 보고 있는 페이지를 쉽게 알 수 있고,

6. 다른 페이지를 탐색하다 돌아오더라도 보고 있던 데이터를 그대로 다시 볼 수 있습니다.

7. 또한 데이터를 계속 불러와서 DOM에 쌓으면 브라우저 성능이 저하될 수 있고,

8. 브라우저 스크롤이 매우 작아지게 됩니다.

9. 사용자가 보고 있는 위치로부터 멀리 떨어져 있는 데이터를 숨기고,

10. 양방향 무한 스크롤을 구현하여 적정 양의 데이터만 화면에 표시함으로써 문제를 해결 할 수 있습니다.

Hoisting이란?

• 자바스크립트의 호이스팅은

• 변수와 함수의 선언부를 프로그램

• 시작 부로 끌어 올려 변수의

• 메모리 공간을 미리 할당하는 것입니다.

• 변수의 초기화 부분은 호이스팅되지 않고,

• 선언이 없는 변수는 호이스팅이 되지 않습니다.

• 호이스팅 시에 var 변수는 undefined로 초기화 되고,

• let과 const는 Temporal dead zone에 위치 하다가

• 실제 선언부가 실행되기 전까지 에러를 반환합니다

Debouncing과 Throttling은 무엇인가요?

디바운싱(Debouncing)과 쓰로틀링(Throttling)은 반복적인 이벤트를 효율적으로 처리하기 위한 방법이다.

디바운싱(Debouncing)

"이벤트가 특정 주기 보다 짧은 간격으로 연속하여 발생할 때, 이전 이벤트를 무시하고 마지막 이벤트를 실행"

디바운싱은 연속적으로 발생한 이벤트에서 마지막 이벤트만 처리하는 방식이다.

검색 기능에서 문자를 입력할 때마다 검색 api를 호출하면 매우 비효율적일 것이다.

이때 디바운싱을 통해 입력이 다 끝난 후에 검색 api가 호출되도록 하여 불필요한 api 호출을 줄일 수 있다

쓰로틀링(Throttling)

쓰로틀링은 이벤트가 지속적으로 발생할 때 이벤트의 발생 빈도를 줄이기 위해 사용하는 방식이다

"이벤트가 연속적으로 발생할 때 특정 주기에 특정 횟수만 실행 가능하도록 발생 빈도를 제한"

스크롤이나 리사이즈와 같은 이벤트는 짧은 시간 내에 많은 이벤트가 반복 발생할 수 있다. 이때 모든 이벤트에 대해 함수 또는 연산을 처리하면 비효율적이고 연산이 무거우면 성능 저하가 발생할 수 도 있다.

이때 쓰로틀링을 통해 이벤트의 발생 주기를 제한하여 최적화를 수행할 수 있다.

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

JavaScript와 TypeScript의 차이점은 무엇인가요?

JavaScript에서의 this에 대해서 설명해주세요.

Prototype에 대해서 설명해주세요.

CommonJS에 대해서 설명해주세요.

Closure와 사용하는 이유에 대해서 설명해주세요

함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 때의 모든 변수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉하기 위해서 주로 사용 합니다.

JavaScript에서의 모듈에 대해서 설명해주세요.

.call과 .apply의 차이점은 무엇인가요?

Function.prototype.bind을 설명 하시오

이벤트 위임에 대해서 설명해주세요.

Event Bubbling과 Event Capturing해서 설명해주세요.

이벤트 버블링(event bubbling)은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다. 즉, 이벤트를 처리하는 핸들러 함수를 부모 요소에 등록해놓으면, 자식 요소에서 발생한 이벤트도 모두 처리할 수 있습니다. 이를 활용하면, 여러 개의 하위 요소에서 발생하는 이벤트를 하나의 이벤트 핸들러로 바인딩하는 이벤트 위임 처리를 할 수 있습니다. 버블링 및 캡쳐링을 방지하기 위해서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시키거나, 이벤트 핸들러에서 이벤트가 발생한 요소를 확인하여 처리해야 합니다.

load 이벤트와 DOMContentLoaded event의 차이점은 무엇인가요?

load 이벤트는 DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스(이미지, 폰트 등) 의 로딩이 완료되었을 때 발생하는 반면,

DOMContentLoaded 이벤트는 HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료 되었을 때 발생합니다.