[모던자바스크립트 Deep Dive] 4장. 변수

1.  자바스크립트의 특징

자바스크립트는 HTML, CSS와 함께 웹을 구성한느 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(interpreter language)이다.

 

• 인터프리터 언어
  • 코드가 실행되기 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행한다.
  • 실행 파일을 생성하지 않는다.
  • 인터프리트 단계와 실행 단계가 분리되어 있지 않다.
  • 인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행한다.
  • 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.
  • 인터프리트 단계와 실행 단계가 분리되지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.
• 컴파일러 언어
  • 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행한다.
  • 실행 파일을 생성한다.
  • 컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행한다.
  • 실행에 앞서 컴파일은 단 한번 수행된다.
  • 컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다.

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

 

2. 변수

애플리케이션은 데이터를 입력(input)받아 처리하고, 그 결과를 출력(output)한다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

 

만약 10 + 20 라는 것이 있다면, 자바스크립트 엔진이 10+20 이라는 자바스크립트 코드를 계산(평가 evaluation)을 하려면 먼저 10, 20, +라는 기호(리터럴literal과 연산자operator)의 의미를 알고 있어야 하며, 10 + 20이라는 식(표현식expression)의 이미도 해석(파싱 parsing)할 수 있어야 한다.

 

자바스크립트 엔진이 10 + 20이라는 식의 의미를 해석하면, + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 즉 피연산자operand를 기억한다. 여기서 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리 memory는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다.

 

각 셀은 고유의 메모리 주소(memory address)를 갖는다. 이 메모리 주소는 메모리 공간을 위치를 나타내며, 0부터 시작해서 메모리의 크기만큼 정수로 표현된다. 예를 들어, 4GB 메모리는 0부터 4,294,967,295(0x00000000 ~ 0xFFFFFFFF)까지의 메모리 주소를 갖는다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관없이 모두 2진수로 저장된다.

 

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

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

간단하게 말하자면 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 

상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 안전하게 값에 접근할 수 있다.

 

변수는 하나의 값을 저장하기 위한 메커니즘이다. 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다. 단 배열이나 객체 같은 자료구조를 사용하려면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다.

 

let userId = 1;
let userName = 'lee';

let user { id: 1, name: 'lee' };

let users = [
	{ id: 1, name: 'lee'},
    { id: 2, name: 'Kim'}
    ];

 

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름(또는 변수명)이라 한다. 그리고 변수에 저장된 값을 변수 값이라 한다.

변수에 값을 저장하는 것을 할당(assignment 대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.

 

3. 식별자

변수 이름을 식별자(identifier) 라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 

값은 메모리 공간에 저장되어 있다. 따라서 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야 한다. 

이를 위해 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억(저장)해야 한다.

 

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

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다. 예를 들어, 변수, 함수, 클래스 등의 이름은 모두 식별자이다. 식별자인 변수 이름으로는 메모리 상에 존재하는 변수 값을 식별할 수 있고, 함수 이름으로는 메모리 상에 존재하는 함수(자바스크립트에서 함수는 값이다)를 식별할 수 있다. 즉, 메모리 상 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 한다.

변수, 함수, 클래스 등의 이름과 같이 식별자는 네이밍 규칙을 준수해야 하며, 선언(declearation)에 의해 자바스크립트 엔진에 식별자 존재를 알린다.

 

4. 변수 선언

변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 

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

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

변수 선언문은 변수 이름을 등록하고, 값을 저장할 메모리 공간을 확보한다.

 

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

• undefined
  • undefined는 자바스크립트에서 제공하는 원시 타입의 값(primitive value)이다. 

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

• 선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다,

초기화란 ? 

• 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다.

변수 이름은 어디에 등록이 되는가?

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

 

5. 변수 호이스팅

console.log(score); // ReferenceError
let score; // 변수 선언문

• let과 const로 선언된 변수도 선언이 호이스팅되지만, **일시적 사각지대(TDZ, Temporal Dead Zone)**가 존재한다.
• 일시적 사각지대는 스코프 시작부터 변수 선언까지의 영역을 가리키며, 이 영역 내에서는 변수를 참조할 수 없다.
• 따라서 let이나 const로 선언된 변수는 선언 전에 접근하려고 하면 ReferenceError가 발생합니다

즉 간단하게 말하자면,

 

• let: 호이스팅됨. 일시적 사각지대(TDZ) 존재. 블록 스코프.
• const: 호이스팅됨. 일시적 사각지대(TDZ) 존재. 선언과 동시에 초기화가 필요. 블록 스코프이다.

변수 호이스팅의 경우는 나중에 좀 더 자세하게 다룰 예정이다.

 

6. 값의 할당 및 재할당

6-1. 변수 할당

변수에 값을 할당(대입, 저장)할 때는 할당 연산자 = 를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

변순 선언과 값의 할당은 다음과 같이 하나의 문(statement)으로 단축 표현할 수 있다.

 

6-2. let

let 키워드의 경우는 재할당이 가능하며, 이는 변수의 값을 변경할 수 있다. 

let 은 키워드로 선언된 변수는 초기화 후 다른 값으로 재할당 할 수 있다.

let x = 10;
console.log(x); // 10

x = 20; // 재할당
console.log(x); // 20

 

스코프와 재할당

let로 선언된 변수는 블록 스코프를 가지며, 이는 변수가 선언된 블록 내에서만 접근 가능하다는 것을 의미한다. 블록이 끝나면 해당 변수는 더 이상 존재하지 않는다.

if (true) {
  let y = 5;
  console.log(y); // 5
}

console.log(y); // ReferenceError: y is not defined

 

6-3. const

const 는 변수를 선언과 동시에 초기화해야 하며, 이후에는 재할당이 불가능하다. let과 마찬가지로 블록 스코프를 가지고 있다.

const 값을 재할당 할수 없는 것이다. 즉 변수가 아닌 상수이다.

const b = 1;
b = 2; // TypeError: Assignment to constant variable.

 

6-4. 일시적 사각지대(TDZ)

let으로 선언된 변수는 선언 전에 참조할 수 없다. 변수를 선언하기 전에 접근 하려면 ReferenceError가 발생한다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;

 

또한 중복 선언이 금지이다. 같은 스코프 내에서 let으로 이미 선언된 변수를 다시 선언할 수 없다.

let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared

 

7. 식별자 네이밍 규칙

식별자는 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 말한다. 식별자는 다음과 같은 네이밍 규칙을 준수한다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 안된다.
• 예약어는 식별자로 사용할 수 없다.

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

// 카멜 케이스(camelCase)
let firstName

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

 파스칼 케이스는 단어의 첫 글자를 대문자로 표기하고, 이후의 각 단어의 첫 글자도 대문자로 표기하는 방식이다.
// 파스칼 케이스(pascalCase)
let FirstName

헝가리언 케이스는 변수명에 접두사를 붙여 변수의 데이터 타입이나 사용 용도를 나타내는 명명 규칙이다.
// 헝가리언 케이스(typeHungarianCase)
let strFirst; // type + identifier
let $elem = document.getElementById('myId'); // DOM 노드
let observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

 

 

케이스 스타일	특징	주요 사용 예제	사용 빈도
헝가리언 케이스	접두사를 사용하여 타입/목적을 명시	strName, intAge	적음
파스칼 케이스	각 단어의 첫 글자가 대문자	Person, EmployeeDetails	높음

 

주로 사용하는 것은 카멜 케이스 및 파스칼 케이스를 주로 사용한다.