[JS] 스코프(1) - 전역, 지역 스코프에 대해

이번 포스팅은 자바스크립트에서 중요한 개념인 스코프에 대해 작성해보려 한다.

 

스코프 = 유효 범위

스코프는 변수 그리고 함수와 관련이 깊다. 함수 내의 매개변수는 함수 내에서만 참조할 수 있고, 외부에서는 참조할 수 없다. 

모두 알고리즘을 공부하거나 반복문 및 조건문을 공부하면서 스코프 때문에 생긴 오류를 한 번쯤은 봤을 거라 생각한다.

 

반복문에서의 스코프

for(let i = 0; i < 1; i++){
   let num = 0;
   for(let j = 0; j < 10; j++){
   	num+=j;
   }
}

console.log(num) // 에러 발생

함수에서의 스코프

function add(num1, num2){
    console.log(num1, num2);
    return num1+num2;
}

add(1,2); // 3

console.log(num1, num2) // 에러 발생

 

변수는 자신이 선언된 위치에 의해 유효한 범위를 가진다. 첫 번째 for문안에 선언된 num변수는 for문 블럭 내에서만 유효하게 사용할 수 있다. 두 번째 함수의 매개변수 또한 함수 내 범위에서만 유효하다. 즉 스코프는 식별자가 유효한 범위를 말한다.

 

var의 스코프

 

반면 아래 코드와 같이 var을 쓰면 함수 블록 범위를 제외한 조건문, 반복문 범위 내의 변수를 외부에서 사용할 수 있다.

if(true){
   var var2 = 0;
}
        
console.log(var2) // 0


function fuc1(){
   var i = 0;
   return i;
}

console.log(i) // 에러발생

 

 

스코프를 통해 같은 이름의 변수 사용 가능

 

스코프를 이용하면 같은 이름의 변수를 사용할 수  있게 한다.

스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.

let x = 'hello park';

if(true){
    let x = 'hello minho';
    console.log(x); // 'hello minho'
}

console.log(x) // 'hello park'

 

참고로 var키워드는 같은 스코프 내에서 중복 선언을 허용한다. 반면 let과 const는 오류를 일으킨다.

 

스코프의 종류

스코프는 전역과 지역으로 구분할 수 있다.

 

전역: 코드의 가장 바깥 영역

지역: 조건문이나 반복문, 함수 몸체 내부

let num = 10 // 전역변수    -------------------------------

for(let i = 0; i < 10; i++){
	let num2 = 10 // 지역변수
}                      //   4 line 지역 스코프

function add(x,y){             
	x = x || 0;  // 지역변수
    y = y || 0;  // 지역변수
    
    return x+y;
}                      //  8-11 line 지역 스코프

---------------------------------------------------------// 전역 스코프

쉽게 말하면 지역이란 함수 몸체 내부를 말한다. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.

전역은 말 그대로 라인 전체이다. 전역에서 선언한 num 변수는 지역 내에서도 사용할 수 있다.

 

 

중첩 함수 내부에서의 스코프

 

함수내의 함수를 생각해보자. 변수에 대한 스코프가 어떻게 정의될까?

 

??에 대한 해답을 생각해보자.

let x = 10;
let y = 20;

function fuc1(){
    let z = 30;
    
    console.log(x,y,z) // ??
    
    function fun2(){
        let y = 40;
        
        console.log(x,y,z) // ??
    }
    
    fun2()
}

fuc1()

x,y는 전역 변수로 선언된 x,y이며,

z는 fun1 내부에 선언된 z를 사용한다.

 

즉 ?? = 10, 20, 30이 나올것이다.

 

fun2()

x는 전역 변수로 선언된 x

y는 fun2 내부에 선언된 y

z는 fuc1에 선언된 z를 사용한다. 

 

즉 ?? = 10, 40, 30이 나올것이다.

 

기본 동작 원리는 이렇다.

 

해당 포스팅에서 기본적인 스코프에 대해 알아봤다. 

 

다음 포스팅은 더 깊게 들어가 스코프 체인, 함수 레벨 스코프, 렉시컬 스코프에 대해 작성해야겠다.