This content originally appeared on DEV Community and was authored by Guilherme Gules
Sidenote: ES6 introduced a new feature in JS called 'modules', they're essentially a syntax for importing and exporting code between JavaScript files. They're powerful and bring a new horizon for JS development but it's not the subject today.
Today we will talk about IIFEs or Immediately Invoked Functions Expressions, working with vanilla JS we can use these functions for better-scoped and responsibilities definition on our code.
What is IIFE?
It's a JavaScript pattern, that allows us to create modules with more lexical scope for our functions, create functions for executing simple tasks and immediately execute and help with code organization too.
Creating a module
We will init using an anonymous closure. Thus we create a lexical scope, and the code that it's inside of the scope will be only accessed by the function, including properties too.
(function() {
// Your functions and variables will be scoped in this function
// In this case our console.log will be executed immediately
console.log("My first module");
})();
Exporting module
With that we can use only a returned properties and functions by our module, thus that way keeping our code scoped on the module.
const moduleA = (function() {
const moduleAValue = "Module A";
function modifyModuleAValue() {
return `${this.moduleAValue}-123`;
}
return {
getter: () => {
return moduleAValue;
},
modifyModuleAValue,
}
})
Using IIFE for making simple scripts
With this pattern, we can create simple scripts for immediate execution, a great example is the use of login scripts for adding more agility to the development process:
(() => {
const user = "myuser@email.com";
const pass = "secretpass123";
document.getElementById("user-input").value = user;
document.getElementById("user-pass").value = pass;
document.getElementById("submit").click();
})();
With this simple script, we can create an automated login.
IIFE on ES6+
When ES6 was released, it brought some new additions, one of which is const and let, this type of variable declaration has the scope of blocks, so when we get a curly braces block, our let or const has the respective curly braces scope. So we do not need this pattern all the time but the knowledge always helps in certain situations.
Thanks for reading I hope that was useful.
Helpful links
Learning JavaScript Design Patterns
MDN Web Docs - IIFE
This content originally appeared on DEV Community and was authored by Guilherme Gules
Guilherme Gules | Sciencx (2021-02-08T16:20:49+00:00) Javascript Module Pattern. Retrieved from https://www.scien.cx/2021/02/08/javascript-module-pattern/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.