변수 선언var, let, const 중에 뭘 써야 할까?

JS는 변수 선언에 세 가지 예약어를 쓸 수 있다.

 

var은 global(광역) 변수.

어디서 선언하든지, 모든 스코프에서 사용 가능.

하다고 학원에서 배웠었다.

 

그런데!

실제로는 함수 안에서 정의한 var 변수는 지역변수(local variable)로

해당 스코프를 벗어난 영역에서 사용할 수 없었다.

결론은 var도 스코프가 적용된다.

 

그렇다면 왜 let과 const가 탄생하게 된 걸까?

1. 하위 스코프에서의 변경사항이 상위 스코프에도 영향을 끼침

 

var myName을 광역변수로 설정.

이후 함수에서 myName의 값을 변경하도록 만들고 실행하면

해당 함수 바깥에서도 myName의 값이 변경되어 있는 걸 확인.

즉, 로컬 레벨에서의 변경이 글로벌 레벨까지도 적용된다.

 

2. 글로벌 변수와 같은 이름의 로컬 변수를 선언할 수 있음.

이번에는 함수 안에 또 함수를 만들었다.

거기서 age에 새로운 값을 대입한다.(앞서 살펴봤듯이, 해당 스코프 밖에서도 이 값은 변경되어 있을 것이다)

그리고 1행에서 이미 선언한 myName 변수와 같은 이름의 변수를

var을 이용해서 선언한다.

 

결과는 터미널 창에서와 같다.

함수 안인 4에서 myName은 cloud,

그러나 해당 함수 바깥인 5에서는 여전히 zion이다.

 

왜냐하면 4에서 myName은 광역변수 myName이 아니라

해당 스코프에서 새롭게 정의된 myName이기 때문이고, 해당 스코프 바깥에서는 당연히 존재할 수 없기 때문이다.

 

3. 반복문에서 var를 사용할 경우

 

setTimeout 함수는

지정한 시간(여기서는 1초(=1000ms)) 후에

지정한 명령(여기서는 작성된 function)을 수행한다.

 

i값은 0부터 3까지 변화하고 있지만,

터미널 창에 표시되는 값은 0, 1, 2가 아닌 오직 3이 세 번 출력되고 있다.

 

왜냐하면

setTimeout() 때문에 모든 반복이 수행된 후에 출력이 실행되고

var로 상위 스코프에서 선언된 변수가

하위 스코프에서 값이 계속 변화하고 있기 때문이다.

 

이번에는 let을 이용해서 반복문을 수행해보자.

 

콘솔에 0, 1, 2가 순서대로 출력된 것을 확인할 수 있다.

let으로 선언된 변수는 글로벌 변수가 아니라 블록 스코프를 가지는 변수이기 때문이다.

즉, 반복이 실행될 때마다 i는 새로운 블록에서 계속 생성되고 있는 것이다.

(따라서 var로 선언됐을 때보다 이 반복문은 무겁다.)

 

만약 i를 반복문보다 상위 스코프에서 글로벌 변수처럼 선언해도

let으로 선언하면 이는 글로벌 변수가 아니다. 조금 더 큰 블록에서 선언된 블록 변수이다.

 

4. const는 선언 및 값을 한번 할당한 후, 변경하지 않고 계속 사용할 때 사용

값을 변경하려고 하면 오류가 발생한다.

 

물론 const를 쓸 자리에 let을 써도 된다.

그러나 const를 씀으로 코드는 더욱 명확해진다.

 

그렇다면 다음의 경우는?

이를 실행하면 어떤 결과가 나올까?

const로 선언한 변수에 새로운 값을 대입하려 했으므로 오류가 뜰까?

땡.

name 값도 변화하고, age라는 새로운 컬럼도 추가됐다.

 

아니. const는 값을 변경할 수 없다며!!

 

응. 사실실은 const의 값이 변하지 않았단다.

 

typeof는 변수의 종류를 반환한다.

user는 object 곧, 객체라고 출력된다.

user는 object라는 객체 자체를 저장하고 있지 않다.

대신 object 객체가 저장되어 있는 공간의 주소를 저장한다.

 

js에서(그리고 다른 많은 언어에서도) 객체는 메모리의 특정한 공간에서 생성되고

변수는 해당 공간의 주소를 저장한다.

 

따라서 위의 경우,

해당 공간에 무엇이 있는지는 변했지만,

그곳을 가리키는 주소는 변하지 않았다.

 

굳.

 

< 요약 >

1. 웬만하면 var 대신 let과 const를 쓴다.

2. 값을 변경할 변수는 let을, 변경하지 않을 변수(상수)는 const를 쓴다.

 

 

이 글은 다음의 영상을 참고하여 쓰여졌다.

https://www.youtube.com/watch?v=oqjDF0As0Ec