Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain the differences on the usage of foo between function foo() {} and var foo = function() {} A. 자바스크립트에서 함수는 객체로 간주됩니다. (정확히 말하면 일급 객체 first class) 따라서 일반 객체처럼 값으로 취급될 수 있으며 다음과 같이 변수의 값으로 할당될 수 있습니다. var foo = function(){} 함수를 위와 같이 선언하는 방식을 함수 표현식(Function Expressions)라고 합니다. 그 외에도 자바스크립트에서는 다른 일반적인 프로그래밍 언어들과 같이 함수를 선언할 수 있..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What's the difference between a variable that is: null, undefined or undeclared? A. javascript에는 truthy와 falsy라는 개념이 있습니다. Boolean Context에서 false가 아니더라도 false로 인정되는 값들을 의미하는데 javascript에서 falsy로 인정되는 값은 다음과 같습니다. false, 0, -0, 0n (Bigint), "", null, undefined, NaN 조건문에 넣으면 False로 간주되는 성질때문에 null과 undefined는 종종 비슷한 것으로 해석될 수 있습니다. ..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain "Hoisting" A. 호이스팅을 간단하게 정의하자면, 자바스크립트가 코드를 컴파일하는 과정에서 코드 내의 선언문들을 찾아서 해당 선언문들이 속한 스코프의 최상단으로 스코프를 끌어올리는 것을 의미합니다. (값을 할당하는 것이 아닌 선언만 끌어올림.) 호이스팅이 제대로 동작하기 때문에 다음과 같은 코드가 오류를 발생시키지 않고 동작합니다. console.log(hoist); // undefined var hoist = 'hello'; console.log(hoist); // hello 위의 예제는 다음과 같이 컴파일되기 때문에 오류를 일으키지 않고 실행될 수 있습니다. var..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other? A. 자바스크립트의 Array는 기본적으로 forEach와 map 등의 메서드를 프로토타입을 통해 제공합니다. 둘 다 Array안에 있는 Element들을 순회한다는 특징을 가지고 있지만, 둘은 결과물을 리턴하는 방식에서 차이를 보입니다. Array.prototype.map const arr = [1, 2, 3, 4, 5]; const mapAr..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain how 'this' works in JavaScript. A. 자바스크립트에서 사용되는 this는 확실히 자바와 같은 다른 OOP 언어들과는 다른 감이 있습니다. 일반적인 OOP 언어와는 다르게 자바스크립트의 this는 해당 this가 어떤 맥락(Context)에서 호출되었는지에 따라 바인딩되는 대상이 다릅니다. 그리고 이것은 자바스크립트 인터프리터가 자바스크립트 코드를 실행시키면서 만드는 실행 컨텍스트(Execution Context)와 밀접한 관련이 있습니다. 자바스크립트의 실행컨텍스트는 특정한 함수가 호출될 때 해당 함수가 실행되는 환경을 객체 형태로 저장합니다. 이때 ..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain event delegation (Pattern) A. 이벤트 델리게이션을 언급하기 위해서는 먼저 간단하게 자바스크립트의 이벤트 전파 방식에 대해서 언급해야 합니다. 예를 들어 다음과 같이 이 2개 계층의 부모를 가진 자식 div를 클릭하는 클릭 이벤트가 발생했다고 가정하겠습니다. "me"를 클릭하면 전역 객체인 Window객체부터 Document, html, body 순으로 내려가는 이벤트 캡쳐링 현상을 거쳐 대상 객체 (target)에 도달하게 됩니다. 이후 다시 이벤트 버블링 현상을 거쳐서 다시 전역 객체인 Window로 전파되게 됩니다. 이벤트 델리게이션은 바로 이 이벤..