04 변수

4.1 변수란 무엇인가? 왜 필요한가?

애플리케이션은 아무리 복잡하다고 해도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

10 + 20

자바스크립트 엔진이 위 자바스크립트 코드를 계산하려면 먼저 10,20,+ 라는 기호( 리터럴과 연산자)의 의미를 알고 있어야 하며 , 10+ 20 이라는 식(표현식)의 의미도 해석( 파싱 parsing ) 할 수 있어야 한다. 컴퓨터는 CPU를 사용해서 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체며, 메모리 셀은 1바이트 (8비트)이고 컴퓨터는 메모리 셀의 크기인 1바이트 단위로 데이터를 저장하거나 읽어 들인다.

각 셀은 고유의 메모리 주소를 갖는다. 0~ 메모리 크기만큼 정수로 표현한다.

메모리 주소의 할당은 동일한 컴퓨터로 동일한 코드를 실행하더라도 상황에 따라 매번 달라진다. 따라서 메모리 주소 자체로 데이터를 제어하는 것은 매우 위험하며 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

따라서 기억하고 싶은 값을 메모리에 저장하고, 그 값을 읽어들여 재사용하기 위해서 변수라는 메커니즘을 제공한다.

[변수]는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 뜻한다. 즉 변수는 값의 위치를 가리키는 상징적인 이름이다.

  • [할당] assignment 대입, 저장 -변수에 값을 저장하는 것

  • [참조] reference - 변수에 저장된 값을 읽어 들이는 것 : 변수나 데이터 구조 등이 메모리 상의 위치를 가리키는 것을 의미

4.2 식별자

변수 이름을 [식별자] idetifier라고도 한다.

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

식별자는 변수 이름 뿐만 아니라 함수, 클래스 등의 이름은 모두 식별자다. 이 모든 이름은 네이밍 규칙을 준수해야 하며, 선언 declaration에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

변수 선언은 메모리 공간을 확보하고 변수 이름과 관련된 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것, 즉 변수를 생성하는 것이다.

변수를 사용하기 위해서는 반드시 선언이 필요하고 var, let, const 의 키워드를 사용한다.

+ var 키워드의 대표적인 단점은 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되는 오류가 발생한다. ES6에서 let , const의 키워드를 도입한 이유는 var의 여러 단점을 보완하기 위해서다.

+ [키워드]는 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어다.

JS 엔진의 변수 선언은 다음 두 단계를 거처 수행한다.

  1. 선언 단계 : 변수 이름을 등록해서 엔진에 변수의 존재를 알린다.

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

4.4 변수 선언의 실행 시점과 변수 호이스팅

JS에서는 변수 선언문보다 앞에서 변수를 참조해도 에러가 발생하지 않는다.

이 현상은 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 과정인 런타임이 아니라, 그 이전 단계에서 먼저 실행되기 때문이다.

JS엔진은 런타임 이전에 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이 때 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 따라서 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행된다.

이렇게 변수 선언문이 코드의 선두에 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 [변수 호이스팅] 이라고 한다.

4.5 값의 할당

변수 선언과 값을 할당은 따로 표현할 수도 있고, 하나의 문으로 단축 표현될 수도 있다. 

var score;  // 변수 선언
score = 80; // 값의 할당
// 혹은 
var score = 80; // 변수 선언과 값의 할당

표현 방법과 상관없이 2 개의 문으로 나누어 각각 실행한다.

  1. [변수 선언]은 런타임 이전에 먼저 실행되지만

  2. [값의 할당]은 소스코드가 순차적으로 실행는 런타임에 실행된다.

변수 선언 시에는 undefined로 할당되어 초기화하고, 값의 할당 시점에 새로운 메모리 공간을 확보하고 그곳에 값을 저장하고 변수의 참조를 변경한다.

4.6 값의 재할당

var 로 선언한 변수는 값 재할당이 가능하다. 재할당이 불가능하다면 [상수]이며 const 키워드를 사용해 상수를 표현할 수 있다.

값을 재할당하면 기존의 메모리 공간을 지우고 그 메모리 공간에 재할당한 값을 넣는 것이 아니라, 새로운 메모리 공간을 확보하고 그 공간에 새로운 값을 저장하고 변수가 새로운 메모리를 참조하도록 한다. 향후 아무도 참조하지 않는 메모리는 [가비지 콜렉터]에 의해서 메모리에서 자동 해제된다. 단, 언제 메모리에서 해제될지는 알 수 없다.

[가비지 콜렉터] - 애플리케이션이 할당한 메모리 공간을 주기적으로 검사, 더이상 사용되지 않는 메모리를 해제하는 기능이며 이로 인해 메모리 누수를 방지한다.

4.7 식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 기호($)를 포함할 수 있다.

  • 단, 숫자로 시작하는 것은 허용되지 않는다.

  • [예약어]는 식별자로 사용할 수 없다.

+ [예약어] - 프로그래밍 언어에서 사용되고 있거나, 사용될 예정인 단어를 말한다.

[네이밍 컨벤션]은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.

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

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

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

// 헝가리언 케이스 (typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

자바스크립트는 일반적으로 변수나 함수의 이름에는 카멜 케이스를 사용하고,

생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.

Last updated