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

3605 단어 codenewbiejavascript

범위란 무엇입니까?



범위는 변수가 정의된 위치와 코드의 다른 부분이 변수에 액세스하고 조작할 수 있는 컨텍스트입니다. 이 게시물에서는 세 가지 유형의 범위와 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.

좋은 웹페이지 즐겨찾기