스코프(Scope)

스코프(Scope)

function add(x, y) {
  // 변수 `x`와 `y`가 정의됨
  return x + y;
}
add(2, 3);
console.log(x); // 에러!

• 매개변수와 같이 함수 안에서 정의된 변수는 함수 바깥에서는 접근할 수 X
• 함수 안에서만 사용할 수 있다.
• 특정 변수가 유효한 코드 상의 유효 범위를 가지고 스코프(scope)라고 한다.
• 위 예제에서의 x와 y는 함수 add의 내부 코드 안에서만 접근할 수 있다.
• 즉, 매개변수는 함수 스코프를 갖는다.

스코프 연쇄 (Scope Chain)

const five = 5;
function add5(x) {
  return x + five;
  // 바깥 스코프의 `five` 변수에 접근
}
add5(3); //8

• add5함수의 return구문에서 함수 바깥에 있는 변수 five의 값을 가져와 사용했다.
• 이는 심지어 함수가 여러 겹 중첩(nested)되어 있더라도 가능하다.

const five = 5;
function add5(x) {
  function add(y) {
    return x + y;
  }
  return add(five);
}
add5(3); // 8

• 코드의 실행 흐름이 식별자에 도달하면, 먼저 그 식별자와 같은 이름을 갖는 변수를 현재 스코프에서 찾아본다.
• 변수가 존재하면 그것을 그대로 사용
• 만약, 현재 스코프에서 변수를 찾지 못할 경우 -> 바로 바깥쪽 스코프에서 변수를 찾아봄
• 있으면 사용하고 없으면 바깥쪽 스코프로 올라가서 다시 찾아보는, 이 과정이 되풀이됨
• 이런 과정을 스코프 연쇄(scope chain)라 한다.
• 가장 바깥쪽 스코프를 만날 때까지 반복

• 가장 바깥쪽 스코프까지 찾아봤는데도 같은 이름의 변수를 찾지 못하면, 그제서야 에러가 발생

• 가장 바깥에 있는 스코프를 최상위 스코프(top-level scope) 또는 전역 스코프(global scope)라고 부른다.
  위 코드에서 five가 정의된 스코프가 바로 전역 스코프이다.

변수 가리기 (Variable Shadowing)

• 단일 스코프에서 같은 이름을 갖는 서로 다른 변수는 존재할 수 X
• 하지만 스코프 연쇄가 일어나면 가능해진다.
• 아래의 코드에서는 x라는 이름을 갖는 변수가 세 번 정의되었다.

const x = 3;

function add5(x) {
  //`x`라는 변수가 다시 정의됨
  function add(x, y) {
    // `x`라는 변수가 다시 정의됨
    return x + y;
  }
  return add(x, 5);
}

add5(x);
// 8

• 바깥쪽 스코프에 존재하는 변수와 같은 이름을 같는 변수를 안쪽 스코프에서 재정의할 수 있다.
• 안쪽 스코프에서는 바깥쪽 스코프에 있는 이름이 무시된다.
• 이런 현상을 변수 가리기(variable shadowing)라고 한다.

어휘적 스코핑 (Lexical Scoping)

• 스코프는 함수 호출의 형태에 의해서가 아니라,
  코드가 작성된 구조에 의해서 결정되는 것이다.

function add5(x) {
  const five = 5;
  return add(x);
}

add5(3);

function add(x) {
  return five + x;
}
// five is not defined

• add라는 함수가 add5라는 함수 안에서 호출되었다고 해서,
  add 함수 내부에서 add5 함수의 스코프 안에 있는 변수에 접근할 수 있는 것은 아니다.
• 코프는 코드가 작성된 구조에 의해 결정되는 성질이다.
  위 코드를 동작시키려면, 아래와 같이 작성해야 한다.

스코프의 종류

• 이 챕터에서는 함수 스코프를 중점적으로 다루었는데, 사실 스코프의 종류가 더 있다.
  특히, let과 const로 선언된 변수는 함수 스코프가 아니라 조금 다른 종류의 스코프를 가진다.

참고링크

• [값 더 알아보기]: https://helloworldjavascript.net/pages/220-value-in-depth.html

---