CodeStates / Scope (1)

본 정리에 앞서 아래 코드를 보고 실행되는 값을 한 번 생각해보자.

let greeting = 'Hello';
function greetSomeone() {
  let firstName = 'Josh';
  return greeting + ' ' + firstName;
}

greetSomeone();  // -> ??? 
firstName;       // -> ???

아마 위의 코드를 보고 아래와 같이 생각했을 것이다.

greetSomeone(); -> "Hello Josh"
firstName;      -> ReferenceError

이렇듯 Local Scope 안쪽에서 선언된 변수는 밖에서 사용할 수 없다.

• Scope: 변수 접근 규칙에 따른 유효 범위

  • 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다.
  • 변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위
  • JavaScript는 기본적으로 함수가 선언되는(lexical) 동시에 자신만의 Scope를 가진다.

• 안쪽 Scope에서는 바깥쪽의 변수/함수를 접근하는 것은 가능

• 바깥쪽 Scope에서는 안쪽의 변수/함수를 접근하는 것은 불가능
  

• Scope는 중첩이 가능 -> 함수 안에 함수를 넣을 수 있다.

• Global Scope는 최상단의 Scope로써, 전역 변수는 어디서든 접근이 가능하다.

• 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선 순위를 가진다.

다음의 코드를 보면 보다 쉽게 이해할 수 있을 것이다.

let name = "Richard";

function showName() {
  let name = "Jack";
  console.log(name);  // -> ???
}

console.log(name);    // -> ???
showName();           // -> ???
console.log(name);    // -> ???

어떤 결과값이 나오게 될 것인가?

let name = "Richard";

function showName() {
  let name = "Jack";
  console.log(name);  // -> ???
}

console.log(name);    // -> "Richard"
showName();           // -> "Jack"
console.log(name);    // -> "Richard"

그렇다면 아래의 코드는 어떤 결과가 나오게 될 것인가?

let name = "Richard";

function showName() {
  name = "Jack";
  console.log(name);  // -> ???
}

console.log(name);    // -> ???
showName();           // -> ???
console.log(name);    // -> ???