Posts 스코프에 대해서 알아보자
스코프에 대해서 알아보자
Cancel

스코프에 대해서 알아보자

요즘은 바쁘기도 하고
롤드컵이 시작해서
공부를 많이 못했다.

일도 일단 어느 정도 끝냈고
오늘은 롤드컵을 하지 않읜 공부를 하자.


스코프

오늘의 내용은 스코프이다.
예전에 스코프에 대해 정리한 것 같은데
이번에 더 깊게 알아보자.

스코프는 쉽게 이야기 하면
우리가 선언한 함수, 변수 등의 식별자가
유효한 범위를 뜻한다.

그 범위는 코드 블록 {} 안에서 정해지게 된다.
이 스코프의 개념을 아는 것이 매우 중요하다.

스코프의 개념을 알아야지 선언을 하고
해당 식별자를 다른 곳에서 참조할 수 있기 때문이다.

모든 식별자는 자신이 선언된 위치에서
다른 코드가 식별자를 참조할 수 있는 유효 범위가 결정된다.

이 범위를 정확하게 알아야 참조할 수 있겠지요?
그래서 중요하다.

아래 코드를 한 번 보자.

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. 함수를 어디서 정의했는가.

1번 방식을 동적 스코프라고 부른다.
함수를 정의하는 시점은 한 곳이지만
함수를 호출하는 곳은 여러 곳일 수 있기에 동적 스코프라고 한다.

2번 방식은 정적 스코프, 렉시컬 스코프라고 한다.
함수가 정의된 곳은 가만히 있기에 그렇다.
자바스크립트는 이러한 정적 스코프, 렉시컬스코프를 따른다.

그 말은 무엇이냐!
함수를 호출한 곳이 아니라 어디서 정의했는지가 중요하다!
라는 것이다.

함수를 호출한 곳에서의 스코프는 의미가 없다.
그렇다면 위의 x의 결과는 모두 1이 된다.

bar라는 함수를 전역에서 정의했기 때문에
전역 변수인 x=1을 참조하기 때문이다.


끝.

스코프는 예전에도 배웠지만
렉시컬 스코프라는 개념은 처음 들었다.
단순한줄 알았는데
스코프라는 녀석 멋있네

This post is licensed under CC BY 4.0 by the author.

함수에 대해서 알아보자

전역변수의 문제에 대해 알아보자

Comments powered by Disqus.