[ES6] 자바스크립트 문법 (var, let, const)

var, let, const 변수 선언

var 선언은 아래 코드 처럼 중복 선언이 가능하고 에러 없이 막 쓸 수 있습니다.

var text = 'korea';
console.log(text);		// korea
 
var text = 'japan';
console.log(text);		// japan
 
// 같은 변수명으로 중복 선언했는데도 에러없이 덮어씌어짐
// 기분이 나쁘게 한국에서 일본으로 바뀜

 

let 선언은 아래 코드 처럼 중복 선언이 불가능하지만 재할당은 가능합니다.

let text = 'korea';
console.log(text);		// korea
 
let text = 'japan';
console.log(text);	// Uncaught SyntaxError: Identifier 'text' has already been declared
 
text = 'japan';
console.log(text);		// japan
 
// 재할당은 가능해서 이번에도 기분이 나쁘다...

 

또한 var 대신 let을 이용하면 Block Scope(중괄호) 내의 지역변수로 구별 가능합니다.

function varNum() {
	
    var num = 10;		// var선언
    
    if( num == 10 ){
    	var num = 20;		// 전역취급
        console.log(num);	// 값은 20
    }
    
    console.log(num);		// 덮어씌어진 값 20
}
 
function letNum() {
	
    let num = 10;		// let선언
    
    if( num == 10 ){
    	let num = 20;		// 지역취급
        console.log(num);	// 값은 20
    }
    
    console.log(num);		// 처음 선언한 값 10
}
 
// 이처럼 var보다는 let선언이 좀 더 엄격하고 구별하기 용이합니다!

 

하지만 let 선언은 중복 불가이지만 재할당이 가능하다는 점에서 const 선언이 필요합니다.

const text = 'korea';
console.log(text);		// korea
 
const text = 'japan';
console.log(text);	// Uncaught SyntaxError: Identifier 'text' has already been declared
 
text = 'japan';
console.log(text);	// Uncaught TypeError: Assignment to constant variable.
 
// 변수 재선언, 재할당 모두 불가! 이번에는 기분 좋게 한국을 지켰습니다 ㅋㅋ

 

 실무에서는 같은 변수명을 재사용하는 일은 거의 없지만, 팀 단위로 일하다보면 실수로 같은 변수명이 나올 수 있어서 테스트 코드가 아니면 되도록 let이나 const을 사용하고, 정말 큰 프로젝트는 주로 const를 사용하면서 변수를 재정의 하여(무결성 유지) 진행합니다. 예) const로 선언한 변수를 다른 이름의 변수에 넣거나 아니면 가변 내장 함수 사용

---

2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당

[ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당