Javascript - Scope(유효범위)

Scope란? (유효범위)

• 변수의 접근성과 생존 기간을 제어한다.

맛보기 코드 예제

let func1 = function(){
    var a = 1; 
    var b = 2; 
    console.log(a + b); 
    return a + b 
}; 

let a = 20;    // a가 1로 적용될까 20으로 적용될까? 
------------------------------------------------------
func1();       // 3  -> a = 1 로 적용되었다.
               // 함수 밖에서 a가 선언되어도 함수 안에서 다시 a = 1로 할당됨

• 스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리한다.

 

🟢 자바스크립트의 유효 범위(scope)

• 전역 스코프
• 함수 스코프
• 블록 스코프(es6)

---

🔴 전역 스코프

• 스크립트 어디서든 접근이 가능하기 때문에 사용이 쉽다.
• 타인과의 협업, 라이브러리 사용 시 충돌의 가능성이 있다.

 

🔴 함수 스코프

• 함수 내부에서 정의된 변수와 매개변수는 함수 외부에서 접근할 수 없다.
• 함수 내부에서 정의된 변수라면 함수의 어느 부분에서도 접근할 수 있다.

코드 예시

let func = function(){
    var a = 1;
    var b = 2;
    let func2 = function(){
    	var b = 5;
        var c = 6;
        a = a + b + c;
        console.log(a)
    }
    func2();
}

func();     // 12

> func2에서는 a가 정의되지 않았고 그렇다고 매개변수로도 안 받았는데 에러가 안나는 이유

 

• 함수 내부에서 정의된 변수라면 함수의 어느 부분에서도 접근할 수 있다.

위 함수 스코프의 특징으로 빗대어보면 a 변수는 func 함수에서 정의되었고 func2는 func 함수 안에 속한 내부 함수이므로 a 변수를 자유롭게 사용할 수 있다.

 

코드 예시 2 (함수 내부 선언이 아닌 값이 할당된 변수는 전역 변수로!)

function test(){
    hell = "low";
    var hero = "world";
}

test() 

console.log(hero); // error 
console.log(hell); // "low"

> hero는 함수 외부에서 접근이 안되는데 hell은 접근이 가능한 이유

hero는 함수 내부에서 var로 인해 선언이 되었지만, hell은 선언이 아니라 값만 할당이 되었다. 이처럼 함수 내부에서 선언이 아닌 할당만 된 변수는 전역 변수로서 활용이 가능하다.

 

🔴 블록 스코프

• 중괄호 안에서만 접근 가능하다.
• 블록 내부에 정의된 변수는 블록의 실행이 끝나면 해제된다.

코드 예시

if(true){
    var value = "hello";
} 

console.log(value); // "hello" 


if(true){
    let value = "world";
} 

console.log(value); // "hello"

1.

처음 var로 선언된 value를 보면 var는 함수 스코프 이지만 if문은 함수가 아니기에 현재 전역 변수로서 선언되었다고 볼 수 있다.

2.

let은 블록 스코프 키워드이기 때문에 if문의 블록 { } 안에서만 존재하며 if문의 외부에서 접근이 불가하다.

 

두 가지 내용을 종합하면 마지막 console.log(value) 값은 전역 변수로서 선언된 첫 번째 "hello" 값이 출력이 된다.

---

💬 정리

• 스코프는 변수의 접근성과 생존기간을 제어한다.
• 스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리한다.
• 자바스크립트에는 전역 스코프, 함수 스코프, 블록 스코프가 존재한다.