04장 변수

---

4.1 변수란 무엇인가?

아무리 복잡한 애플리케이션이라도 데이터를 입력받아 결과를 출력하는 것이 전부이다.
변수는 데이터를 관리하기 위한 핵심 개념이다.

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

즉, 값의 위치를 가리키는 상징적인 이름이다.

식별할 수 있는 고유한 이름을 변수 이름, 변수에 저장된 값을 변수 값이라고 한다.

변수에 값을 저장하는 것을 할당이라고 한다. 저장된 값을 읽어 들이는 것을 참조라고 한다.

📍 코드는 컴퓨터에게 내리는 명령이며 개발자를 위한 문서이므로, 의도가 명확한 변수 이름을 사용하자.

4.2 식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별하는 고유한 이름을 뜻한다.

식별자는 값이 아니라 메모리 주소를 기억한다. 이 메모리 주소를 통해 메모리에 저장된 값에 접근한다.

식별자는 메모리 상에 존재하는 값을 식별할 수 있는 모든 이름을 지칭한다.

선언을 통해 자바스크립트 엔진에 식별자의 존재를 알린다.

📍 식별자 = 메모리 주소에 붙인 이름

4.3 변수 선언

변수 선언이란 변수를 생성하는 것이다.

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 가 도입되기 전까지 var가 유일한 키워드였다.

var를 이용한 변수 선언

var foo; // 변수 선언(변수 선언문)

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

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

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

1. 선언 단계 : 변수 이름을 등록 → 변수의 존재 알림
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보 → 암묵적으로 undefined 할당해 초기화

📍 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다.

var의 경우 선언과 초기화를 동시에 진행한다.
일반적인 초기화는 선언후 최초로 값을 할당하는 것을 의미한다.

모든 식별자를 사용하려면 반드시 선언이 필요하다. 선언하지 않은 식별자에 접근하면 ReferenceError가 발생한다.

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

console.log(sum); // undefined

var sum;

변수 선언문보다 변수를 참조하는 코드가 앞에 있어서 참조 에러가 발생할 것이 예상되지만 undefined가 출력된다.

그 이유는 변수 선언이 소스코드가 한 줄씩 실행되는 시점, 런타임이 아닌 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 소스코드를 실행하기 전, 소스코드의 평가 과정을 거쳐 실행하기 위한 준비를 한다.

모든 선언문이 평가 과정에 먼저 실행된다. 즉 변수 선언이 어디에 위치하는지 상관없이 어디서든 변수를 참조할 수 있다.

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

📍 변수 선언뿐 아니라 함수, 클래스 등을 사용하는 모든 식별자는 호이스팅된다.

4.5 값의 할당

변수에 값을 할당할 때는 할당 연산자 =를 사용한다.

var sum; // 변수 선언
sum = 50; // 값의 할당

변수 선언과 값의 할당은 하나의 문으로 단축할 수 있다.

var sum = 50;

변수 선언과 할당 하나의 문으로 단축해도 자바스크립트 엔진은 2개의 문으로 각각 나누어 실행한다.

📍 이때 주의할 점은 변수 선은은 런타임 이전에, 값의 할당은 런타임에 실행된다는 점이다.

예시

console.log(sum); // undefined

var sum; // 1. 변수 선언
sum = 50; // 2. 값의 할당

console.log(sum); // 50

변수 선언은 런타임 이전에 실행되고, 값의 할당은 런타임에 실행된다. undefined로 초기화된 상태에서 50으로 재할당 된다.

하나의 문으로 단축해도 결과는 똑같다.

console.log(sum); // undefined

var sum = 50; // 변수 선언 & 값의 할당

console.log(sum); // 50

4.6 값의 재할당

재할당이란 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다.

var sum = 50;
sum = 100; // 값의 재할당

값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없는 것은 상수(const)라 한다. 상수는 한번 정해지면 변하지 않는 값이다.

📍 값을 재할당 하는 것은 기존에 저장되어 있던 공간을 지우는 것이 아닌, 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장하는 것이다.

사용되지 않는 메모리는 가비지 콜렉터에 의해 자동 해제된다. 언제 해제될지는 예측할 수 없다.

4.7 식별자 네이밍 규칙

식별자는 값을 구별해 식별하는 고유한 이름이다. 식별자는 네이밍 규칙을 따라야한다.

• 식별자는 특수문자를 제외한 문자, 숫자, _, $를 포함할 수 있다.
• 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다. (예약어 : 프로그래밍 언어에서 이미 사용되거나 사용될 단어)

📍 변수의 이름은 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해 가독성을 높인다.

네이밍 컨벤션

자바스크립트는 주로 카멜 케이스와 파스칼 케이스를 사용한다.
일반적으로 변수, 함수는 카멜 케이스로 생성자 함수, 클래스는 파스칼 케이스를 사용한다.

// 카멜 케이스
var userName;

// 파스칼 케이스
var UserName;

5장 표현식과 문

---

5.1 값

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

10 + 20 // 10 + 20 → 표현식, 결과 30 → 값

모든 값은 데이터 타입을 갖는다.
변수는 하나의 값을 저장하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 값이다.

var sum = 10 + 20;

sum에 할당되는 것은 10 + 20이 아닌 결과인 숫자 값 30이다.

5.2 리터럴

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

리터럴은 사람이 이해할 수 있는 문자로, 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성한다.

5.3 표현식

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

값으로 평가될 수 있는 문은 모두 표현식이다.

표현식과 표현식의 결과 값은 동등한 관계, 동치다.

표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있다.

var sum = 10 + 20;

// 식별자 표현식 sum은 30으로 평가됨
sum + 30; // 60

문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.

문은 여러개의 토큰으로 구성된다.

토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이다.

var sum = 10 + 20;

// 토큰
// 토큰
var,
sum,
=,
10,
+,
20,
;

문은 명령문이라고도 불리며 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

세미콜론과 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타낸다. → 문장의 마침표

코드 블록은 자체 종결성을 갖기 때문에, 코드 블록 뒤에는 세미콜론을 붙이지 않는다.

📍 세미콜론 사용하는 것을 권장

표현식인 문과 표현식이 아닌 문

표현식인 문과 표현식의 아닌 문을 구별하는 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

var foo; // 변수 선언문은 표현식이 아닌 문

foo = 1; // 할당문은 그 자체가 표현식이며 완전한 문이다. 할당문 = 표현식인 문

📍 완료 값 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다.
이를 완료 값이라 한다. 완료값은 표현식의 평가 결과가 아니다.
할당, 참조 x

✔ 배운점

변수가 어떤 과정을 거쳐서 선언되고 할당되는지 알게 되었다.

표현식과 문에 대해 역시 대충만 알고 넘어갔었는데, 이번 기회에 확실히 이해한 것 같다.

그리고 개발자 도구에 왜 항상 변수를 선언하면 undefined가 출력되는지 궁금했었는데, 그 이유가 완료 값 때문이라는 것을 알게 되었다.