JS : Scope (스코프)

JS : Scope (스코프)

JS : Scope (스코프)

 

Scope (스코프) 란?

---

스코프(Scope : 유효 범위)는 변수의 유효 범위를 말한다. 

함수의 매개변수는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다.

매개변수의 스코프가 함수 내부로 한정되어있기 때문이다.

 

 

---

 

예시 01 : 전역과 함수 내부에서 이름이 같은 변수 x 가 중복 선언이 되었을 때의 유효 범위 (Scope)

---

var x = "HELLO";

function y() {
    var x = "Future";
    console.log(x); // 'Future'
}

y();
console.log(x); // 'HELLO'

• 전역에서 x에 "HELLO"를 선언하고, 함수 내부에 같은 이름인 x에 "Future"를 할당을 했을때, x엔 어떤 값이 들어가 있는지 확인해봤다. 
  함수 내부의 x 엔 "Future"가 할당되어있고, 함수 외부에서 console.log를 했을 때 "HELLO"가 할당되어있음을 알 수 있다.
  이로써, 같은 이름의 변수라 하더라도 함수 내에서 선언된 변수는 함수 내에서만 유효하다는 걸 알 수 있다. 

 

 

---

 

예시 02 : 매개변수의 스코프가 함수 내부로 한정되어있다.

---

function Hello(x, y) {
    console.log(x, y); // 12 7
    return x + y;
}

Hello(12, 7); // 19

console.log(x, y); // ReferenceError: x is not defined

• x + y 를 return 하는 함수가 있다. 
  Hello(12,7)를 부여했을 때 함수 내부의 x, y엔 12,7이 할당되었음을 볼 수 있지만 함수 외부의 x, y 값엔 할당되지 않음을 볼 수 있다. 

 

 

---

 

정리 : 

---

위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있지만, 함수 Hello 내에서 선언된 변수 x는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다 이런 규칙을 스코프라고 한다.

스코프가 없다면 같은 식별자 이름은 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다. (한 폴더 내에 같은 이름의 파일을 둘 수 없는 것과 같다.) 스코프도 이와 같이 식별자 이름의 충돌을 방지한다.

 

 

---

 

스코프의 구분 

---

자바스크립트에서 스코프를 구분하면 두 가지로 나눌 수 있다.

 

1. 전역 스코프 (Global Scope)

- 코드 어디에서든지 참조할 수 있다.

2. 지역 스코프 (Local Scope or Function-Level Scope)

- 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다. 

---

 

모든 변수는 스코프를 갖으며, 변수의 관점에서 스코프를 구분하면 두 가지로 나눌 수 있다.

1. 전역 변수 (Global Variable)

- 전역에서 선언된 변수이며, 어디든 참조할수있다.

2. 지역 변수 (Local Variable)

- 지역(함수) 내에서 선언된 변수이며, 그 지역과 그 지역의 하위 지역에서만 참조할 수 있다.

---

 

정리 :

---

변수는 선언위치 (전역 또는 지역)에 의해 스코프를 가지게 된다.

즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역 (함수내부)애서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.

전역 스코프를 갖는 전역 변수는 전역(코드 어디든)에서 참조할수있다. 지역(함수내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할수있다.

 

 

---

자바스크립트 스코프의 특징 

---

자바스크립트의 스코프는 타 언어와 다른 특징을 가지고 있는데 블록 레벨 스코프(Block-level scope)를 따른다.

블록레벨스코프란 코드블록 ({...}) 내에서 유효(참조,접근가능)한 스코프를 의미한다.