ES5 .Intro(6) - 스코프(Scope)

스코프(Scope)

스코프는 어떤 변수에 접근할 수 있는 지를 정의하는 것이다. 

 

스코프는 2가지로 나눌 수 있다. 

- 전역 스코프 

- 지역 스코프 

 

전역 스코프

전역 스코프: 변수가 모든 함수에 속하지 않고, {} 괄호안에 들어 있지도 않을 때 부르는 변수 

- 전역 스코프 예제 -

- JavaScript 어디에서든 불러 사용 할 수 있다. 

- 네이밍 충돌(naming collisions)이 발생할 확률이 있다. 그러므로 전역변수는 권장되지 않는다.

 

지역 스코프

지역 스코프: 코드 내 특정 구역에서만 사용할 수 있는 변수

 

지역스코프는 2가지 종류로 나눌 수 있다. 

- 함수 스코프

- 블록 스코프 

 

함수 스코프

함수 스코프: 함수 내에서 변수를 선언했을 때 선언된 변수에 접근 가능, 함수 밖에서는 함수 내부에 있는 변수에 접근 불가능한 변수

예제 (1) - 함수밖에서 함수 호출

- 함수 스코프 예제(1) -

- 함수 sayHello() 내에 선언되어 있는 변수 hello를 함수 외부에서 접근 하려고 하면 Error를 발생 시킨다.

 

예제 (2) - 함수내에서 다른 함수 호출

- 함수 스코프 예제(2) -

- 예제에서 second는 firstFunctionVariable에 접근할 권한이 없다는 에러를 발생시킨다. 

- 함수를 각각 선언하고, 함수가 다른 함수의 스코프에 접근하려고 할 때 에러를 발생한다. 

- 함수는 각자의 스코프에 접근이 불가능 하다. 

 

예제 (3) - 안쪽 함수에서 바깥 함수 호출 (Lexical scoping)

- 함수 스코프 예제(3) -

- 예제는 어휘적 스코프(lexical scoping)에 관련된 예제이다.

- 안쪽함수 (innerFunction)에서 바깥쪽 함수 (outerFunction) 변수는 접근 가능하다. 

- 바깥쪽 함수 (outerFunction)에서 안쪽함수 (innerFunction) 변수는 접근이 불가능하다. 

- 이러한 기능을 이용해 클로져(Closures)를 만들 수 있다.

 

* 클로져(Closures)의 기록은 여기를 클릭 하세요  

 

* 어휘적 스코프(lexical scoping)는 javaScript의 실행 컨텍스트와 관련 있는 부분이므로, 실행 컨텍스트에 대한 기록을 참고하시면 될 것 같습니다. 

 

예제 (4) - 호이스팅과 스코프

 

 * 호이스팅의 자세한 기록은 여기를 클릭 하세요 

 

1) 함수 선언식 

- 함수 선언식(선언) 예제 - 

- 함수 선언식(결과) 예제 - 

- 예제는 스코프와 관련있는 호이스팅에 관련된 예제이다. 

 * 호이스팅: '끌어올리다' 는 의미를 가지고 있음

 

- 함수 선언식으로 선언된 sayHello() 함수는 항상 현재 스코프의 가장 위로 호이스팅 된다.

 

2) 함수 표현식 

- 함수 표현식(결과) 예제 -

- 함수 표현식으로 선언된 sayHello() 함수는 현재 스코프의 가장 위로 호이스팅 되지 않는다. 

 

블록 스코프

블록 스코프: 변수를 {} 괄호안에 선언했을 때 {} 괄호 안에서만 접근할 수 있는 변수 

- 블록 스코프 예제 -

- 블록 스코프는 함수 스코프의 부분 집합이다. 

- 블록 스코프도 함수 스코프와 마찬가지로 함수 외부에서 접근 하려고 하면 Error를 발생 시킨다.

 

다음은 호이스팅(Hoisting)에 대한 기록이다.

 

< 참고자료 >

https://github.com/leonardomso/33-js-concepts

 

<ES5 series> chapter 6,  스코프(Scope) end

 

---