자바스크립트의 물방울

자바스크립트에서 블록 범위를 모방하는것

개발자가 다른 언어에서 오는 문제를 해결하는 데는 많은 문제가 있지만 변수 범위 지정이 가장 좋습니다.
근본적인 문제는 많은 기대 변수가 특정 블록(예 : for 루프)으로 범위가 지정되지만
var로 선언된 자바스크립트 변수는 가장 가까운 부모 함수로 범위가 지정된다는 것입니다.
먼저 이것이 잘못 될 수 있는 방법을 살펴보자

var avatar = "Ang";
var element = "Air";

var elements = [
    "Air",
    "Earth",
    "Fire",
    "Water"
];

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    console.log(avatar + " has mastered " + element);
}

// Outputs: "Ang's primary element is Water"
console.log(avatar + "'s primary element is " + element);

블록 범위 지정을 사용하는 언어에 익숙한 개발자는 위의 코드에
아무런 문제가 없으며 실제 결과 대신 "Ang(?) 의 기본 요소는 공기 " 라고 예상한다.

이 문제는 일단 알게되면 쉽게 피할 수 있다.
블록 내에서 변수 선언을 피하면 혼동을 피할 수 있다.

그러나 자바스크립트에서 블록 범위 지정을 사용하고 싶다고 가정 해 보자.
우리는 그것에 대해 어떻게 이야기 할건가?
우리는 이렇게 할 수 있다.

var avatar = "Ang";
var element = "Air";

var elements = [
    "Air",
    "Earth",
    "Fire",
    "Water"
];

for (var i = 0; i < elements.length; i++) {
    (function() {
        var element = elements[i];
        console.log(avatar + " has mastered " + element);
    })();
}

// Outputs: "Ang's primary element is Air"
console.log(avatar + "'s primary element is " + element);

이 솔루션은 IIFE를 사용하여 블록 범위 지정을 에률레이트한다.
함수는 자바스크립트의 범위 지정 매커니즘이므로 루프를 통과 할 때마다
새로운 함수를 정의하고 즉시 호출하므로 블록 범위의 동작을 근사화한다.

이것은 관용적인 자바스크립트는 아니지만, 얼마나 유연한 자바스크립트가 될 수 있는지에 대한 아이디어를 제공한다.

또한 ECMA Script6 사양의 초안에는 블록 범위 변수를 정의하는데 사용되는 let 키워드가 포함되어 있다.
이 키워드를 사용하고 싶다면 FireFox에서 사용할 수 있다.