[Javascipt] 변수 선언 방식 (var, let, const)

안녕하세요.

 

이번 포스팅에서는 Javascript의 변수 선언 방식인 var, let, const에 대해서 알아보겠습니다.

 

---

1. var

• 기존에 사용하던 변수 선언 방식
• 같은 이름으로 변수를 다시 선언할 수 있음(수정도 가능하다.)
  • 간단한 소스에서는 편리하지만, 복잡한 코드에서는 유지보수가 힘들어질 가능성이 높음
• Scope
  • 전역 변수로 선언된 경우 : 모든 곳에서 사용할 수 있음
  • 함수 내에서 선언된 경우 : 함수 내에서만 사용됨
• 변수 선언 전에도 사용 가능

// ======= 같은 이름으로 변수를 다시 선언 및 수정 가능 =========
var name = "멍목";
var name = "김멍목";        // 정상 작동
// ============================================================


// ======= 전역 변수로 선언된 경우 모든 곳에서 사용 가능 ======= 
var myName = "마이네임";
console.log(myName);        // output : 마이네임
sayMyName();                // output : 마이네임

function sayMyName(){
	console.log(myName);
}
// ============================================================


// ================ 변수 선언 전에도 사용 가능 ================
console.log(year);		// output : undefined
var year = 2022;		
console.log(year);		// output : 2022
// ============================================================

 

2. let

• var 변수를 개선한 Javascript 변수 선언 방식으로, ES6 버전에서 추가됨
• 같은 이름으로 변수를 다시 선언할 수 없음(영향을 받지 않는 서로 다른 함수 내에서는 가능)
• 변수 수정 가능
• Scope
  • 전역 변수로 선언된 경우 : 모든 곳에서 사용할 수 있음
  • 함수 내에서 선언된 경우 : 함수 내에서만 사용됨
• 변수 선언 전에는 사용 불가능

// =========== 같은 이름으로 변수를 재선언 불가능 =============
let name = "멍목";
let name = "김멍목";	     // SyntaxError: Identifier 'name' has already been declared
// ============================================================


// ====================== 변수 수정 가능 ======================
let language = "Javascript";         
console.log(language);            // output : Javascript
language = "JS";
console.log(language);            // output : JS
// ============================================================

// ======= 전역 변수로 선언된 경우 모든 곳에서 사용 가능 ======= 
let myName = "마이네임";
console.log(myName);        // output : 마이네임
sayMyName();                // output : 마이네임

function sayMyName(){
	console.log(myName);
}
// ============================================================


// ================ 변수 선언 전에는 사용 불가능 ================
console.log(year);		// ReferenceError: Cannot access 'year' before initialization
let year = 2022;		
// ============================================================

 

3. const

• ES6 버전에서 추가된 Javascript 변수 선언 방식
• 변수를 선언한 이후, 객체 자체를 수정이 불가능함(객체가 아닌, 객체의 값은 수정 가능)
• Scope
  • 전역 변수로 선언된 경우 : 모든 곳에서 사용할 수 있음
  • 함수 내에서 선언된 경우 : 함수 내에서만 사용됨
• 변수 선언 전에는 사용 불가능

// =========== 같은 이름으로 변수를 재선언 불가능 ==============
const name = "멍목";
const name = "김멍목";	     // SyntaxError: Identifier 'name' has already been declared
// ============================================================


// ===================== 변수 수정 불가능 =====================
let language = "Javascript";         
console.log(language);            
language = "JS";                  // TypeError: Assignment to constant variable.
// ============================================================


// ==== 변수를 재선언하는 것이 아닌, 값을 수정하는 건 가능 =====
const info={
        name:"홍길동",
        age:50
    }

console.log(info)           // output : { name: '홍길동', age: 50 }
info.age=40;
console.log(info);          // output : { name: '홍길동', age: 40 }
// ============================================================


// ======= 전역 변수로 선언된 경우 모든 곳에서 사용 가능 ======= 
const myName = "마이네임";
console.log(myName);        // output : 마이네임
sayMyName();                // output : 마이네임

function sayMyName(){
	console.log(myName);
}
// ============================================================


// ================ 변수 선언 전에는 사용 불가능 ================
console.log(year);		// ReferenceError: Cannot access 'year' before initialization
const year = 2022;		
// ============================================================

 

요점

	var	let	const
재선언 가능 여부	O	X	X
객체 수정 여부	O	O	X
객체 값 수정 여부	O	O	O
선언 전 사용 여부	O	X	X

ES6 이상의 JavaScript를 사용한다면, var 방식보다는 let, const 방식을 주로 사용하는 것이 효과적이다.

(var 방식은 재선언이 가능하기 때문에 복잡한 코드일수록 유지보수가 어려워질 수 있기 때문)

평소엔 const 방식을 사용하다가 객체의 재할당이 필요한 경우 let 방식을 사용하면 좋을 듯 하다.

 

 

 

참고 링크

https://velog.io/@bathingape/JavaScript-var-let-const-차이점

https://velog.io/@haleyjun/JavaScript-var-let-const-차이점