예제코드로 한눈에 보는 var, let, const feat. 함수스코프와 블록스코프 그리고 호이스팅

1. 스코프를 벗어나서 변수를 사용하면 에러가 발생한다.

function example(){
	var i= 1;
    }
console.log(i) // 참조 에러

2. var 키워드 없이 변수를 정의하면 전역 변수가 된다.

function example1(){
	i = 1;
}
function example2() {
	console.log(i);
}
example();
example1(); // 1이 출력 됨.

3. for 문을 벗어나도 변수가 사라지지 않는다.

for (var i=0; i<10; i++){
	console.log(i)
}
console.log(i); // 10

4. 정의되지 않은 변수 사용하기.

console.log(myVar); // 참조 에러

5. 변수가 정의된 시점보다 먼저 변수 사용하기.

console.log(myVar); // undefined
var myVar = 1;

6.호이스팅의 결과

var myVar = undefined;
console.log(myVar); // undefined
myVar = 1;

7. 변수가 정의된 시점보다 먼저 변수에 값을 할당하기.

console.log(myVar); // undefined
myVar = 2;
console.log(myVar); // 2
var myVar = 1;

8.var 변수는 재정의가 가능하다.

var myVar = 1;
var myVar = 2;

9. 블록 스코프에서는 블록을 벗어나면 변수를 사용할 수 없다.

if (true){
	const i = 0;
}
console.log(i); // 참조 에러

10. 블록 스코프에서 같은 이름을 갖는 변수의 사용 예

let foo = 'bar1';
console.log(foo); // bar1
if(true){
	let foo = 'bar2';
  	console.log(foo); // bar2
}
console.log(foo); // bar1

11. 변수가 정의된 시점보다 먼저 변수를 사용할 수 없다.

console.log(foo); // 참조 에러
const foo = 1;

12.const에서 호이스팅의 역할을 설명하기 위한 예

const foo = 1 의 변수를 참조 했지만, 임시적 사각지대여서 에러가 발생한다.

const foo = 1;
{
	console.log(foo); // 참조 에러
  	const foo = 2;
}

13. var에서 호이스팅의 효과를 확인하는 코드

var foo = 1;
(function() {
	console.log(foo); // undefined
  	var foo = 2;
})();

14. const로 정의된 변수는 재할당이 불가능하다.

const bar = 'a';
bar = 'b'; // 에러 발생.
var foo = 'a';
foo = 'b'; // 에러 없음
let value = 'a';
value = 'b'; // 에러 없음

15. const로 정의해도 객체의 내부 속성값은 수정 가능하다.
    만약, 수정할 수 없도록 차단하고 싶으면, 자바스크립트 내장함수를 이용하면 된다.

Object.preventExtensions
Object.seal
Object.freeze

const bar = {prop1 : 'a' };
bar.prop1 = 'b';
bar.prop2 = 123;
console.log(bar); // { prop1: 'b' , prop2: 123 }
const arr = [10, 20];
arr[0] = 100;
arr.push(300);
console.log(arr); // [100, 20, 300 ]

16. const로 정의된 변수에 재할당은 불가능하다.

const bar =  { prop1: 'a' };
bar = { prop2: 123 }; // 에러 발생