[Javascript] 자바스크립트 유효범위(Scope) 와 유효범위 체인(Scope chain)

자바스크립트 유효범위(Scope) 와 유효범위 체인(Scope chain)

1. 정의

- scope is the set of variables, objects, and functions you have access to.

- 변수나 객체들에 접근할 수 있는 범위라고 생각하면 쉽다

- 자바스크립트에서는 함수 단위가 scope의 영역이 된다(자바는 블럭{} 단위)

2. 구현

1)  Global scope vs local scope(전역/지역)

//Global var a = 10; function scope(){ //Local var b = 20; //Global c = 30; console.log(b); } console.log(a); scope(); console.log(c); //Error console.log(b);

- a : 전역 변수 - b: 지역 변수가 된다

- 지역변수를 밖에서 접근 하려 한다면 에러가 난다

-  var  없이 변수가 선언 된다면 그것은 전역변수가 된다

2) 변수명 중복

//Global var overlap = 10; function scope(){ //Local var overlap = 20; console.log(overlap); } console.log(overlap); scope();  

- 결과 : 10, 20 

- 함수안의 지역 변수는 전역 변수와 이름이 같더라도 가장 가까운 변수 명을 참조한다

//Global var overlap = 10; function scope(){ //Global overlap = 20; console.log(overlap); } console.log(overlap); scope(); console.log(overlap);  

- 결과 : 10, 20, 20

- 함수안에 var가 없는 변수가 같은 이름으로 지정 된다면 지역 변수의 값 또한 변한다

- var 가 없는 전역 변수는 위험하다

3. 전역변수 사용 방법

- 전역변수의 사용은 위험을 초래한다. 그렇기 때문에 안전하게 사용하는 방법이 필요

1) 전역 객체를 이용

//global object var math = {}; math.sum = { 'a' : null, 'b' : null } math.substract = { 'a':null, 'b':null } math.sum.a = 5; math.sum.b = 6; function sum(){ console.log(math.sum.a + math.sum.b); } sum();  

- 결과 : 11

- math라는 객체를 생성하고 그 안에 속성값(add, subtract)을 선언하여 사용한다

- 속성의 값중 a, b는 중복되는 이름을 사용하지만 속성이 달라 문제가 없다

- 전역객체를 선언함으로서 생기는 문제를 해결한다

2) 모듈화(익명의 함수 사용)

- 전역변수를 아예 사용하지 않을 때 사용한다

- 모든 위험으로 부터 배제한다

(function(){var math = {}; math.sum = { 'a' : null, 'b' : null } math.substract = { 'a':null, 'b':null } math.sum.a = 5; math.sum.b = 6; function sum(){ console.log(math.sum.a + math.sum.b); } sum()})();  

- 익명의 함수는 바로 실행되는 함수 이다

4. Scope chain(유효범위 체인)

- 함수가 중첩 될때 inner 함수가 상위 함수의 유효범위까지 포함 한다

- A scope chain is a list of objects that are searched for identifiers appear in the code of the context

1) 구현

var x = 10; (function foo() { var y = 20; (function bar() { var z = 30; // "x" and "y" are "free variables" // and are found in the next (after // bar's activation object) object // of the bar's scope chain console.log(x + y + z); })(); })();  

- 실행결과 :60

- inner 함수가 실행 되었지만 outer + global 유효 범위의 값까지 계산 된다

- 함수가 생성 될때 [scope] 이라는 프로퍼티를 가지며 이는 곳 유효 범위가 된다. 그리고 유효한 범위의 값들을 연결 한 것이 scope 체인이다. 

- 유효 범위 체인은 inner 부터 검색을 시작해서 값을 반환하고 없으면 undefined된다

5. 결론

- 자바스크립트는 함수단위의 유효범위를 갖는다

- 전역 보단 지역 변수를 사용하는게 안전하다