Study/JavaScript

모던 자바스크립트 Deep Dive - 4장 변수

ujam 2023. 5. 11. 21:46
728x90
반응형

 

📌 목차

- 변수란?
- 식별자란?

- 변수 선언
- 변수 호이스팅
- 값의 재할당
- 네이밍 규칙

 

 

 


 

 💡 변수란

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

변수 이름을 식별자라고 칭하기도 합니다

 


 

💡 식별자란

어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라 부른다.

식별자 안에 포함되는 것들은 변수, 함수, 클래스 등이 존재한다.

자바스크립트에서는 함수도 값이다

 


 

💡 변수 선언

값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있게 준비하는 과정을 의미한다.

var, let, const 키워드를 사용해 선언하여 변수를 사용한다.

 

  • 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

자바스크립트 엔진은 변수 선언을 위 단계를 거쳐 수행한다.

 

var 키워드를 사용하여 변수 선언을 하게되면 선언 단계와 초기화 단계가 동시에 진행된다.
var value로 예를 들면 선언 단계를 통해 변수 이름 value를 등록하고 초기화 단계를 통해 value 변수에 암묵적으로 undefined를 할당하여 초기화한다.

 


 

💡 변수 호이스팅

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

 

위 예시를 보면 console.log가 먼저 실행된 다음에 변수 선언이 일어나 참조 에러(ReferenceError)가 발생할 것처럼 보인다.

그러나 예상과는 달리 undefined를 출력한다.

 

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다.

 

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

 

  • 자바스크립트 엔진은 가장 먼저 소스코드를 평가하는 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
  • 이 과정에서 모든 선언문(변수, 함수 선언문 등)을 소스코드에서 찾아내어 먼저 실행한다.
  • 평가 과정이 끝나고 나면 모든 선언문을 제외한 나머지 소스코드를 한 줄씩 실행한다.
  • 선언이 소스코드 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
    이렇게 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 한다.
  • 변수가 선언되는 시점과 값이 할당되는 시점이 다르다.

 


 

💡 값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것을 재할당이라고 한다.

var value = 10; // 변수 선언과 값 할당
value = 20; // 값의 재할당
  • var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화된다. 엄밀히 말하면 변수에 처음으로 값을 할당하는 것도 사실은 재할당이라고 볼 수 있다.
  • var value = 20으로 재할당하고 나면 어떤 변수도 undefined와 10을 값으로 갖고 있지 않게 된다. 자바스크립트에 내장된 기능인 가비지 콜렉터(GC)로 메모리 공간을 주기적으로 검사하여 어떤 식별자도 참조하지 않는 메모리는 해제하여 메모리 누수를 방지한다.
  • 메모리 할당 및 해제를 위한 메모리 관리 기능이 내장된 언어를 매니지드 언어라고 한다. 반대인 언매니지드 언어의 예로는 C언어가 있다.

 


 

💡 네이밍 규칙

// 카멜 케이스(camelCase)
var helloWorld;

// 스네이크 케이스(snake_case)
var hello_world;

// 파스칼 케이스(PascalCase)
var HellowWorld;

자바스크립트에서는 일반적으로 변수함수명에는 카멜 케이스 사용하고 생성자 함수, 클래스명에는 파스칼 케이스 사용한다.

 

 

 

 

 

728x90
반응형