변수

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

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이며
값의 위치를 가르키는 상징적인 이름입니다.

let userId = 1; // userId : 변수 이름, 1 : 변수 값
let userName = '성석민'; // userName : 변수 이름, 성석민 : 변수 값

console.log(userId); // 1

변수 이름은 값이 저장된 메모리 공간에 붙인 상징적인 이름으로 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환합니다.

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

식별자

변수 이름을 식별자라고도 하며 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 의미한다. 식별자는 값이 저장되어 있는 메모리 주소를 기억해야 합니다.

위의 userId와 userName은 식별자이며 값이 1과 성석민이 저장되어 있는 메모리 주소 0x04223C3와 0x011332F1를 기억합니다.

✅ 식별자는 값이 아니라 메모리 주소를 기억합니다.

변수 선언

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

자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언합니다.

ES6 이전에 변수를 선언할 수 있는 방법은 var키워드가 유일했지만 ES6 이후에 var키워드의 문제점을 보완하기 위해 let과 const키워드가 도입되었습니다.

var의 문제점

• 함수 레벨 스코프에 따라 호이스팅이 제대로 이루어 지지 않습니다.
• 변수의 중복 선언이 가능해 의도치 않게 변수 값의 변경이 일어날 가능성이 큽니다.

변수의 선언 단계

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

// 방법 1
var userName; // 선언 단계 + 초기화 단계

userName = '성석민'; // 할당 단계

// 방법 2
var userName = '성석민'; // 선안 단계 + 초기화 단계 + 할당 단계

✅ 변수를 사용하려면 반드시 변수 선언이 필요합니다. 만약, 변수를 선언하지 않고 식별자에 접근하면 아래와 같이 ReferenceError(참조 에러)가 발생합니다.

console.log(userNickname); // ReferenceError

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

자바스크립트는 컴파일 언어가 아닌 인터프리터 언어 입니다.

console.log(identifier) // undefined

var identifier;

코드를 한 줄씩 순차적으로 실행하기 때문에 console.log(identifier)는 ReferenceError(참조 에러)가 출력되어야 하는게 맞다고 생각했겠지만 undefined가 출력됩니다.

그 이유는 변수 선언이 코드가 한 줄씩 순차적으로 실행되는 시점 (런타임)이 아니라 이전 단계에서 먼저 실행되기 때문입니다. 즉, 자바스크립트 엔진은 변수 선언이 코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행합니다.

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

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

값의 재할당

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

var score; // 변수 선언

score = 80; // 값 할당

score = 90; // 값 재할당

위의 코드를 실행하면 아래의 이미지와 같이 메모리의 값이 변합니다.

Q : undefined와 80은 더이상 쓰이지 않는데 메모리를 낭비하는 거 아닐까요 ??
A : 자바스크립트의 가비지 콜렉터에 의해 자동으로 지워집니다.

✅ 3가지 키워드 중 var, let은 재할당이 가능하지만 const는 재할당이 불가능합니다.

// var
var aEmail = 'abcdefg@naver.com';

aEmail = 'hijklmn@naver.com'; // 값을 재할당 할 수 있다.

// let
let bEmail = 'abcdefg@gmail.com';

bEmail = 'hijklmn@gmail.com'; // 값을 재할당 할 수 있다.

// const
const cEmail = 'abcdefg@daum.net';

cEmail = 'hijklmn.daum.net'; // 오류 발생

식별자 명명 규칙

식별자의 이름을 정하는데에도 규칙이 있습니다.

1. 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있습니다.
2. 단, 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)로 시작해야 합니다.
3. 예약어는 식별자로 사용할 수 없습니다. (class, delete, this, new ...)

🟢
var firstName;
var $firstName;
var first_name;

❌
var 1st;
var this;
var class;

네이밍 컨벤션

자바스크립트는 카멜 케이스(camelCase)를 사용합니다.

3가지 유형의 네이밍 컨번센이 자주 사용됩니다.

// camelCase
var firstName;

// snake_case
var first_name;

// PascalCase
var FirstName;

틀린 부분이 있거나 보충해야 할 내용이 있다면 댓글이나 DM(sungstonemin)으로 알려주시면 감사하겠습니다😄