🐸 [JavaScript] 변수

JavaScript의 변수에 대해 알아보자.

변수 이름 규칙이나 선언 방법, 그리고 호이스팅에 대해 정리해 볼 것이다.

---

변수란?

우선 변수의 정의부터 알아보자.

변수란, 하나의 값을 저장하기 위해서 확보해두는 메모리 공간에 붙인 이름 이다.

아무리 복잡한 프로그램이라도 결국은 '데이터 입력 - 처리 - 출력' 과정을 거치기 마련이고, 그 과정에서 데이터를 저장하고 이름을 붙이는 과정은 필연적으로 거치게 된다.


그런데 메모리 공간에 왜 이름을 붙어야 하는걸까?
메모리 공간에 이름을 붙이지 않으면 어떤 일이 일어나는지 알아보자.

10 + 20

위 수식이 어떤 과정을 통해 연산되는가?


피연산자를 기억(저장)하고, 기호와 식을 해석해서 결과를 메모리에 저장한다.

우리가 해당 연산의 결과값을 사용하려면, 어떻게 해야할까?

(우리는 JavaScript를 계산기로만 사용할 것이 아니기 때문에, 결과값을 사용하는 방법을 반드시 알고있어야한다.)

결과는 메모리에 저장되어있고, 결과값을 가져올 마땅한 방법이 없다.

그렇다면 남은 방법이.. 프로그래머가 직접 메모리에 접근해야만 한다.

그러나..!!! 이건 굉장히 위함한 판단이다.

프로그래머가 직접 메모리에 접근하는 이런 상황에서는, 치명적인 오류가 발생할 확률이 매우 크기 때문이다.
게다가 JavaScript에서는, 프로그래머가 메모리에 접근하는 것을 허용하지 않기 때문에 불가능한 방법이기도 하다.

변수를 사용하면 이런 상황을 피할 수 있다.

let result = 10 + 20;

result라는 변수를 선언하고, 연산의 결과값을 할당(대입.저장)한다.

이 때 let은 변수 선언 키워드, result는 변수 이름이다.

변수 이름은 식별자라고 한다.

이런 상황에서 식별자, 즉 변수는 연산의 결과값인 30을 기억하고 있는 것 같아 보인다.

하지만 실제로는 값인 30이 아니라, 그 30을 메모리의 몇 번지에 저장해 뒀는지, 메모리의 주소를 기억하고 있다.

참고로 JavaScript에서 변수에 이름을 붙일 때는, camelCase를 사용한다.

JavaScript에서 변수와 함수 이름에는 camelCase 방식을,
그리고 나중에 다룰 생성자 함수와 클래스 이름에는 PascalCase 방식을 사용할 것을 권장한다.

---

변수 선언

JavaScript는 C언어와 다르게, 선언시 자료형을 명시할 필요가 없다. 😲

변수 선언 키워드

변수 선언시 var, let, const 키워드를 사용하고, 변수에 할당된 값에 따라 자료형이 자동으로 결정된다.
(😲.. C 언어만 사용하던 나에게는,,,,, 충격적인 사실이다.....)

원래 JS에는 let이라는 키워드가 없었다고 한다.
변수는 var, 상수는 const로 선언을 하는 식이었다.

그런데 var로 변수를 선언할 경우, block level scope가 아닌 function level scope를 가지기때문에, 의도치 않게 전역변수가 선언되는 경우가 많다.

그래서 ES6에서는, 이런 문제점을 발생시키지 않는 let 키워드를 도입했다.

undefined

let score;

let 키워드로 score라는 이름의 변수를 선언했고, 값 할당은 하지 않았다.

C언어에서는, 변수를 선언과 동시에 초기화하지 않으면 쓰레기값이 저장된다.

그러나 JS에서는, 선언 후 초기화를 하지 않아도, 암묵적으로 undefined라는 값이 할당되어 초기화된다.
(😲.. 충격적인 사실 2)

이건 JS의 독특한 특징이자 장점이라고 생각한다.

Hoisting 호이스팅

console.log(score); // 변수 score 참조 -> 출력

let score; // 변수 선언

흠,, 이 코드는 변수 선언 전에 변수가 참조되었으니, 참조 에러가 발생할 것 같다.

그러나 놀랍게도! 참조 에러가 발생하지 않고,,, 심지어 undefined 값이 출력된다.

그 말은 score가 선언되었다는 뜻이다!!

Javascript는 한줄한줄 차례로 읽어가며 실행된다고 했는데,, 이게 무슨일일까..?

이유는 이러하다.

JavaScript의 코드가, 런타임에 한줄 한줄 순차적으로 실행된다는 건 틀린 말이 아니다.

그러나 변수 선언 부분의 실행 타이밍 때문에 이런 신기한 일이 발생하는 것이다.

JavaScript 엔진은, 런타임 이전 단계인 소스코드 평가 단계에서, 변수 선언을 포함한 모든 선언문을 찾아내고 실행시킨다.

그러니까 변수 선언이 어디에 있든, 다른 코드들 보다 먼저 실행된다는 것이다.

결과적으로 선언이 코드의 어느부분에 작성되어있든지 변수를 아무데서나 참조할 수 있다.

이러한 특성을 변수 호이스팅 Hoisting 이라고 한다.

변수 뿐만 아니라, var, let, const, functon, function*, class 키워드를 사용해 선언하는 모든 식별자는 hoisting 된다는 걸 기억하자!

---

값 할당

이제 우리가 다룰 내용이 하나밖에 남지 않았다.

값의 할당과 재할당이다.

할당이란, 변수에 값을 대입, 저장하는 것이다.

이때는 할당 연산자인 = 을 사용하며, 우변의 값을 좌변의 변수에 저장한다.

let score = 80;

선언과 할당을 하나의 문으로 작성되어 있으면, 호이스팅이 어떻게 적용될까??

그래도 선언과 할당의 실행 시점은 다르다.

선언은 런타임 이전, 할당은 런타임에 일어난다.

JavaScript 엔진이 이를 2개의 문을 나누어 실행하기 때문이다.

변수에 값을 할당하고 재할당할 때, 메모리에서는 무슨 일이 일어날까?

변수에 값을 할당하기 전, 그 공간에는 undefined라는 값이 저장된다고 했다.

그렇다면 값이 할당된다는 건, 저장 공간에 저장되어 있던 undefined를 지우고 다시 80을 그곳에 채워넣는 걸까?

좋은 생각이지만, 사실과는 다르다.

JavaScript에서 값을 할당할 때는, 새로운 메모리 공간을 확보한 뒤에 그곳에 할당값을 저장한다.

그렇다면 값을 재할당 하는 경우에는 어떨까?

다음 코드와 같이 score에 90을 재할당 하는 경우를 생각해보자.

let score = 90;

변수에 값을 처음 할당하는 경우와 마찬가지이다.

80을 지우고 90을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 90을 저장한다.

그럼 이번 주제 마지막 질문을 던져보겠다.

변수를 재할당하는 경우, 기존에 할당되어 있던 값은 어디로 사라지는 걸까?

그러니까,,, 저 80이라는 값이 저장되어있는 공간은 어떻게 되는걸까?

Garbage Collector

더이상 아무도 사용하지 않는 이런 값들은,
JavaScript의 Garbage Collector 에 의해 메모리에서 자동 해제된다.

이 Garbage Collector는 메모리 공간을 주기적으로 검사해서 메모리 누수를 방지한다.

언어 자체적으로 메모리 공간을 관리하는 이러한 언어를 매니지드 언어라고 한다.

개발자의 메모리 제어를 허용하지 않는다는 말이다.

언매니지드 언어인 C언어는 malloc-free같은 저수준 메모리 제어 기능을 제공한다.

JS는 메모리 접근을 차단하여 치명적인 오류의 발생 가능성을 낮추었다고 한다.

---

JavsScript의 문법에 있어서 가장 기초적이고 간단한 변수에 대해 정리해보았다.

생각보다 C언어와 차이있는 특징이 꽤 있었던 것 같아서 흥미로웠다.

앞으로 처음 들어보는 개념도 많이 나오겠지만, 그때도 이런 흥미를 가지고 열심히 공부해보겠다..!