모던 자바스크립트 딥다이브 - 변수

모던 자바스크립트 딥다이브 스터디를 시작했다.

1~3장까지는 기본적인 자바스크립트 소개와 환경 셋팅에 대한 내용이라 4장부터 스터디를 시작하기로 했다.

 

4장의 내용은 변수에 대한 것.

---

가장 먼저 변수란 무엇인가?

프로그래밍을 할 때 가장 많이 사용하는 개념 중 하나가 변수라고 생각한다.

이 변수에 대해 이해하기 위해서는 컴퓨터가 데이터를 저장하고 불러오는 원리를 이해해야 한다.

컴퓨터는 메모리에 데이터를 저장한다.

그리고 메모리의 최소 단위는 메모리 셀이며 8비트 크기를 가진다.

이 메모리 셀에 데이터를 저장하고 메모리 셀의 주소를 통해 데이터를 참조할 수 있음.

(여기서 참조란 메모리에 저장된 데이터를 읽어들이는 것을 의미한다.)

 

사설이 길었지만 다시 변수란 무엇인가에 대해 이야기해보자면 변수는 데이터를 저장하기 위해 확보한 메모리 공간의 이름을 의미한다.

짧게 말하자면 데이터가 저장된 위치에 이름표를 붙인 것.

---

자바스크립트에서는 메모리 주소에 붙인 이름을 '식별자'라고 부른다.

식별자는 데이터를 직접 기억하지 않고 데이터가 저장된 메모리의 주소를 기억하는 특성 때문에 생겨난 개념.

식별자에는 변수, 함수, 클래스 등이 존재하고 이 식별자들은 선언을 해줘야 사용이 가능 함.

 

변수도 식별자이기 때문에 '선언'을 해줘야 사용할 수 있다.

---

변수를 선언하는 과정은 2단계로 나뉜다.

먼저 데이터를 저장하기 위한 메모리를 확보한 후 확보된 메모리 공간의 주소와 변수명을 연결한다.

 

이때 변수를 생성하는 것을 변수 선언 단계라고 부르고, 메모리 공간을 확보하고 값을 할당하는 것을 변수 초기화 단계라고 부른다.

// 변수 선언 및 초기화
var score;
// 변수에 값 할당
score = 10;
// 변수 참조
console.log(score);

변수 선언 시 확보된 메모리 공간에는 자동으로 undefined라는 값이 할당되어 초기화된다.

선언되지 않은 식별자에 접근하는 경우에는 참조 에러(ReferenceError)가 발생한다.

---

자바스크립트 엔진은 작성된 코드를 한 줄씩 실행한다.

그래서 변수를 참조하는 코드가 변수를 선언하는 코드보다 앞에 위치해 있다면 참조 에러가 발생할 것이라고 생각할 수 있다.

하지만 자바스크립트 엔진이 소스코드를 실행할 때, 우선 전체 코드를 훑으며 모든 선언문을 실행한 뒤 소스 코드를 실행한다.

즉, 변수를 참조하는 코드가 선언하는 코드보다 앞에 있어도 참조 에러가 발생하지 않으며 이를 '호이스팅'이라고 부른다.

---

앞서 살펴본 예제에서는 변수를 선언하고, 초기화한 뒤 값을 할당했지만, 변수를 선언하면서 동시에 값을 할당할 수도 있다.

var score = 10;

하지만 변수에 값을 할당하는 시점은 소스코드를 실행하는 시점인 런타임 시점이므로 자바스크립트 엔진은 선언과 할당을 무조건 각각 실행하게 된다.

즉, 아래 코드와 같이 호이스팅 된 score 변수의 값을 참조하면 undefined가 출력되고, 80이라는 값이 할당된 뒤의 score를 참조하면 80을 출력한다.

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

---

변수를 선언할 때 키워드를 붙일 수 있는데 이 키워드는 var, const, let이 존재한다.

각 키워드를 활용한 변수 선언에는 서로 다른 특징이 존재하는데, var 키워드로 선언한 변수에는 값을 재할당 할 수 있다.

 

재할당이란 현재 변수에 할당된 값을 버리고 새로운 값을 할당하는 것을 의미한다.

이때 기존 값을 제거하거나 덮어씌우는게 아니라 기존 값은 그대로 두고 새로운 메모리 공간을 확보하고 새로운 값을 할당하는 메커니즘이다.

그래서 변수 초기화 시 할당되는 undefined나 재할당 전의 값들은 그대로 남아있게 되며, 더이상 변수와 연결되어 있지 않으므로 '사용하지 않는' 상태가 된다.

이 '사용하지 않는' 메모리 공간은 가비지 콜렉터에 의해 주기적으로 해제된다.

 

자바스크립트는 가비지 콜렉터 같은 도구를 통해 프로그래밍 언어 차원에서 메모리를 관리해주는 매니지드 언어이다.

---

식별자에 이름을 붙일때는 규칙에 맞춰야 한다.

식별자는 특수문자를 제외한 문자와 숫자, 언더바, 달러 기호를 포함할 수 있으며 숫자로 시작할 수 없다.

추가적으로 예약어를 사용할 수 없으며 대소문자도 구분한다는 점도 기억해둬야 한다.

---

간단한 예제와  함께 마무리

console.log(testData); // 변수 호이스팅, undefined
var testData; // 변수 선언
testData = 10; // 값 할당
console.log(testData); // 10

testData = 20; // 변수 재할당
console.log(testData); // 20

console.log(testData2); // 변수 호이스팅, undefined
var testData2 = 30; // 변수 선언, 초기화, 값 할당
console.log(testData2); // 30

// 변수는 대소문자를 구분 함
var testdata = 10;
var tEstdata = 20;
console.log(testdata);
console.log(tEstdata);