Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain how prototypal inheritance works. A. 자바스크립트는 자바와 같은 일반적인 객체지향(이하 OOP) 언어들과는 다르게 "프로토타입 기반 언어"입니다. 따라서 클래스라는 개념이 없고(ES6에서 클래스를 도입하긴 했지만, 엄밀히 따지면 자바의 클래스 개념과는 많이 다른, 그저 Syntax Sugar에 지나지 않음), 이를 프로토타입을 통해 해결하려 합니다. OOP에서 상속이라는 개념은 부모 클래스의 속성(property)들을 자식 클래스에서 재선언할 필요 없이(오버라이드를 통해 재정의하는 것을 제외하고) 그대로 사용하는 것을 의미합니다. 앞서 언급했듯, ..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What's the difference between an "attribute" and a "property"? A. Attribute와 Property는 둘 다 "속성"을 의미하나, 정의되는 곳에서 차이점이 생깁니다. Attribute는 HTML에서 정의되는 속성이고, Property는 DOM에서 정의되는 속성입니다. Attribute Attribute는 HTML태그에HTML 태그에 추가적인 정보를 제공합니다. 다음의 예시처럼 HTML 태그에 class, id, type 등의 추가적인 정보를 제공하는 경우가 있는데, 이때 이 name="value" 형식의 정보를 가리켜서 'name'이라는..

스코프는 자바스크립트 이외에도 대부분의 프로그래밍 언어들이 가지고 있는 것으로, 변수나 함수가 선언되어 사용할 수 있는 유효 범위에 대해 정의합니다. 이번 포스팅에서는 자바스크립트에서의 함수 스코프(function scope)와, ES6 표준에서 새롭게 추가된 let, const 키워드가 제공하는 블록 스코프(block scope)에 대해서 살펴보려고 합니다. 함수 스코프 (+ 전역 스코프) 자바스크립트는 기본적으로 전역 스코프(Global Scope)와 함수 스코프(Function Scope)를 가집니다. 앞서 언급한 것처럼 스코프는 변수나 함수가 선언되어 사용할 수 있는 유효 범위를 정의하기 때문에 전역 스코프인지, 함수 스코프인지에 따라서 변수가 사용될 수 있는 범위가 달라집니다. 아래의 예시를 보..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What is a closure, and how/why would you use one? + What is Lexical Scoping? A. 클로저란, 함수와 함수가 선언된 정적 환경의 조합을 의미합니다. 이를 제대로 설명하기 위해서는 렉시컬 스코프(Lexical Scope)에 대해 먼저 설명해야 합니다. 자바스크립트에서는 코드의 위치가 정해지는 순간, 그 코드 안에 포함된 변수의 유효 범위(Scope)가 정해지는 정적인 특성을 가지고 있습니다. 이것을 정적 유효 범위, 혹은 렉시컬 스코프(Lexical Scope)라고 말합니다. 간단히 말하자면 함수안에서 정의된 변수는 함수 밖으로 빠져..

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..