스코프 - Scope

일반적인 변수 선언후 함수 내부에선 전달인자로 받지 않아도 그 변수에 접근 할수 있었습니다.

하지만 함수 내부에서 선언된 변수는 함수 밖에서 접근 할수 없었죠.

 

왜 그런걸까요...?

스코프

변수에 접근할수 있는 기준 (유효범위) 이라고 할수 있습니다.

 

모든 변수들은 스코프 외부에서 내부로 접근할 수 없으며,

내부에서는 외부로 접근이 가능합니다.

스코프는 크게 보았을때 global scope와 local scope로 나눌 수 있습니다.

global scope

최상단에 해당하는 범위입니다. 전역이라고도 불리며

이 부분에 변수가 선언되면 그 변수를 전역변수 라고 합니다.

글로벌 스코프, 전역변수의 특징으로는 어디서든 접근이 가능합니다.

let a = 15 // var a = 15를 써도 같은 결과 입니다.

function hi() {
    for (let i = 0; i < 3; i++) {
        console.log(a)
    }
}

hi()
// 15
// 15
// 15

local scope

글로벌 스코프가 최상단을 의미한다면 로컬은 그 외의 모든 스코프를 의미한다고 생각할 수 있습니다.

지역이라고도 불리며 이부분에 변수가 선언되면 그 변수를 지역변수 라고 합니다.

글로벌 스코프랑은 다르게 변수선언 방식, 접근 방식에 따라서 나누어 구분이 가능합니다.

1. block scope
2. function scope
3. closure scope - 여기선 설명하지 않습니다. 있다는것 정도는 아시면 좋습니다.

1. block scope

한 블럭이 범위가 되는것을 뜻합니다.

block scope가 열리고 닫히는 기준은 일반적을 대활호 라고 생각하시면 편합니다.

현재 위치한 block scope에 변수를 추가해 주는것이 let 키워드 입니다.

if (true) { // 블럭 스코프 시작

    let a = 'hi'
    console.log(a) // hi

} // 블럭 스코프 끝

// 여긴 블럭 밖...!
console.log(a) // a를 찾을 수 없다는 참조오류

function hi() { // 블럭 스코프 1 시작

    let a = 'hello'
    if (true) { // 블럭 스코프 2 시작
      console.log(a) // hello

  } // 블럭 스코프 2 끝

} // 블럭 스코프 1 끝

console.log(a) // a를 찾을 수 없다는 참조오류

2. function scope

함수단위로 범위가 되는것을 뜻합니다.

function scope가 열리고 닫히는 기준은 함수의 시작과 끝 입니다.

현재 위치한 function scope에 변수를 추가해 주는것이 var 키워드 입니다.

function hi() { // function scope 1 시작
    var a = 1

    function hello() { // function scope 2 시작
        var b = 5
        console.log(a, b) // 1 5
    } // function scope 2 끝

} // function scope 1 끝

console.log(a) // a를 찾을 수 없다는 참조오류

function scope와 block scope의 차이

어떤 함수안에 if문이 있다면

if문 내에서 변수를 선언할때 현재 위치한 block스코프는 if문의 body부분이 되겠지만

function스코프는 그 밖에 있는 함수가 갖고있는 block스코프와 같게된다.

즉 의도치 않게 스코프 외부에서 변수가 사용될 수 도 있으니 var키워드를 사용할땐 주의가 필요하다.