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

 

웹을 구성하는 언어는 3가지가 있다.

1. HTML - 웹의 내용 작성

2. CSS - 웹의 디자인

3. JavaScript - 웹의 동작

 

웹의 동작이란 예를 들어 

1. HTML 의 내용 변경.

2. HTML의 속성 변경.

3. HTML의 속성 변경.

같은 것들을 의미한다.

 

자바스크립트는 객체(Object) 기반의 스크립트(=인터프리터) 언어이다.

 

스크립트 언어란 소스 코드를 컴파일 하지 않고도 실행할 수 있는 프로그래밍 언어란 뜻이다.

C언어, 자바 같은 경우 작성한 소스코드를 컴파일러를 통해 사람이 작성한 코드를 기계어로 코드로 변경해야 실행 파일이 생성된는것에 비해 자바스크립트의 경우는 별도의 컴파일 없이 내장된 번역기에 의해 번역되므로 바로 실행이 가능하다.

 

자바스크립의 변수

- 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 의미한다.

- 값의 위치를 가리키틑 상징적인 이름이다.

 

변수를 사용하기 위해서는 반드시 선언이 필요하다. 자바스크립트에서 변수를 선언할 때는 var, let, const 키워드를 사용한다.

// 변수는 하나의 값을 저장하기 위한 수단이다.
var userName = 'KDH';  	// -> userName 에 'KDH' 라는 값을 저장한다.
var userAge = 29;	// -> userAge 에 29 라는 값을 저장한다.

변수의 선언과 값의 할당에 대해 더 알아보자

var score;

위 처럼 score 변수를 선언했다. 이때 score에 아무 값도 할당하지 않았다면 확보된 score가 가리키는 메모리 주소에는 자바스크립트의 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다. 즉 선언과 초기화 단계가 동시에 진행되는 것이다.

이처럼 초기화를 진행하는 이유는 만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다. 이러한 값을 쓰레기값이라 하는데, 메모리 공간을 확보한 다음, 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다.

 

만약 변수를 선언하지 않으면 어떻게 될까?

console.log(userHeight);
// 선언한적이 없는 변수를 console.log()에 사용하였다.

 

위 처럼 선언한적 없는 변수에 접근하면 ReferenceError(참조 에러)가 발생한다. 식별자(=변수)를 통해 값을 참조하려 했지만 등록된 식별자를 찾을 수 없기때문이다.

 

다른 예제를 확인해보자

console.log(userHeight);

var userHeight; // 변수 선언

위 처럼 변수를 선언하기 전에 먼저 참조를 했을 경우 어떻게 될까?

 

자바스크립트의 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(userHeight)가 실행되었을 시점에 선언된 변수가 없기때문에 참조에러가 발생할것 같다. 

 

하지만 참조 에러가 발생하지 않고 undefined가 출력된다.

 

그 이유는
변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점 = 런타임(RunTime)이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

 

그렇기 때문에 자바스크릅트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 즉 변수 선언이 소스코드 어디에 위치하는지와 상관없이 어디에서든지 변수를 참조할 수 있다.

 

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

 

 

그렇다면 값의 할당은 언제 이루어질까?

var userHeight = 180; // 변수의 선언과 값의 할당

위의 예제는 마치 변수의 선언과 동시에 180이라는 값이 할당된 것처럼 보인다.

하지만 실제로 변수 선언과 값의 할당의 실행 시점은 다르다. 

 

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임 시점에 할당된다.

 

즉  런타임 이전에 userHeight 변수가 선언되면서 undefined 값이 할당된 후 런타임 시점에 180이라는 값이 재할당 된다.

여기서 재할당이라고해서 undefined가 있던 주소값의 undefined를 지우고 180을 할당하는 것이 아니라 새로운 메모리 공간을 확보하여 그곳에 180 값을 할당한다.

 

초기에 할당한 값을 계속해서 사용하고 싶다면 const 키워드를 사용하면 된다.

const userName = 'Kim';

const 키워드로 선언한 변수를 변경하면 Assignment 에러가 발생한다.

 

const userName = 'Kim';

userName = 'Park';

<Uncaught TypeError: Assignment to constant variable.>

 

var score;
score = 80;
score = 90;

값의 재할당

이렇게 되면 위에서 선언되었던 undefined 와 80의 값은 더이상 사용하지 않게된다. 어떠한 변수=식별자와 연결되어 있지 않은 것이다.

이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동으로 해제된다. 단, 메모리에서 언제 해제될지는 예측할 수 없다.

 

*값이 없을 때 null 병합 할당 연산자

var config = {min:10};

if(config.min === undefined || config.min === null) {
	config.min = 20;
}

if(config.max === undefined || config.max === null) {
	config.max = 100;
}

config;

// Null 병합 할당 연산자
var config2 = {min:10};
config2.min ??= 20;
config2.max ??= 100;
config2;