JavaScript에서 Scope(스코프)란? - Global Scope와 Local Scope에 대한 이해

JavaScript에서 Scope(스코프)는 변수가 유효한 범위를 나타내는 개념입니다.
Scope는 변수가 선언되었을 때 해당 변수가 어디에서 접근 가능한지를 결정합니다.
JavaScript는 두 가지 Scope 타입을 가지고 있습니다

• Global Scope
• Local Scope

Global Scope

---

Global Scope(전역 스코프)는 프로그램 전체에서 접근 가능한 스코프입니다.
전역 스코프에서 선언된 변수는 어느 곳에서든지 접근할 수 있습니다.
전역 스코프에서 변수를 선언하려면, 함수나 블록 안에서 선언하는 것이 아니라 스크립트의 가장 바깥쪽에 선언해야 합니다.

// Global Scope에서 변수를 선언합니다. 
var globalVariable = 'Hello World!'; 
function sayHello() { 
  console.log(globalVariable); 
} 
sayHello(); // 'Hello World!'

위의 예시에서 globalVariable 변수는 함수 안에서 선언되지 않았으므로 전역 스코프에서 선언된 것입니다. 함수 sayHello()에서도 이 변수를 접근할 수 있습니다.

Local Scope

---

Local Scope(지역 스코프)는 함수나 블록 안에서 선언된 변수가 해당 함수나 블록 안에서만 접근 가능한 스코프입니다. 함수나 블록 안에서 선언된 변수는 해당 함수나 블록 밖에서는 접근할 수 없습니다.

function sayHello() {
// Local Scope에서 변수를 선언합니다. 
    var localVariable = 'Hello World!';
    console.log(localVariable); 
} 
sayHello(); // 'Hello World!' 
console.log(localVariable); // ReferenceError: localVariable is not defined 

위의 예시에서 localVariable 변수는 함수 sayHello() 안에서 선언되었으므로 해당 함수 안에서만 접근할 수 있습니다. 함수 밖에서 이 변수를 접근하려고 하면 ReferenceError가 발생합니다.

변수 Shadowing

---

JavaScript에서는 Local Scope 안에서 동일한 이름을 가진 변수를 다시 선언할 수 있습니다. 이를 변수 Shadowing이라고 합니다. Local Scope 안에서 새로운 변수가 선언되면, 이 변수는 해당 Local Scope에서만 유효하며, 해당 Scope에서는 이 변수의 이름으로 원래의 변수에 접근할 수 없습니다.

var globalVariable = 'Hello World!'; 
function sayHello() { 
    // Local Scope에서 globalVariable 변수를 shadowing합니다. 
    var globalVariable = 'Hi there!'; 
    console.log(globalVariable); 
} 
sayHello(); // 'Hi there!' 
console.log(globalVariable); // 'Hello World!' 

위의 예시에서 sayHello() 함수 안에서 globalVariable 변수를 shadowing하여 새로운 값을 할당했습니다. 함수 밖에서 globalVariable 변수는 여전히 'Hello World!' 값을 유지하고 있습니다.
하지만 함수 안에서 선언한 globalVariable 변수는 함수 밖에서는 접근할 수 없습니다. 함수 밖에서 globalVariable 변수를 사용하려면, 함수 안에서 globalVariable 변수를 shadowing하지 않도록 조심해야 합니다.

var globalVariable = 'Hello World!';

function sayHello() {  
var globalVariable = 'Hi there!'; // 변수 shadowing  
console.log(globalVariable); // 'Hi there!'  
}

sayHello(); // 'Hi there!'  
console.log(globalVariable); // 'Hello World!'

위의 예시에서 sayHello() 함수 안에서는 globalVariable 변수를 새로 선언하여 'Hi there!' 값을 할당했습니다.
함수 밖에서는 여전히 'Hello World!' 값을 유지하고 있습니다.

자바스크립트에서 스코프는 변수와 함수의 유효 범위를 결정하는 중요한 개념입니다.
이를 잘 이해하고 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.
스코프의 개념은 자바스크립트뿐만 아니라 다른 프로그래밍 언어에서도 공통적으로 사용되는 개념이기 때문에 꼭 기억하고 학습하시길 바랍니다.