IIFEs und safe code

Mario 28. Juli 2016 Code, Tutorial IIFE, Javascript, safe code

IIFEs sind Immediately Invoked Function Expressions.

(Sofort ausgeführte Funktionsausdrücke)

Klingt kompliziert? Ist es aber nicht!

Fangen wir ganz einfach an.

Eine normale Javascript Funktion kennt jeder:

function hello(name) {
     console.log('Hello' + name);
}

function hello(name) {

console.log('Hello' + name);

}

Diese wird in den Speicher geladen wo sie erstmal recht untätig rumsitzt. Damit sie was tut muss man sie aufrufen (invoken):

hello(' World!');

1	hello(' World!');

Kennt man ja, ist auch nicht wahnsinnig spektakulär.

Ein Function Expression würde dann so aussehen:

var hello =  function(name) {
     console.log('Hello' + name);
};

var hello = function(name) {

console.log('Hello' + name);

};

Hier wird dann ein Funktions-Objekt (function object) erzeugt welches wir genauso aufrufen können wie eine normale Funktion:

hello(' World!');

1	hello(' World!');

Nix besonderes, kennt man ja auch.

Aber eine FE kann man auch sofort ausführen lassen, quasi gleich nachdem sie im Speicher abgelegt wurde:

var hello =  function(name) {
     console.log('Hello' + name);
}(' World!');

var hello = function(name) {

console.log('Hello' + name);

}(' World!');

So wird aus der FE eine IIFE indem man den Aufruf gleich hinten dran hängt.

Das Gleiche funktioniert dann natürlich auch mit einer function expression die einem Werte via return zurück liefert und da gibts eine kleine Besonderheit:

var hello =  function(name) {
     var helloRet = 'Hello' + name;
     return helloRet;
}(' World!');

var hello = function(name) {

var helloRet = 'Hello' + name;

return helloRet;

}(' World!');

Nun wollen wir mal das Ergebnis der IIFE auf der Konsole ausgeben:

console.log(hello);

1	console.log(hello);

Ist euch was aufgefallen? Da wir die Funktion schon invoked haben (' World!'); müssen wir das beim Aufruf hello() nicht noch einmal tun.

Ruft man unsere IIFE nämlich auf wie wir es sonst von Funktionen gewöhnt sind, nämlich mit runden Klammern dahinter:

console.log(hello());

1	console.log(hello());

werden wir bei unserer IIFE folgende Fehlermeldung erhalten:

Uncaught TypeError: string is not a function

Eben weil wir unsere IIFE schon ausgeführt haben, liefert diese in unserem Fall nur noch den String ‚Hello World!‘ zurück. Rufen wir die function expression nicht sofort auf , also nicht als IIFE und rufen sie trotzdem auf wie eine IIFE:

console.log(hello);

1	console.log(hello);

erhalten wir das als Ergebnis zurück:

function(name) {
     var helloRet = 'Hello' + name;
     return helloRet;
}

function(name) {

var helloRet = 'Hello' + name;

return helloRet;

}

Es wird uns nur die Funktion zurückgeliefert.

Eine function expression kann man auch als anonyme function expression erzeugen.

(function(name) {
     var helloRet = 'Hello' + name;
     console.log(helloRet);
});

(function(name) {

var helloRet = 'Hello' + name;

console.log(helloRet);

});

Es reicht schon die anonyme Funktion mit Klammern zu umschliessen, schon wird sie von der Javascriptengine als function expression interpretiert.

Man invoked sie genau wie die oben schon genannte function expression, nämlich sofort, was sie dann natürlich gleich zu einer IIFE macht:

(function(name) {
     var helloRet = 'Hello' + name;
     console.log(helloRet);
}(' World!'));

(function(name) {

var helloRet = 'Hello' + name;

console.log(helloRet);

}(' World!'));

Was genau ist jetzt so toll daran?

Wenn es z.B. in einem anderen Javascript File, welches ihr auf eurer Seite inkludiert auch eine Variable gibt mit dem Namen helloRet. Dann wird diese nicht durch die Variable helloRet in eurem Code überschrieben.

Warum?

Nun es gibt in Javascript einen global execution context auf dem alles läuft und auch alle globalen Variablen existieren, sprich alles was nicht direkt in einer Funktion steht.

Führt man eine IIFE (oder jede andere Funktion) aus bekommt diese ihren eigenen execution context, also ihren eigenen Bereich für ihre Variablen. Dieser execution context ist komplett unabhängig vom globalen und somit kann man hier nicht die Variablen des global ex context überschreiben.

Wenn ihr euren Code so aufbaut stellt ihr sicher das es keine Probleme mit anderem Code gibt = safe code. Safe nicht wie bei cyber security, sondern safe gegenüber anderen Javascript Funktionen. Das seht ihr eigentlich bei den meisten JS Frameworks. Die beginnen fast immer mit einer ( und darauf folgend gleich eine function.

Wenn man tatsächlich etwas im globalen execution context ändern möchte, also ausserhalb des execution context der Funktion kann man das mit Parametern machen. Wenn ich etwas auf dem globalen execution context (window) ändern will dann muß ich ihn übergeben:

var helloRet = 'Hallo Mars!';
(function(globalEx,name) {
     var helloRet = 'Hello' + name;
     console.log(helloRet);
}(window, ' World!'));

var helloRet = 'Hallo Mars!';

(function(globalEx,name) {

var helloRet = 'Hello' + name;

console.log(helloRet);

}(window, ' World!'));

Um dann auf dem globale execution context etwas zu ändern muss ich die typische Objekt notation verwenden:

var helloRet = 'Hallo Mars!';
(function(globalEx,name) {
     var helloRet = 'Hello' + name;
     globalEx.helloRet = helloRet;
}(window, ' World!'));

var helloRet = 'Hallo Mars!';

(function(globalEx,name) {

var helloRet = 'Hello' + name;

globalEx.helloRet = helloRet;

}(window, ' World!'));

Somit haben wir die Variable helloRet die auf dem globalen execution context sitzt geändert. Dadurch, dass ihr es wirklich mit Absicht machen müsst, macht euren code sicher, da es euch nicht aus Versehen passieren kann auf dem globalen ex context etwas zu verändern.

Und zum Schluß noch ein kleiner Codepen zum rum probieren. (Um ihn ändern zu können müsst ihr ihn auf codepen öffnen. Link rechts oben bei codepen.)

See the Pen IIFE by Mario Domandl (@mdo-code) on CodePen.

Follow @mdo_code

Blog

IIFEs und safe code

Schreibe einen Kommentar Antworten abbrechen