[자바스크립트 딥다이브] 04. 변수

04장 변수

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

변수란?

변수(Variable)
: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체. 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘이며 값의 위치를 가리키는 상징적인 이름이다.

• 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값 : 변수에 저장된 값
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어들이는 것

변수는 왜 필요한가?

사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다. 따라서 가독성을 높일 수 있으며 개발자의 의도를 정확하게 나타내고 이해하기 쉬운 코드를 작성할 수 있다. 또한 이는 협업과 품질 향상에 도움을 준다.

4.2 식별자

식별자(Identifier)(=변수 이름)
: 변수 이름. 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 특정한 값이 아닌 메모리 주소를 기억하고 있으므로 메모리 주소에 붙인 이름이라고 할 수 있다. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

 

예) 변수, 함수, 클래스 등의 이름

 

모든 식별자는 네이밍 규칙을 준수해야하며, 선언(declaration)에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

변수 선언
: 변수를 생성하는 것.

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

var age; // 변수 선언(변수 선언문)

변수가 선언되면 변수 이름이 등록되고 값을 저장할 메모리 공간이 확보된다. 이 공간에는 자바스크립트 엔진에 의해 undefined 라는 값이 암묵적으로 할당되어 초기화 된다.

 

변수가 선언될때 자바스크립트 엔진이 수행하는 것

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

 

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

 

🤔 변수 이름은 어디에 등록되는 걸까?
모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 이를 통해 식별자와 스코프를 관리한다.
변수 이름과 변수 값은 실행 컨텍스트 내에 키(key) / 값(value) 형식인 객체로 등록되어 관리된다.

 

• 초기화(initialization)
  : 변수가 선언된 이후 최초로 값을 할당하는 것
• 쓰레기 값(garbage value)
  : 메모리 공간에 남아있는 다른 애플리케이션이 사용했던 값

=> 초기화 단계를 거치지 않을 경우 쓰레기 값이 나올 수 있다.

 

변수를 비롯한 모든 식별자를 사용하려면 반드시 선언이 필요하다. 만약 선언하지 않은 식별자에 접근 할 경우 ReferenceError(참조에러)가 발생한다.

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

console.log(age); // undefined
var age; // 변수 선언문

변수 선언은 런타임(runtime, 소스코드가 한 줄씩 순차적으로 실행되는 시점)이 아니라 그 이전 단계에서 실행된다. 자바스크립트 엔진은 런타임을 수행하기 전, 소스코드의 평가 과정을 거치며 코드를 실행할 준비를 한다. 이때 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실핸한다. 그리고 이 평가 과정이 끝난 뒤 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한줄씩 순차적으로 실행한다. 따라서 위 코드처럼 변수 선언문보다 변수를 참조하는 코드가 앞에 있더라도 참조 에러가 발생하지 않는다.

 

자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 이처럼 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라 한다.

4.5 값의 할당

할당연산자 = 를 사용하여 변수에 값을 할당한다.

// 선언 - 할당
var name;
name = 'harry';

// 선언과 할당을 동시에
var name = 'john';

 

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

console.log(height); // undefined

height = 180; // 값 할당
var height; // 변수 선언 

console.log(height); // 180

 

위 코드의 경우, 런타임 이전에 변수 선언이 될때 초기화가 됨으로 런타임 이전 height의 값은 undefined 이다. 런타임이 되고 소스코드가 한줄씩 실행되게 되니 첫번째 console.log(height)는 undefined 값이 나오지만, 다음 줄에서 변수에 값이 할당되기 때문에 두번째 console.log(height)는 180이 출력되게 된다.

4.6 값의 재할당

재할당
: 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것

var name = 'John'; // 변수 선언 및 값 할당
name = 'Jane'; // 변수에 값을 재할당

변수 : 값을 재할당 할 수 있음
상수 : 값을 재할당 할 수 없음. 단 한번만 할당할 수 있음.

 

재할당이 되는 경우, 처음 값이 할당된 메모리 공간의 값이 바뀌는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 재할당 된 값이 저장된다. 이렇게 필요가 없어진 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되지만 언제 해제될지는 예측할 수 없다.

 

📝 가비지 콜렉터(Garbage Collector)
애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능. 더 이상 사용되지 않는 메모리 = 어떤 식별자도 참조하지 않는 메모리. 자바스크립트는 가비지 콜렉터를 통해 메모리 누수를 방지한다.

 

4.7 식별자 네이밍 규칙

식별자가 준수해야하는 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함 가능
• 특수문자를 제외한 문자, 언더스코어(_), 달러기호($)로 시작해야 함. 숫자로 시작하는 것은 허용되지 않음.
• 예약어는 식별자로 사용할 수 없음.

 

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

자바스크립트의 예약어
await break case catch class const continue debugger delete do else enum export extends false finally for function if implements* import in instanceof interface* let* new null package* private protected* public* return super static* switch this throw true try typeof var void while with yield*

( * : 식별자로 사용가능하지만 strict mode에서는 사용 불가)

 

변수의 이름도 식별자이므로 위 네이밍 규칙을 따라야 한다.

예시)

var name, $user, _person, first_name, v1;

변수는 쉼표로 구분해 하나의 문장에서 여러개를 한번에 선언할 수 있다. 하지만 가독성이 떨어지므로 권장하지 않는다.

 

var 이름, なまえ;

ES5부터 식별자 만들때 유니코드 문자를 허용하므로 알파벳 외의 한글, 일본어 식별자도 사용할 수 있지만 알파벳 외의 유니코드 문자로 명명된 식별자를 사용하는 것은 권장하지 않는다.

 

var user-name; // X. 언더스코어(_)가 아닌 하이픈(-)사용
var 1user; // X. 숫자로 시작할 수 없음
var this; // 예약어임으로 사용할 수 없음

var username;
var userName;
var USERNAME;

자바스크립트는 대소문자를 구별함으로 세개 모두 다른 변수이다.

 

var a = 16; // X. 의미를 알 수 없음
var age = 16 // O. 나이를 의미함을 바로 알 수 있다

변수는 의미를 명확히 표현해야 한다.

 

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

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

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

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

네이밍 컨벤션 : 하나 이상의 영어 단어로 구성된 식별자를 만들때 가독성 좋게 단어를 한 눈에 구분하기 위한 명명 규칙. 위와 같은 4가지 유형이 자주 사용된다.

 

변수, 함수 - 카멜 케이스 사용
생성자 함수, 클래스 - 파스칼 케이스 사용

 

일반적으로는 위처럼 사용된다.