TIL 1 Javascript - 변수 var과 let, 상수 const, 유효범위(Scope)

자바스크립트를 공부하면서 다른 언어와는 변수와 상수를 선언하는 방식이 달랐습니다. 예를 들자면 Java에서는 String name= 'juyoung'; 처럼 자료형, 변수의 이름을 넣어서 선언을 했습니다. 하지만 자바스크립트에서는 var, let, const 3가지 방식으로 변수와 상수를 선언하였고, var, let은 변수, const는 상수를 선언하지만 var과 let의 차이점이 있었습니다.

1. 변수와 상수

상수란?

상수(constant)는 변화하지 않는 값을 지니고 있는 변수입니다. const키워드를 이용해 선언하며, 지니고 있는 값을 재할당할 수 없고 상수를 변경하려고 하면 에러가 발생합니다.

const name = 'juyoung';
name = 'son'; //error 발생

변수란?

변수(variable)는 데이터를 저장할 때 쓰이는 '사용자가 지정한 이름을 사용하는 저장소'입니다. 변수는 let과 var 키워드를 사용해 생성합니다. 변수는 상수와 달리 선언한 후에도 나서도 값을 변경할 수 있습니다.

변수를 선언하는 기본적인 방법입니다. 이 경우에는 변수를 선언했지만 데이터가 들어있지 않는 상태입니다.

let name; // undefined 

두 번째 예시는 변수 선언과 동시에 데이터를 저장하고, 저장된 데이터를 변경합니다.

let name = 'juyoung';
console.log(name); // juyoung 출력
name = 'son';
console.log(name); // son 출력

첫 번째 출력시 name에는 'juyoung'라는 값을 가지고 있었기 때문에 juyoung이 출력이 됩니다.

두 번째 출력시 name에 'son'이라는 값으로 변경했기 때문에 son이 출력이 됩니다.

2. 유효범위(Scope)

유효범위(Scope)는 영역, 범위라는 뜻입니다. 즉, 스코프(Scope)란 '변수에 접근할 수 있는 범위'입니다.

자바스크립트에서는 global(전역)과 local(지역)의 2가지 타입이 있습니다. 전역 스코프(Global Scope)는 말 그대로 전역에 선언이 되어있기 때문에 어느 곳에서든 접근할 수 있고, 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어나면 접근할 수 없다는 의미입니다.

전역 스코프(Global scope)
코드 어디에서든지 참조할 수 있다.
지역 스코프(Local scope)
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

전역 변수(Global variable)
전역에서 선언된 변수, 어디에든 참조할 수 있다.
지역 변수(Local variable)
지역(함수) 내에서 선언된 변수이며 그 지역과 그지역의 하부 지역에서만 참조할 수 있다.

전역 스코프

전역 스코프는 블록({}) 밖에 선언되고, 블록 밖에서 선언되었기에 블록 내부를 포함한 어느 곳에서든 접근 가능합니다.

let global_Scope = 100;
function global() {
	console.log(global_Scope);
}
global(); // 100 출력

하지만 전역 스코프는 어디에서나 접근 가능한 장점이 있지만 이 부분이 해가 될 수 있습니다. 이런 상황을 스코프 오염(Scope Pollution)이라고 부릅니다.

let global_Scope = 100;
function global() {
	global_Scope = 50;
	console.log(global_Scope);
}
global(); // 50 출력
console.log(a) // 50 출력

블록({})안에 있는 지역 변수를 선언할 때, let을 쓰지 않아서 전역 스코프인 global_Scope의 값이 100에서 50으로 바뀌게 되었습니다. 고의로 의도하였다면 문제가 되지 않지만, 의도하지 않은 상황이었다면 스코프 오염이 일어났습니다.

지역 스코프

지역 스코프는 블록({}) 안에서 참조할수 있는 스코프입니다. 함수 스코프(Function Scope)와 블록 스코프(Block Scope)로 나뉩니다. 두 가지 모두 해당 블록안에 있을 때만 접근이 가능합니다.

함수 스코프(Function Scope)는 블록({})내에서만 유효하기에 블록({})바깥에서 변수 region을 호출하면 참조에러가 발생합니다.

function region_Scope() {
	let region = 100;
	console.log(region);
}
region_Scope(); // 100출력
console.log(region) // error 발생

그리고 var과 let의 차이가 있습니다. 함수 레벨 스코프인 var을 사용했을 때에는 블록({})안에서 전역 변수x의 데이터를 변경하면 전역 스코프의 변수x의 데이터가 바뀝니다.
하지만 블록 레벨 스코프인 let을 사용했을 때에는 전역 스코프 y의 값이 바뀌지 않고 0으로 유지되었습니다

var x = 0;
{
	var x = 1;
	console.log(x); // 1출력
}
console.log(x); // 1출력

let y = 0;
{
	let y = 1;
	console.log(y); // 1 출력
}
console.log(y); // 0 출력

위의 내용에 대한 예시를 조금 더 자세히 다루어 보겠습니다.

var a = 1;
function outer() {
	console.lig(a); // 1 출력
	function inner() {
    	console.log(a); // hosting으로 인해 undefined 출력
        var a = 3;
        }
        
    	inner();    
        console.log(a); // 1 출력
    }
    
outer();
console.log(a); // 1출력

1. outer() 호출
2. outer scope에서 변수 a 탐색 -> gloval scope에서 a 탐색 -> 1출력
3. inner() 호출
4. inner함수 내부에서 변수 a선언
5. inner scope에서 a 탐색 -> undefined출력(Hosting)
6. inner함수 내부 변수 a에 3할당
7. inner함수 종료
8. outer scope에서 변수 a 탐색 -> gloval scope에서 a 탐색 -> 1출력
9. outer함수 종료
10. global scope에서 a 탐색 -> 1출력

추가적으로 자바스크립트 사용 시 const사용을 권장하고 있습니다. 그 이유는 값이 가진 타입의 변경을 제한하려는 것입니다. 값을 변경하는 변수를 사용 할 일이 생각보다 많지 않고, const를 통해 선언한 값의 타입을 유지하는 것이 개발에 실수를 방지해주기 때문입니다.

잘못된 부분이 있다면 댓글로 남겨주세요!!

Reference

• https://poiemaweb.com/js-scope