[ 모던 자바스크립트 스터디 ] 자바스크립트 개요, 변수 호이스팅

해당 포스팅은 모던 자바스크립트 딥 다이브 책을 읽으며 기록하는 포스팅입니다.

제 식대로 조금 편안하게 해석하여 기록합니다.

 

 

---

 

 

자바스크립트 특징

 

다른 프로그래밍 언어와 마찬가지로 기존에 존재하는 많은 프로그래밍 언어에서 영향을 받았다.

기본적인 문법은 C와 JAVA를 마킹했고, self 는 프로토타입 기반 상속, scheme 은 일급 함수의 개념을 차용했다.

 

또한 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

파이썬과 마찬가지인 것이다.

 

물론, 자바스크립트에서 파생된 타입스크립트 등의 언어는 해당 언어를 자바스크립트로 변환해주는 일종의 컴파일 작업을 거친다.

그렇지만 자바스크립트 자체는 컴파일 작업을 하지 않음을 기억하고 있어야한다.

 

이건 이론적으로 알고 있는 내용이지만,

대부분의 모던 브라우저에서 사용되는 인터프리터는 명시적인 컴파일 단계를 거치진 않지만

여러 과정을 거쳐 일부 소스를 컴파일하여 실행한다.

 

이를 이용해서 인터프리터 언어의 장점이라고도 할 수 있는 동적 기능 지원을 강화하고, 실행 속도를 높여

현재는 컴파일러와 인터프리터의 기술적 구분이 모호해지고 있다고 한다.

 

 

내가 자바스크립트와 파이썬을 공부하면서 궁금했던건, 그래서 어떤 패러다임을 갖고있는 언어인데?

하는 생각이었다.

 

이것도 되고, 저것도 되는 것 같아 상당히 복잡했는데, 모던 자바스크립트 딥다이브 책에서 정리해준다.

 

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

자, 여기서 객체 지향 앞에 프로토타입 기반이라는 말이 나왔다.

자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체 지향 언어이다.

 

 

변수 선언

 

자바스크립트의 변수 선언 키워드는 var, let, const 이다.

ES6 에서 let과 const 가 생기기 전에는 자바스크립트는 var 를 유일한 변수 선언 키워드로 사용했었다.

그래서 옛날 코드들 보면 var 파티다.... ㅎㅎ..

 

var 키워드는 블록 레벨 스코프가 아닌 함수 레벨 스코프를 지원하는데, 이것때문에 전역변수가 선언이 되는 문제가 발생한다.

나도 이걸 보면서 자바스크립트가 굉장히 어렵다고 생각했었던 것 같다.

 

우선 현재는 기본 틀을 정립하는 단계라서 간단하게 핵심만 말하자면, 현재 ES6 이상의 모던 자바스크립트 세계에서

var 는 더이상 권장하지 않는다.

 

 

변수선언 - var

 

var a;

 

 

위의 코드는 a 라는 변수를 선언했다.

물론 값은 따로 내가 주지 않았다.

 

이 a 변수가 가지고 있는 메모리 공간은 비어있을까?

그건 아니다. 확보된 메모리 공간에는 자바스크립트 엔진이 임의로 undefined 로 초기화 시킨다.

 

결국 자바스크립트 엔진은 선언 단계, 초기화 단계 를 거쳐 변수를 선언한다고 얘기할 수 있다.

 

 

변수 선언 - var 호이스팅

 

console.log(a);

var a;

 

 

위 코드는 변수 선언보다 변수 참조가 윗 줄에 적혀있다.

무의식적으로 자바스크립트는 인터프리터 언어니까 한줄씩 순차 실행 -> 어 그럼 참조 에러 발생하겠네?

라고 생각하기 쉬운데, 실제 실행하게 되면 undefined 가 출력된다.

 

이와 같은 일이 발생하는 이유는 변수 선언이 소스코드가 순차적으로 실행되는 시점인 런타임이 아니라 이 전에 수행되기 때문이다.

직접적으로 코드를 실행하는 런타임이 아니라 소스코드를 평과하는 과정을 거치면서

실행 준비를 하는데, 이때 모든 선언을 소스코드에서 찾아서 먼저 실행한다.

 

이를 알게 되면 위의 코드가 왜 undefined 를 뱉는지 알 수 있다.

아까 var 의 단점 중 하나인 전역변수 얘기도 일맥상통한다.

이미 선언이 되어있으니까, 어디에서도 참조하여 사용이 가능해져버리는 것이다.

 

 

이처럼 선언문이 코드의 맨 위로 올라와서 동작하는 특징을 변수 호이스팅이라고 한다.

이는 변수 뿐만 아니라 var, let, const, function, function*, class 등의 키워드를 사용해 선언하는 모든 식별자에 해당하는 얘기다.

 

 

식별자 네이밍 규칙

 

언제나 생각하는건데, 이름 짓는건 참 힘들다.

 

식별자는 아래와 같은 네이밍 규칙을 준수해야한다.

 

- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.

- 단, 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야한다.

 

파이썬에서 자바스크립트로 넘어오니까 변수나 함수에 - 를 못써서 당황했다.

무엇이든 정확히 알고 있는건 중요한 거구나 다시한번 느꼈다.

 

 

네이밍 컨벤션 관련해서도 덧붙이자면,

변수나 함수의 이름은 카멜케이스를, 생성자 함수, 클래스의 이름에는 파스칼케이스를 이용한다.