JS: IIFE(Immediately-invoked function expression ) and safe code

Sometimes we need to declare the function and call it immediately. Below code does that, it can also accept the parameter:

var firstname = “John”;

(

function(name){

var greetings = “hello “;

console.log(greetings + name);

}(firstname)

);

So we will see “hello John”. What happens here is that we wrapped the anonymous function inside the (); brackets. This allows to declare the anonymous function. Because JS compiler treats everything inside () as declaration. Then we add function and call it

(funciton() {

}()   // execute it

);

second () actually invokes the function. The rest is easy we just pass the variable that we need. You can see the first example.

My understanding is that this approach is used in many frameworks.  It also possible to put the execute brackets () outside the function wrapper. Both are ok:

(funciton() {

}

)(); // execute it here, both are ok

The beauty of the above code is that it’s safe. By that I mean that this code will run inside it’s own execution context and not global one.

So, variable “greetings” will not clash with variables with same name, but from other places in code.

If, however, we want to overwrite some existing global variable we can do it this way:

File 1, has this code:

var greetings = “Hola”;

File 2, has this code:

var firstname = “John”;

(

function(global, name){

var greetings = “hello “;

global.greetings = “hello”;

console.log(greetings + name);

}(window, firstname)

);

console.log(greetings); // this will output “hello”

// however if we don’t overwrite it, then it will show “Hola”

Advertisements

JS: good practices

  1. Be careful when returning some values

Ex:

function test(){

return

{

cacheable: true;

}

}

console.log(test()) ;

// console.log will return undefined, all of this is happening because the js compiler puts ; (semicolon) after the return statement. Therefore, it’s good practice to have curly braces directly after the return statment

ex: return {

cacheable: true;

}

2. Writing comments

The JS compiler will ignore the white spaces and comments so we can do something like this:

var

// this is the name of the user

firstName,

// this is the surname of the user

surname,

 

// this should be always more than 0

balance;

JS: storing function inside array and calling that function

We can store function inside the array and call it.

Ex.:

var arr = []; // note this creates array in js

var obk = {} // this creates empty ojbect

Ex.2:

var arr = [ “1”,

2,

false,

{ name = “James”,

address = “Mulholland Drive”

},

function(name){

var greeting = “hello “;

console.log(greeting+name);

}

]

Now we have different variables inside our array, we even have another array and function!

To call the stored function:

Note: to call the method use arr[4]()

arr[4](arr[3].name);  // this will get the name from the array under index 3 and pass it to the function

// output will be: hello James

JS function parameters: arguments and Spread

Unlike Java, JS will not throw any errors if the way function is declared and called is different. So there are 2 scenarios when developer passes wrong number of parameters. Either too many or too less

If too many:

Ex: function xyz(x, y,z){

console.log(x);

}

xyz();

// output will be undefined

So, to tackle this potential issue when other developers pass more arguments to a method than it can accept we can use either arguments or spread.

Ex

function abc(a, b,c){

console.log(arguments);

}

// arguments is keyword and will return a,b,c or whatever arguments passed to abc function.

Works a bit similar to this keyword can access it through arguments[n]

Another way is using spread:

Ex.:

function restParam(parameter1, …restArgs){
console.log(restArgs.length); // Logs the number of arguments that do not have a corresponding parameter
console.log(restArgs[2]); // Logs the 3rd argument after the number of arguments that do not have a corresponding parameter
}

restParam(1,2,3,4,5);
// Log would be as follows
// 4
// 4

// 4 is the number of arguments that do not have a corresponding parameter
// 4 is the 4th 3rd argument after the number of arguments that do not have a corresponding parameter

Second way is preferred, because arguments only return array like collection. The keyword is “like”, so some array methods won’t work. (arguments.length and arguments[n] will still work )

Oh, yeah. In the case if there are less parameters passed

If too less:

just assign the functions parameters to a default variable:

fuction zzz(a, b,c){

a= a || “a”;

b=b || 7;

c = c || 10;

}

How to: Missing commit (error: unpack failed: error Missing commit) on Smargit

Go to the folder where your project is stored, then open the Git bash and run below commands:

  1. git gc
  2. git pull –rebase
  3. git push

In case you have this error:

error: cannot pull with rebase: You have unstaged changes.
error: please commit or stash them.

Then, just commit the files first. You can do it in the smart git.