scope

scope?

scope는 참조 대상 식별자를 찾아내기 위한 규칙이다.
자바스크립트는 이 규칙대로 식별자를 찾는다.

// 전역에 선언된 변수는 어디에서든 참조가 가능
var x = 'global';
  
  function foo () {
    // 함수 foo내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다.
    var x = 'function scope' 
    console.log(x); // function scope
  }
foo(); // ? 
console.log(x); //? global

스코프의 구분

전역 스코프 : 코드 어디에서든지 참조할 수 있다.
지역 스코프 : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분 하면 다음과 같이 2가지로 나눌 수 있다.*

전역 변수 : 전역에서 선언된 변수이며 어디에든 참조할 수 있다.
지역 변수 : 지역(함수)내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

var 키워드는 함수 레벨 스코프를 따른다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다.

var x = 0;
{
  var x = 1;
  x //1
}
x //1
console.log('-------')
let y = 0;
{
  let y = 1
  y //1
}
y // 0

전역 스코프

전역에 변수를 선언하면 이 변수는 언제든지 참조할 수 있는 전역 스코프를 갖는 전역 변수가 된다.
"var"키워드로 선언한 전역 변수는 전역 객체 "window"의 프로퍼티이다.

 var glo = 'global'//함수 영역 밖에 전역에서 선언된 변수
 function fun() {
   var loc = 'local';
   console.log(glo)//'global'
   console.log(loc)//'local'
 } 
fun();
console.log(glo);//global
console.log(loc)//error

함수 레벨 스코프

함수레벨 스코프 1

 var a = 10; //전역변수
 const k = () => {
   var b = 20; // 지역변수
 }
 k();

console.log(a) //10;
console.log(b)//error

함수레벨 스코프 2

var out = 'global';
const aaa = () => {
  var out = 'inner';
  console.log(out); //inner
  const inin = () => {
    //inner; 내부함수는 자신을 포함하고 있는 외부함수의 변수에 접근할 수 있다.
    console.log(out)
  }
  inin();
}
aaa();
console.log(out) //global;

함수레벨 스코프 3

var ten = 10;
function cal(){
  ten = 1000;
}
cal();
console.log(ten); //1000

함수 지역 영역에서 전역변수를 참조할 수 있으므로 전역변수의 값도 변경이 가능하다. 내부 함수의 경우, 전역변수는 물론 상위 함수에서 선언한 변수에 접근/변경이 가능하다.

함수레벨 스코프 4

var con = 10;

function func() {
  var con = 100;
  console.log(con)//100;
  
  function bar() {
    con = 1000; //가장 가까운 변수를 참조
    console.log(con)//1000;
  }
  bar();
}
func();
console.log(con)//10; 선언된 변수 global을 참조

렉시컬 스코프

렉시컬 스코프는 "함수를 어디서 호출했는지가 아닌 어디에서 선언하였는가에 따라 상위 스코프가 결정
자바스크립트는 "렉시컬 스코프를 따른다". 그러므로 함수를 *선언한 시점에 상위 스코프가 결정된다. 함수를 어디서 호출 하였는가는 스코프에 의미가 없다

var lex = 1;

function tion () {
  var lex = 10;
  cal();
}

function cal() {
  console.log(lex);
}
tion(); 
cal();