[JS] 식별자, 호이스팅, 키워드(var, let, const) etc.

1. 변수란

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

1) 변수 선언

var score;

• 변수 선언이란 변수를 생생하는 것
• 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
• 변수를 사용하려면 반드시 선언이 필요하고, 변수를 선언할 때는 var, let, const 키워드를 사용함

 

2. 식별자란 ⭐️

• 식별자(identifier)
  • 변수의 이름, 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 값이 아니라 메모리 주소를 기억함
    
• 식별자라는 용어는 변수 이름에만 국한해서 사용하지 않음. (예를 들어, 변수, 함수, 클래스 등의 이름은 모두 식별자임)
• 식별자인 변수 이름으로는 메모리 상에 존재하는 변수 값을 식별할 수 있고, 함수 이름으로는 메모리 상에 존재하는 함수를 식별할 수 있음
  
  
• 즉, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부름
  
  

1) 식별자 네이밍 규칙

- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음
- 단, 숫자로 시작하는 것은 허용하지 않음

2) 네이밍 컨벤션 종류

// 카멜 케이스 (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 옵저버블

3) 리터럴이란?

- 리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(=notation)

 

3. 호이스팅이란 ⭐️⭐️

console.log(score); // undefined;

var score; // 변수 선언문

• 변수 호이스팅
  • 런타임 이전에 실행 컨텍스트에 의해 소스코드 평가 과정에서 스코프에 등록되고 이를 마치 코드의 제일 위에 있는 것처럼 변수가 어디에 위치하던지와 상관없이 어디서든지 변수를 참조할 수 있는 것처럼 만드는 특징
  • (js 엔진은 변수 선언(을 포함한 모든 선언문)이 소스 코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행함)
• 사실 변수 선언뿐만 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 됨.(모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문)

 

4. var 키워드란 

• var 키워드는 뒤에 오는 변수 이름을 새로운 변수를 선언할 것을 지시하는 키워드임
• 키워드란 자바스크립트 코드를 해석하고 실행하는, 자바스크립트 엔진이 수행할 동적을 규정한 일종의 명령어 (자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행함)
• 예를 들어, var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언
  
  
• 변수를 선언한 이후, 아직 변수에 값을 할당하지 않았지만 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화됨
  
  

1) var 키워드 문제점 ⭐️

① 변수 중복 선언 허용

function foo() {
  var x = 1;
  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
  // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
  var x = 2;
  console.log(x); // 2
}
foo();

- var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용되는데, 이는 의도치 않게 변수값이 재할당되어 변경되는 부작용을 발생시킴

② 함수 레벨 스코프

case 1 : var 키워드로 변수 선언

var x = 1;

if (true) {
  // var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
  // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
  // 따라서 x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
  // 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
  var x = 10;
}
console.log(x); // 10


case 2 : var 키워드로 for문 안의 변수 선언

var i = 10;

// for 문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5

 - 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만듬. 이러한 특성을 블록 레벨 스코프라고 함.
- 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정함(이런 특성을 함수 레벨 스코프라고 함)

③ 변수 호이스팅

console.log(score); // undefined;

var score; // 변수 선언문

- var 키워드로 선언된 변수는 선언과 동시에 undefined로 초기화되며, 런타임 즉 소스코드 평사 단계에서 스코프에 등록되기 때문에 실행 단계에서 실제 값이 할당되지 않더라도 undefinded를 가짐

 

5. let 키워드란 

• var 키워드의 단점을 보완하기 위해 ES6에서 도입된 새로운 키워드임
  
  

1) let 키워드 vs. var 키워드 ⭐️⭐️

① 변수 중복 선언 금지

let bar = 123;
// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

- var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않음. 이때 변수를 중복 선언하면서 값까지 할당하면 의도치 않게 먼저 선언된 변수 값이 재할당되어 변경되는 부작용이 발생함.
- 하지만 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러(SyntaxError)가 발생함

② 블록 레벨 스코프

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

- let 키워드를 통해 선언된 변수는 블록 레벨 스코프를 따름
- 함수 뿐만 아니라 모든 코드 블록 내에 선언된 변수(지역 변수)는 해당 유효 범위(스코프)를 벗어나면 사용할 수 없음

③ 변수 호이스팅 ⭐️⭐️
- let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작함

console.log(foo); // Cannot access 'foo' before initialization
let foo;

- var 키워드였다면 변수 호이스팅에 의해 런타임 이전에 변수가 선언되어 undefined를 출력해야함. 하지만 let 키워드에서는 참조에러가 나타남

- let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행됨.
- 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행됨.
- 만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생함

- let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없음.
- 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ: Temporal Dead Zone)라 부름

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각 지대에서는 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

④ 전역 객체와 let

let x = 1;

// let, const 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아니다.
console.log(window.x); // undefined
console.log(x); // 1

- let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님(즉, window.foo와 같이 접근할 수 없음)

 

6. const 키워드란

- const 키워드는 상수(constant)를 선언하기 위해 사용하지만, 반드시 상수만을 위해 사용하지는 않음
- const 키워드의 특징은 let과 대부분 동일

1) const 키워드 특징 ⭐️

① 선언과 초기화

const bar = 1;
console.log(bar); >>> 1

const foo;
console.log(foo); >>> // SyntaxError: Missing initializer in const declaration

- const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 함. 안그럼 문법 에러(SyntaxError) 발생

② 재할당 금지

const foo = 1;
foo = 2; // TypeError: Assignment to constant variable.

- var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지임

③ 상수

// 세율을 의미하는 0.1은 변경할 수 없는 상수로서 사용될 값이다.
// 변수 이름을 대문자로 선언해 상수임을 명확히 나타낸다.
const TAX_RATE = 0.1;

// 세전 가격
let preTaxPrice = 100;

// 세후 가격
let afterTaxPrice = preTaxPrice + preTaxPrice * TAX_RATE;

console.log(afterTaxPrice); // 110

- const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없음
- 원시 값은 변경 불가능한 값이므로 재할당 없이 값을 변경할 수 있는 방법이 없기 때문임
- 이러한 특징을 이용해 const 키워드를 상수를 표현하는 데 사용