
오늘은 scope에 대해서 알아보도록하자
scope는 참조 할수있는 '유효범위'를 말한다.
값을 참조하여 원활한 프로그래밍을 설계하기 위해서는
scope의 개념이 매우 중요하다
자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌수있다.
전역 스코프 (Global scope)
코드 어디에서든 참조 할수있다.
지역 스코프 (Local scope or Function-level scope)
지역(함수)내에서 선언된 변수이고 그 지역의 하부 지역에서만 참조 할 수 있다.
scope의 첫번째 개념인 global scope는 말 그대로
'전역'을 가르킨다
코드 예제를 통해 알아보자
위 코드를 보면
1.함수안에 console.log(global)은 var global 값인 'global'을 가르킨다
2.함수안에 console.log(local)은 함수안에 선언된 local 변수를 가르킨다
3.전역 console.log(global)은 전역변수 'global'을 가르킨다
4.전역 console.log(local)은 함수안에 local변수를 찾을려고 했지만
찾을수없다고 에러 메세지가 떳다
정리해보면 함수 내부에서 외부는 참조 되지만
외부에서 내부는 참조 할수없다 란 결론이다
그래서 특별한 시작점이 없기때문에 코드가 나타나는 즉시 해석되고 실행된다.
전역에 변수를 선언하기 쉬우며 이부분이 전역변수를 남발하게 하는 문제를 일으킨다.
예제를 통해 알아보자
if {} 코드는 블록 내에서 선언되었다.
하지만 블록레벨 스코프를 사용하지 않으므로 함수밖에서 선언된 변수는
코드 블록내에서 선언되었다 할지라도 모두 전역 스코프를 가지게 되낟.
변수 x는 전역 변수이다.
자바 스크립트는 함수 레벨 스코프를 사용한다. 함수 내에서 선언된 매개변수와 변수는
함수 외부에서는 유효하지 않다.
따라서 b의 값은 에러메세지가 나오게된다.
그렇다면 이런경우도 있을것이다 예제를보자
전역변수 x 와 지역변수 x가 중복 선언되었다. 전역 영역에서는 전역 변수만이 참조된다.
함수내에서는 전역과 지역을 모두 참조할수있지만
지역변수를 우선하여 참조한다.
조금 더 어려운개념을 접해볼까 ?
함수 내에 존재하는 함수인 내부함수의 경우에는 어떠한지 알아보자
내부함수는 자신을 포함하고 있는 외부 함수의 변수에 접근할수있다.
내부함수를 알게되면, 클로저의 개념도 함께 설명 해야 하지만
나중에 다루도록 하겠다.
스코프는 크게 2가지 경우가 있다
동적 스코프 , 렉스컬스코프
위 예제의 실행 결과는 함수 bar의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측할 수 있는데 첫번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것이고 두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다.
프로그래밍 언어는 이 두가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다. 첫번째 방식을 동적 스코프(Dynamic scope)라 하고, 두번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라 한다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.
너무 중요한 부분이라 출처를 남긴다
https://poiemaweb.com/js-scope
이렇게 스코프 이해관계에 대해서 너무나 중요한 내용들이 많다.
왜 이렇게 작동되는지,어떻게 활용할것인지,
깊게 생각해보아야한다.