📖 JS 기술면접 질문
1. 변수를 선언할 때 쓰는 var,let,const의 차이에 대해 알려주세요.
- 의도: 자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인
- 답안)
var의 경우에는 함수 스코프를 가지며, 초기화 전에 접근하면 호이스팅 덕분에undefined를 반환합니다. es6부터 추가된const, let의 경우에는 블록 스코프를 가지며 호이스팅은 일어나지만 초기화 전에 접근 시 오류가 발생합니다.이 중
const와let은 초기화 이후 재할당이 가능하냐로 갈립니다.const는 상수이므로 초기화 이후 재할당이 불가능하지만 코드의 예측 가능성을 높여주는 장점이 있다고 할 수 있습니다.
현재는 블록 스코프를 가졌다는 점, 유지 보수가 용이하다는 점 때문에const와 let을 사용하는 편입니다.
2. 쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해 설명해주세요
- 의도: 성능 최적화 및 각 개념을 어디에 적용하면 좋을지 확인
- 답안)
먼저 쓰로틀링의 경우, 일정 간격마다 함수를 실행하도록 횟수를 제한하는 기술입니다. 예를 들어 스크롤 이벤트처럼 순식간에 여러번 실행되는 이벤트는 성능 저하를 일으키기 쉬운데, 여기에 쓰로틀링을 적용해주면 설정한 간격마다 함수를 실행하기에 불필요한 호출을 줄여 성능을 향상시킬 수 있습니다.
디바운싱은 연속된 함수의 호출이 들어올 경우에 무시하고 있다가 제일 마지막에 호출된 함수만을 실행하도록 하는 기술입니다. 대표적인 사용처는 검색어 자동 완성입니다. 유저의 인풋 중간 결과는 전부 스킵하고, 마지막 결과 값에 대해서만 자동 완성 결과를 보여주면 불필요한 검색 요청을 줄여 성능을 향상시킬 수 있습니다.
다시 말해 지속된 이벤트의 호출에서 중간 호출도 필요하면 쓰로틀링, 마지막 호출이 중요하면 디바운싱을 사용하는 것이 좋습니다.
3. 자바스크립트의 호이스팅에 대해 설명해주세요
- 의도: 호이스팅에 대해 이해하고 있고, 어떤 오류가 호이스팅 때문인가 구분할 수 있는지 확인
- 답안)
코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것을 뜻합니다. 원래 C언어 같은 프로그래밍 언어를 사용했을 때는 아래 줄에서 참조가 가능하게끔 변수나 함수가 무조건 상단에 선언이 되어 있어야 했습니다. 하지만 자바스크립트는 실제로 선언된 위치와 상관없이 최상단으로 선언부가 끌어올려지기에 선언 위치 앞에서도 호출이 가능해집니다.
다만 이게 함수, var, const/let 의 경우에 따라 달라지는데, 함수의 경우에는 어디서든 호출이 가능하고 제대로 작동을 합니다. 하지만 var의 경우에는 선언 전에 호출한다면
undefined를 반환하게 됩니다. 그러나 이게 오히려 오류를 반환하지 않기에 불편한 나머지 const/let은 선언 전에 소출하면 에러를 내보내게 되었습니다. 에러는 내보내지면 호이스팅이 되지 않은 건 아니란 점에 주의해야 합니다.
4. 이벤트 버블링과 캡처링에 대해 설명해주세요.
- 의도: 버블링과 캡처링으로 이벤트를 제어할 수 있는지 확인
- 답안)
하위 요소에서 상위 요소로 이벤트가 전파되는 것을 버블링 이라고 합니다.
반대로 캡처링은 카메라가 내가 보는 시야의 일부분을 포착해서 담듯이 이벤트가 전파되는 것입니다. 그래서 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 캡처링이라고 합니다. 이러한 특성을 잘 활용한다면 이벤트 위임을 구현할 수 있습니다.
