[javascript] 스코프

 

학교에서 c언어나 c# 실기수업을 들을때 가장 신기한 것은 학생들이 지역변수나 포인터를 사용하지 않고 대부분 main 함수에서 전역변수를 이용해서 프로그래밍을 하던 것이다. 또한 내가운영하는 자스민에도 스코프의 개념이나 변수들의 유효범위에 대해서 모르는 경우가 많았기에 스코프에대해서 포스팅을 하고 다시 정리하도록 해야겠다. 

 

스코프를 포스팅하기위해 여러 블로그를 보던 중 잘 정리되어있는 번역글이 있어 그 글을 다시정리하며 내것으로 만들어 보겠다. 

 

https://medium.com/@khwsc1/번역-자바스크립트-스코프와-클로저-javascript-scope-and-closures-8d402c976d19

[번역] 자바스크립트 스코프와 클로저(JavaScript Scope and Closures)

 

스코프란 

 

스코프는 변수가 가지는 유효범위이다. 변수는 작성된 위치에 따라 전역스코프 , 지역스코프로 나뉜다. 

 

전역스코프 global scope

전역스코프는 함수나 블록외부에서 작성된 변수로 어디에서나 이 변수에 접근 할 수 있다.

 

var global = "this is global"

function say(){
	console.log(global);
}

say();

 

이 전역 변수는 사용을 자제 하는 것이 좋은데 그 이유는 현재 처럼 var 변수로 선언한 경우 실수로 변수명을 새로이 선언하여 다른 값을 할당한다면 오류가 날 수 있고 악의적인 사용자가 이 값을 손쉽게 변경 할 수 있기 때문이다. 

 

var global = "global";
var global = "nope"; // 재 선언이 가능하다.  

 

지역스코프 local scope 

 

함수내부나 블록내부에서 유효한 변수들이다. 이 변수들은 외부에서 접근 할 수 없으며 이 지역스코프는 함수스코프와 블록스코프로 나뉜다. 

 

함수스코프 function scope

 

함수스코프는 함수 단위로 변수들이 선언되었을때 각 함수 내부에서만 접근한 범위이다. 

 

function myName(){
    let name = "hokeys";

    console.log(name);
}

console.log(name) // name 변수를 찾지 못한다.

myName();

 

이 함수스코프는 내부함수에서 외부함수로 접근이 가능하나, 함수 외부에서 함수 내부로 접근은 불가능 하다. 이를 렉시컬 스코프라고 한다.

 

function myName(){
    let name = "hokeys";

    console.log(lastName); // lastName의 위치를 찾지 못한다. 
    function myLastName(){
        let lastName = "lee";
        console.log(name); // name을 찾을 수 있다. 
    }
}


myName();

 

서로 다른 곳에서 함수가 선언이 되고 한 함수가 다른 함수의 내부에서 호출이된다면 이 함수는 기존의 함수범위 만을 가진다. 

 

let myname = "hokeys";

function sayMyname(){
    console.log(myname); // hokys를 가진다. 
}

function dummy(){
    let myname = "mangoo";
    sayMyname()
}

dummy();

 

 

블록스코프 block scope

 

블록 내부에서 작성된 변수는 해당 블록 내부에서만 접근이 가능하다. let과 const변수가 블록스코프를 가진다. 

 

{
    let helloWorld = "helloWorld";
    var a = "a"; //var는 함수단위 스코프를 가진다. 
    console.log(helloWorld);
}
console.log(a);

 

스코프체인 scope chain

 

 함수내부에서 중첩적으로 선언된 함수들은 내부함수의 외부함수부터 전역 스코프까지 연결된다. 이를 스코프 체인이라 한다. 내부함수에서 어떤 변수를 찾는다면 변수를 찾을때까지 스코프체인을 타고 가장 가까운 변수를 찾는다.

 

let one = "0;"

function outer_1(){
let one = "1"
inner_1()
    function inner_1(){
        let one = "2"
        console.log(one);
        inner_2()
        function inner_2(){
            let one = "3"
            inner_3()
            function inner_3(){
                let one = "4"
                inner_4()
                function inner_4(){
                    console.log(one);
                }
            }
        }
    }
}

outer_1();