03. 스코프(Scope)

📌 3-1 스코프(Scope)란?

스코프는 매개변수의 유효범위이다.

💡 스코프는 크게 2가지로 나뉜다.
💡 종류로는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 구분할 수 있다.
💡 스코프 안에서 선언한 변수는 선언한 위치에 따라서 유효한 범위가 정해진다.
💡 스코프의 범위는 {...} 중괄호로 표시한다.

📌 3-2 전역 스코프란(Global Scope)

전역 스코프는 쉽게 말해서 {...} 중괄호 밖에 있는 범위이다. 전역 스코프에서 선언한 변수는 전역 변수가 된다.

// 전역 스코프
const globalValue = 'GloBal';
function test() { // 지역 스코프
    console.log(globalValue);
}
test(); // globalValue 출력

💡 지역 스코프에서 변수를 찾을 수 없으면 지역 스코프밖인 전역 스코프에서 변수를 찾는다.

📌 3-3 지역 스코프(Local Scope)

지역 스코프는 쉽게 말해서 {...} 중괄호 안에 있는 범위이다. 지역 스코프에서 선언한 변수는 지역 변수가 된다.

const localValue = 'Global'; // 지역변수와 똑같은 변수명으로 전역변수 선언
function test() {
    const localValue = 'Local'; // 지역변수
    return console.log(localValue);
}
console.log(localValue); // Global 출력
test(); // Local 출력

function test() {
    const localValue = 'Local'; // 지역변수
    return localValue;
}
test();
console.log(localValue); // 오류출력

💡 지역 스코프에서 변수를 찾을 수 있으면 지역 스코프의 변수가 호출된다.
💡 이와 같이 지역 스코프에서 생성된 변수는 그 블록안에서만 변수가 호출된다.

📌 3-4 지역 스코프의 종류

지역 스코프의 종류는 크게 2가지가 있다.

1. 함수 레벨 스코프(Function Level Scope)

function one () {
    var value = 1; // 함수 one의 지역변수	
}
function test() {
    console.log(value); // 함수 one의 지역변수 호출
}
test(); // 오류출력

이와 같이 다른 지역 스코프에서 선언된 지역 변수는 당연히 호출이 안된다. 하지만 var변수를 사용하면 문제점이 있었다. 바로 함수 레벨 스코프이기 때문이다. 아래 코드에서 문제점을 나타내보겠다.

// 자주쓰는 문인 반복문으로 나타내보겠다. arr에 1-10까지 넣어주는 반복문이다.
const arr = [];
for(var i = 0; i < 10; i++) {
    arr.push(i + 1);
}
function test() {
    return console.log(i);
}
test(); // 10 출력

이와 같은 문제가 생긴다. 지역 스코프에서는 분명 {...} 안에서 선언한 변수는 다른 지역 스코프에서 호출이 안된다. 근데 var는 가능하다. var변수는 function으로 정의한 스코프안에서만 지역 스코프 성격을 가지며 다른 지역 스코프에서는 전역변수로 변경된다. 그래서 let,const를 사용하는 것 이다. 아래에서는 let으로 바꿔서 똑같이 진행해보겠다.

2. 블록 레벨 스코프(Block Level Scope)

const arr = [];
for(let i = 0; i < 10; i++) {
    arr.push(i + 1);
}
function test() {
    return console.log(i);
}
test(); // 오류출력

이와 같이 let과 const는 블록 레벨 스코프이기 때문에 지역 스코프인 {...}에서 선언된 변수는 다른 지역 스코프에서는 호출이 불가능하다.

✔ 이와 같이 코드가 짧은 환경에서는 의도와 다른 변수를 금방 찾겠지만 길어지면 의도와 다른 변수가 호출될 수 있다.
✔ var대신 let과 const를 사용하자!! 😊😊😊😊