01. 변수

📌 1-1 변수의 정의

변수란 사전적 의미로 바뀔 수 있는 값으로 메모리 공간에 저장하는 하나의 값이다.

💡 하나의 값이라고 표현 하였지만 변수에 여러개의 값을 저장하는 방법은 크게 2가지로 객체나 배열을 사용하여 그룹화하여 하나의 값처럼 사용할 수 있다. 배열안에 객체을 넣어서 객체 배열도 가능하다.

📌 1-2 변수의 선언

JS에서의 변수의 선언 방법은 크게 3가지이다. ES6이전에 사용하였던 var를 사용하거나 ES6이후로는 const와 let이 추가 되었다.

💡 var 키워드의 문제점은 크게 2가지로 나뉜다. 호이스팅(Hositing)과 함수스코프(Function Scope)라는 사실이다.

📌 1-3 호이스팅(Hositing)이란?

사전적 의미로는 끌어올리다. 라는 뜻으로 변수가 아래에 선언이 되어있어도 최상단으로 끌어 올려진 것처럼 작동하는 것을 호이스팅(Hositing)이라고 한다.

var name = "YHJ"; // 변수를 선언하고 값을 할당함
console.log(name); // YHJ출력
// 호이스팅(Hositing)
console.log(name); // undefined 출력
var name = "YHJ"; // 변수를 아래에서 선언

💡 생각에서는 에러가 출력되어야 하지만 에러가 출력되지 않고 undefined가 출력된다.
💡 자바스크립트 실행컨텍스트에서는 동기적으로 실행되는 것은 순서대로 Stack이라는 공간에 저장 비동기적으로 실행되는 것은 Queue에 저장되어 Stack이 완료되어야 Queue가 호출된다. 나중에 자세히 올려볼 예정이다. 이러한 이유로 위에서 부터 아래로 위에 있는 코드가 실행된다. 변수는 Heap이라는 공간에 저장된다.
💡 이처럼 변수선언이 런타임 이전에 먼저 실행된것으로 이것이 호이스팅(Hositing)이라고 한다.
💡 사실 let과 const도 똑같이 호이스팅이 발생하지만 에러가 출력된다 그것은 나중에 자세히 올려볼 예정이다.

📌 1-4 변수의 재할당

변수의 재할당이라는 것은 일단 크게 2가지는 알아야한다. 상수와 변수의 개념이다. 상수(Constant)란 불변의 값을 이야기한다. 변수(Variable) 계속 변하는 값이다. JS에서 상수는 const를 사용하고 변수는 let과 var를 사용한다.

var name = "YHJ"; // 변수 선언과 할당 (let도 가능)
console.log(name); // YHJ출력
name = "KKK"; // 변수의 재할당
console.log(name); // KKK출력

const name = "YHJ"; // 상수 선언과 할당
console.log(name);  // YHJ출력
name = "KKK"; // 상수의 재할당
console.log(name); // 오류출력

✔ 에러메세지가 출력된다.

📌 1-5 변수의 생명주기(?)

생명주기라고 표현을 해야하는지는 모르겠지만 변수는 이와 같은 단계로 진행된다.

💡 값의 선언 -> 값의 초기화 -> 값의 할당(상수는 여기서 종료) -> 값의 재할당

var name = "YHJ"; // 값의 선언과 할당
console.log(name); // YHJ출력
name = "KKK"; // 값의 재할당
console.log(name); // KKK출력

💡 선언과 초기화와 위에서 호이스팅(Hositing)의 결과가 이해가 안되시는 분들도 위해 단계별로 나타내 보았다.

var name; // 값의 선언 (선언이후 바로 값이 초기화된다)
console.log(name) // 값의 초기화 undefined 출력 (1-3의 호이스팅 부분에서는 바로 이부분이 출력) 
name = "YHJ" // 값의 할당
console.log(name) // YHJ출력
name = "KKK"; // 값의 재할당
console.log(name); // KKK출력