[JavaScript] 자바스크립트의 기초

1. 변수 선언방식 var / let / const

var

• var 은 변수 재선언, 변수 재할당이 모두 가능하다.
  • 그렇기 때문에 해당 변수가 재선언되어 어디서 어떻게 바뀌었을지 파악하기 힘들 뿐더러 값이 바뀔 우려가 있기 때문에 사용을 자제하는 것이 좋을 것이다.

var name = 'HOJUN';
console.log(name);		// HOJUN

var name = 'KIMHOJUN';		
console.log(name);		// KIMHOJUN

• 위의 사례처럼 변수를 재선언하면서 값도 수정할 수 있게된다.

let

• let은 변수 재선언은 불가능하지만 변수 재할당은 가능하다. 이 의미는 아래의 코드 예제를 보며 이해하면 쉽다.

let name = 'HOJUN';
console.log(name);		// HOJUN

let name = 'KIMHOJUN';		
console.log(name);		
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'KIMHOJUN';		
console.log(name);		//KIMHOJUN

const

• const는 변수 재선언과 변수 재할당이 모두 불가능하다.
• const는 변수를 선언할 때 항상 값을 선언해주어야 한다.
  • 즉, const a ; 라고 값을 할당하지 않고 선언할 수 없다.

const name = 'HOJUN';
console.log(name);		// HOJUN

const name = 'KIMHOJUN';		
console.log(name);		
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'KIMHOJUN';		
console.log(name);		
//Uncaught TypeError: Assignment to constant variable.

2. 호이스팅

• '호이스팅' 이란 var 선언문이나 function 선언문을 해당 스코프의 선두로 옮긴 것 처럼 동작하는 특성을 말한다.

• JavaScript 에서는 var, let, const, function, class 을 호이스팅한다.

• var은 변수 선언 이전에 해당 변수를 참조하여도 undefined를 출력하지만 let은 변수 선언 이전에 해당 변수를 참조한다면 참조 에러가 발생한다.

• 일반적으로 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 의해 생성되는데 var 변수는 선언단계와 초기화단계가 한번에 이루어진다. 하지만 let 변수는 선언단계와 초기화 단계가 단계에 걸쳐 이루어지기 때문에 에러가 발생한다.

var 호이스팅

• var는 호이스팅되어 선언단계와 초기화단계가 스코프의 선두에서 한번에 이루어진다. 그렇기 때문에 var 변수 선언 이전에 해당 변수를 참조하여도 에러가 발생하지 않는다.

console.log(hoJun); 	// undefined

var hoJun;
console.log(hoJun); 	// undefined

hoJun = 1; 		// 할당문에서 할당 단계가 실행된다.
console.log(hoJun); 	// 1

let 호이스팅

• let은 선언단계와 초기화 단계가 나누어 이루어지기 때문에 let 변수 선언 이전에 해당 변수를 참조한다면 참조에러가 발생한다.
• 즉, 스코프의 선두에서 선언단계는 수행되지만 초기화 단계는 수행되지 않아 undefined로 초기화되어있지 않다.

console.log(hoJun); 	// ReferenceError: hoJun is not defined

let hoJun;		// 변수 선언문에서 초기화 단계가 실행된다.
console.log(hoJun); 	// undefined

hoJun = 1; 		// 할당문에서 할당 단계가 실행된다.
console.log(hoJun); 	// 1