하루 하나씩 작성하는 TIL #60
1. 변수를 선언할 때 쓰는 var, let, const의 차이에 대해 알려주세요.
🟠 의도: 자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인하는 질문.
🟠 모범 답안 :
var의 경우에는 함수 스코프를 가지며, 초기화 전에 접근하면 호이스팅 덕분에 undefined를 반환합니다. es6에서 추가된 const와 let의 경우에는 블록 스코프를 가지며 호이스팅은 일어나지만 초기화 전에 접근 시 오류가 발생합니다.
이 중 const와 let은 초기화 이후 재할당이 가능하냐의 의미에서 다시 갈라집니다.
const는 상수라는 뜻의 constant의 약자로 초기화 이후 재할당이 불가능합니다. 따라서 코드의 예측 가능성을 높여주는 장점이 있다고 할 수 있습니다.
현재에는 블록 스코프를 가졌다는 점과 유지 보수가 용이하다는 점 때문에 const/let만을 사용하는 편입니다.
🟠 한 줄 요약 : var : 초기화 전에 접근 시 undefined반환. const와 let은 es6에서 추가되었으며 const는 초기화 이후 재할당이 불가능. let은 재할당 가능
2. 쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해서 설명해주세요.
🟠의도: 성능 최적화 및 각 개념을 어디에 적용하면 좋을지 확인하는 질문.
🟠 팁: 마지막에 정리하는 말을 넣어주셔도 좋습니다. 사용한 경험에 대해서도 언급하면 좋습니다.
🟠 모범 답안 :
두 개념 모두 특정 함수의 실행 빈도를 조절하는 기술이지만 서로의 차이점 때문에 사용처가 다릅니다.
먼저 쓰로틀링의 경우에는 일정 간격마다 함수를 실행하도록 횟수를 제한하는 기술입니다. 예를 들어 스크롤 이벤트처럼 순식간에 여러 번 실행되는 이벤트는 성능 저하를 일으키기 쉬운데요. 여기에 쓰로틀링을 적용해주면 스크롤할 때마다가 아닌 설정한 간격마다 함수를 실행하기에 불필요한 호출을 줄여 성능을 향상시킬 수 있습니다.
그리고 디바운싱은 연속된 함수의 호출이 들어올 경우 무시하고 있다가 제일 마지막에 호출된 함수만을 실행하도록 하는 기술입니다. 대표적인 사용처는 검색어 자동 완성입니다. 유저의 인풋 중간 결과는 중요하지 않기에 전부 스킵해버리고, 마지막 결과 값에 대해서만 자동 완성 결과를 보여주면 불필요한 검색 요청을 줄여 성능을 향상시킬 수 있습니다.
다시 말해 지속된 이벤트의 호출에서 중간 호출도 중요하면 쓰로틀링을, 마지막 호출만이 중요하면 디바운싱을 사용하는 것이 좋습니다.
🟠 한 줄 요약 : 쓰로틀링 : 일정 간격마다 함수를 실행하도록 제한. 스크롤 이벤트와 같은 순식간에 여러번 반복하는 이벤트에 사용시 불필요한 호출을 줄여 성능을 향상. // 디바운싱 : 제일 마지막에 호출된 함수만을 실행. 검색어 자동 완성같은 경우에 완성 결과만 보여줄시 불필요한 검색 요청을 줄여 성능 향상.
3. 자바스크립트의 호이스팅에 대해 설명해주세요.
🟠 의도: 호이스팅에 대해 이해하고 있고, 어떤 오류가 호이스팅 때문인가 구분할 수 있는지 확인하는 질문.
🟠 모범 답안 :
호이스팅의 영어 뜻은 바로 끌어올리다입니다. 그렇기에 자바스크립트의 호이스팅도 끌어올린다는 의미인데요.
바로 코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것을 뜻합니다. 원래 C언어 같은 프로그래밍 언어를 사용했을 때는 변수나 함수가 무조건 상단에 선언이 되어 있어야 했습니다. 그래야 아래 줄에서 참조가 가능하니깐요. 하지만 자바스크립트는 실제로 선언된 위치와 상관 없이 최상단으로 선언부가 끌어올려지기에 선언 위치 앞에서도 호출이 가능해집니다.
다만 이게 함수, var, const/let의 경우에 따라 달라지는데요. 함수의 경우에는 어디서든 호출이 가능하고 제대로 작동도 합니다. 하지만 var의 경우에는 선언 전에 호출한다면 undefined를 반환하게 됩니다.
그러나 이게 오히려 오류를 안 내서 불편한 나머지 const/let은 선언 전에 호출하면 에러를 내보내게 되었습니다. 물론 에러는 내보내지만 호이스팅이 되지 않은 건 아니란 점에 주의해야 합니다.
🟠 한 줄 요약 : 코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것. js는 실제로 선언된 위치와 상관없이 최상단으로 선언부가 끌어올려지기 전에 선언 위치 앞에서도 호출 가능. 하지만 var의 경우 선언 전에 호출된다면 undefined 반환. const와 let은 선언 전에 호출하면 에러가 나지만 호이스팅이 안된건 아님.
4. 이벤트 버블링과 캡처링에 대해 설명해주세요.
🟠 의도: 버블링과 캡처링으로 이벤트를 제어할 수 있는지 확인하는 질문
🟠 팁: 이름에서 오는 뜻을 활용하세요.
🟠 모범 답안 :
이벤트 버블링과 캡처링은 모두 이벤트가 전파되는 방식을 뜻합니다. 다만 서로 그 방향이 다를 뿐입니다.
버블링부터 말씀드리자면, 버블링은 거품이지 않습니까? 마치 거품이 수면으로 떠올라가듯이 이벤트가 전파되는 겁니다. 그래서 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 버블링이라고 합니다.
반대로 캡처링은 포착한다고 생각하시면 됩니다. 마치 카메라가 내가 보는 시야의 일부분을 포착해서 담듯이 이벤트가 전파되는 겁니다. 그래서 이번엔 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 캡처링이라고 합니다. 이러한 특성을 잘 활용한다면 이벤트 위임을 구현할 수 있습니다.
🟠 한 줄 요약 : 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 것. 캡쳐링은 상위 요소에서 하위요소로 이벤트가 전파되는 것.
5. 이벤트 위임에 대해 설명해주세요.
🟠 의도: 이벤트 버블링과 캡처링에 대해 잘 이해하고 있는지 재확인 및 위임을 이용해 최적화를 할 수 있는지 확인하기 위한 질문
🟠 팁: 최적화 얘기를 하면 좋습니다.
🟠 모범 답안 :
이벤트 위임은 하위 요소의 이벤트를 상위 요소로 위임하는 걸 뜻합니다. 하위 요소가 많을 경우, 이러한 모든 요소들에 이벤트를 등록하고 관리하는 건 힘든 일이 될 수 있습니다. 그래서 버블링과 캡처링을 활용해 상위 요소에 이벤트를 위임하고, 이벤트 함수 내에서 하위 요소를 판단하여 이벤트를 처리하면 성능을 최적화할 수 있는 장점을 가진 게 바로 이벤트 위임입니다.
🟠 한 줄 요약 : 하위 요소의 이벤트를 상위 요소로 위임하는 것. 버블링과 캡쳐링을 활용하여 이벤트를 처리하면 성능을 최적화 할 수 있음.
6. 자바스크립트의 this가 어떤 값을 가지는지 각 상황을 가정하여 설명해주세요.
🟠 의도: 각 상황에 따라 this의 변화를 이해하고 있는지 확인하기 위한 질문
🟠 팁: 암기 질문과 다름 없습니다. 외워오세요.
🟠 모범 답안 :
this 는 호출되는 상황마다 서로 다른 값을 참조하고 있어 혼동하기 쉬운 값입니다. 우선 일반 함수를 호출할 때는 전역 객체인 window를 뜻합니다.
그리고 객체의 메서드를 호출할 때에는 해당 객체를 의미합니다. 이어서 콜백 함수는 전달하는 곳은 상관이 없고, 함수가 실제로 호출되는 상황에 따라 달라집니다. 만약 호출하는 상황이 일반 함수라면 전역 객체를 가리키겠죠?
마지막으로 화살표 함수는 생성된 함수의 스코프에 따라 달라집니다. 예를 들어 객체의 메서드에서 화살표 함수를 만들어서 this를 호출했다면 생성된 함수의 스코프는 객체 스코프이므로 여기서 this는 객체를 뜻하게 됩니다. 이러한 this의 특징 때문에 call, apply, bind 같은 걸로 this를 고정시켜주기도 하지만, 저는 저포함 동료 분들의 혼선을 피하기 위해 this의 사용을 좀 지양하는 편입니다.
🟠 한 줄 요약 : 객체의 메서드에서 화살표 함수를 만들어서 this를 호출했다면 생성된 함수의 스코프는 객체 스코프이므로 여기서 this는 객체를 뜻하게 됩니다. 이러한 this의 특징 때문에 call, apply, bind 같은 걸로 this를 고정시켜주기도 하지만, 저는 저포함 동료 분들의 혼선을 피하기 위해 this의 사용을 좀 지양하는 편.
7. 자바스크립트의 프로토타입의 역할을 설명해주세요.
🟠 의도: ES6 이전에 많이 쓰이던 프로토타입에 대해서도 인지하고 있는지 확인하는 질문.
🟠 팁: 설마 이런 거까지 알겠어? 하고 꺼내는 질문입니다. 제대로 답변해서 놀라게 해줍시다.
🟠 모범 답안 :
자바스크립트의 프로토타입은 객체가 가진 기본 속성과 메서드를 정의하는 객체입니다. 프로토타입에 정의된 이러한 속성과 메서드가 각 타입을 타입답게 만들게 됩니다. 예를 들어 숫자에 toString()메서드가 있는 것처럼 말입니다. 옛날에 클래스가 나오기 전에는 이 프로토타입을 통해 직접 메서드를 만들어주고는 했습니다.
🟠 한 줄 요약 : 객체가 가진 기본 속성과 메서드를 정의하는 객체. 로토타입에 정의된 이러한 속성과 메서드가 각 타입을 타입답게 만들게 됩니다.
8. 자바스크립트의 객체는 참조에 의해 복사됩니다. 이로 인해 생길 수 있는 오류와, 해당 오류를 피하는 방법을 설명해주세요.
🟠 의도: 참조에 의한 접근과 값에 의한 접근을 구분할 수 있는지 확인하는 질문입니다.
🟠 팁: 객체를 참조가 아닌 값으로서 복사하는 방법도 소개하면 좋습니다.
🟠 모범 답안 :
네, 여기서 참조에 의한 복사가 일어나는 이유는 값 자체를 복사해 주는 게 아니라 값이 들어있는 메모리 주소를 복사해서 주기 때문입니다. 그렇기에 객체를 복사하게 되면 서로 같은 메모리 주소를 가리키게 되어 한쪽이 값을 바꾸면 다른 쪽이 보여주는 값도 바뀌게 되는 겁니다. 이러한 특징 때문에 여러 오류가 생기곤 합니다. 그래서 깊은 복사를 통해 객체 또한 값으로서 복사하도록 하는 방법들이 있는데 대표적으로는 JSON.stringify()를 통해 객체를 문자열로 바꾸어서 복사하는 방법이 있고, 비교적 최근에 나온 structuredClone()을 사용하는 방법이 있습니다. 개인적으로는 후자가 더 짧고 쉽기 때문에 더 애용하는 편입니다.
🟠 한 줄 요약 : 값 자체를 복사해 주는 게 아니라 값이 들어있는 메모리 주소를 복사해서 주기 때문에 객체를 복사하게 되면 서로 같은 메모리 주소를 가리키게 되어 한쪽이 값을 바꾸면 다른 쪽이 보여주는 값도 바뀌게 되는 겁니다. 이러한 특징 때문에 여러 오류가 생기곤 합니다.
