변수
코드를 작성하며 변수는 빼 놓을 수 없는 요소 중 하나입니다.
너무 당연하다는 듯이 사용해왔는데 이 변수에 대해 조금 더 자세히 알아보려고 합니다.
변수(Variable)은 간단히 설명해서 저장한 값을 불러다 사용하게 해 주는 것입니다.
자바스크립트에서 변수를 사용할 때 어떤 일들이 일어나는지에 대해 자세히 알아보겠습니다.
변수 선언
변수 선언은 변수를 생성하는 것입니다.
변수 사용을 위해서는 꼭 변수 선언이 필요합니다.
만약 선언하지 않은 변수를 사용한다면 자바스크립트 엔진은 해당 변수를 찾지 못하고 참조 에러가 발생하게 됩니다.
아래 예시처럼 var, let, const 키워드를 통해 변수를 선언할 수 있습니다.
var sample;
let sample2;
const sample3;이 때, 변수 선언을 위한 세 가지 일이 일어납니다.
- 메모리 공간 확보
- 변수명과 (1)에서 확보한 메모리 공간의 주소 맵핑
- (1)에서 확보한 메모리 공간에
undefined라는 값 할당
변수 선언 시 임의로 undefined의 값을 할당하는 것은 참조 에러를 막아줍니다.
만약 확보한 메모리 공간에 새로운 값을 할당하지 않는다면 이전에 사용했던 garbage value가 남아있을 수 있습니다.
값 할당
값 할당은 아래와 같이 선언할 수 있습니다.
// 1. 변수 선언과 동시에 값 할당
var sample = 10;
// 2. 변수 선언 후 값 할당
var sample;
sample = 10;
// 3. 이미 값이 할당되어 있는 변수에 값 재할당
var sample = 10;
sample = 20;첫 번째와 두 번째 예시는 아래와 같은 동일한 동작이 이루어집니다.
- 메모리 확보 및 주소와 변수명 맵핑
undefined할당- 새로운 메모리 확보 및 주소와 변수명 맵핑
10할당
기존에 undefined는 더 이상 참조되지 않기 때문에 가비지 컬렉터에 의해 해제됩니다.
이렇듯 변수 선언과 할당을 동시에 하는 것과 나눠서 하는 것은 동일한 동작을 하게 됩니다.
세 번째 예시의 경우, 위 동작에서 메모리를 확보하고 맵핑 후 20이라는 값을 할당하는 일이 한 번 더 일어나게 됩니다. 이 때도 기존에 값 할당을 위해 쓰였던 두 메모리 주소는 가비지 컬렉터에 의해 해제됩니다.
가비지 컬렉터에 의해 메모리에서 해제되는 것은 언제 이뤄지는지 알 수 없습니다.
호이스팅
자바스크립트는 런타임에 코드가 statement 단위로 실행되는 인터프리터 언어입니다.
하지만 아래 예시를 확인하면 이상한 점을 확인할 수 있습니다.
code>
console.log(sample);
var sample;result>
undefined변수 선언 이전 시점에 해당 변수를 참조해도 에러가 발생하지 않습니다.
이는 자바스크립트가 호이스팅을 통해 런타임 이전에 변수 선언을 하기 때문입니다.
정확히는 변수 선언 외에도 모든 선언문을 런타임 전에 먼저 실행하고 런타임에는 선언문을 제외한 코드를 순서대로 실행합니다.
이 때, 주의할 점은 호이스팅은 변수의 선언만 이루어지고 값의 할당은 이루어지지 않는다는 점입니다.
code>
console.log(sample);
sample = 10;
console.log(sample);
var sample;
console.log(sample);result>
undefined
10
10식별자
위에서 변수명이라고 일컫던 것을 식별자라고도 합니다.
식별자는 변수 선언 외 함수, 클래스 등을 선언할 때도 사용됩니다.
이 식별자는 아래와 같은 특징을 가집니다.
- 문자, 숫자, _, $를 사용할 수 있다.
- 문자, _, $로 시작해야 한다.
- 예약어는 사용할 수 없다.
- 대소문자를 구별한다.
- 일반적으로 변수, 함수를 선언하는 경우엔 카멜 케이스를 사용하고, 클래스를 선언할 때는 파스칼 케이스를 사용한다.
아래 내용은 2022-06-11 자로 추가한 내용입니다.
ES6에서는 변수 선언 키워드 let과 const가 추가되었습니다.
let
let은 중복 선언이 금지된 변수 선언 키워드입니다.
아래와 같이 기존에 선언한 변수와 동일한 식별자로 변수 선언 시 에러가 발생합니다.
let sample = 10;
let sample = 20; // Syntax Error또한 let의 호이스팅은 선언과 초기화가 분리되어 진행됩니다.
변수 선언은 var와 동일하게 런타임 이전에 실행됩니다.
하지만 초기화는 런타임 이후 변수 선언문에 도달했을 때 실행됩니다.
console.log(sample); // Reference Error
let sample;
console.log(sample); // undefined
sample = 10;
console.log(sample); // 10선언과 초기화 사이 ~런타임에서 선언문 도달 이전~ 시점에서는 일시적 사각지대라는 구간이 되어 변수에 접근이 불가능합니다.
하지만 여전히 호이스팅은 일어나는 것이기 때문에 아래와 같은 코드에서 에러가 발생합니다.
let sample = 1;
{
console.log(sample); // Reference Error
sample = 2;
}일반적으로 var 키워드를 통해 선언하거나, 변수 선언 키워드 없이 선언된 변수는 브라우저 상에서 window의 프로퍼티가 됩니다.
하지만 let을 통해 선언된 변수는 전역 객체의 프로퍼티가 아니기 때문에 window객체를 통해 접근할 수 없습니다.
const
const는 상수를 선언하는 키워드입니다.
선언과 동시에 초기화를 하지 않으면 에러가 발생합니다.
또한 변수에 값을 재할당하게되면 Type Error가 발생합니다.
하지만 참조를 통해 접근하는 객체의 경우, 값의 변경이 가능합니다.
이 내용은 객체 타입에 대한 포스트에 보다 상세히 설명하였습니다.
const의 호이스팅 동작은 let과 같습니다.
일반적으로 상수의 식별자는 대문자를 사용하고 스네이크 케이스를 통해 표기합니다.
const SAMPLE_VALUE = 1;
const ERROR_CASE; // Type Error
