JS 변수선언 / var (hoisting) / let / const

[ 변수 선언 / 할당 ]

 

<토큰> 
var / i / = / 10 
하나하나를 다 토큰이라 부른다. 

 

1. < var >

var  i  = 10; 

: 변수선언 / 할당 

 

- 자바와 마찬가지로 = 는 대입, 할당 의미. 

- 여러개 한번에 가능 
var a=1, b=2, c=3; 

var i;  이렇게만 선언 만 해두면, 
=> undefined 할당된 상태 

 i = 20; 

(- 자바에서처럼 재할당)  => 20 출력됨 
 

+ 추가기능

 

< 전역변수 역할 > 

변수 선언 없이 바로 

a = 100;  이렇게 할당하면 

JS가 자동으로 전역변수 위치에 ( 모두 적용될 수 있는 위치 ) 

 

var a; 

 

를 선언한 것으로 간주한다. 

 

즉, 

a = 100; 

var a = 50; 

=> 50 

이런식의 순서로도 사용이 가능해져 버린다.  

 

 

 

< Hoisting >: 변수 선언의 끌어올림  

- 이처럼, 변수가 선언되지도 않았는데 다짜고짜 

console.log( x ); 이렇게 사용해도 오류를 내지않고 진행이 되는건  

var x; 를 전역변수 위치에 자동으로 선언된 것으로 간주 해버리는 

Hoisting 기능 때문이다.

변수가 프로그램 첫머리에 선언된 것처럼 사용할 수 있는 기능 
- 선언만 가능. 

- 할당된 값은 불가능. 

 

- 함수도 hoisting 된다. 
f1(); 호출부터하고 
나중에 
function f1(){} 정의해도 
실행된다. 

 

 

이러면, 오히려 헤깔릴 여지가 많아,

최근에 이런 순서로는 사용이 안되도록 막아버린 새로운 변수가 등장 (ECMA6) 

사실상 var 는 버려져가는 추세이다.  

 

React / View / Node.js 에서는 
var 안쓰고 let / const 로만 사용한다 

 

 
2. < let > ( emca6 추가 키워드 ) 

let i = 10;  

- var 은 전역, 지역 변수 구별이 없으니까 헤깔릴 수 있으니까 
 자바처럼 순서 지키면서 사용하려면 let 사용해라 

a2 = "10"; 
let a2 = "20";
doc.write( a2 ); 
=> 오류 ( 선언이 먼저 되야 함 )

let a2 = "20";  선언 / 할당 
a2 = "10";  재할당
doc.write( a2 ); 
=> 성공 ( 10 ) 



3. < const >

const i = 10; ( emca6 추가 ) 

- 한번 선언, 할당한 (초기화) 값은 수정 불가능

const a3 = 10;
a3 = 20; 
document.write( a3 );
=> 오류 ( 수정불가 )


 
되도록, let 과 const 를 최대한 사용하면서 익숙해 져야겠다. 

(이미 var 이 쓰인 부분에 대한 이해를 위해 hoisting 인지도 필요)