JavaScript 개발자가 알아야할 33개 컨셉 06.Scope

06.Scope

 

전역변수와 지역번수의 개념만 알면된다. 

 

// 1.
function a(){
	const z = 'hello';
}
console.log(z); 

///////////////////////////////////////
// 2.
function c(){
	var y = 'hello';
}
console.log(y);

///////////////////////////////////////
// 3.
const x;
function b(){
	x = 'hello';
}
b();
console.log(x);

1. 번의 결과는 에러를 뱉는다. 

z는 a함수 안에서 만들어진 변수이기 때문에 밖에서 사용하려고 하면, z가 뭔지 모른다는 에러를 뱉게된다. 

 

2. 번의 결과는 정상적으로 hello를 출력한다. 

왜 1번과 동일한 방식으로 사용하는데 y는 출력이 되는 것인가 ? 

 

자바스크립트에서 나오는 개념인 함수의 호이스팅이 적용되면서 나타나는 현상인데, 

자바스크립트에서 호이스팅은 var 변수 선언문과 함수 선언문에만 적용이 된다. 

따라서 js6부터는 var를 사용하지말고 let과 const를 이용한 변수 선언만을 사용하는것을 장려한다. 

let은 값을 변경하기 위한 함수 선언시 사용하고,

const는 값을 변경하지 않을 함수 선언을 위해 사용하면 된다. 

 

 3. 번의 경우엔 x가 함수 밖에서 선언되었기 때문에  console.log(x)시 정상적으로 hello가 출력된다. 

 

이것들이 Scope의 가장 중요한 핵심 개념이다. 

더 큰 곳에서는 작은 영역에서 선언된 변수(지역변수)에 대해 접근이 불가능하지만,

작은 영역에서는 더 큰 영역에서 선언된 변수(전역변수)에 접근이 가능하다.