javascript variable 자바 스크립트 변수 let 살펴보기

자바스크립트를 공부하다보면 변수 선언에도 방식이 있다는 것을 알 수 있다. 명명규칙은 그렇다고 해도 let 이 대표적이다. let 변수는 블록범위 내의 변수를 선언한다는 것을 기억하자. 이것은 꽤나 유용하게 사용할 수 있는데, 만약 전역변수가 많아질 경우 변수명에 의한 난해하고 헷갈리는 것을 방지할 수 있다.

 

javascript variable 자바 스크립트 변수 let 살펴보기

자바 스크립트 let 변수는 블록유효범위 내의 지역변수를 선언하고 값을 설정할 수 있다.
자바 스크립트는의 코드 블록은 중괄호를 이용하는 것은 누구나 다 알고 있다.
코드를 보면 이해가 빠르다.

// 전역변수
let vlet = "전역변수";

// 코드블록 조건문
if ( vlet === "전역변수") {
	let vlet = "let 지역변수";
	console.log(vlet);
}

console.log(vlet);

변수 let 결과화면

위의 코드와 실행결과화면을 보면 알 수 있다.
변수선언시 let 을 사용할 경우 같은 변수명이라 하더라도 코드블록내에서는 지역변수처럼 동작한다.

 

변수 var 와 let 비교

자바 스크립트에서 변수를 선언하는 대표적인 방법은 var를 사용하는 것이다.
전역변수로써 var를 사용하게 되면 코드블록에서 같은 변수로 선언을 했을 때 영향을 받을 수 있다.
하지만 전역변수로써 let을 사용하게 되면 코드블록에서 같은 변수로 선언을 했을 때 영향을 받지 않는다.
이것은 위의 코드에도 나와 있다. let을 사용하여 같은 변수명을 선언했다고 해도 코드블록내에서는 전혀 다른 것임을 알 수 있다.
코드를 살펴보자.

testVar();
testLet();

// 변수 var 사용
function testVar() {
  var vVar = "변수 var";
  if (true) {
    var vVar = "코드블록 내 변수 var";  // 상위 블록과 같은 변수!
    console.log("변수 var 사용", vVar);  // 2
  }
  console.log("변수 var 사용", vVar);  // 2
}

// 변수 let 사용
function testLet() {
  let vLet = "변수 let";
  if (true) {
    let vLet = "코드블록 내 변수 let";  // 상위 블록과 다른 변수
    console.log("변수 let 사용", vLet);  // 2
  }
  console.log("변수 let 사용", vLet);  // 1
}

변수 var , let 실행결과 비교

 

혼합해서 사용하는 경우

var와 let을 혼용해서 사용할 수 있다.
하지만, 전역변수로 let 을 선언했을 경우 코드블록내에서 var 를 사용할 수 없다. 이 때는 let을 사용할 수 밖에 없다.
반대로 전역변수로 var 를 선언했을 경우 코드블록내에서 let 를 사용할 수 있으며, 코드블록 내의 변수값은 전역변수로 선언된 값에 영향을 주지 않는다.

testLetToVar();

// 변수 let 사용
function testLetToVar() {
  let vValue = "변수 let";
  if (true) {
    var vValue = "코드블록 내 변수 var";  // 상위 블록과 다른 변수
    console.log("변수 let 사용", vValue);  // 2
  }
  console.log("변수 let 사용", vValue);  // 1
}

에러 발생

전역변수 let 인 경우 코드블록내에서 var를 사용하면 에러

testVarToLet();

// 변수 var 사용
function testVarToLet() {
  var vValue = "변수";
  if (true) {
    let vValue = "코드블록 내 변수";
    console.log("변수 사용", vValue);
  }
  console.log("변수 사용", vValue);
}

전역변수 var, 코드블록 내 let 사용가능