자바스크립트(JavaScript) - 변수

자바스크립트(JavaScript) - 변수

 

 

---

 

변수

 

 

변수란?

 

기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 쓰임.

 

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

 

값의 위치를 가르키는 상징적인 이름.

 

 

예를 들어 1+2=3 이라는 연산을 통해 3이라는 숫자를 생성하였다.

 

이 생성된 3은 메모리의 임의의 위치에 저장되는데, 이 값을 다시 읽어들여 재사용할 수 있도록 값이 저장된 메모리 공간에 그 값을 상징하는 이름을 붙인 것을 변수 라고 한다.

 

 

 

* 할당 : 변수에 값을 저장하는 것.

 

* 참조 : 변수에 저장된 값을 읽어 들이는 것.

 

 

 

---

식별자란?

 

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

 

값이 아니라 메모리 주소를 기억하고 있으며, 식별자가 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근을 할 수 있다는 의미이다.

 

즉, 식별자는 메모리 주소에 붙인 이름이다.

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

 

 

 

---

변수 선언이란?

 

변수 선언은 쉽게 변수를 생성하는 것을 말한다.

 

변수 선언이란 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.

 

변수를 사용하려면 반드시 선언이 필요하고, 이때 var, let, const 키워드들이 필요하다.

 

참고로 ES6에서부터 var의 여러 단점들을 보완하기 위해 let, const 키워드들이 등장 하였다.

 

 

변수 선언의 형태는 다음과 같다.

var score;

 

이때 변수 선언을 하면, 값은 할당되어 있지 않아 비어있는 상태라고 생각할 수 있지만, 실제로는 undefined 라는 값이 할당되어 초기화 한다.

 

 

 

변수 선언은 다음과 같은 두 단계로 이루어진다.

 

1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림.

2. 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined 를 할당하여 초기화.

 

* 초기화란?
변수가 선언된 이후 최초로 값을 할당하는 것.

 

 

---

변수 실행 시점과 변수 호이스팅

 

console.log(name);  // undefined

var name;  // 변수 선언

 

 

출력 시키는 console.log 가 선언 보다 먼저 나와있는데 undefined가 출력된다.

 

이런 현상이 왜 일어나는 것일까?

 

바로, 자바스크립트는 변수 선언이 소스코드가 한 줄 씩 순차적으로 실행되는 런타임 시점이 아니라 그 이전 단계에서 이미 먼저 실행되었기 때문이다.

 

자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드들보다 먼저 실행된다. 

따라서, 변수 선언이 소스코드의 어디에 있든간에 상관 없이 어디서든 변수가 선언만 되어있다면 참조를 할 수 있다.

 

이는 마치 변수 선언문이 코드의 상단부로 끌어져 올려와 동작하는 듯한 현상처럼 보이는데, 이 특징을 바로 변수 호이스팅 이라고 한다.

 

 

 

 

---

값의 할당 이란?

 

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

 

console.log(name);  // undefined

var name;
name='YUN';

console.log(name);  // YUN

 

이때, undefined 자리에 값을 저장하는 것이 아닌 새로운 임의의 메모리 공간을 확보하고 그 곳에 YUN 이라는 값을 할당하여 저장한다.

 

 

 

---

값의 재할당 이란?

 

 

var name = 'YUN';
name='KIM';

 

var 키워드로 선언한 변수는 재할당이 가능하다.

 

이때, 재할당이 불가능 하다면 그것은 변수가 아니라 상수이다.

 

 

 

이때도 마찬가지로 YUN 자리에서 YUN을 지우고 KIM을 할당하는 것이 아닌 새로운 임의의 메모리 공간을 확보하고 그 자리에 KIM 을 저장한다.

 

 

이때, undefined와 YUN 과 같이 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제가 되는데, 그 시점은 예측할 수 없다.

 

 

 

가비지 콜렉터 란?

애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용하지 않는 메모리공간을 해제하는 기능이다. 이를 통해 메모리 누수를 방지할 수 있다.

 

* 자바스크립트에서는 개발자가 명시적으로 메모리를 할당하고 해제하는 것이 불가능하다.

 

---

변수 네이밍 규칙

 

const firstName;  // 카멜 케이스

const FirstName;  // 파스칼 케이스

 

- 자바스크립트에서는 일반적으로 다음과 같은 네이밍 규칙을 가진다.

 

변수나 함수에서는 카멜 케이스

생성자 함수, 클래스 이름에는 파스칼 케이스

 

 

 

 

 

 

 

* 참고 : 모던 자바스크립트 Deep Dive