> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 중첩 함수 범위: 초보자 가이드

JavaScript의 중첩 함수 범위: 초보자 가이드

Susan Sarandon
풀어 주다: 2025-01-13 12:38:42
원래의
354명이 탐색했습니다.

Nested Function Scope in JavaScript: A Beginner

JavaScript는 다양성과 특성으로 인해 놀라움과 놀라움을 선사하는 언어입니다. 그러한 부분 중 하나는 중첩된 함수가 변수 범위를 처리하는 방법입니다. 이제 막 JavaScript를 시작하거나 코딩 기술을 향상시키려는 경우 이 개념을 이해하는 것이 JavaScript를 마스터하는 데 중요합니다.

이 블로그에서는 중첩된 함수가 무엇인지, 해당 범위가 어떻게 작동하는지, 이 지식이 왜 중요한지 살펴보겠습니다. 마지막에는 중첩 함수가 변수와 상호 작용하는 방식 및 클로저의 힘을 이해하게 될 것입니다.

⁉️ 중첩 함수란 무엇입니까?

중첩 함수는 다른 함수 내에 정의된 함수일 뿐입니다. JavaScript에서 이러한 내부 함수는 외부(포함) 범위에 있는 변수에 액세스할 수 있습니다. 이러한 동작을 어휘적 범위 지정 또는 더 자주 클로저라고 합니다.

? 중첩된 함수가 범위를 처리하는 방법

중첩 함수의 동작은 어휘적 범위 지정이라는 개념에 따라 결정됩니다. 즉, 변수의 범위는 소스 코드의 위치에 따라 정의됩니다.
중첩된 함수 범위에 대해 기억해야 할 주요 규칙은 다음과 같습니다.
1️⃣ 내부 함수는 외부 함수의 변수에 접근할 수 있습니다:
내부 함수는 외부 함수에 선언된 변수에 대한 전체 액세스 권한을 갖습니다.
? 예:

function outerFunction(){
    const outerVar = "I am from Outer Function!";
    function innerFunction(){
        console.log(outerVar); // Accessing `outerVar` from outer scope
    }
    innerFunction();
}
outerFunction(); // Output: I am from Outer Function! 
로그인 후 복사

2️⃣ 외부 함수는 내부 함수의 변수에 접근할 수 없습니다:
내부 함수 내에서 선언된 변수는 해당 함수에 대해 로컬이며 외부 함수에는 표시되지 않습니다.
? 예:

function outerFunction(){
    function innerFunction(){
        const innerVar = "I am from Inner Function";
    }
    console.log(innerVar); // Error: Uncaught ReferenceError: innerVar is not defined
    innerFunction();
}
outerFunction();
로그인 후 복사

3️⃣ 중첩 함수는 외부 함수가 반환된 후에도 외부 범위에 액세스할 수 있습니다
이것은 폐쇄가 작용하는 곳입니다! 클로저를 사용하면 외부 함수가 더 이상 실행되지 않더라도 내부 함수가 둘러싸는 범위의 변수를 "기억"할 수 있습니다.
? 예:

function outerFunction() {
    let count = 0;

    return function innerFunction() {
      count++;
      console.log("count = " + count); 
    };
}

const counter = outerFunction();
for(let i=1; i <= 5; i++){
    counter()
}
/* Output:
count = 1
count = 2
count = 3
count = 4
count = 5 */
로그인 후 복사

내부 함수는 count 변수를 저장하므로 반복 호출 시 숫자를 늘릴 수 있습니다.

? 중첩된 함수 범위를 이해하는 것이 왜 중요한가요?

중첩된 함수 범위를 마스터하면 강력한 코딩 패턴이 잠금 해제되고 다음과 같은 이점이 있습니다.

  • 캡슐화: 일부 데이터를 비밀로 유지하고 특정 기능을 통해서만 사용할 수 있습니다.
  • 함수 팩토리: 사전 정의된 동작으로 재사용 가능한 동적 함수를 생성합니다.
  • 효율적인 코드: 함수 간 변수 공유로 반복을 줄입니다.

? 클로저 미리보기

클로저는 중첩된 함수와 밀접하게 관련된 고급 개념입니다. 외부 함수가 실행된 후 내부 함수가 외부 범위의 변수를 기억하고 액세스하면 클로저가 생성됩니다.
지금은 다음 사항만 기억하세요.

클로저는 중첩된 함수가 외부 범위의 변수를 활성 상태로 "유지"할 수 있게 해줍니다.

다음 블로그에서는 클로저에 대해 자세히 알아보고 클로저의 실제 용도와 JavaScript를 강력한 언어로 만드는 방법을 살펴보겠습니다.

? 결론

중첩 함수의 범위를 이해하는 것은 JavaScript 여정에서 중요한 단계입니다. 클로저, 데이터 개인 정보 보호 및 고급 프로그래밍 패턴을 이해하기 위한 기반을 마련합니다. 중첩 함수는 JavaScript 어휘 범위의 강력함과 효율적이고 유연하며 재사용 가능한 코드를 생성하는 능력을 강조합니다.
클로저를 탐색할 준비가 되셨나요? 시리즈의 다음 블로그를 기대해주세요! ?
즐거운 코딩하세요! ✨

위 내용은 JavaScript의 중첩 함수 범위: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿