스코프(Scope)

스코프란 ? 🕶

• 스코프란, 모든 식별자(변수,함수,클래스 등)는 선언된 위치에 따라 참조할 수 있는 유효범위가 결정되는데 이 말은 즉, 스코프는 식별자가 유효한 범위라 할 수 있다.

스코프의 종류

• 스코프는 전역 스코프(global scope)와 지역 스코프(local scope)가 있다.
• 스코프는 식별자를 선언할 때 정해지며 이런 개념을 렉시컬 스코프라 한다.
• 함수는 전역함수의 내부에도 정의할 수 있다. 함수의 내부에서 정의된 함수를 중첩 함수라 하며 중첩함수를 포함하는 함수를 외부 함수라고 한다.
• 함수가 중첩될 때 지역스코프도 중첩될 수 있다. 즉, 외부 함수의 지역 스코프와 중첩 함수의 내부의 지역 스코프는 계층적 구조를 가지고 이때 외부 함수의 지역스코프를 중첩 함수의 상위 스코프라 한다.

var x = '전역 변수x'
var y = '전역 변수y'

const outer = () => {
    var z = 'outer 지역 변수z';

    const inner = () => {
        var x = 'inner 지역 변수x'
    }
}

console.log(x); // 전역 변수x
console.log(z); // z is not defined

• 전역 변수 x와 y는 전역 스코프를 가지는 전역변수가 된다.
• 지역 변수 z는 선언된 지역(outer함수)의 지역 스코프를 가지며 하위 지역 스코프 까지도 유효하다.
• inner 함수의 지역 변수 x는 inner함수 안에서만 참조할 수 있다. inner함수 내에서 x를 사용할 경우 전역 변수 x가 아닌 지역 변수 x가 참조된다. 이유는 자바스크립트 엔진이 스코프 체인을 통해 참조할 변수를 검색했기 때문.

변수의 스코프 (var, let, const)

var

var b = 5;

function varTest (){
    var a = 10;
    console.log(b); // 5 전역변수
    
    for (i=0; i <= a; i++){
    	var c = 15;
    	console.log(a); // 10 함수 내 유효범위
    }
    console.log(c); // 15 함수 내 유효범위
}
varTest(); 
console.log(a); //a is not defined
console.log(b); // 5 전역변수

• var은 함수레벨스코프(Function Level Scope)⭐ 다.
• 함수레벨스코프는 함수 내에서 선언된 변수의 범위는 함수 내부이며 함수 외부에서는 참조할 수 없다.
• 함수내부 선언 -> 지역변수
• 함수외부 선언 -> 전역변수

 

let, const

let b = 5;

function letTest (){
    let a = 10;
    console.log(b); // b는 전역변수 사용가능
    
    for (i=0; i <= a; i++){
    let c = 15;
    console.log(a); // 함수의 코드블록에서 선언. 지역변수로 사용가능
    }
    console.log(c); // c is not defined 블록 내 선언한 변수 에러.
}
letTest(); 
console.log(a,c); //a,c is not defined
console.log(b); // 5 전역변수

• let, const 는 블록 레벨 스코프(Function Level Scope)⭐ 다.
• 블록 레벨 스코프는 코드 블록 {  } 내에서 선언된 변수는 코드 블록 내에서만 유효하고 외부에서는 참조할 수 없다.
• 블록 내부에서 선언한 변수 -> 지역 변수
• 블록 외부에서 선언한 변수 -> 전역 변수

※ var, let은 선언할때 값을 주지 않아도 되지만 const는 초기값 할당이 필수⭐

※ var,let은 재할당 가능, const 재할당 불가능⭐

 

렉시컬 스코프(Lexical Scope)

• 렉시컬 스코프란, 함수를 어디서 호출하는지가 아닌 어디에서 선언하였는지에 따라 결정되는 것을 말한다.
• 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며 함수의 선언에 따라 결정된다는 것이 중요하다.
• 정적스코프(static scope) 라 부르기도 한다. ( 반대로 호출에 의해 상위 스코프를 결정하면 동적 스코프(Dynamic Scope) 라 한다, )
• 자바스크립트는 정적스코프를 따른다. 

var x = 1; 

function test() {
  var x = 3;
  test2();
}

function test2() {
  console.log(x);
}

test(); // ?
test2(); // ?

• 해당 코드에서 출력값은 전역 변수 x = 1 이 두번출력된다.
• 렉시컬 스코프로 인해 test, test2 함수가 선언된 위치에 따라 상위스코프를 결정하므로 test에서 test2를 호출한들 이미 test2의 스코프는 선언된 위치로 인해 상위 스코프가 전역 스코프가 되어있기에 1이 두번 출력된 것 이다.
• 전역변수를 인식하는 방법을 알려면 스코프 체인⭐을 알아야한다.