변수 선언하는 키워드 : var, let, const
1. var(변수 재선언 가능)
- 변수 선언을 여러 번 해도 각각 다른 값이 출력될 수 있다.(선언 여러번, 값의 재할당 가능)
var a = 100;
console.log("a: ",a); // a: 100
// var: 같은 변수명으로 여러번 재정의 할 수 있다.
var a = 200;
console.log("a: ",a); // a: 200
2. let(변수 재선언 불가능, 값 변경 가능) '
- 같은 변수명의 선언은 한 번만 가능하고 값의 변경이 가능하다. (선언 한 번, 값의 재할당 가능)
let hello = "안녕";
console.log("hello: " + hello) // hello: 안녕
//let hello = "잘가";
//console.log("hello: " + hello) error!!
let hello = "잘가";
console.log("hello: " + hello) // hello: 잘가
3. const(변수 재선언 불가능, 값 변경 불가능)
- 쉽게 생각하면 자바에서 final 변수(상수)라고 생각하면 된다. (선언 한 번, 값의 재할당 불가능)
const c = 200;
//c = 300; // error
console.log("const: ", c); // const: 200
- const 변수에 object를 담으면 object 내의 데이터는 변경 가능하다.
const list = { 이름 : 'Kim' }
list.이름 = 'Park'; // 가능
- var의 사용을 지양하는 게 좋다. let과 const가 var가 하는 일을 할 수 있다.
- let은 값이 유동적으로 변하는 경우에 사용하고, const는 한 번 설정한 후 변경할 일이 없는 값에 주로 사용한다.
- 보통 function안에 for문으로 var를 사용하는 것 외에는 let이나 const를 사용하는게 좋다고 한다.
호이스팅(hoisting)
- 호이스팅이란 사전적인 의미로 끌어올린다 라는 의미로 변수와, 함수를 소스의 맨 위의 위치로 이동한다. > 변수 선언은 프로그램 첫머리로 끌어올려진다. (할당 xx)
- 자바스크립트는 실행시점에 변수와 함수에 대해 호이스팅을 수행한다.
1. var의 선언과 호이스팅
console.log(name) // undefined
var name = ‘lee’
- 코드를 보면 첫 줄에 name을 출력하는데 에러가 나지 않고 undefined가 나오는 이유는 실행시점에 호이스팅에 의해 var 변수가 아래와 같이 최 상단에 선언된다.
// var name; 실행시점에 name 변수가 hoisting 되어 해당 위치로 이동
console.log(name)
name = ‘lee’
변수의 선언 단계
| 1단계 선언(Declaration) |
변수를 변수 객체에 등록한다. 변수 객체가 스코프(범위)가 참조하는 대상이 된다. |
| 2단계 초기화(Initialization) |
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. |
| 이 단계에서 변수는 undefined로 초기화 된다. |
| 3단계 할당(Assignment) |
undefined로 초기화된 변수에 실제 값을 할당한다. |
- var 키워드로 선언한 변수는 선언과 초기화가 한 번에 이뤄진다. 따라서 변수 선언문 이전에 접근해도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않고 undefined를 반환한다.
- let 키워드로 선언한 변수는 선언과 초기화가 분리되어 진행된다. 따라서 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 아직 변수가 초기화 되지 않았기 때문이다.(즉 변수를 위한 메모리 공간이 아직 확보되지 않았다.)
- 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다.
console.log(name); // (선언 + 초기화 된 상태) undefined
var name = 'lee'; // (선언 + 초기화 된 상태 + 값이 할당된 상태)
console.log(name); // lee
2. let의 선언과 호이스팅
console.log(name) // ReferenceError: name is not defined
let name = 'lee'
- 호이스팅 때문에 선언이 최상단으로 끌어올려졌지만 현재 let은 선언만 되어있고 초기화(메모리 공간 확보)가 안되어있는데 참조해서 오류가 생겼다.
- let name = 'lee'에서 초기화 단계가 실행됐다.
- const 변수는 let과 동일한데 const로 선언되면 값이 상수화가 된다는 것만 다르다. (값 재할당 불가능이어서 선언과 동시에 초기화를 진행해야 한다.)
- let으로 선언된 변수와 const로 선언된 변수 모두 호이스팅 된다 !!!!
3. 변수 scope
| var로 선언된 변수 |
let, const로 선언된 변수 |
| 함수 레벨 스코프 |
블록 레벨 스코프 |
| { } 내부에 선언되어도 외부에서 접근 가능하다. |
{ } 내부에 선언하면 지역 변수로 생성되어 { }안에서만 사용 가능 |
{
let name = ‘lee’
}
console.log(name) // ReferenceError: name is not defined
{
var age = 29;
}
console.log(age) // 29 , var는 함수 레벨 스코프
