모든 식별자(변수이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데 이것을 스코프라고 한다.
- 스코프 = 유효범위 = 식별자를 검색할 때 사용하는 규칙
- 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. = 네임 스페이스
var x = 'global';
function foo(){
var x = 'local';
console.log(x); -> ① local
}
foo();
console.log(x); -> ② global
자바스크립트는 식별자 결정
에 의해 어떤 변수를 참조해야 할 것인지 결정한다. 이때 코드를 실행할 때의 코드의 문맥과 환경
을 고려한다.
바깥 영역에 선언된 변수x는 어디서든 참조할 수 있다.
함수 foo 내부에 선언된 x변수는 foo함수 내부에만 참조 할 수 있고 foo함수 외부에는 참조할 수 없다.
→ x변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수이다.
※ 참고)
var
키워드로 선언한 변수의 중복 선언
var
키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 의도치 않게 변수값이 재할당되어 변경되는 부작용이 발생한다.function foo(){ var x = 1; //var키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용 //아래 변수 선언문은 자바스크립트 엔진에 의해 var키워드가 없는 것처럼 동작 var x =2; console.log(x); //2 } foo();
let
const
키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.function bar(){ let x= 1; //let이나 const키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다. let x =2; //SyntaxError : Identifier 'x' has already been declared } bar();
구분 | 설명 | 스코프 | 변수 |
---|---|---|---|
전역 | 코드의 가장 바깥 영역 | 전역스코프 | 전역변수 |
지역 | 함수 몸체 내부 | 지역스코프 | 지역변수 |
전역
: 코드의 가장 바깥 영역전역
에 변수를 선언한 변수는전역 스코프
를 갖는전역 변수
가 된다- 어디서든지 참조 할 수 있다.
지역
: 함수 몸체 내부지역
에 변수를 선언한 변수는지역 스코프
를 갖는지역변수
가 된다.- 자신의 지역 스코프와 하위 지역 스코프에서 유효하다
- 전역변수와 지역변수의 식별자가 같다면
스코프 체인
을 통해 참조할 변수를 검색해 지역변수 스코프 내부에 선언된 식별자를 참조한다.
스코프가 함수의 중첩에 의해 하나의 계층적 구조를 갖고 연결된 것
렉시컬 환경
을 단방향으로 연결되어 지역스코프 → 상위 스코프
로 움직인다.※ 참고)
렉시컬환경(Lecxical Environment)
: "코드가 어디서 실행되며 주변에 어떤 코드가 있는 가"에 대한 환경 이를 구현하는 것을실행 컨텍스트(Execution context)
라고 하며, 모든 코드는실행 컨텍스트
에서 평가되고 실행된다.
var
키워드로 선언된 변수는 오로지함수의 코드블록(함수 몸체)
만을 지역 스코프로 인정한다.
var x = 1;
if(true){
var x = 10;
}
console.log(x); //10
var
키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정한다.함수 밖
에서 var
키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역변수
이다.x는 전역변수
이다.x 변수는 중복 선언
된다.변수 값이 변경
되는 부작용을 발생시킨다.※
블록 레벨 스코프
:{}(블록)
을 기준을 하여 지역 스코프를 인정한다. (if문, for문, while문 등 함수가 아닌 블록으로 작성된 문들에도 지역 스코프를 인정해 의도치 않는 값 변경은 억제한다.
- ES6에 도입된
let
,const
키워드는 블록 레벨 스코프를 지원한다.
스코프에는 두가지 패턴을 가지고 있다.
동적 스코프
: 함수가 호출되는 시점에서 동적으로 상위 스코프를 결정하는 패턴렉시컬 스코프(정적 스코프)
: 함수 정의가 평가된 시점에 상위 수코프가 정적으로 결정되는 패턴
함수의 상위 스코프는 자신이 정의된 스코프다.
var x = 1;
function foo(){
var x = 10;
bar();
}
function bar(){
console.log(x);
}
foo();
bar();
이 경우에 출력 값은 둘 다 1
이다.
그 이유는 렉시컬 스코프
방식이 적용되는데 bar()함수
가 정의된 위치에서의 전역스코프의 x의 값은 1
이다.
어디에 호출되든 이 변수 값은 변하지 않고 가져가게 되며, 호출된 곳의 값은 식별자로 새로 선언이 되어 있다고 하지만 영향을 받지 않고
자신이 정의된 위치의 전역변수x값 1이 출력
하는 것이다.
오늘은 분량이 다른 날보다 적기도 하고 다른 부분보다 이해가 더 잘 되었던 것 같아 평소보다 적게 시간이 걸린 것 같다. 이번 단원을 공부하면서 스코프에 대해 자세히 알게 되었고 내가 가지고 있는 오류를 다시 한번 확인할 수 있었다.
살짝 헷갈렸던 부분이 있었는데 예제 13-06
과 예제 13-9
사이에 차이점이 어떤 것인지에 대한 부분에서 헷갈렸던 것 같다.
예제 13-06
는 스코프 체인을 통해 함수가 어떻게 검색되는지에 대한 예시이면서 중첩된 함수에서 함수를 호출하여 어떻게 함수가 호출는 과정과 두개의 foo()라는 함수는 식별자는 같지만 별개의 함수로 보아야 할 것이며, 스코프를 범위를 고려하고 호출한 위치에서 스코프 내부의 함수의 이름을 찾아내어 결과 값을 나타낸 것이다.
예제 13-9
는 렉시컬스코프에 대한 예제로 전역변수가 선언되어 있고 함수 안에 전역 함수를 호출하여 결과 값에 대한 예제였다.
만약
var x = 1;
function foo(){
var x = 10;
bar();
}
이 함수에서 bar() 함수를 다시 정의하게 된다면, bar()의 값이 달라 질 것 같다. 그러면 스코프 체인과정을 거치게 되어 값이 출력 될 것으로 생각된다.
var x = 1;
function foo(){
var x = 10;
function bar(){
console.log(x);
}
bar();
};
foo(); //10
여기서 bar()함수는 선언된 곳의 지역 스코프인 변수 x의 값이 10이기에 10을 출력한다.
함수 내부에 함수를 호출할때 호출된 식별자를 함수내부에서 검색(스코프 체인과정으로 검색) 후 함수가 없다면 전역 함수가 있는지 확인 후 참조하는 과정에서 렉시컬스코프 패턴이 나타난다고 이해하면 되는걸까????? 이게 맞나?
장황하게 생각나는대로 쓰긴 했는데 이게 맞는지 잘 모르겠다.