scope 란

function fun(text){
 let block = "block";
 var test  = "test";
 console.log("test : " + test);
 console.log("Text : " + text);
 console.log("block : " + block);
}
fun("umm");
console.log("test2 : " + test);
console.log("block2 : " + block);
/*
test : test'
'Text : umm'
'block : block'
ReferenceError: test is not defined
ReferenceError: block is not defined
*/

scope는 범위라는 뜻을 가지고 있습니다.

js에서도 scope는 범위, 유효 범위의 뜻하고 있습니다.

​

js의 유효범위가 어디까지 허용되는지를 알아야지 변수 선언이나 함수 선언을 알맞게 사용 할 수 있습니다.

(저번에 작성했던 변수 선언 var, let, const소개 중 {}를 뜻하던 것이 바로 이번에 다루는 scope를 뜻하는 것 이였습니다. 쉽게 설명하기 위해..)

​

js에서 쓰이는 scope의 종류는 global, local scope 2가지 있습니다.

global​

위의 사진에서 제일 큰 박스에 해당하는 것이 바로 global scope입니다.이처럼 global스코프는 맨 바깥 쪽에 위치 하는 스코프 입니다.

맨 바깥쪽에 변수나 함수를 선언하면 global에 선언하게 되는 것입니다.

function TestFunc () {
  var test2 = "test2";
  console.log("in testFunc : " + test);
}

TestFunc();
console.log("global : " + test);
console.log("global : "+ test2);
/*
'in testFunc : test'
'global : test'
ReferenceError: test2 is not defined
*/

이처럼 global에 선언을 하면 그 뒤에 선언 되는 함수에서 모두 사용 할 수 있게 됩니다. 하지만 만약 선언 한 함수 내에서 선언된 다른 변수나 함수는 건들 수 없습니다.

​

요약 : global에 선언을 하면 선언된 것들은 다음에 선언 될 것들의 영향을 줄 수 만 있습니다. 만약 다른 스코프안에서 선언된 함수나 변수를 끌어서 global에서는 사용 할 수 없습니다.

​

local

local에는 두가지가 있습니다. function이랑 block 으로

function

function fun(text){
 let block = "block";
 var test  = "test";
 console.log("test : " + test);
 console.log("Text : " + text);
 console.log("block : " + block);
}
fun("umm");
console.log("test2 : " + test);
console.log("block2 : " + block);
/*
test : test'
'Text : umm'
'block : block'
ReferenceError: test is not defined
ReferenceError: block is not defined
*/

block

{
 let block = "block";
 var test = "test";
 console.log("block : " + block);
}
console.log("test : " + test);
console.log("block2 : " + block);

/*
'block : block'
'test : test'
ReferenceError: block is not defined
*/

var로 선언은 함수 스코프를 기준으로 하기 때문에 block scope안에서는 var로 선언을 하면 바깥의 global로 호이스팅이 되어 global에서도 선언을 한 것과 같이 test변수를 console에서 볼 수 있습니다.

​