[JS🐣] 렉시컬 스코프(Lexical Scope)

Introduction

월요일에 클로저 개념을 배우고 멘붕이 와서 클로저에 대해 정리하려했으나,
클로저를 배우기 위해서는 렉시컬 스코프를 완벽 이해해야함을 깨달았다...
하나의 개념을 배우기위해서는 100개의 개념을 알아야한다는 것을
뼈저리게 느끼고 있다 🤦‍♀️
스코프 총정리는 오늘 내일 중에 스터디 겸 정리 예정이니,
오늘은 렉시컬 스코프에 대해 알아보자!!!

렉시컬 스코프(Lexical Scope)란 무엇인가?

렉시컬 스코프(Lexical Scope)

• 함수를 어디에 선언하였는지에 따라 상위 스코프를 결정한다
• 함수를 어디서 호출하는지는 중요치않고, 함수를 어디에 선언했는지가 중요하다

빠른 이해를 위해 코드를 통해 알아보도록 하자!

코드로 익혀보자!

위 예제의 실행 결과는 어떻게 될까?

사실 나는 10이랑 1로 예상했다..나레기..😔

정답은 바로 1 1이 출력된다.

그렇다면, 동작 원리를 파헤쳐보자!!!

• 함수 bar의 상위 스코프 결정할 수 있는 2가지 방법
  • 1. 함수를 어디서 선언하였는가? (렉시컬/정적 스코프)
    • bar의 상위 스코프는 전역!
  • 2. 함수를 어디서 호출하였는가? (다이나믹/동적 스코프)
    • bar의 상위 스코프는 함수 foo와 전역!

🌟 자바스크립트는 렉시컬 스코프를 따르기 때문에, 전역 변수 x의 값인 1을 출력한다 🌟

따라서, bar함수가 foo함수 안에서 호출된 것과 상관없이,
bar함수는 전역(global) 범위 안에 선언되어 있으므로 1이 두 번 출력된다

Comment

어제는 이벤트 루프, 오늘은 렉시컬 스코프를 이해하고 보니,
클로저의 개념을 이해하는 것이 훨씬 수월했다.
차근 차근 나의 시간대에 맞춰 내가 할 수 있는 일에 집중하며 계속 나아가야겠다.

참고 사이트

스코프
https://poiemaweb.com/js-scope#7-%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84
렉시컬 스코프
https://ljtaek2.tistory.com/145