[Javascript lv.2] 1. 변수 그리고 친구들

변수 Variable

주의사항

첫째, 변수는 문자와 숫자, $와 _만 사용
둘째, 첫 글자는 숫자가 될 수 없습니다.
셋째, 예약어는 사용할 수 없습니다.
넷째, 가급적 상수는 대문자로 알려주기
다섯째, 변수명은 읽기 쉽고 이해할 수 있게 선언

const

절대로 바뀌지 않는 상수
바꾸려고 할 때 error 발생한다.
ex) 파이나 최댓값, 생일 등을 바뀌지 않는 값을 선언할 때 사용한다. 대문자로 선언하자!

<script>
const PI = 3.14
const birthDay = "000528"
</script>

let

변할 수 있는 값을 선언할 때 사용한다.

<script>
let name = "Eden";

let age = 20;
</script>

(var 부분 먼저 보세요!) 아래 코드를 봐줘.

<script>
console.log(name);//ReferenceError

let name = "Eden";
</script>

let은 var처럼 *호이스팅할 수 없는 걸까? 그것은 아니다. 근데 왜 동작하지 않았을까?

var

<script>
var name = "Eden";
console.log(name);//Eden

var name = "Brie";
console.log(name);//Brie
</script>

var는 한 번 선언된 변수를 다시 선언할 수 있다.

<script>
var name;
console.log(name);//undefined

name = "Eden"//할당
</script>

var는 선언하기 전에도 사용할 수 있다.

var로 선언된 모든 변수는 코드가 실제로 이동하지는 않지만 최상으로 끌어 올려진 것처럼 동작한다.
이를 호이스팅(hoisting)이라고 한다.
*호이스팅(hoisting) : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

그런데 값은 undefined가 나온다.
그것은 선언은 호이스팅되었지만 할당은 호이스팅되지 않기 때문이다. name이라는 변수는 올려지고, "Eden"이라는 값은 그 자리에 있다.

(let으로 올라가세요!)

let, const의 호이스팅 그리고 TDZ

바로 Temporal Dead Zone, 줄여서 TDZ라고 하는 것 때문이다. 이것이 뭘까요?

TDZ영역에 있는 변수들은 사용할 수 없다.

<script>
console.log(name) //TDZ
const name = "Eden"// 함수 선언 및 할당
console.log(name)//사용 가능
</script>

let과 const는 TDZ의 영향을 받아 할당하기 전에는 사용할 수 없다. 이는 코드를 예측가능하게 하며 잠재적인 버그를 줄일 수 있다.

호이스팅

앞서 설명했지만 다시 해보자면,
코드가 실제로 이동하지는 않지만 최상으로 끌어 올려진 것처럼 동작하는 것, 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것을 호이스팅(hoisting)이라고 한다.

<script>
let age = 20;

function showAge(){
	console.log(age);
}
</script>

//문제 발생
<script>
let age = 20;

function showAge(){
	console.log(age); //TDZ
   
   let age = 19; //호이스팅을 일으킴
}
</script>

주의할 점이, let이 호이스팅되지 않는다고 생각하지만

호이스팅은 스코프단위로 있고, 위 코드에서는 함수 내부가 스코프다. let으로 선언한 두 번째 변수가 호이스팅을 일으킨다. 만약 호이스팅이 일어나지 않았다면 함수 밖에서 선언한 age = 29가 정상적으로 출력되었을 것이다.

변수의 생성과정

변수는 3단계의 생성단계를 거친다.
1. 선언 단계
2. 초기화 단계
3. 할당 단계

var의 생성과정

var는 선언과 초기화가 동시에 진행된다.

var
1. 선언 및 초기화 단계//초기화 undefined를 할당해주는 단계
2. 할당 단계

그래서 할당 전에 호출하면 error를 내지 않고 undefined가 나온다.

let의 생성과정

let
1. 선언 단계
2. 초기화 단계
3. 할당 단계

let은 선언 단계와 초기화 단계가 분리되어 진행된다. 호이스팅 되면서 선언 단계가 이루어지지만 초기화 단계는 실제 코드에 도달했을 때 되기 때문에 ReferenceError가 발생한다.

const

const
1. 선언 + 초기화 + 할당

const는 선언과 할당이 동시에 된다.
let과 var는 선언만 하고 나중에 할당하는 것을 허용한다. let과 var는 값을 바꿀 수 있기 때문에 다르다.

스코프 scope

var : 함수 스코프 (function-sccoped)

유일하게 벗어날 수 없는 스코프가 함수.

let, const : 블록 스코프 (block-scopped)

블록 스코프틑 모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 접근할 수 없다는 의미

즉, 코드 블록 내부에서 선언한 변수는 지역변수다.
함수, if문, for문, while문, try/catch문 등.

var는 이제 사용하지 않고,
let과 const를 사용한다. 예측 가능한 결과를 내고 버그를 줄일 수 있다!