함수, 블록 및 어휘 범위. 차이점이 뭐야?

범위란 무엇입니까?

범위는 변수가 정의된 위치와 코드의 다른 부분이 변수에 액세스하고 조작할 수 있는 컨텍스트입니다. 이 게시물에서는 세 가지 유형의 범위와 JavaScript에서 작동하는 방법에 대해 설명합니다.

기능 범위

아래 예에서 helpMe라는 함수에는 msg라는 변수가 있습니다. Msg는 함수 범위이므로 helpMe 함수 외부에서 호출하면 정의되지 않습니다.



이름이 같은 변수가 두 개 있는 경우 위치가 중요합니다. 아래 예제에서 새 변수는 함수(분홍색 상자) 외부에서 선언된 다음 새 변수는 함수 범위가 birdWatch입니다. 새가 기능 밖에 있을 때 '원앙'이 인쇄됩니다.

블록 범위

코드 블록은 중괄호로 정의됩니다. Let과 Const는 블록 범위라는 점에 유의하는 것이 중요합니다. 즉, Let 또는 Const를 사용하여 변수를 선언하면 해당 변수는 해당 블록 외부에서 액세스할 수 없습니다.



반대로 var를 사용하면 블록 범위 내에서 선언된 변수에 계속 액세스할 수 있습니다.

// let & const are BLOCK SCOPED

if (true) {
const animal = 'eel';
console.log(animal); //'eel'
}
console.log(animal); //NOT DEFINED!

// Var is not BLOCK SCOPES
if (true) {
var animal = 'eel';
console.log(animal); //'eel'
}
console.log(animal); //'eel'

어휘 범위

어휘 범위는 중첩 함수가 부모/외부 함수로 범위가 지정된다는 사실을 나타냅니다(단방향 관계임).

아래 예에서 내부 함수는 외부 함수 안에 중첩됩니다. 보시다시피 우리는 내부 함수 내부에서 hero에 접근할 수 있습니다. 하지만 이 함수 밖에서는 inner에 접근할 수 없습니다.



다음은 어휘 범위의 작동 방식에 대한 또 다른 예입니다. outer()를 호출하면 아래 예제는 'AMADEUS'를 출력합니다. 이는 extraInner 함수 내부에 영화가 정의되어 있지 않기 때문에 이 함수는 가장 가까운 영화인 Amadeus를 찾습니다. The Shining이 주석 처리되지 않은 경우 콘솔에서 인쇄합니다.

function outer() {
  let movie = 'Amadeus';

 function inner() {
   // let movie = "The Shining"; 

   function extraInner() { 
   //movie is not defined in this function 
   //but it has access to parent function's variables
     console.log(movie.toUpperCase()) 
   } 
    extraInner();
  }
  inner();
}

outer(); //'AMADEUS'

--------
//Order of how the function is called

2. function outer() {
   3. let movie = 'Amadeus';

  5. function inner() {
     6. let movie = "The Shining";

     8. function extraInner() {
        9. console.log(movie.toUpperCase())
    }
    7. extraInner();
    }
4. inner();
}
 
1. outer();
 
10. >>>'THE SHINING'

원래 게시됨 here.

*The graphics are screenshots from Colt Steele's Modern Javascript course.