기술면접
- prototype 기반 상속은 어떻게 하는지 설명해주세요
- Null과 undefined의 차이점을 설명해 주세요
- event loop를 설명해 주세요
- forEach와 map 차이점과 어떤 메소드를 사용해야 하는가?
- 이벤트 버블링, 이벤트 캡처링
prototype 기반 상속은 어떻게 하는지 설명해주세요
자바스크립트 객체에는 Prototype이라는 내부 프로퍼티가 있고, 이는 다른 객체를 참조할 때 사용합니다. 자바스크립트에서 상속을 진행할 때는 프로토타입끼리 연결을 하는데, 부모 프로토타입을 create()나 setPropertyOf() 메서드를 사용하여 자식 프로토타입과 연결합니다.
Null과 undefined의 차이점을 설명해 주세요
두 타입 모두 값이 없음을 의미합니다. 둘 다 데이터 타입이자 그 변수의 값 이며. 자바스크립트에서 변수를 선언하면 초기값으로 undefined를 할당하게 됩니다. null은 값이 비어있음을 나타내며 값이 없다는 값이 등록되어 있는 것입니다.
event loop를 설명해 주세요
자바스크립트 엔진이 Call Stack과 Callback Queue의 상태를 체크하여 Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣는것을 말합니다.
forEach와 map 차이점과 어떤 메소드를 사용해야 하는가?
Array.prototype.forEach
- 배열의 요소를 순환합니다.
- 각각의 요소를 파라미터로 전달받는 콜백 함수가 실행 됩니다.
- 값을 리턴하지 않습니다.
Array.prototype.map
- 배열의 요소를 순환합니다.
- 새로운 배열을 리턴합니다.
- 각각의 요소마다 콜백 함수를 실행 시키며 콜백의 리턴값을 새로운 배열로 매핑(mapping)합니다.
차이점
- 두 메소드 모두 원본 배열의 값을 바꾸지 않으며 차이점은 forEach는 값을 리턴하지 않고 map은 값을 리턴합니다.
- 결과가 필요하다면 map 아니라면 forEach를 사용하면 됩니다.
이벤트 버블링, 이벤트 캡처링
이벤트 버블링
- 한 요소에 이벤트가 발생 하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러 즉, 최상단의 부모요소를 만날 때 까지 반복 되면서 핸들러가 동작하는 현상을 말합니다.
이벤트 캡처링
- 버블링과는 반대로 해당 태그를 찾아 내려간다.
- addEventListner의 옵션 객체에
{capture : true}를 설정해주면 캡처링을 구현 할 수 있습니다.