공부하자

호이스팅 호이스팅은 코드가 실행되기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것을 말한다. 변수 호이스팅 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않은 것처럼 동작한다. var 키워드로 선언한 변수는 선언문 이전에 참조를 하면 undefined가 뜨지만, let 키워드로 선언한 변수는 선언문 이전에 참조를 하면 ReferenceError가 뜬다. 마치 호이스팅이 발생하지 않은 것처럼 동작한다. 하지만 그렇지않다. 이를 설명하기 위해 간단히 변수가 생성되는 3단계를 보자. 선언 단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 초기화..

25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체 지향 프로그래밍 언어다. 하지만 기존 클래스 기반 언어에 익숙한 프로그래머들에게는 프로토타입 기반 방식에 혼란을 느끼고 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. 그래서 ES6부터 클래스가 도입되었는데, 기존의 프로토타입 기반 객체지향 모델을 없애고 클래스 기반 객체지향을 제공하는게 아니라 클래스 기반 객체 지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수..

this란? 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 단위구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수 호출 방식에 따..

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 스칼라 등)에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared. (클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.) 클로저를 자세히 알아보기 전 위 정의에서 가장 먼저 이해해야 할 핵심 키워드인 "함수가 선언된 렉시컬 환경"에 대해서 먼저 알아보자. const x = 1; function outerFunc() { const x = 10; functi..

계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 이벤트가 전파되는데 전파방향에 따라 버블링과 캡처링으로 구분할 수 있다. 주의할 것은 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다는 것이다. 를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계). 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다. 이벤트 버블링 자식요소에서 발생한 이벤트가 부모 요소까지 전파하는 것. FORM DIV P 위의 코드를 실행하게 되면 만약 p를 누르면 p -> div -> form 순서대로 alert이 뜨게된다. di..

실행 컨텍스트와 렉시컬 환경, 클로저는 자바스크립트에서 워낙 중요한 개념들이고 다 연관이 있어서 면접 준비를 하면서 한번에 정리를 해보았습니다. 제가 이해하기 쉽게 큰 개념정도만 간략하게 정리한거라 혹시 틀린것이 있으면 댓글로 알려주세요!!😊 모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록된다. 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.(런타임) 이때 소스코드 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득..

23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입이 소스코드는 실행 컨텍스트를 생성한다. 전역 코드(global code) : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function code) : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함되지 않는다. eval 코드(eval code) : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드. 모듈 코드(module code) : 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에..

22.1 this 키워드 객체는 상태(statement)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가..