유효범위(Scope)는 변수의 수명을 의미한다. JS에서 함수 내에 선언한 변수는 지역변수가 되고, 함수 밖에서 선언한 변수는 전역변수가 된다.

• var 를 빼고 선언하면, 함수 내에서 선언하더라도 전역 변수로 선언된다.

1
2
3
4
5
6

function fscope(){
	vscope = 'xx';
    console.log(vscope); // xx
}
fscope();
console.log(vscope); // xx

함수 내에서 var를 생략했을 때는, 먼저 지역변수를 체크하고 없다면 전역변수로 변수를 할당한다.

• 함수 스코프만 존재한다! : {} 스코프는 없음.

1
2
3
4

for (var i = 0; i < 1; i++) {
  var name = 'hahaha';
}
alert(name); // hahaha -> 잘 동작!

java와 같은 {}함수 스코프를 쓰는 언어에서는 에러가 날 것이다.

• 정적 유효범위(statical scoping), 혹은 렉시컬(lexical scoping)

사용할때, 해당 함수 스코프에서 지역변수가 없으면 전역변수를 사용.

1
2
3
4
5
6
7
8
9
10
11
12

var i = 5;

function a() {
  var i = 10;
  b();
}

function b() {
  document.write(i); // 5
}

a();

전역변수를 불가피하게 사용할 때

익명함수를 활용하여, 전역 변수를 지역변수화.

익명함수 선언 및 호출 후 () 괄호로 묶어줌.

1
2
3
4
5
6
7
8
9
10
11
12
13

(function() {
  var MYAPP = {}
  MYAPP.calculator = {
    'left' : null,
    'right' : null
  }
  MYAPP.coordinate = {
    'left' : null,
    'right' : null
  }
  MYAPP.calculator.left = 10;
  MYAPP.calculator.right = 20;
}())

컨텍스트

실행 컨텍스트는 다른 데이터가 접근 가능한지, 어떻게 행동할지(?) 규정되는 곳인다. 보통 this로 자신의 컨텍스트 값들을 접근할 수 있다.

• 가장 바깥 컨텍스트는 전역 컨텍스트(Window)이다.
• 함수 정의
  1. JS 인터프리터 : (전역변수 객체 + 해당 함수 객체)를 함수 내부 [[Scope]] 프로퍼티에 저장한다.
• 함수 호출
  1. 실행 컨텍스트 생성
  2. [[Scope]] 프로퍼티 복사
  3. 스코프 체인 생성
  4. arguments를 포함한 활성화 객체 만들어짐.
  5. 스코프 체인 첫째에 활성화 객체가 위치하고, 둘째에 전역 밴수 객체가 위치.
• 함수 실행 끝
  1. 활성화 객체 파괴

스코프 체인? 실행중인 컨텍스트가 접근할 수 있는 모든 변수와 함수에 순서가 정의되어 있다.

1
2
3
4
5
6
7
8
9

var color = "blue";
function changeColor() {
    if(color === "blue") {
        color = "red";
    }
  	else {
        color = "blue";
    }
}

위 changeColor()가 실행되면, 스코프 체인이 만들어지고, 체인의 앞쪽에는 함수자체의 변수객체와 전역 컨텍스트의 변수 객체가 들어 있다. color 변수는 함수자체의 스코프 체인에서 찾을 수 있으므로 접근이 가능하다. 없으면 스코프 체인을 따라 한단계 올라가, 전역 컨텍스트의 변수객체에 접근한다.

Reference

프론트엔드 개발자를 위한 자바스크립트 프로그래밍, 니콜라스 자카스

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/%EC%A0%84%EC%97%AD%EB%B3%80%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95/

Comment and share