JS — JavaScript의 어휘 환경 이해 — 심층 분석 — 1부

저는 개발자로서 "어휘적 환경"이라는 용어를 자주 접했지만 깊이 있게 탐구하는 데 시간을 투자한 적은 없습니다. 그래서 저는 "공유는 배려입니다 ;)"이기 때문에 이 게시물에 깊이 들어가서 제가 찾은 결과를 기록하기로 결정했습니다. 이 게시물이 끝날 때까지 우리 둘 다 어휘 환경이 무엇인지 확실히 이해하고 메모리에서 어떤 일이 일어나는지, 데이터 구조가 무엇인지, 호출 스택이 어떻게 작동하는지 탐구할 수 있기를 바랍니다. 걱정하지 마세요. 간단하고 명확하게 설명하겠습니다!

어휘 환경

자세히 알아보기 전에 간략한 개요부터 살펴보겠습니다. 일부 개념이 처음에는 복잡해 보이더라도 걱정하지 마세요. 이해하기 쉽도록 개념을 나누고 비유를 사용하겠습니다.

어휘적 환경은 코드의 특정 지점에서 변수와 함수의 범위를 추적하는 JavaScript의 특수 데이터 구조입니다.

데이터 구조는 정보를 효율적으로 사용할 수 있도록 컴퓨터에서 정보를 구성하고 저장하는 방법입니다. 일반적인 예로는 배열, 개체, 목록 및 트리가 있습니다. 추가 정보: 데이터 구조 튜토리얼 - GeeksforGeeks

'어휘'라는 용어는 변수와 함수의 범위와 접근성이 프로그램이 실행되는 방식이 아니라 코드에 작성된 위치에 따라 결정된다는 의미입니다.

어휘 환경의 주요 역할:

• 특정 범위(예: 함수 또는 블록) 내의 모든 변수 및 함수 선언을 저장합니다.
• 코드의 특정 지점에서 저장된 항목에 액세스할 수 있습니다.

다음은 세 가지 어휘 환경을 포함하는 간단한 코드 예제입니다.

var sheep = 1;  // Global sheep

function drinkWater() {
    let waterTemperature = "cold"; 
    console.log("The sheep is drinking " + waterTemperature + " water.");
}

var sheepHouseInArea = true;  // Indicates whether the sheep house is present

if (sheepHouseInArea) {
    let lambs = 2;  // Lambs inside the house
    console.log("There are " + sheep + " sheep in the total area and " 
                 + lambs + " lambs!");
}

// This will result in an error because 'lambs'
// is only accessible inside the if block!
console.log("How many lambs are there? " + lambs);

이 코드의 세 가지 어휘 환경은 전역 범위, drinkWater 함수 범위 및 if 블록 범위입니다. 이러한 개념을 더 쉽게 이해할 수 있도록 양과 관련된 간단한 비유를 사용해 보겠습니다.

양 비유:

이번 주 밖에 산책을 하다가 울타리 안에 있는 양 몇 마리를 발견하고 '아, 이게 어휘 환경 같구나!'라고 생각했습니다.

설명해 보겠습니다. 안에 양이 있는 울타리가 있는 지역을 상상해 보세요. 양은 울타리 안에서만 풀을 먹는 등의 일을 할 수 있습니다. 이제 울타리 안에 양들이 머물 수 있는 작은 양 우리가 있다고 상상해 보세요. 집 안에 있는 양들은 밖으로 나갈 수 없으나, 밖에 있는 양들은 들어갈 수 있습니다.

비유 분석:

담장은 양, 양, 집, 풀 등 모든 것이 존재하는 전체 영역을 나타냅니다. 이 울타리 영역을 우리는 전역 범위라고 부릅니다. 울타리가 있는 이 지역 내에서 양 집은 블록 범위를 나타내는 더 작고 별도의 섹션입니다. 마지막으로 양이 먹는 풀(냠냠)은 전역 범위 내의 기능, 즉 양이 그 공간 내에서 수행할 수 있는 특정 활동이나 행동과 같습니다.

코드 블록에서 전역 범위는 빨간색 상자로, drinkWater 함수 범위는 파란색 상자로, if 블록 범위는 녹색 상자로 표시됩니다. 이것이 세 가지 어휘 환경입니다.

전역 범위(울타리 영역):

양(var sheep = 1;으로 표현)은 울타리가 쳐진 지역을 자유롭게 돌아다니는 전역 범위의 변수를 상징합니다. drinkWater 함수와 if 블록의 외부와 내부 모두에서 사용할 수 있습니다.

기능 범위(drinkWater):

drinkWater 함수는 울타리가 있는 영역 내에서 양이 수행할 수 있는 작업을 나타냅니다. 전역 범위 어디에서나 drinkWater 함수를 호출할 수 있습니다. 그러나 함수 자체는 정의될 때 새로운 어휘 환경을 생성합니다. 이 함수 내에서 변수(예: let waterTemperature = 'cold';)는 함수 내에서만 액세스할 수 있습니다.

블록 범위(블록인 경우):

if 블록은 새롭고 더 작은 범위를 만듭니다. 양 집으로 표시되는 이 범위에는 2마리의 양이 있습니다(양 = 2라고 가정). 이 범위 내에서 console.log 문은 전역 sheep 변수뿐만 아니라 Lambs 변수의 값도 기록합니다. Lambs 변수는 블록 범위에만 적용되는 반면 sheep 변수는 상위 환경(전역 범위)에서 가져옵니다. 이는 JavaScript가 범위 체인을 조회하고 현재 환경에서 찾을 수 없는 변수를 확인할 수 있도록 하는 외부 환경 참조를 통해 가능합니다.

외부 환경 참조는 어휘 환경 내의 참조 또는 포인터입니다. 이는 상위 어휘 환경을 가리키므로 JavaScript가 범위 체인을 조회하여 현재 환경에서 찾을 수 없는 변수를 확인할 수 있습니다.

질문 시간!

물을 마실 수 있는 전역 범위에 정의된 총 양의 수를 기록하도록 drinkWater() 함수를 수정할 수 있나요? 댓글 섹션에서 답변을 공유해 주세요!

다중 어휘 환경 이해

이 코드에는 전역 범위, 함수 범위, 블록 범위라는 세 가지 어휘 환경이 있음을 알 수 있습니다. 둘 이상의 어휘 환경이 있는 경우 이를 다중 어휘 환경이라고 부릅니다. 단일 코드에 여러 어휘 환경이 존재할 수 있다는 점을 이해하는 것이 중요합니다. 새로운 범위(예: 함수 또는 블록)가 생성될 때마다 새로운 어휘 환경이 생성됩니다. 즉, 코드의 다양한 부분이 고유한 별도의 환경을 가질 수 있습니다.

환경 기록

이제 어휘적 환경이 어떻게 작동하는지 이해했으므로 환경 기록의 개념에 대해 더 자세히 살펴보겠습니다.

전역 범위, 함수, 블록 등 어휘 환경이 생성될 때마다 JavaScript는 이에 대한 환경 레코드를 자동으로 생성합니다.

이 환경 레코드는 해당 특정 범위 내에서 액세스할 수 있는 모든 변수, 함수 및 기타 바인딩을 추적하는 데이터 구조입니다. 기본적으로 이는 해당 환경 내에 정의된 모든 항목에 대한 내부 저장소 역할을 하여 코드 실행 중에 필요할 때 올바른 데이터를 사용할 수 있도록 보장합니다.

어휘 환경과 환경 기록의 차이점

어휘적 환경과 환경 레코드의 주요 차이점:

어휘적 환경은 JavaScript 코드가 실행되는 장소입니다. 코드가 존재하는 "설정" 또는 "컨텍스트"라고 생각하세요. 이 컨텍스트에는 변수 및 함수의 범위가 포함되어 코드의 어느 지점에서나 사용 가능하거나 액세스 가능한 항목을 결정합니다. 예를 들어, 우리 코드에서 Lambs 변수는 녹색 경계 환경(블록 범위) 내에서만 액세스할 수 있습니다. 어휘 환경에는 외부 환경 참조(이미 설명한 내용)도 포함되어 상위 환경의 변수에 액세스할 수 있습니다.

환경 레코드는 해당 환경에서 사용되는 실제 변수, 함수 선언 및 기타 식별자를 보유하는 어휘 환경 내의 특정 저장 영역입니다. 어휘 환경은 더 넓은 맥락인 반면, 환경 기록은 코드의 데이터(예: 변수 값 및 함수 정의)가 저장되는 곳입니다. JavaScript는 변수나 함수에 액세스해야 할 때마다 현재 어휘 환경의 환경 기록을 찾습니다.

코드 예제를 사용하여 어휘 환경과 환경 기록을 다시 설명하겠습니다.

세 가지 어휘 환경이 있으며 각각 고유한 환경 기록이 있습니다.

1. 전역 범위(빨간색 상자), 어휘 환경 1: 이 어휘 환경은 전역 수준에서 생성됩니다. 이 환경 내의 환경 기록에는 다음이 포함됩니다.
   • 변수양.
   • drinkWater 기능
   • sheepHouseInArea 변수.

이러한 선언은 전체 코드에서 액세스할 수 있습니다. 전역 환경에서는 이 환경에 정의된 drinkWater 함수와 실행 시 자체 블록 범위를 생성하는 if 문도 참조합니다.

1. 함수 범위(drinkWater, 파란색 상자), 어휘 환경 2:
   이 환경의 환경 기록에는 drinkWater 함수 내부에서 let을 사용하여 선언된 변수 waterTemperature가 포함되어 있습니다. 이 변수는 함수 내에서만 액세스할 수 있습니다. 하지만 이 함수는 양과 같은 전역 환경의 변수에도 액세스할 수 있습니다.

2. 블록 범위(블록인 경우 녹색 상자), 어휘 환경 3:
   이 환경 내의 환경 레코드에는 if 블록 내부에서 let을 사용하여 선언된 변수lambs가 포함되어 있습니다. 이 변수는 이 특정 블록 범위 내에서만 액세스할 수 있습니다. 블록은 sheep 및 sheepHouseInArea와 같은 상위 환경의 변수에 액세스할 수도 있습니다.

기억의 뒤에서 무슨 일이 일어나는가

어휘적 환경과 환경 기록을 자세히 살펴본 후 이제 JavaScript가 코드 실행 중에 메모리와 변수 액세스를 관리하는 방법을 이해할 준비가 되었습니다.

코드가 실행되면 JavaScript는 각 기능이나 코드 블록에 대해 새로운 어휘 환경을 만듭니다. 각 환경에는 해당 범위에 정의된 모든 변수와 함수를 저장하는 자체 환경 기록이 있습니다. 이 설정은 앞서 설명한 대로 효율적인 메모리 사용을 보장합니다.

Behind the scenes, the JavaScript engine handles these lexical environments in memory. The call stack is used for tracking function calls, while block scopes create new lexical environments linked to their outer environments. However, unlike functions, these block scopes aren't pushed onto the call stack.

What is the call stack?

The call stack is a fundamental concept in how Javascript executes code.

The call stack is a data structure that keeps track of function calls in a program. It works on a Last-In-First-Out (LIFO) principle. Here's how it works:

• When a function is called, it's added (pushed) to the top of the stack.
• When a function finishes executing, it's removed (popped) from the top of the stack.
• The stack also keeps track of the current position in the code.

Key points about the call stack:

• It records where in the program we are.
• If we step into a function, we put it on the top of the stack.
• If we return from a function, we pop it off the stack.
• The stack has a maximum size, and if that limit is exceeded, it results in a "stack overflow" error.

Now you know why its called stack overflow haha!

Here's a simple example to illustrate:

function greet(name) {
    console.log('Hello, ' + name);
}

function processUser(user) {
    greet(user);
}

processUser('Alice');

1. main() (global execution context)
2. processUser('Alice')
3. greet('Alice')

As each function completes, it's popped off the stack until we return to the global context.

The last final question!

In our sheep code example, can you identify if anything is placed on the call stack during execution? Share your thoughts in the comments section!

---

Conclusion

That's it for Part 1! I hope this post has helped you gain a solid understanding of how JavaScript handles lexical environments, environment records, and what happens behind the scenes in memory. I've learned a lot in the process, and I hope you have too. If you have any questions or feedback, I'd love to hear from you - let's learn and improve together!

I titled this post 'Part 1' because I plan to follow up with 'Part 2,' where I'll dive into three major concepts that are closely linked to lexical environments:

1. Closures: Think of them as magical boxes that let functions remember and access variables from their outer environment, even after the outer function has finished executing.
2. Scope Chains: We'll explore how JavaScript navigates through nested environments to find variables, like a treasure hunt in your code.
3. Hoisting: This explains why some variables and functions seem to "float" to the top of their scope, which can be tricky to understand but is crucial for writing predictable code.

These concepts are super important because they directly impact how your JavaScript code behaves. Understanding them will help you write cleaner, more efficient code and avoid some common pitfalls.

Stay tuned!

--
Please also follow me on my Medium: https://medium.com/@ensing89

위 내용은 JS — JavaScript의 어휘 환경 이해 — 심층 분석 — 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!