[JS] let과 constant 변수

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라고 합니다.

 

- 로컬 변수(Local Variable)

한 함수 안에서만 사용할 수 있는 변수

- 전역 변수, 글로벌 변수(Global Variable)

스크립트 소스 전체에서 사용할 수 있는 변수

 

• 함수 안에서만 쓸 수 있는 지역 변수

var myVar = 100;
test();
document.write("myVar is " + myVar);

function test() { 			
	var myVar = 50;
}

test() 함수 밖에 변수 myVar가 100으로 선언되어 있고, test() 함수 내에서 myVar가 50으로 재선언되었습니다.

함수 내에서만 사용할 수 있는 지역 변수이기 때문에 test() 함수를 벗어나면 그 값은 무효가 됩니다.

 

 

• 스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

var myVar = 100;
test();
document.write("myVar is " + myVar);

function test() { 			
	myVar = 50;
}

test() 함수 내에서 재선언 하지 않고 값만 변경하였다. myVar은 전역 변수로써 사용됩니다.

 

 

• var를 사용한 변수의 특징

자바스크립트에서 var 변수를 사용할 때 호이스팅이란 개념을 인식하고 있어야 합니다.

호이스팅이란, '끌어올리다'는 뜻으로 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것입니다.

var x = 100;

test();

function test() { 			
	document.write("x is " + x + ", y is " + y);
  var y = 200;
}

y 변수에 아직 값이 할당되지 않아 undefined로 출력됩니다.

아직 선언되지도 않은 변수가 오류를 발생하지 않고 어떻게 사용되지? → 호이스팅 때문!

자바스크립트 해석기(interperter)는 함수를 훑어보면서 var 변수를 따로 기억해 둡니다.

따라서 변수를 실행하기도 전이지만 미리 기억해 두기 때문에 마치 선언한 것과 같은 효과가 나타납니다.

 

 

아래 코드를 보면 함수 호출 전과 후로 나누었을 때 함수 외부에서 y변수를 초기화 하면 변수 y에 값이 할당이 되는 것을 볼 수 있습니다. 호이스팅 방식으로 미리 var 변수를 따로 기억해두기 때문입니다.

var x = 1;
function func(){
    var result = x+y
    console.log(x+" "+y)
    return result
}
var y = 100;
func()

>> 1 100
>> 101

var x = 1;
function func(){
    var result = x+y
    console.log(x+" "+y)
    return result
}
func()
var y = 100;

>> 1 100
>> 101

하지만 다음 예제 코드를 보면 함수 내부에 y 변수가 선언되어 있고, 호이스팅 대상이 아니기 때문에 값을 할당하기 전에 출력해보면 undefined 라고 나옵니다.

var x = 1;
function func(){
    var result = x+y
    console.log(x+" "+y)
    var y = 100;
    return result
}
func()

>> 1 undefined
>> NaN

 

 

• let과 constant를 사용한 변수의 특징

var 예약어를 빠뜨리거나 의도치 않게 전역 변수가 되는 상황을 예방하기 위해 ES6에서는 변수를 선언하기 위한 예약어로 let과 const가 추가되었습니다.

var는 함수 영역의 스코프를 가지지만, let과 const는 블록 영역의 스코프를 가집니다.

 

- 블록 안에서만 쓸 수 있는 변수

function calcSum(n) {
  let sum = 0;  // 블록 변수
  
  for(let i = 1; i < n + 1; i++) {
    sum += i;
  }
  console.log(sum);  // 블록 변수 사용
}

calcSum(10);

sum은 let 예약어를 사용하여 선언하여 calcSum() 의 블록에서만 사용할 수 있습니다.

변수 i 역시 let 예약어를 사용하였기 때문에 for문을 벗어나면 사용할 수 없습니다.

 

 

- 재할당은 가능하지만 재선언은 할 수 없는 변수

let 예약어를 사용하면 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다.

웹 브라우저의 콘솔 창에서 실행 결과를 확인하면 변수 sum이 중복으로 선언되었다는 메세지가 나타납니다.

function calcSum(n) {
  let sum = 0;
  
  for(let i = 1; i < n + 1; i++) {
    sum += i;
  }  
  let sum;  // 변수 재선언
  console.log(sum);
}

calcSum(10);

 

- 호이스팅이 없는 변수

var 변수는 호이스팅 때문에 선언하기 전에 실행하더라도 오류가 생기지 않았지만,

let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메세지가 나타납니다.

var x = 100;

test();

function test() { 			
	document.write("x is " + x + ", y is " + y);
  let y = 200;
}

 

- const 변수

const로 선언한 변수는 상수(constant)입니다.

상수는 변하지 않는 값을 뜻하기 때문에 const 예약어를 사용합니다. 따라서 const 변수는 재선언하거나 재할당할 수 없으며 블록 레벨의 스코프를 갖습니다.