ES6 + JAVASCRIPT, 변수 선언 방법 + SCOPE

안녕하세요 Jlight입니다.

이번 시간에는 변수 선언 방법과 SCOPE(유효 범위)에 대해 알아보도록 하겠습니다. 

 

 

🚀 변수 선언 방법 - var, let, const

자바스크립트에서의 변수 선언 방법은 크게 3가지, var - let - const가 있습니다. 

 

ES5까지 변수 선언은 var 키워드를 사용해 선언하였습니다.

전역 변수인 var의 특성상 유효 범위(scope)가 넓어서 코드가 길어지면 선언된 변수로 인한 오류가 존재하며,

의도하지 않게 변경될 수도 있어서 프로그램의 복잡성을 증가시키는 원인이 됩니다.

따라서 ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였습니다.

 

자바스크립트의 변수 선언 방법

위 특징을 이해기 위해 우선 SCOPE에 대해 알아보도록 하겠습니다.

 

 

🚀 SCOPE(유효 범위)란?

변수 혹은 데이터에 접근할 수 있는 범위를 스코프라고 합니다. 

자바스크립트에서 스코프를 구분해 보면 다음과 같이 2가지로 나눌 수 있습니다.

 

 전역 스코프 (Global scope)

 전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근이 가능하다.

 

 지역 스코프 (Local scope)

 해당 지역에서만 접근이 가능한 변수를 뜻하며 이외의 지역에서 사용이 불가능하다.

 

 

🚀 Global scope (전역 스코프)

전역 스코프는 말 그대로 전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근이 가능합니다.

즉, 전체 범위에서 유효한 값을 가집니다. 

 

 

예시를 통해 알아볼까요❓

 

 

1-1. Global Scope (전역 스코프)

var a = 10;

var printVar = function(){
    console.log(a);
} //printVar이라는 함수에 변수a를 사용할 수 있다.

printVar();

 

위 코드에서 변수 a는 전역 변수의 조건인 어떤 것으로도 둘러 쌓여 있지 않으며, var로 선언되어 있습니다.

따라서 전역 변수로 선언된 a는 printVar이란 함수에서 사용이 가능하며 정상적으로 작동됩니다.

 

 

1-2.  Non block-level scope (비 블록 레벨 스코프)

자바스크립트는 블록 레벨 스코프를 사용하지 않습니다. 따라서 함수 밖에서 선언된 변수는 블록 내에서 선언되어도 전역 스코프를 가집니다.

if(){
	var num = 3;
}
console.log(nun) // -> 3
    

 

 

1-3. Function-level scope (함수 레벨 스코프)

var은 Function-level scope(함수 레벨 스코프)를 사용합니다. 함수 내에 선언된 변수는 함수 외부에서 유효하지 않습니다.

var a = 5;

function func(){
	var b = 10;
}

console.log(a); // -> 5
console.log(b); // -> error:b is not defined

 

 

 

🚀 Local scope (지역 스코프)

지역 변수는 해당 지역에서만 접근이 가능한 변수를 뜻하며 이외의 지역에서 사용이 불가능합니다.

즉, 특정 지역에서 유효한 값을 가집니다.

 

 Block-scope(블록 스코프)

 블록(중괄호)에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 

 

 Function-scope(함수 스코프)

 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 내부에서 선언한 변수는 지역 변수이다.

 

예시를 들여다 볼까요?

var a = "전역변수";  // 둘러쌓이지 않는 변수a
{
    var b = "이것도 전역변수";  // 중괄호로 둘러쌓인 변수b
}
console.log(a); // -> "전역변수"
console.log(b); // -> "이것도 전역변수"

변수 a는 이전 예시와 동일한 전역변수입니다. 어떤 것으로도 둘러 쌓여 있지 않으며 var로 선언되었습니다. 

그럼 b는 지역변수일까요?

정답은 전역변수 입니다.

블록(중괄호)에 둘러 쌓여 있어도 "var"로 선언된 변수이기에 전역 변수를 가집니다. 

그렇다면 b를 지역변수로 선언하려면 어떻게 해야할까요?

 

 

2-1. let을 사용한 지역변수 선언

var a = "전역변수";  // 둘러쌓이지 않는 변수a
{
    let b = "지역변수";  // 중괄호로 둘러쌓이며 let으로 선언된 변수v
}
console.log(a); // -> "전역변수"
console.log(b); // -> error

지역 변수로 사용하기 위해 let 혹은 const를 사용할 수 있습니다. 

위 코드를 보면 let으로 선언된 변수는 블록 혹은 함수 내에서만 동작하기 때문에 오류가 나타납니다.

 

 

그렇다면 Block-level scope를 가진 let과 const의 차이점은 무엇일까요?

 

3. 재할당이 불가능한 const

재할당이 자유로운 let과 다르게 const는 재할당이 금지됩니다.

let a = 10;
a = 5; // a값이 재할당 된다.

const b = 30;
b = 20;  // error : 재할당 불가능

 

 

3-1. 선언과 동시에 할당이 이루어져야 하는 const

const는 선언과 동시에 할당이 이루어져야 합니다. 

let a;  // let은 변수 선언에 있어 할당이 없어도 된다. 
const b;  // error:변수 선언과 동시에 할당이 이루어지지 않음.

 

 

---

 

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것입니다. 간단한 코드를 작성하는데 있어 이는 코드 작성이 쉽다는 장점이 있지만, 코드가 길어지고 복잡한 구조를 가진 환경에서는 심각한 문제를 발생시킵니다. 

전역변수의 남발과 의도치 않은 변수값 변경 등 코드가 길어질수록 중복 변수가 발생해 의도치 않는 오류를 발생시켰습니다.

 

따라서 코드를 작성할때 let, const 키워드 사용을 추천드립니다. 

재할당이 필요한 경우 let 키워드를,

변경이 발생하지 않는 값에는 const를 사용해 보다 안전한 코딩을 사용하는 것이 좋습니다.