모던 자바스크립트(딥다이브) 4~5장

4. 변수

4-1. 변수란 무엇인가 왜 필요한가?

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기위해 붙인 이름
예를 들어, 10 + 20 이라는 코드를 실행할 것이다. 그러면 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어 들인다. 그리고 각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며 0부터 시작 메모리의 크기만큼 정수로 표현.
다시 10 + 20 코드로 돌아와서 10과 20은 메모리 상의 임의의 위치에 기억 CPU는 이 값을 읽어 연산을 수행할 것이다. 연산 결과 값 30또한 메모리 상의 임의의 위치에 저장된다. 이제 연산한 결과 값 30을 가져와 사용하려고 하는데 사용할 수가 없다. 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없기 때문이다. 메모리 공간에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 매우 높은 위험한 일이기도 하며 메모리 주소는 코드가 실행될 때 메모리의 상황에 따라 임의로 결정된다. 따라서 동일한 컴퓨터에서 동일한 코드를 실행해도 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경된다. 다시 말해 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 수 없으며, 알려 주지도 않는다.
하지만 변수를 사용하면 위의 30의 연산 결과값을 다시 읽어 들여 재사용 할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙여 사용가능하다.
메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름
변수에 저장된 값을 변수 값 변수에 값을 저장하는 것을 할당 변수에 저장된 값을 읽어 들이는 것을 참조

4-2. 식별자

변수이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름
값은 메모리 공간에 저장되어 있다. 따라서 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 낼 수 있어야 한다. 이를 위해 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억(저장)해야 한다. 즉, 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다
식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다 함수, 클래스 등의 이름도 모두 식별자다.

4-3. 변수 선언

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

var test

var를 선언했다고 가정하자 위 변수 var 선언문은 변수 이름인 test를 등록하고 값을 저장할 메모리 공간을 확보한다. 변수를 선언한 이후, 아직 변수에 값을 할당하지 않았고, 비어있다고 생각할 수 있으나 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefinde라는 값이 암묵적으로 할당되어 초기화된다. 이것은 자바스크립트의 독특한 특징.
자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행
선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생 이 에러는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러

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

console.log(test) // undefined
vart score; // 변수 선언문

자바스크립트 코드는 인터프리터에 의해 한줄씩 순차적으로 실행되서 console.log 부터 먼저 실행 그러면 ReferenceError가 나야 한다. 하지만 그렇지 않았고 그 이유는 변수 선언이 소스코드가 한 줄식 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문
자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이때 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수, 함수)을 소스코드에서 찾아내 먼저 실행한다. 즉, 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든 변수를 참조할 수 있다. 이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립 고유의 특징을 변수 호이스팅이라 한다.

4-5. 값의 할당

var test // 변수 선언
test = 80 // 값의 할당
var test = 80 // 변수 선언과 동시에 할당

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

console.log(test) // undefined
vart test // 변수 선언
test = 80 // 값의 할당
cosole.log(test) // 80

변수 선언은 런타임 이전에 먼저 실해되고 값의 할당은 런타임에서 실행 따라서 값의 할당 시점에서는 이미 변수 선언이 완료된 상태이며서, undefined로 이미 초기화 그리고 새로운 값 80으로 변경 주의할 점은 undefined가 지워지고 그 메모리 공간에 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장한다는 점,

4-6. 값의 재할당

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

var score = 80
score = 90

만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수다. 재할당 역시 기존 메모리공간에 80이라는 값을 지우고 할당해 주는 것이 아닌 새로운 메모리공간을 확보하고 90을 저장한다

4-7. 식별자 네이밍 규칙

// 카멜 케이스(camelCase)
var firstName;
// 스네이크 케이스(snake_case)
var first_name;
// 파스칼 케이스(PascalCase)
var FirstName;
// 헝가리언 케이스(typeHungarianCase)
var strFirstName // type + identifier
var $elem = document.getElementById('myId') // DOM 노드
vart observable$ = fromEvent(document, 'click') // RxJS 옵저버블

변수 선언 : 변수를 정의하는 것을 의미한다.
변수 할당 : 변수가 선언된 후 대입 연산자(=) 를 통해 값을 넣어주는 것을 의미한다.
변수 초기화 : 변수를 선언함과 동시에 값을 넣어 주는 것을 의미한다.

5. 표현식 과 문

5-1. 값

값은 식(표현식)이 평가되어 생성된 결과를 말한다

5-2. 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

5-3. 표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다 즉, 값으로 평가 될 수 있는 문은 모두 표현식

5-4. 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위 문은 명령문이라고도 부른다 즉, 문은 컴퓨터에 내리는 명령 문이 실행되면 명령이 실행되고 무슨일이 일어나게 된다.

// 문 선언문 할당문 조건문 반복문
var x; // 변수 선언문
x= 5; // 할당문
function foo() {} // 함수 선언문
if(x>1) {console.log(x)} // 조건문
for (var i = 0; i <2; i++) {console.log(x)} // 반복문

5-6. 표현식인 문 표현식이 아닌 문

변수 선언문 값으로 평가 될 수 없어서 표현식이 아닌 문 할당문 값으로 평가될 수 있어서 표현식인 문
표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것

var test = var Test // 신텍스에러 변수에 변수 선언문을 할당해 보니 에러가 남.