📝자바스크립트 2 | 스코프(scope), let vs var vs const

 

 

 

 

스코프(scope)

스코프란 쉽게 말해 변수의 유효범위이다.

 

function start(){
  for (let i = 0; i < 5; i++){
    console.log(i);
  }
  
  console.log(i);
}

start();

위의 코드를 실행 시켜보면 

 

for 문 안에 console.log(i) 는 잘 실행된 반면, for 문 밖의 console.log(i)는 i가 정의되어 있지 않다고 에러가 뜬 것을 볼 수 있다. 

 

그 이유는 i가 for 문 안에서만 유효한 변수이기 때문이다. 

위의 오류를 해결하고 싶다면 아래와 같이 변수를 아예 밖에서 선언하여 스코프의 범위를 for문 밖으로 확장시킬 수 있다.

function start(){
  let i = 0;
  for(i = 0; i < 5; i++){
    console.log(i);
  }

console.log(i);
}

start();

 

이렇게 어떤 경계(여기서는 for문 안과 밖) a의 외부에서 선언한 변수는 a의 외부뿐만 아니라 a의 내부에서도 접근이 가능하다. 하지만 a의 내부에서 선언한 변수는 오로지 a의 내부에서만 접근이 가능하다. 

 

 

 

 

 

Var vs Let vs Const 

자바스크립트에서는 변수를 선언할 때 var, let, const 키워드를 사용한다. 

언뜻보기엔 var 와 let 키워드는 비슷해보인다. 하지만 이 두 개의 가장 큰 차이점은 스코프이다. 

 

function start(){
  for(var i = 0; i < 5; i++){
    console.log(i);
  }

  console.log(i);
}

start();

 

아까 코드와 비교해서 본다면 i는 for문 안에서 정의되었기 때문에 i가 정의되어있지 않다는 오류가 떠야 한다. 하지만 var로 정의했을 때는 오류 없이 i가 정상 출력되는 것을 확인할 수 있다. 

 

그 이유는 let은 스코프 범위가 { } block 인 반면, var는 스코프 범위가 함수단위이기 때문이다. 즉, var = i는 start 함수 안에서는 유효한 함수이다. 

 

 

때문에 함수 밖에서 호출했을 때는 에러가 뜨는 것을 확인할 수 있다. 

 

 

또 하나 let 과 var의 다른 점을 확인할 수 있다. 

var color = "red";
let age = 30;

console.log(window.color);
console.log(window.age);

두 변수를 모두 gloval variable로 선언하였다. 그렇다면 두 변수 모두 브라우저의 전역 객체인 window의 프로퍼티가 되었을까? 

 

window.color는 red로 잘 출력된 반면, window.age는 undefined가 출력되었다. var는 window객체 안에 변수가 선언되는 반면, let 키워드는 window에 닿지 않는다. 

 

 

그럼 let과 var 중 어떤 키워드를 사용하는 것이 좋을까?

우리는 let키워드를 사용해야 한다. 만약 제 3자가 만든 코드(third party)를 가져다 사용하게 될 경우 var를 사용하게 된다면 다른 사람이 선언한 변수들이 내 코드에 의해 덮어씌워지거나 그 반대의 상황을 초래할 수 있다(변수의 스코프가 너무 넓기 때문에). 코드의 안전성을 위해서라도 let을 사용하자. 

 

 

	var	let	const
scope	function-scoped	block-scoped	block-scoped
재할당	yes	yes	no

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[참고자료]

https://www.youtube.com/watch?v=XgSjoHgy3Rk