4. 변수

4.1 변수란 무엇인가? 왜 필요한가?

자바스크립트 엔진이 자바스크립트 코드를 계산하기 위해 기호(리터럴 + 연산자)의 의미를 알고 있어야하며 표현식도 해석(파싱)할 수 있어야함.

자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음.
만약 허용시, 값이 저장될 메모리 주소는 코드가 실행될 때 메모리의 상황에 따라 임의로 결정됨. 동일한 컴퓨터에서 동일한 코드를 실행해도 코드가 실행될 때마다 값이 저장될 메모리 주소가 변경 메모리 주소를 통한 직접 접근은 옳지 않음.

기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용하기 위해 변수라는 메커니즘을 제공

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 (값의 위치를 가리킴)

프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행

변수명(식별자)	메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
변수 값	변수에 저장된 값
할당	변수에 값을 저장
참조	변수에 저장된 값을 읽어 들이는 것

4.2 식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름
어떤 값이 저장되어 있는 메모리 주소를 기억해야함.
메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름
-> 변수, 함수, 클래스 등의 이름은 모두 식별자
선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림

4.3 변수 선언

값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있도록 준비하는 것

변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지 보호
변수를 사용하기 위해선 반드시 선언이 필요
-> var, let, const 키워드 사용

var vs let, const

var는 블록레벨 스코프 지원 ❌ 함수레벨 스코프 지원 ⭕️
뜻하지 않게 변수가 전역으로 선언되는 문제점 발생

var키워드를 이용해 변수 선언하기

var score;

1. 선언 단계 : 변수 이름을 등록하고 메모리에 저장할 공간 확보
2. 초기화 단계 : 확보된 메모리 공간에는 undefined 값이 암묵적으로 할당되어 초기화

var 선언은 선언 단계와 초기화 단계가 동시에 진행
만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 어플리케이션에서 사용됐던 값(쓰레기값)이 남아있을 수 있다.
-> var는 암묵적으로 초기화를 수행하므로 안전함.

📌 let과 차이점

var는 호이스팅 단계에서 초기화가 진행되기 때문에 어디서 선언되던 초깃값을 가지고 있어 참조가능
하지만 let의 경우, 호이스팅 단계에서 초기값이 저장되지 않아 선언되기 전에 사용이 불가능함. 호이스팅시 uninitialized로 저장되어있는 경우, 선언시 undefined 초기값이 자동으로 할당됨.
Temporal Dead Zone(TDZ) 공부해보기

만약 선언하지 않은 식별자에 접근시 ReferenceError가 발생함

키워드 (keyword)

자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어

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

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행됨. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점(런타임)에 실행되는 것이 아니라 그 전 단계에서 먼저 실행
== 변수 호이스팅

4.5 값의 할당

var score; // 변수 선언
score = 80; // 변수 할당

var score = 80; 

하나의 문장으로 단축해도 변수 선언과 변수 할당은 각각 실행됨. 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 런타임에 실행됨.

변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값을 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장

4.6 값의 재할당

var로 선언한 변수는 현재 변수에 저장된 값을 버리고 새로운 값을 저장(재할당)할 수 있다. 만약 값을 재할당할 수 없어 변수에 저장된 값을 변경할 수 없다면 상수(constant) -> const 이용

앞서 언급한 대로 이전 값이 있던 곳에 값을 바꾸는 것이 아니라 새로운 메모리 공간을 확보하고 새 값을 저장한다. 이 때 이전 값이 저장되어 있던 저장 공간이 어떤 변수와도 연결되어 있지 않다면, 가비지 콜렉터에 의해 메모리에서 자동 해제됨.

가비지 콜렉터

애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 어떤 식별자도 참조하지 않는 메모리 공간을 해체하는 기능
자바스크립트는 가비지콜렉터를 내장하고 있는 매니지드 언어로 가비지콜렉터를 통해 메모리 누수 방지

unmanaged language vs managed language

unmanaged language

• 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free() 같은 저수준 메모리 제어 기능을 제공
• 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만 치명적 오류 생산 가능성도 존재

managed language

• 메모리 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당
• 개발자가 명시적으로 메모리 할당 및 해제 불가능
• 일정한 생산성 확보할 수 있다는 장점
• 성능면에서 손실 발생

4.7 식별자 네이밍 규칙

1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능
2. 단, 숫자로 시작은 허용되지 않음.
3. 예약어는 식별자로 사용할 수 없음.
4. 쉼표를 이용해 하나의 문에서 여러 변수를 한번에 선언할 수 있다.
5. ES5부터 유니코드를 허용하나 권장되지 않는다.
6. 대소문자를 구별

네이밍 컨벤션의 종류

네이밍 컨벤션	예시	설명
카멜 케이스	camelCase	첫 글자는 소문자로 다음 단어는 대문자로 연결
스네이크 케이스	snake_case	언더바를 이용해 단어간 연결
파스칼 케이스	PascalCase	단어의 첫글자를 항상 대문자로 연결
헝가리언 케이스	typeHungarianCase	변수명 앞에 변수의 타입을 작성

5. 표현식과 문

5.1 값

값 : 식을 해석해서 값을 생성하거나 참조되어 생성된 결과

5.2 리터럴

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

• 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴값을 평가해 값을 생성 - 리터럴은 값을 생성하기 위해 미리 약속한 표기법

5.3 표현식

값으로 평가될 수 있는 문
표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조
값으로 평가될 수 있는문은 모두 표현식
표현식과 표현식이 평가된 값은 동등한 관계(동치)

5.4 문

문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
토큰 : 문은 여러 토큰으로 구성, 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미

5.5 세미콜론과 세미콜론 자동 삽입 기능

0개 이상의 문을 중괄호로 묶은 코드블록({}) 뒤에는 세미콜론을 붙이지 않는다.
-> 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문
자바스크립트 엔진은 세미콜론 자동 삽입 기능이 암묵적으로 수행

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

표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수 있음.

• 표현식인 문은 값으로 평가될 수 있는 문
• 표현식이 아닌 문은 값으로 평가될 수 없는 문

둘을 구분하는 가장 간단하고 명료한 방법은 변수에 할당해보는 것. 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다.