JavaScript 코드인데 제가 정확하게 이해한 건지 잘 모르겠습니다.

Question

```
let a = 10;

const func = () => {
  for (; a > 0; a -= 1){
    console.log(a > , a);
  }
};

func();
func();
/*
실행 결과:
a > 10
a > 9
a > 8
a > 7
a > 6
a > 5
a > 4
a > 3
a > 2
a > 1
*/

```

for문의 로직을 콘솔에 출력시키는 func 함수를 두 번 호출했는데 실행 결과는 for 반복문이 한 회분만 출력이 됐습니다.

```
const func = () => {
  for (let a = 10; a > 0; a -= 1) {
    console.log(a > , a);
  }
};

func();
func();
/*
실행 결과: 
a > 10
a > 9
a > 8
a > 7
a > 6
a > 5
a > 4
a > 3
a > 2
a > 1
a > 10
a > 9
a > 8
a > 7
a > 6
a > 5
a > 4
a > 3
a > 2
a > 1
*/
```

그래서 최상단에 있는 a 변수를 지우고 for문에 let a = 10을 집어넣었더니 이렇게 for문 로직이 두 번 출력되었습니다.

왜 이런 차이가 날까 곰곰이 생각해봤는데 func 함수 바깥에 생성했던 변수 a는 let 키워드로 생성이  되어 블록 레벨 스코프가 적용되서 해당 반복문이 한 번만 실행된 것으로 이해했는데 이게 맞나요?

연양갱 · Accepted Answer

안녕하세요.

첫번째 로직과 두번째 로직의 결과의 차이는 변수선언이 전역스코프와 지역스코프의 위치에 따라 변수 a가 지역변수로 선언된 것인지 전역변수로 선언된 것인지로 이해해주시면 될것 같습니다.

첫번째 예시의 코드에서는 let a = 10이 함수 func() 밖에서 선언되어 전역변수로써 두번 호출된 func함수가 a의 값을 공유해서 사용할 수 있게 되었습니다.

그래서 첫번째 func() 시점에선 변수 a의 값을 가져와 -=1 의 for 반복 연산을 진행하여 a의 값을 0으로 만들어 주었고 두번째 func()의 호출시점에선 이미 0이 되어버린 전역변수 a의 값을 가져와 for의 조건을 만족하기 못하고 함수가 종료되었습니다.

두번째 예시의 코드에선 let a의 변수가 for문 내부의 지역변수로 선언되어 있어 for 블록을 통해 반복문을 실행할때마다 새로운 a의 값이 선언되고 10의값이 할당되게 됩니다.

그러므로 첫번째 func()에서 let a = 10의 값을 할당하여 사용한 뒤 변수 a 참조가 사라진 뒤 두번째 func()에서 또다시 새로운 let a = 10의 값을 할당하여 반복문을 진행하게 되어 위와 다른 결과가 나온것입니다.

참고할 URL을 첨부해 드립니다.
https://www.tcpschool.com/javascript/js_function_variableScope

한번 지역변수와 전역변수, 변수선언의 범위에 대해서 추가적으로 알아보신다면 도움이 더 될것 같네요 :)