(15) JavaScript - 추상화 / 스코프(Scope)

스코프는 한국말로 범위,영역 이라는 뜻을 가지고있는데

변수를 만들고 값을 할당하면 어디서든 그 변수이름으로 할당된 값을 가져올 수있었다.

그런데 변수에는 유효한 범위가 있어서 그 범위를 벗어나면 오류가 발생한다.

예를 들어보자면..

console.log(x);

▲ 위 코드가 제대로 작동할까?

 

x라는 변수를 선언하지 않아서 오류가 생긴 것이지만, 상황에 따라서는 변수를 선언했는데도

이런 오류가 생길 수 도 있다.

 

변수가 어디까지 유효한지 , 즉 변수의 유효 범위에 대해 한번 살펴보자.

위 코드에 변수를 만들어주자

    let x = 3
    console.log(x);

▲ 3이라는 값을 할당해 줘서 실행했을때 3이 잘 출력되는 것을 볼 수있다.

 

한번 function 함수에 담아보자면..

    //Scope: 범위,영역
    function myfunction() {
        let x = 3
        console.log(x);        
    }
    myfunction()

 

▲ 이렇게 해도 당연히 함수 호출로 인해 3이 정상적으로 출력 될 것이다.

 

이번엔 함수 밖에서 변수 x를 출력해보자면..

    function myfunction() {
        let x = 3
        console.log(x);        
    }
    myfunction()
    console.log(x);

▲ 이렇게 실행해보면 결과는 에러가 발생한다.

 

자바스크립트에서는 { }(중괄호)로 감싼 코드를 블록문(Block Statement) 이라고한다.

기본적으로 이 불록문 안에 선언된 변수들을 '로컬 변수' 혹은 '지역 변수'라고 부르는데

    //Scope: 범위,영역
    function myfunction() { //블록문(Block Statement)
        let x = 3 //로컬 변수, 지역 변수 (Local Variable)
        console.log(x);        
    }
    myfunction()
    console.log(x);

 

이 로컬변수는 블록문 내에서만 사용할 수있는 변수인 것이다.

변수 x의 스코프. 그러니까 변수 x기 유요한 범위는 myFunction 함수 안에서만 유효하다는 것이다.

맨 밑줄에 사용한 변수 x는(console.log(x)) 변수 x가 유효하지 않은 곳에서 사용한 것이기에

정의되지 않았다는 에러가 발생한 것이다. 

 

그러면 이 변수 x를 함수 밖으로 가져가보면..

    let x = 3 //로컬 변수, 지역 변수 (Local Variable)
    function myfunction() { //블록문(Block Statement)
        
        console.log(x);        
    }
    myfunction()
    console.log(x);

▲ myFunction 함수 밖에 변수x를 빼놨더니 콘솔창에 오류가 사라졌다.

 

 

    let x = 3 //로컬 변수, 지역 변수 (Local Variable)
    function myfunction() { //블록문(Block Statement)
        
        console.log(x);        
    }

▲ myFunction 안에서 사용한 x는 맨위 에있는 let x 에서 선언한 변수 x 이다.

 

로컬 변수와는 반대로 위처럼 블록문 밖에서 선언한 변수는 블록문 안에서도 사용할 수 있으며

이런 변수를 '글로벌 변수' 혹은 '전역 변수'라고 부른다.

 

▷ 글로벌 변수 - 코드를 작성할 수있는 이 파일 전체에서 어느 곳이든 사용할 수있다.

▷ 전역 변수 - 

 

그렇기 때문에 바깥에있는 함수 호출 쪽 x와 myFunction 안에 있는 x와 같은 x 이여도

문제없이 코드가 동작 하는 것이다.

 

그런데 myFunction 내부에서 똑같은 로컬 변수를 선언하면.. (let x = 5)

    let x = 3 //글로벌 변수, 전역 변수 (Global Variable)
    function myfunction() { //블록문(Block Statement)
        let x = 5 //로컬 변수, 지역 변수 (Local Variable) 
        console.log(x);        
    }
    myfunction()
    console.log(x);

 

▲ 순서대로 살펴보면 글로벌 변수 x(let x =3)를 선언하고 그 뒤로 myFunction 함수도 선언을 한 다음

함수호출(myFunction())을 하게되는데, 그러면 다시 함수 내부에 있는 로컬 변수(let x = 5)가 실행이 되는 것이다.

그렇게되면 로컬 변수 바로 밑에있는 console.log(x)의 x는 로컬 변수 x를 사용하게 되는 것이다.

 

즉 블록문 내에서 변수를 사용하게 되면 가장 먼저 로컬 변수가 있는지 확인한 다음

없을 경우에는 글로벌 변수를 확인한다.

 

마지막으로 맨 밑에 중괄호로 감싸진 블록문 바깥에 있는 console.log(x)의 x는 

myFunction 안에 있는 로컬 변수 x의 영역에서는 벗어났다고 볼 수있다.

그렇기 때문에 자연스럽게 글로벌 변수 x가 사용되면서 콘솔에는 3이출력 되는 것이다.

 

결론은 모든 변수에는 스코프 (변수의 유효범위)가 있는데 

크게 로컬 변수와 글로벌 변수로 나눌 수 있고

이 둘을 나누는 기준을 중괄호로 감싸진 블록문이라고 할 수있다.

 

로컬 변수는 블록문 내에서만 유효한 범위를 갖고 있고

글로벌 변수는 어디에서나 유효한 범위를 가지고 있으며

블록문 내에서 변수를 사용하려면 로컬 변수를 먼저 찾아서 사용하고,

없을 경우에는 글로벌 변수를,

글로벌 변수도 없다면 오류가 발생한다.

 

앞으로 변수를 선언하거나 변수를 사용할 때, 변수의 스코프도 함께 유의해서 사용해야 할 것이다.

 

---

★GitHub 주소 (스코프_Scope)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/6-%EC%B6%94%EC%83%81%ED%99%94/10.scope.html

JavaScript_soloPlay/Basic/6-추상화/10.scope.html at main · SeopE9611/JavaScript_soloPlay