JS 관련 질문:
- event delegation에 관해 설명해주세요.
https://poiemaweb.com/js-event
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신 하나의 부모요소에 이벤트 핸들러를 바인딩하는 방식.
하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소들의 이벤트를 제어하는 방식.
this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자.
this는 함수를 호출하는 방법에 의해 결정된다. 함수를 실행한 주체가 바로 this다.
- prototype 기반 상속은 어떻게 하는지 설명해주세요.
- AMD와 CommonJS는 무엇이고, 이것들에 대해 어떻게 생각하시나요?
다음 코드가 즉시 호출 함수 표현식(IIFE)로 동작하지 않는 이유에 관해서 설명해보세요:
function foo(){ }();.- IIFE로 만들기 위해서는 어떻게 해야 하나요?
function foo() {} 를 괄호로 감싼 뒤 ()로 실행한다. (function foo(){})()
null과undefined그리고undeclared의 차이점은 무엇인가요?
undeclared: 선언이 되지 않은 상태
undefined: 선언은 되었으나 초기화하지 않은 상태. 값이 없는 변수의 값.
null: 선언을 하였고, 값을 초기화 하였으나 빈 값을 넣어놓기를 원할때 사용.
- 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
클로저란, 함수 안에 함수를 생성할 때 만들어 지고, 함수가 실행된 이후 스코프가 사라지지 않고 생성된 시점의 스코프 체인을 기억하고 있는 것.
클로저는 정의된 스코프 이외의 곳에서 사용할 때 private 저장소 처럼 사용할 수 있다.
- 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다
- 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
함수 표현식으로 함수를 선언할 때, 콜백함수에서 사용할때
- 당신의 코드를 어떻게 구성하는지? (모듈 패턴, 전통적 상속)
- 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
네이티브 객체:
웹 페이지 제어 및 동작을 추가하기 위한 공통의 기능을 제공함 ex) BOM, DOM
호스트 객체:
빌트인 객체와 네이티브객체에 포함되지 않은 사용자에 의해 생성된 객체를 의미한다. 자바스크립트 엔진은 빌트인 객체와 네이티브 객체를 구성한 이후 호스트객체를 해석하게 된다.
- 다음 코드의 차이점은 무엇인가요?
function Person(){} var person = Person() var person = new Person()
1. 함수 선언문. 이렇게 함수를 선언할 경우 이 함수는 호이스팅 되어 해당 스코프의 최상단에 선언한 것과 동일하게 작동한다.
2. 함수 표현식. 이 경우는 함수 선언문과 달리 호이스팅 되지 않는다.
3. 생성자로 함수를 호출. new 뒤에 있는 함수 내부에서 아무것도 리턴하지 않을 경우, new 연산자가 앞에 붙으면 함수 내에서 빈 객체가 생성되고, 함수 내부의 this는 이 빈 객체에 바인딩 된다. 그리고 이 객체를 리턴하게 된다.
.call과.apply의 차이점은 무엇인가요?
함수를 호출하는 메서드이다. 둘 다 첫번째 인자로 함수 내에서 this로 바인딩 할 객체를 인자로 받고,
call은 두번째 인자부터 원래 함수에 들어갈 인자를 인자로 받는다.
apply는 두번째 인자에 배열이 들어가고, 이 배열은 원본 함수에 들어갈 인자들이 들어가는 배열이다.
Function.prototype.bind을 설명하세요.
호출하는 방법과 상관없이 함수 내부의 this를 특정 객체에 묶는 함수. 인자로 함수 내부의 this에 바인딩 할 객체를 넘긴다.
document.write()는 언제 사용하나요?
document.write()는 document.open()에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 document.write()가 실행되면 document.open을 호출하여 문서 전체를 지우고 (<head>와 <body>를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.- UA 문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명하세요.
기능 검출이란 스크립트가 호출하는 기능을 사용자의 브라우저가 지원하는지 체크하는 것을 말합니다. 다음은 브라우저가 GPS를 지원하는지 확인하는 코드입니다.
- AJAX에 관해 가능한 한 자세히 설명하세요.
- AJAX를 사용했을 때의 장단점에 대해 설명해주세요.
- JSON이 어떻게 동작 되는지 설명하세요. (그리고 AJAX와 어떻게 다른지 설명하세요.)
- 기존에 JavaScript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
- "호이스팅(Hoisting)"에 대해서 설명하세요.
호이스팅: 끌어올리다라는 뜻.
변수 호이스팅과 함수 호이스팅이 있음.
변수 호이스팅:
var로 선언하고 할당한 변수는 선언부만 해당 스코프의 최상단으로 끌어올려 지는것.
함수 호이스팅:
function nameHi() {} 같이 선언되는 함수 선언문은 해당 스코프의 최상단으로 끌어올려 지는것.
그렇기 때문에 코드 상으로 함수 선언 이전에 함수를 실행해도 함수 선언문이 스코프의 최상단으로 끌어올려지기 때문에 실행이 가능하게 됨.
하지만 가독성과 유지보수에 불편이 있기 때문에 사용을 지양하라고 많이 권고되고 있음.
- 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
- "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
- 내장된 JavaScript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
- document load event와 DOMContentLoaded event의 차이점은 무엇인가요?
document load event: DOM의 내부의 로딩이 모두 끝나고 발생함. (img태그 내부의 사진파일 로드가 끝나야 함)
DOMContentLoaded event: DOM 초기화 시 바로 발생. (img 태그만 불러오고 바로 로딩 가능)
ex) <img> 태그가 있다면 DOMContentLoaded는 태그 생성되자 마자 이벤트가 발생할 수 있지만,
load event 경우 img태그 내부의 src로 선언된 이미지 파일의 로드가 끝나야만 발생할 수 있다.
==와===의 차이점은 무엇인가요?
== 는 비교할 때 타입이 다르면 한쪽을 타입 변환을 시켜서 값을 비교하고,
=== 는 비교시 값과 타입을 둘 다 비교한다.
- JavaScript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
- 다음 코드를 동작하게 만드세요.
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]- 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
if ~ else~ 문을 간소화 시킨 것
ex)
if (a === true) {
console.log(a)
} else {
console.log('a는 false입니다')
}
위 구문을
a ? console.log(a) : console.log('a는 false입니다')
라고 줄일 수 있다.
use strict;은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
자바스크립트가 묵인했던 에러 메시지를 표시한다.
자바스크립트에서는 어느정도 오류를 무시하고 넘어갈 수 있지만, strict 모드를 사용하면 이런 오류가 있을 경우 에러를 반환한다.
전역 스코프의 최상단이나 함수 내의 최상단에 'use strict' 이라고 작성하면 엄격 모드로 적용된다.
- 100번 반복되는 반복문이 있습니다. 3의 배수일 때는
fizz, 5의 배수일 때는buzz, 3과 5의 공배수일 때는fizzbuzz가 출력되는 코드를 작성해보세요. - 전역 scope를 사용했을 때 장단점에 관해 설명해주세요.
- 때때로
loadevent를 사용하는 이유에 관해 설명해주세요. 또 단점이 있다면 대안에 대해서도 설명해주세요.
- SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.
서버사이드 렌더링
- Promise를 사용해 본 경험이 있나요?
- Promise가 콜백 대비 장/단점은 무엇인지 설명해주세요.
- JavaScript의 작동방식의 장단점에 관해 설명해주세요.
- JavaScript를 디버깅할 때 사용하는 도구가 있으면 설명해주세요.
vsCode 에디터, googleChrome 개발자 도구
- 객체 안의 속성과 배열의 아이템을 순회할 때 사용하는 문법에 관해 설명해주세요.
- mutable object와 immutable object에 관해 설명해주세요.
- JavaScript에서 immutable 객체의 예를 들어보세요.
- immutability의 장/단점은 무엇인가요?
- 자신의 코드에서 불변성(immutability를) 어떻게 달성할 수 있나요?
- 동기방식과 비동기 방식 함수의 차이에 관해서 설명해주세요.
- event loop이란 무엇인가요?
- call stack과 task queue에 관해 설명해주세요.
let,var,const의 차이점에 관해서 설명해주세요.
'JavaScript' 카테고리의 다른 글
| [React] React의 LifeCycle 정리 (0) | 2020.02.22 |
|---|---|
| 함수와 프로토타입 체이닝 (2) (0) | 2020.02.21 |
| 함수와 프로토타입 체이닝 (1) (0) | 2020.02.19 |
| [You Don`t Know JS] Chapter 1. 타입, Chapter 2. 값 정리 (0) | 2020.02.13 |
| http 두꺼운 책 읽는법 (0) | 2018.06.10 |