요즘은 바쁘기도 하고
롤드컵이 시작해서
공부를 많이 못했다.
일도 일단 어느 정도 끝냈고
오늘은 롤드컵을 하지 않읜 공부를 하자.
스코프
오늘의 내용은 스코프이다.
예전에 스코프에 대해 정리한 것 같은데
이번에 더 깊게 알아보자.
스코프는 쉽게 이야기 하면
우리가 선언한 함수, 변수 등의 식별자가
유효한 범위를 뜻한다.
그 범위는 코드 블록 {} 안에서 정해지게 된다.
이 스코프의 개념을 아는 것이 매우 중요하다.
스코프의 개념을 알아야지 선언을 하고
해당 식별자를 다른 곳에서 참조할 수 있기 때문이다.
모든 식별자는 자신이 선언된 위치에서
다른 코드가 식별자를 참조할 수 있는 유효 범위가 결정된다.
이 범위를 정확하게 알아야 참조할 수 있겠지요?
그래서 중요하다.
아래 코드를 한 번 보자.
1
2
3
4
5
6
7
8
let x = 'global';
function foo() {
let x = 'local';
console.log(x); //"local"
}
foo();
console.log(x); //"global"
동일한 이름의 변수를 만들었고
서로 다른 스코프에서 console.log()를 했다.
두 개의 결과 값은 서로 다르다.
자바스크립트는 같은 이름의 변수가 있을 때
어떤 것을 참조해야 할지 결정을 해야 하는데 이것을 식별자 결정이라고 한다.
그리고 그 식별자 결정은 해당 코드 주변 환경에 어떤 코드가 있는지 살펴보게 된다.
이것을 렉시컬 환경이라고 부른다.
스코프 개념이 없다면
위의 결과는 오류를 만들어 낼 것이다.
우리가 흔히 파일을 만들고 이름을 지을 때도
같은 곳에서 같은 이름으로 하면 안 되지만
폴더를 옮기면 중복된 이름을 만들 수 있다.
이런 것도 스코프의 예시가 될 수 있지 않을까?
스코프 종류
스코프는 전역과 지역으로 구분할 수 있다.
변수가 선언된 위치에 따라 전역과 지역이 구분되어 진다.
전역은 어디서든 참조할 수 있는 것이고
지역은 함수 몸체 내부를 뜻한다.
특히 지역 스코프는 중첩을 할 수 있다.
함수 안에서 함수를 정의할 수 있는데 이것을
중첩 함수라고 하고 중첩 함수를 포함하는 함수를 외부 함수라고 한다.
1
2
3
4
5
6
function outer(){
let x = 'outer'
function inner(){
let y ='inner'
}
}
이렇게 중첩이 됐을 때 외부 함수를 상위 스코프라고 부른다.
이런 걸 언제 써? 라고 할테지만
react가 저렇게 만들어져있다.
모든 지역의 최상위 스코프는 전역 스코프이고,
저런 형태를 스코프 체인이라고 한다.
함수 레벨 스코프
자바스크립트를 이용하면서 잘 생각해 보면
사실상 지역 스코프는 함수에 의해서만 생성이 된다.
요런 것을 함수 레벨 스코프라고 한다.
렉시컬 스코프
요거는 약간 복잡해진다.
우선 코드를 보자.
1
2
3
4
5
6
7
8
9
10
var x =1;
function foo() {
var x = 10;
bar();
}
function bar(){
console.log(x)
}
위의 console.log()를 생각해 보자면 결과를 2가지로 생각해 나눌 수 있다.
- 함수를 어디서 호출 했는가.
- 함수를 어디서 정의했는가.
1번 방식을 동적 스코프라고 부른다.
함수를 정의하는 시점은 한 곳이지만
함수를 호출하는 곳은 여러 곳일 수 있기에 동적 스코프라고 한다.
2번 방식은 정적 스코프, 렉시컬 스코프라고 한다.
함수가 정의된 곳은 가만히 있기에 그렇다.
자바스크립트는 이러한 정적 스코프, 렉시컬스코프를 따른다.
그 말은 무엇이냐!
함수를 호출한 곳이 아니라 어디서 정의했는지가 중요하다!
라는 것이다.
함수를 호출한 곳에서의 스코프는 의미가 없다.
그렇다면 위의 x의 결과는 모두 1이 된다.
bar라는 함수를 전역에서 정의했기 때문에
전역 변수인 x=1을 참조하기 때문이다.
끝.
스코프는 예전에도 배웠지만
렉시컬 스코프라는 개념은 처음 들었다.
단순한줄 알았는데
스코프라는 녀석 멋있네