[Javascript] Javascript 변수 - var, let, const

JavaScript 변수

---

CPU에서 연산을 수행하고, 데이터는 memory에 저장되어 있다. CPU가 메모리에 엑세스할 때 바이트 단위로 엑세스를 하는데, 여기서 memory cell은 1바이트씩 이루어진 메모리의 공간을 의미한다.

메모리의 주소는 16진수로 시작된다. 메모리에 데이터를 가져와서 CPU가 특정 연산을 수행한 후 결과를 새로운 공간에 저장한다.
메모리를 넣고 빼고 저장하기 위해서는 메모리의 주소를 알아야한다.
메모리 주소는 쉽게 알 수 없고, 메모리에 직접적인 접근이 어렵기 때문에 메모리 주소를 reference를 할 수 있는 변수를 사용해야 한다. (C언어를 제외한 대부분의 언어들은 메모리에 직접 접근이 어렵다.)

변수(식별자)

변수 → 식별자(identifier)
식별자가 가지고 있는 값은 실제 값이 아니라 메모리 주소다.
식별자는 당연히 Naming rule이 있다.

식별자의 Naming Rule

1. 특수문자 중에서 ( _, $ )만 가능하다.
2. 숫자로 시작하면 안된다.
3. 특수문자는 사용할 수 없다.

변수 생성 (var, let, const)

---

var		스코프(변수의 유효 범위)를 잡을 때, 함수 레벨 스코프를 잡는다. (function level scope)	두 가지의 변수의 차이점은 변수의 유효 범위이다.
let	es6가 생기고 들어왔다.	스코프(변수의 유효 범위)를 잡을 때, 블록 레벨 스코프를 잡는다. (block level scope)
const (재할당금지)

var

var score;

 

해당 주소의 값에 undefined가 들어가게 된다.

undefined

→ undefined는 Primitive value(원시값) 중 하나이다.
→ undefined는 JS Engine에 의해서 사용된다.
→ 따라서 개발자가 직접 사용하는 것은 지양된다.
→ 변수를 초기화 할 때 undefined가 사용된다.

식별자들은 execution context(실행 컨텍스트)에 key / value 형태로 저장된다.
(위 코드에서는 score라는 식별자와 메모리 주소가 key / value 형태로 저장된다)

변수 호이스팅 (variable hoisting)

---

console.log(score);

var score;

// 실행결과 : undefined

[코드 살펴보기]

참조 에러가 나는 것이 아니라, 해당 변수가 가지고 있는 값인 undefined가 출력된다.
자바스크립트는 식별자를 먼저 일일히 찾은 후에 코드를 실행한다.

아래에서 선언된 변수가 위로 올라가는 것이 발생하는데, 이것을 호이스팅이라고 한다.
자바스크립에서는 변수 호이스팅이 발생한다.

변수 호이스팅

변수 호이스팅은 변수 선언을 runtime 이전에 수행하는 것이다.
마치 변수의 선언이 해당 scope의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

자바스크립에서 이 현상은 모든 식별자(함수, 클래스 등)에서 다 일어난다.

var 키워드로 변수 선언 시 주의점

var x = 1;
var y = 2;

// var keyword로 변수의 중복선언이 가능
var x = 100; // 가능, var keyword가 없는 것처럼 동작
var y; // 가능. 초기화 구문이 없으면 무시

 

1. 중복 선언이 가능하다.
2. 스코프를 잡을 때, 함수 level의 scope를 생성한다.

var 키워드는 함수 레벨 스코프를 생성한다

var x = 1; // 전역변수

if(true) {
    var x = 100; // 
}

console.log(x); // 100

// 블록 안에 있는 x와 전역 변수의 x가 같아
//  x = 100이 재할당된다.

var i = 100;

for (var i=0; i<5; i++){
    console.log(i);
}

console.log(i); // 100이 아닌, 5가 된다.

함수 내에 var 변수 선언 시

var x = 1; //전역변수

function myFunc() {
    var x = 100; // 함수 레벨 스코프
    console.log(x); // 100

}

console.log(x); // 1
myFunc();

===================================

var x = 1; //전역변수

function myFunc() { // 함수 내에서 호이스팅 일어남
	console.log(x) // undefined
    var x = 100;
}

console.log(x); // 1
myFunc();

let

---

- es6에서 등장한 변수 키워드다.
- const는 재할당을 금지시키는 변수를 만들 때 사용한다.

let과 const 특징

1. 같은 scope 내에서 변수를 중복으로 선언이 안된다.
2. block-level 스코프를 생성한다.

 

let score = 100;
// 하나의 코드(블혹) 시작
{
    let score = 10;
    let myVar = 1;
}
// 블록이 끝나면 변수 날라감
console.log(myVar); // 에러가 발생

// 두개가 다른 변수로 인식하게 된다.
// 블록 레벨 스코프

 

3. let을 이용하면, 호이스팅이 안되는 것처럼 동작한다.

 

console.log(myVar); // undefined가 아닌 에러 발생

let myVar = 100; 
// 실제로 호이스팅은 일어나지만
// 안되는 것처럼 보여진다.

왜?
let은 처음 선언되었을 때, undefined가 메모리에 같이 초기화 되지 않는다.
따라서 let은 초기화(undefined)가 되지 않는다.

그래서 메모리에 let 변수가 있긴하지만 undefined가 들어있지 않아 호이스팅을 할 때 변수가 정의되지 않은 상태가 된다 → 이는 호이스팅이 안 된 것처럼 보일 수 있다.

 

let myVar = 1; //global varialbe

{ // 블록 레벨 스코프 시작( 블록 내에 호이스팅 시작 )
    console.log(myVar); // myVar은 변수를 사용할 수 없는 상태이므로 참조에러 발생
    let myVar = 100;
}

 

let은 블록 레벨 스코프이기 때문에 블록 내에 변수는 전역 변수와 다른 변수가 된다.
이때 블록이 시작되면 호이스팅이 시작되는데 let 변수는 초기화가 되지 않기 때문에 변수를 사용할 수 없게되어
호이스팅은 되었지만 마치 호이스팅이 안된 것처럼 보이게 된다.

4. let keyword로 변수를 선언하면 변수를 일시적으로 사용할 수 없는 구간이 발생되는데 이를 Temporal Dead Zone이라 한다.

const

---

상수를 선언할 때 사용하는 키워드이다. ( 변수에 대한 재할당을 금지한다 )
→ 값의 재할당 금지되는 것이 값이 바뀌지 않는다는 의미가 아니다.

변수의 값 할당

var score;

메모리 주소 어딘가에 undefined가 들어가 있을 것이다.
대부분의 원시 값은 불변의 특성을 가진다.
따라서 undefined는 변할 수 없다. 

 

var score;
score = 80;

 

 

만약, score가 선언된 이후 80이라는 값이 주어졌을 때,
메모리 상에 같은 주소 안에 undefined → 80으로 변화하는 것이 아니라

80이 다른 곳에 저장되고 그 주소를 score가 가르키게 된다.

왜? primitive value(원시값)인 undefined는 불변의 값이기 때문이다.
→ primitive value는 immutable(불변의) 특성이 있기 때문이다.

→ 따라서 아무도 가리키지 않은 undefined는 garbage collection 대상이 된다.

식별자 Naming Rule

1. 특수문자 안된다 ( _, $ 제외)
2. 숫자로 시작 안됨

Naming Convention

1. camel case
→ firstName
2. snake case
→ first_name
3. Pascalcase
→ FirstName
4. type Hungarian case
→ strFirstName (이름 앞에 데이터 타입을 붙여서 나타냄)

자바스크립트의 변수 이름은 camelcase를 사용하고, 생성자 함수나 클래스 이름은 Pascalcase를 사용한다.