Hoisting

🔗 참고

1. Velog: BTS of JavaScript
2. Velog: BTS - Classes & OOP
3. 모던 자바스크립트 Deep Dive
4. Medium : 자바스크립트는 왜 프로토타입을 사용했을까

📌 프로토타입

우선 자바스크립트는 프로토타입 기반의 언어이다. 생성자 함수를 이용해 객체를 구축하고 무언가를 프로토타입에 설정할 때 이는 생성자 함수에 기초하여 구축된 객체에 프로토타입으로 할당된다.

객체지향 프로그래밍

객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 행동을 하나의 논리적인 단위로 묶어서 생각한다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 이때 객체의 상태 데이터를 프로퍼티(property), 동작을 메서드(method)라 부른다. - 모던 자바스크립트 Deep Dive 261pg

이해를 위해서 조금 더 철학적인 내용(클래스 기반과 프로토타입의 미묘한 차이?)을 보고싶다면 위의 Medium 블로그 링크를 클릭하면 됩니다!

해당 블로그의 내용을 나름 이해한 대로 정리하자면 다음과 같다.

1. 클래스 기반은 확실히 분류가 되어있는 가장 최상의 부모 클래스가 존재하고 이를 extends하여 사용하는 방식을 차용한다.
2. 프로토타입은 '분류'와 같은 딱 떨어지는 개념이 아니라 조금 더 유연한 형태를 띄는 것으로 생각되고 기본 뼈대에서 약간의 범주의 차이가 존재한다고 보인다.

📌 Hoisting

자바스크립트 Deep Dive 42pg

console.log(score); // undefined
var score;

위의 코드는 변수 선언보다 변수를 참조(호출)하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다. 따라서 console.log(score)전에는 아직 score 변수가 선언되지 않았다. 그러므로 참조 에러(Reference Error)가 발생할 것으로 보이나 참조 에러가 발생하지 않고 undefined가 출력된다.

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 undefined로 결과가 출력된다.

즉 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거쳐 소스코드를 실행하기 위한 준비를 한다. 이 과정에서 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다. 이 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

→ 이처럼 어떠한 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 한다.

호이스팅이 되는 식별자에는 변수, 함수, 클래스 등이 있다. 즉, 모든 선언문은 런타임 이전 단계에서 먼저 실행된다고 생각하면 된다.

정리
자바스크립트는 순차적으로 코드를 실행하게 되는데, 이때 자바스크립트는 코드의 실행 전에 코드 평가과정을 거치게 된다. 이 과정에서 식별자(변수, 함수, 클래스 등)들을 탐색하게 되고 이들을 먼저 실행하게 되어 선언 과정을 거친다.
코드의 평가 과정을 마치게 되면 그제서야 자바스크립트는 모든 선언문들을 제외한 소스코드를 순차적으로 실행하게 된다.
이러한 특징이 마치 선언문이 끌어올려진 것처럼 수행된다 하여 호이스팅(Hoisting)이라고 명명되게 되었다.