위 사진은 본문의 내용과 아무 상관 없습니다. 단지 눈이 좀 편하고 싶어서 퍼왔음.

 

 

scope란? 변수의 유효범위를 말한다.

유효범위가 무엇일까? 바로 변수가 영향력을 발휘할 수 있는 지역이다.

이 지역 밖에서는 그 변수는 없는 것이나 마찬가지이다.

즉, 변수는 자기 scope 안에서만 유효하다.

 

아래 예시를 보면 함수 밖에도 strawBerry 변수가 선언되고 있고 함수 안에도 strawBerry 변수가 선언되고 있다. 구분을 위해 색깔을 달리 입혀보았다.

둘다 똑같은 이름 strawBerry 이다. But, 둘은 서로 다른 변수이다.

 

그것을 어떻게 알 수 있는가?

 

사실 const는 변수 선언, 할당이 단 한번밖에 허용되지 않는다.

만약 const로 똑같은 변수를 한번 더 선언, 할당한다면 Uncaught SyntaxError: Identifier 'strawBerry' has already been declared 라는 에러메세지가 뜬다. 즉, 이미 선언된 변수니까 다시 선언하지 말라는 거다.

그런데 아래 코드를 실행하면 그런 에러가 뜨지 않는다.

둘은 서로 다른 변수이기 때문이다.

왜 똑같은 strawBerry 라는 이름을 사용하는데 서로 다른 변수라는 것일까?

위에서 말한대로, 둘은 서로 다른 지역(범위 = scope)를 갖고 있다.

 

1번 줄의 '스트로베리' 변수와 4번 줄의 '스트로베리' 변수는 서로 다른 변수이다.

 

 

<복사 & 붙여넣기를 위한 코드>;

const strawBerry = 1;

function test () {
  const strawBerry = 0;    // 여기서의 strawBerry 변수는 함수 밖의 strawBerry 변수와 서로 다른 변수임.
  console.log(strawBerry);
}

test();    // 0
console.log(strawBerry);    // 1

 

 

 

위 코드를 실행해보자.

 

그럼 이렇게 된다.

위 코드의 실행결과를 보면 유효범위(scope)가 다른 변수의 생태를 더 확연히 알 수 있다.

 

크롬 브라우저 콘솔창에서 실행한 결과, 함수 안에서 선언 할당된 strawBerry변수는 0, 함수 밖에서 선언 할당된 strawBerry변수는 1을 값으로 가지고 있다.

즉 서로 유효범위가 다른 변수들끼리는 서로 터치하지 않는다. 각각 독립된 구역을 차지하고 있다.

하나는 함수 밖 땅을 차지하고 있고 하나는 함수 안 땅을 차지하고 있다.

이것이 scope이다. 변수의 유효범위. 변수가 차지하는 구역.

 

 

# (내가) 알기 쉽게 설명하는 게 목표입니다. 그래서 변수명도 내맘대로 설명도 내가 생각하는대로 임.

+ Recent posts