Java Script기초 - 변수 선언 var /const/ let 차이점

var/ const/ let의 차이점

• (global-Scope일 경우) var는 중복선언이 가능/ const, let은 중복선언이 불가능
• (local-Scope일 경우) var는 Function-Scope/ const, let은 Block-Scope이다.

var/ const/ let의 차이점을 이해하기 위해 알아야 하는 개념

• Scope의 개념과 각 Scope( Global/ Local/ Functional/ Block)의 차이점
• 변수(variable)의 활용 과정과 중복선언의 의미

 

스코프(Scope)란?

Scope를 구글에 치면 이런게 나온다(출처: 구글)

• 스코프(Scope)란 "변수를 확인 가능한 범위" 이다.
• Global Scope는 파일 내에서 어디서나 확인 가능하다. (접근 가능하다)

//함수 밖에서 변수 생성 + 선언
var a = 1;
const b = 2;
let c = 3;

fucntion test(){
	console.log(a); // 1
    	console.log(b); // 2
    	console.log(c); // 3
}

	console.log(a); // 1
    	console.log(b); // 2
    	console.log(c); // 3

이처럼 함수 내부에서도, 외부에서도 접근가능하면 Global Scope라고 한다. 

Global Scope로 변수를 만들기 위해서는 함수 밖에서 변수를 생성하면 된다.

 

생성만 하면 되기 때문에 아래도 가능하다.

//함수 외부 변수 생성
var a;
const b;
let c;

fucntion test(){
	//함수 내부에서 변수 선언
    a = 1;
    b = 2;
    c = 3;

	console.log(a); // 1
    	console.log(b); // 2
    	console.log(c); // 3
}

	console.log(a); // 1
    	console.log(b); // 2
    	console.log(c); // 3

 

• Local Scope는 함수 내부에서만 확인 가능하다. 따라서 함수안에서 정의된 변수는 함수 밖에서는 확인 불가능.

 

fucntion test(){
	//함수 내부에서 변수 생성 + 선언
	var a = 1;
	const b = 2;
	let c = 3;
    
	console.log(a); // 1
    	console.log(b); // 2
    	console.log(c); // 3
    
}

	console.log(a); // error: a is not defined
    	console.log(b); // error: a is not defined
    	console.log(c); // error: a is not defined

 

Local Scope로 변수를 만들기 위해서는 함수 안에서 변수를 생성하면 된다. 

 

'Global-Scope'일 경우 var, const, let의 차이점

• var는 '덮어쓰기'와 '중복선언'이 모두 된다. 

// 첫번째 선언 
var a = 3;
conosole.log(a) // 3

// 변수 a에 5를 할당 >> 덮어쓰기 O
a = 5;
console.log(a) // 5

// 두번째 선언 >> 중복선언 O
var a = 1;
console.log(a) // 1

• let은 '덮어쓰기'는 가능하지만, '중복선언'은 안된다.

// 첫번째 선언 
var a = 3;
conosole.log(a) // 3

// 변수 a에 5를 할당 >> 덮어쓰기 O
a = 5;
console.log(a) // 5

// 두번째 선언 >> 중복선언 X
var a = 1;
console.log(a) // error: 'a' has already been declared (이미 선언됨)

• const는 '덮어쓰기'와 '중복선언' 모두 안된다. ('const' 는 'constant'의 줄임말)

// 첫번째 선언 
var a = 3;
conosole.log(a) // 3

// 변수 a에 5를 할당 >> 덮어쓰기 X
a = 5;
console.log(a) // TypeError: Assignment to constant variable.

// 두번째 선언 >> 중복선언 X
var a = 1;
console.log(a) // error: 'a' has already been declared.

 

'Local-Scope'일 경우 var, let의 차이점

• var은 function-scope = 함수(function)안 에서 접근 가능

var a = [];

for(var i = 0; i<10; i++){

  var c = i; // 변수선언

  a[i] = function(){
    console.log("입력한 숫자는: "+c);
  }
}

for(var i = 0; i<10; i++){
  a[i]();
}

위 함수의 실행 결과는 아래와 같다.

입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9
입력한 숫자는: 9

그 이유는 a[i]()가 실행될때 for{ } 안에 있는 '변수 c'에 접근이 가능하기 때문에, c가 마지막 숫자인 9로 새로 덮어쓰여지기 때문이다. (for문은 함수가 아님)

 

• 하지만 let은 block-scope이다. '{ }' 안에서만 접근 가능 하다. '{ }' 밖에서 접근 불가능

var a = [];

for(var i = 0; i<10; i++){
  
  let c = i; // 변수선언

  a[i] = function(){
    console.log("입력한 숫자는: "+c);
  }
}

for(var i = 0; i<10; i++){
  a[i]();
}

결과는 아래와 같다

입력한 숫자는: 0
입력한 숫자는: 1
입력한 숫자는: 2
입력한 숫자는: 3
입력한 숫자는: 4
입력한 숫자는: 5
입력한 숫자는: 6
입력한 숫자는: 7
입력한 숫자는: 8
입력한 숫자는: 9

이유는 a[i]( )가 실행될때, 'for{ }'안에 있는 c에 접근이 불가능해서, 새로 덮어 씌워지지 않기 때문이다.

 

총정리

변수선언	덮어쓰기(재할당)	중복선언(재선언)	Local - Scope
var	O	O	function(){ }
let	O	X	{ }
const	X	X	{ }