Erklärt: Self-Executing Anonymous Functions (JavaScript)

Die Verunreinigung des globalen Namensraum ist ein Punkt der bei JavaScript oft vernachlässigt wird und bei größeren Projekten mit mehreren Entwicklern zu Problemen führen kann. Doch wie kann man es besser machen?

Hierzu ein kleines Code Beispiel:

function getData()
{
    return "SampleData";
}

var data = getData();

Die oben aufgezeigte Funktion funktioniert, für sich gesehen, einwandfrei. Wenn es jedoch eine weitere getData Funktion an einer anderen Stelle, in einer anderen Datei oder einem Third-Party-Modul gibt, würde die bestehende Funktion überschrieben.

Wie dieses Problem umgangen werden kann werde ich in diesem Artikel erläutern.

Self-Executing Anonymous Functions
Eine sehr elegante Lösung für dieses Problem ist die Nutzung von sogenannten Self-Executing Anonymous Functions. Die Funktion von oben sähe zum Beispiel wie folgt aus:

(function () { 
    function getData()
    {
        return "SampleData";
    }

    var data = getData();
})();

//Führt zu einem Fehler da getData in diesem Kontext nicht mehr definiert ist
getData();

Diese Funktion besteht aus zwei Teilen. Der erste Teil ist die anonyme Funktion:

(function () { 
    function getData()
    {
        return "SampleData";
    }

    var data = getData();
})

Der zweite Teil ist der interessante Teil:

();

Durch die Klammern am Ende der anonymen Funktion wird diese sofort aufgerufen. Da in JavaScript lokale Variablen nur innerhalb von Funktionen gültig sind, ist die getData Funktion auch nur innerhalb der anonymen Funktion gültig.

Wie in dem Kommentar bereits erwähnt, wird nur der Funktionsaufruf von getData innerhalb der Funktion (sprich der Erste) gelingen. Der zweite Aufruf wird fehlschlagen, weil an dieser Stelle getData nicht mehr definiert ist.

Der globale Namensraum bleibt auf diese Weise unberührt und es kommt nicht zu Namenskonflikten. Doch wie greife ich nun an anderer Stelle auf Funktionen innerhalb der anonymen Funktion zu?

Public und Private
Um auch von außerhalb auf eine Funktion zugreifen zu können kann man wie folgt vorgehen:

(function (G4Sample) {
    function createData() {
        var dataObj = new Object();
        dataObj.Id = 1;
        dataObj.Title = "Test";

        return dataObj;
    }

    G4Sample.getData = function () {
        return createData();
    };
})(window.G4Sample = window.G4Sample || {});

var sampleData = G4Sample.getData();
alert(sampleData.Id);

//Führt zu einem Fehler da createData nicht an das G4Sample Objet gebunden ist und somit undefiniert
G4Sample.createData();

In diesem Beispiel wird der anonymen Funktion ein Objekt übergeben welches innerhalb des globalen Namensraum adressierbar ist. Erzeugt wird dieses Objekt an dieser Stelle:

})(window.G4Sample = window.G4Sample || {});

Hiermit wird das G4Sample Objekt, sofern es noch nicht existiert, erzeugt und an das window Objekt gebunden. Innerhalb der anonymen Funktion wird an dieses Objekt die öffentlich zugreifbare Funktion getData gebunden wodurch man über G4Sample.getData() auch von außerhalb auf diese Funktion zugreifen kann.

Die Funktion createData wird hingegen nicht an das G4Sample Objekt gebunden und ist somit nur innerhalb der anonymen Funktion gültig. Auf diese Weise kann die Funktion getData auf die createData Funktion zugreifen, von außerhalb ist diese Funktion jedoch nicht nutzbar.

Man kann sagen das die getData Funktion eine public Funktion ist und createData eine private Funktion ist.

Fazit

Durch Self-Executing Anonymous Functions kann der globale Namensraum in JavaScript sauber gehalten werden was insbesonderes bei größeren Projekten mit vielen Entwicklern hilft.

Desweiteren kann über das Pattern public und private Funktionen emuliert werden und kann so dabei helfen, die Codequalität deutlich zu verbessern.

Haben Sie Fragen zu diesem Artikel oder brauchen Sie Unterstützung?

Nehmen Sie mit uns Kontakt auf!

Wir unterstützen Sie gerne bei Ihren Vorhaben!