Javascript - Variable

 

변수(Variable)

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

var result = 10 + 20;
// 10 + 20 은 30을 result 라는 변수에 대입한 것

• result : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 = 변수이름
• 변수에 저장된 값(위 예제에서 30) = 변수값
• 변수에 값을 저장하는 행위 = 할당(Assignment, 대입, 저장)
• 변수에 저장된 값을 읽어 들이는 것 = 참조(Reference)

 

 

식별자(Identifier)

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

• myNumber 라는 식별자는 값 23을 식별할 수 있어야 한다.
• 이를 위해 myNumber 는 값 23이 저장되어 있는 메모리 주소(0012CCGWH80) 을 기억한다.
• 즉, 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 매핑 정보도 메모리에 저장되어야 한다.

이와 같이 식별자는 값이 아니라 "메모리 주소를 기억하고 있다."

식별자로 값을 구별해서 식별한다는 것 = 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 것을 의미
즉, 식별자는 "메모리 주소에 붙인 이름"

• 변수, 함수, 클래스 등의 이름은 모두 식별자
  • 변수이름 → 메모리 상에 존재하는 변수 값을 식별
  • 함수이름 → 메모리 상에 존재하는 함수(자바스크립트에서 함수도 값이다 !)를 식별
• 즉, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자

 

 

변수 선언(Variable Declaration)

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

• 변수를 사용하려면 반드시 선언이 필요
• 변수 선언시에는 var, let, const 키워드를 사용
• ES6 이전(즉, ES5까지)에는 var 키워드만 사용해서 변수를 선언했다.

var 키워드 단점

블록 레벨 스코프(Block-Level Scope)를 지원 X, 함수 레벨 스코프(Functional-Level Scope) 지원
의도치 않게 "전역 변수가 선언"되어 심각한 부작용 발생 가능

-> var 키워드의 단점을 보완하기위해 등장한 것 : ES6에 도입된 let, const
let ,const는 블록 레벨 스코프 지원

var person; // 변수 선언(= "변수 선언문")

• 변수 선언문 : 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보
  • 변수 선언한 이후, 변수에 값은 아직 할당하지 않았다.
  • 따라서, 확보된 메모리 공간은 비어있을 것으로 생각할 수 있으나 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined 값이 암묵적으로 할당되어 초기화된다.

 

자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다.

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

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

• var let const 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행 된다.
• 예로 들어 var person; 에 대해
  • 선언 단계를 통해 변수 이름은 person 으로 등록하고
  • 초기화 단계를 통해 person 변수에 암묵적으로 undefined를 할당 해 초기화한다.
• 따라서, var 키워드로 선언한 변수는 어떠한 값도 할당하지 않아도 기본적으로 undefined 라는 값을 갖는다.

초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다.

이러한 값을 "쓰레기 값(Garbage value)" 라고 한다.
자바스크립트에서 var 키워드는 암묵적으로 undefined 값으로 초기화를 수행하기 때문에 이러한 위험으로부터 안전하다.

 

변수 이름을 비롯한 모든 식별자는 "실행 컨텍스트에 등록된다."
실행 컨텍스트: 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공, 코드의 실행 결과를 실제로 관리하는 영역
자바스크립트 엔진은 실행 컨텐스트를 통해 식별자와 스코프를 관리

 

 

자바스크립트의 ReferenceError

• 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 가 발생
• 이는, 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러

 

 

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

변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징

// 변수 선언문보다 변수를 참조하는 코드가 앞에 있는 경우

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

• JS는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 위의 코드는 ReferenceError가 발생할 것 처럼 보이지만, 에러가 발생하지 않고 undefined 가 출력됨.
• 변수 선언(선언, 초기화 단계)이 소스코드가 한 줄씩 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문
• JS 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서, 먼저 소스코드 평가 과정을 거치면서 소스코드 실행을 위한 준비를 한다.
• 엔진은 변수 선언을 포함한 모든 선언문(변수, 함수 등)을 소스코드에서 찾아 먼저 실행한다.
• 소스코드 평가 과정이 끝나면, 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
• 즉, 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 가장 먼저 실행 -> 변수 선언이 어디에 위치하던 상관없이 어디서든 변수를 참조할 수 있다. 따라서 ReferenceError가 발생하지 않는다.

 

변수 선언과 값 할당(Assignment, 대입, 저장)은 실행시점이 다르다.

var person = 'JIOH';
// 변수 선언과 값 할당을 한 문장으로 표현, 하지만 내부적으로 실행시점은 다름

• 변수 선언: 런타임 이전에 실행
• 값 할당: 런타임에 실행

 

 

값의 재할당

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

var person = 'JIOH'; // 변수 선언, 값 할당
person = 'JIOHJUNG'; // 값 재할당

• var 키워드로 선언한 변수는 선언과 동시에 undefined 로 초기화, 엄밀히 말하자면 변수에 처음 값을 할당하는 것도 사실은 재할당
• 변수 선언 과정에서 undefined 로 초기화되어있던 값에서, 값의 할당 과정에서 'JIOH'로 재할당 되었다고 볼 수 있다.
• 결과적으로 값의 재할당까지 적용되었을 경우, 이전 값인 undefined 나 JIOH 는 어떠한 변수도 값으로 갖고 있지 않게 된다.
• 즉, 어떠한 식별자와도 연결되어 있지 않다는 것이고 더 이상 필요하지 않다는 것을 의미한다.
• 이러한 불필요한 값들은 가비지 컬렉터 에 의해 메모리에서 자동 해제 된다. (언제 해제될지는 예측 불가능)

 

cf) 재할당은 변수에 저장된 값을 다른 값으로 변경하는 것. 그래서 변수라고 함
만약, 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면, 그것은 변수가 아닌 상수(Constant)라고 한다.
ES6에서 const 키워드 도입 -> 이 키워드로 선언한 변수는 재할당 금지, 즉 단 한번만 할당할 수 있는 변수