12.1) Scope ( 범위, 영역 )
☞ Scope는 변수의 접근가능한 곳을 결정합니다. ( 변수의 범위 )
- 변수를 찾아 나설 때, 내부에서 외부로는 접근이 가능합니다.
- 하지만 외부에서 내부는 접근이 불가능합니다.
- 내부, 외부를 판별하는 기준은 ‘함수’ 입니다.
- 즉, 본인이 속한(선언된) 함수 내에서만 접근이 가능합니다.
- 5번째 줄을 보면 우선 foo함수 내부에서 a를 찾지만 a가 없어 함수 밖으로 나가 찾아왔고 1이 출력됩니다.
- 6번째 줄에서 b는 foo함수 내부에 선언되있으므로 2가 출력됩니다.
- 하지만 9번째 줄이 실행되면 에러가 발생합니다. 왜냐하면 console.log(b)가 속한 외부에서는 b가 있는 foo 함수 내부에 접근할 수 없기 때문입니다. 따라서 b가 존재하는지도 모르기 때문에 ‘b is not defined’ 라는 오류 문구가 발생합니다.
- 코드를 살펴보면 변수 a는 foo함수 내부와 외부에 모두 존재합니다.
- 하지만 5번째 줄을 보면, a는 2가 출력됩니다. 왜냐하면 변수를 찾아 나설 때, 가장 우선적으로 함수 내부에서 찾기 때문입니다. 따라서 foo 함수 내부에 있는 a를 찾아서 가져왔기 때문에 2가 출력됩니다.
- 그리고 8번째 줄을 보면, a는 1이 출력됩니다. 왜냐하면 자신이 속한 외부 범위에서 변수 a를 찾았을 때 1값을 가지고 있는 a가 찾아졌기 때문입니다.
12.2) IIFE ( 즉시 실행 함수)
☞ Immediately Invoked Function Expression
- 즉시 실행 함수는 함수를 정의하는 부분과 함수를 호출하는 부분이 나눠져있는 것이 아닌 함수를 정의하자마자 바로 실행하는 함수입니다.
- 코드를 보면 6번째 줄의 console.log(a)는 처음에 foo 함수 내부에서 변수 a를 찾습니다. 하지만 존재하지 않기 때문에 바로 바깥쪽에 위치한 함수 내부에서 a를 찾게 되고 1을 출력합니다.
- 7번째 줄의 console.log(b)는 foo 함수 내부에 b가 선언되어있기 때문에 바로 찾고 2를 출력합니다.
- 마지막으로 12번째 줄을 보면 에러가 발생합니다. 왜냐하면, foo 함수는 즉시실행함수 내부에 위치해 있고 foo함수를 호출하는 부분은 즉시실행함수 내부에 위치해 있기 때문에 foo함수의 존재를 알지 못합니다. 따라서, ‘foo is not defined’라는 오류 문구가 출력됩니다.
12.3) Global Scope, Global variable, Global Object
☞ 가장 바깥쪽에 위치해 있는 것을 전역 범위, 전역 변수, 전역 객체라고 합니다.
- 브라우저 환경에서 Global Object는 항상 window 입니다.
- Global Variable (전역 변수)은 Global Object의 key 값으로 들어갑니다.
- 먼저, 변수 a가 선언되고 1로 초기화가 되었습니다. 그런데 변수 a가 위치해 있는 곳이 가장 바깥쪽 범위(Global Scope)이므로 변수 a는 ‘전역 변수’ 입니다.
- 그리고 5번째 줄을 보면 a는 foo 함수 내부에서 찾지만 없으므로 외부의 bar함수로 찾으러 갑니다. 하지만 여기에도 없으므로 bar함수의 바깥인 global scope(전역 범위)에서 찾습니다. 전역 범위에는 a가 존재하므로 1이 출력됩니다.
12.4) Scope Chain
☞ Scope Chain은 위에서 코드를 보며 설명했듯이, 먼저 가장 내부에 위치한 함수에서 자신이 원하는 변수를 찾는데 함수 내부에 원하는 변수가 없으면 외부의 함수로 나가게 됩니다.
그리고 외부함수에서 변수를 찾게되는데 거기에도 없으면 더 바깥의 외부 함수로 나가서 찾게됩니다.
이것이 마치 사슬로 묶인 것같다하여 Scope Chain 이라고 부릅니다.
