[JavaScript] 스코프 문제

let x = 10;

function outer () {
  let x = 20;

  function inner () {
    x = x + 10;
    return x;
  }
  inner();
}

outer();
let result = x;

// result 값은 얼마인가??

1. 스코프를 그리면 저렇게 된다.

2. 답은 10이다.

3. 풀이

outer함수를 실행하면 outer함수 스코프 내에서 inner 함수가 호출된다.

inner에 의해 값이 변경되는 x는 outer스코프에 속한 x입니다.

inner가 실행되면서 outer함수 스코프의 변수 x값이 30으로 바뀐다.

하지만 변수 result에 할당된 값은 전역 스코프의 x이므로, outer함수가 호출되어도 아무런 영향을 받지 않는다.

---

let x = 10;

function outer () {
  x = 20;

  function inner () {
    let x
    x = x + 20;
    return x;
  }
  inner();
}

outer();
let result = x;

답은 20이다.

outer 함수는 전역 변수 x에 20을 재할당합니다. 따라서 result의 값은 20이 된다.

outer 내부에서 inner 함수가 호출되고 있긴 하지만, inner 함수는 바깥 스코프에 아무런 영향을 미치지 않습니다.

---

let x = 10;

function outer () {
  x = 20;
  function inner () {
    x = x + 20;
  }
  inner();
}

outer();
let result = x;

답은 40이다.

outer가 실행되며 전역의 x가 20이 되고, 이어서 outer 내부에서 inner가 호출되면서 전역의 x값에 또다시 20이 더해집니다.