자바스크립트의 변수(Variable)

변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 고유의 이름인 식별자(identifier)를 명시한 것이다.

프로그램에서 사용되는 데이터를 일정 기간 동안 기억하여 필요한 때에 다시 사용하기 위해 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인 이름이다.

변수명

변수에 명시한 고유한 식별자

변수값

변수로 참조할 수 있는 데이터

식별자(identifier)

어떤 값이나 대상을 유일하게 식별할 수 있는 고유한 이름을 말한다.

변수명, 함수명, 프로퍼티명(프로퍼티 키), 클래스명 등이 있다.

값은 메모리 공간에 저장되어 있고, 식별자는 메모리 공간에 저장되어 있는 메모리 주소를 기억하여 특정 값을 분별하고 식별할 수 있다.

한마디로 식별자는 값이 아니라 메모리 주소를 기억(저장)하고 있다.

변수 선언(Variable declaration)

변수를 생성하는 것을 말한다. 값을 저장하기 위한 메모리 공간을 확보(allocate, 할당)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 한다.

변수 선언에 의해 확보된 메모리 공간은 확보가 해제(release)되기 이전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.

변수는 var, let, const 키워드를 사용하여 선언 하고 할당 연산자(=)를 사용해 값을 할당 한다.

그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조 한다.

// 선언
var name;
// 할당
name = 'JiSop';
// 참조
console.log(name);

변수 생성 단계

1. 선언 단계(Declaration phase)

   • 변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. (변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다)

2. 초기화 단계(Initialization phase)

   • 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다. (값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당)

3. 할당 단계(Assignment phase)

   • undefined로 초기화된 변수에 실제값을 할당한다.

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되고,
let, const 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 분리되어 진행된다.

var 키워드

ES6 이전에 변수 선언을 하기위한 유일한 키워드이다. 사라진 것은 아니라 사용할 수 있지만 주의할 점이 많고, 여러가지 문제를 가지고 있어 더 이상 사용을 권장하지 않는다.

var 키워드로 선언된 변수의 특징

주의를 기울이지 않으면 심각한 문제를 일으킨다.

• Function-level scope를 가지고 있다.

  • 의도치 않게 전역 변수가 선언되어 여러가지 문제를 일으키기 쉬워진다.
  • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.

• var 키워드 생략 허용

  • 변수 선언 키워드를 사용하지 않아도 변수 선언이 가능하고 키워드를 생략한 변수는 암묵적으로 var 키워드로 선언되기 때문에 전역 변수가 될 수 있다.

• 중복 선언허용

  • var 키워드는 중복 선언을 허용하기 때문에 의도하지 않은 변수값 변경이 일어날 수 있다.

• 선언 단계와 초기화 단계가 동시에 이루어진다.

  • var 키워드로 선언된 변수는 선언과 동시에 초기화가 이루어 지면서 undefined 값이 할당된다.

• 변수를 선언하기 전에 참조가 가능하다.

  • 변수 호이스팅에 의해 변수가 선언되기 전인 라인에서도 참조가 가능하다.

전역 변수의 문제점

대부분의 문제는 전역 변수로 인해 발생하기 때문에 불가피한 상황을 제외하고 사용을 억제해야 한다.

• 전역 변수는 유효 scope가 넓어서 어디에서 어떻게 사용될 것인지 파악하기 힘들다.
• 비순수 함수(Impure function)에 의해 의도하지 않게 변경될 수도 있어서 복잡성을 증가시키는 원인이 된다.

변수의 유효 scope는 좁을수록 좋다.

let, const 키워드

var 키워드의 단점을 보완하기 위해 ES6 부터 let과 const가 도입 되었다.

let, const 키워드의 공통점

• 중복 선언 금지

  • 이름이 같은 변수를 중복해서 선언하면 SyntaxError가 발생한다.

• block-level scope 지원

  • 모든 코드 블록을 지역 스코프로 인정한다.
  • 코드 블록으로는 함수, if 문, for 문, while 문, try/catch 문 등이 있다.

• 변수 호이스팅이 발생하지 않는 것 처럼 동작한다.

  • 일시적 사각지대(TDZ)가 생기면서 선언문 이전에 참조하면 ReferenceError가 발생한다.

    ⚠️ 호이스팅이 발생하지 않는 것 처럼 동작하는 것이지 호이스팅이 발생하지 않는 것은 아니다.

• 전격 객체의 프로퍼티가 아니다.

일시적 사각지대(Temproal Dead Zone, TDZ)

스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지의 변수를 참조할 수 없는 구간

'선언 단계'와 '초기화 단계'가 분리되어 진행되기 때문이다. 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생한다.

let, const 키워드의 차이점

let

• 재할당이 가능하다.

const

• 재할당이 불가능하다.

  • 재할당 하려고 하면 TypeError가 발생한다.

• 선언과 동시에 초기화가 이루어져야 한다.

  • 선언과 동시에 초기화(값을 할당)를 하지 않으면 SyntaxError가 발생한다.

• 변화하지 않는 상수 선언

  • const 키워드로 선언한 변수가 다 상수가 되는 것은 아니고 값이 원시 데이터 타입일 경우만 해당한다.
  • 원시 데이터 타입은 immutable value이고 재할당도 불가능 하기 때문에 할당 된 값을 변경할 수 없다.

  ⚠️ const 키워드로 선언된 변수의 값이 객체일 경우 외부의 영향으로 값이 변경될 수 있다.

  한마디로 변수의 재할당이 금지되어 있을 뿐, 값이 변경될 수도 있다.

변수 명명 규칙

• 영문자와 숫자(0~9), 그리고 기호 $와 _만 사용할 수 있다.
• 첫 글자에 숫자를 사용할 수 없다.
• 대/소문자를 구별하여 사용할 수 있다.
• 일반적으로 camelCase를 사용한다.
• 예약어는 식별자로 사용할 수 없다.

예약어(reserved word)

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

자바스크립트의 예약어들

await break case catch class const continue debugger default 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에서는 사용 불가

Dynamic Typing

자바스크립트는 동적 타입(dynamic/weak type) 언어이다.

변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입이 결정(Type Inference)되기 때문에 같은 변수에 여러 타입의 값을 할당할 수 있다.

Variable Hoisting

자바스크립트의 모든 선언문은 호이스팅(Hoisting)된다. 변수 선언 또한 호이스팅이 발생한다.