[딥다이브] - 4장 변수

Sean yang~~·2022년 12월 5일

자바스크립트

목록 보기

22/25

변수 (variables)

1️⃣ 변수란 무엇인가?

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
변수는 하나의 값을 저장하기 위해 확보한 메로리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
메모리가 저장된 값의 위치를 가리키는 상징적인 이름이다.

var result = 10 + 20;

위 코드는 10과 20을 메모리 공간에서 가져와 + 연산을 하고 30의 값을 다시 메모리에 넣는데, result라는 변수에 30이라는 값을 다시 메모리가 넣는데, result 라는 변수에 30이라는 값이 넣은곳의 주소를 가리키고 있다.
변수 명을 식별자 라고 부른다. 위 코드에서 result 가 변수명 이자 식별자 이다.

2️⃣ 변수 선언

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

var는 키워드로 자바스크립트 엔진이 var 키워드를 만나면 뒤에오는 변수 이름으로 새로운 변수를 선언한다.

키워드란 자바스크립트 엔진이 수행할 동작을 미리 규정한 일종의 명령

변수 선언과 초기화 단계

var score; // 변수 선언
score = 10; // 값의 할당

변수 선언 단계에서 변수 이름 score를 등록한다.
초기화 단계에서 undefined로 암묵적인 초기화가 자동으로 수행된다.
런타임 시점에 undefined로 초기화 되어있는 메모리에 값 10을 할당한다.

호이스팅

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

위와 같은 코드는 선언문이 호출문보다 아래에 있음에도 불고하고 참조에러가 발생하지 않고 undefined가 출력된다.
그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되지 때문이다.

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수, 함수 등)을 소스코드에서 찾아내 먼저 실행한다. 그리고 소스코드의 평가과정이 모두 끝나면 비로소 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다.

3️⃣ 식별자 네이밍 규칙

식별자는 특수문자를 제외한 문자, 숫가, 언더스코어(_), 달러기호($)를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러기호로 시작해야 한다.
숫자로 시작하는 것은 허용하지 않는다.
예약어는 식별자로 사용할 수 없다.
한글, 일본어등 사용 가능하다.
대소문자를 구분한다.
변수나 함수는 카멜 케이스
생성자 함수, 클래스 이름에는 파스칼 케이스

사용 가능한 변수

var person, $elem, _name, first_name, vla2;

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

var x = 3; // x의 의미를 알 수 없다.
var score = 100; // 점수를 의미한다는 의도가 명확하다.

// 경과 시간, 단위는 날짜다
var d; // bad
var elapsedTimeInDays; // good

변수나 함수의 이름에는 카멜 케이스를 사용하고 생성자 함스, 클래스의 이름에는 파스칼 케이스를 사용한다.

// 카멜 케이스 (camelCase)
var firstName;

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

// 파스칼 케이스 (PascalCase)
var FirstName;

// 헝가리언 케이스 (typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

4️⃣ var VS let

var

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
즉, 스코프에 변수를 등록(선언)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다.
따라서, 스코프에 변수가 존재하기 때문에 변수 선언문 이전에 변수에 접근하여도 에러가 발생하지 않고 undefined를 반환한다.
이러한 현상을 호이스팅이라고 한다.

let

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
즉, 스코프에 변수를 등록(선언) 하지만 초기회 단계를 변수 선언문에 도달했을 때 이루어 진다.
이 떄문에, 초기화 이전에 변수에 접근하려고 하면 참조에러(ReferenceError)가 발생한다.
스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 일시적 사각지대(TDZ Temporal Dead Zone) 라고 한다.