변수

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

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

기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 사용한다.

var userID = 1; // 변수 이름: userID, 변수 값: 1
var userName = 'kwon'; // 변수 이름: userName, 변수 값: kwon

console.log(userID); // 1
console.log(userName); // kwon

변수에 값을 저장하는 것: 할당(대입, 저장)하다
변수에 저장된 값을 읽어 들이는 것: 참조하다

저장된 값의 의미를 파악할 수 있는 변수 이름은 가독성을 높이는 부수적인 효과도 있다.

메모리

데이터를 저장할 수 있는 메모리 셀의 집합체

메모리 셀 하나의 크기는 1바이트(8비트)이며, 1바이트 단위로 데이터를 저장하거나 읽어들인다.

각 셀은 고유의 메모리 주소를 갖고, 연산할 때의 피연산자와 연산 결과 값 모두 메모리 상의 임의의 위치(메모리 주소)에 2진수로 저장된다.

CPU가 연산한 결과는 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없지만 메모리 주소로 값에 직접 접근하는 것은 치명적 오류를 발생시킬 수 있는 매우 위험한 일이다.

또한 코드가 실행될 때마다 값이 저장될 메모리 주소는 매번 변경된다.

따라서 변수를 통해 안전하게 값에 접근할 수 있다.

식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름
(변수 이름 / 메모리 주소에 붙인 이름)

식별자는 값이 아닌 메모리 주소를 기억하고 있다. 따라서 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미.

위 userID과 userName은 식별자이며 각각의 메모리 주소인 0x0669F342과 0x0654F913을 기억하고 있다.

변수 선언

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

변수 선언은 변수를 생성하는 것, 변수를 사용하려면 반드시 선언이 필요하다.

변수 선언할 때 사용하는 키워드: var, let, const

var의 단점

• var
  블록 레벨 스코프를 지원하지 않고, 함수 레벨 스코프를 지원함. 이로인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 함.
• let, const
  var 키워드의 여러 단점을 보완하기 위해 ES6에서 도입함.

자바스크립트 엔진의 변수 선언 단계

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

• 초기화
  변수가 선언된 이후 최초로 값을 할당하는 것.
  var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다. 따라서 어떠한 값을 할당하지 않아도 undefined라는 값을 가진다.

// 방법 1
var score; // 변수 선언: 선언 단계 + 초기화 단계 / 값: undefined
score = 80; // 값의 할당

// 방법 2
var score = 80; // 변수 선언 + 값의 할당

선언하지 않은 식별자에 접근할 경우, ReferenceError(참조 에러)가 발생한다. ReferenceError는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러.

console.log(myName); // ReferenceError

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

자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다.
인터프리터에 의해 한 줄씩 순차적으로 코드가 실행되지만, 변수 선언은 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다.

자바스크립트 엔진은 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.

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

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

ReferenceError(참조 에러)가 발생할 것 같지만 undefined이 출력된다.

값의 할당

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

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

console.log(score); // undefined

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

console.log(score); // 80

값의 재할당

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

var score = 80; // 변수 선언 + 값의 할당
score = 90; // 값의 재할당

• var 키워드로 선언한 변수는 값을 재할당할 수 있다.
• const 키워드는 재할당이 금지된다. 따라서 상수(한번 정해지면 변하지 않는 값)를 표현할 수 있다.

이전 값인 80을 저장되어 있던 메모리 공간에서 지우고 그 공간에 재할당 값 90을 저장하는 것이 아닌 새로운 메모리 공간을 또 확보하고 그 공간에 저장한다.

불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

식별자 네이밍 규칙

식별자는 다음과 같은 네이밍 규칙을 준수해야 한다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함할 수 있다.
• 단, 식별자는 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다. ex) class, const, if, this, new ...

// 규칙 준수
var score, $person, name_2;

// 규칙 위반
var first-name, 1_score, this;

변수는 쉼표(,)로 여러 개를 한번에 선언할 수 있지만 가독성이 나빠지므로 권장하지는 않는다.

var firstname;
var firstName;
var FIRSTNAME;

자바스크립트는 대소문자를 구별하므로 위 변수는 각각 별개의 변수다.

네이밍 컨벤션

하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 구분하기 위해 규정한 명명 규칙

// 카멜 케이스
var firsNname;

// 스네이스 케이스
var first_name;

// 파스칼 케이스
var FirstName;

// 헝가리언 케이스
var strFirstName; // type + identifier

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