Episode 4: Understand Modern Javascript Functions & Better Parameter Handling | LWC Salesforce ☁️⚡️

Kapil November 03, 2022

 In this blog I will show you how you can use the modern javascript functions with better parameter handling. 

You are probably familiar with defining functions like this:

1
2
3
4
5
6
7
let result = function(a,b){
  return a+b;
}

console.log(result(5,10));

//Output will be 15

This was the standard way of calling a function. Now let me show you modern way for the same. Modern JS introduced a shorter way to define functions using what is called arrow functions. Using the fat arrow symbol ( => ), you can now create the same function using code like this:

1
2
3
4
let result = (a,b)=>a+b;
console.log(result(5,10));

//Output will be 15

All we have done here is remove the function and return keywords and used the new fat arrow symbol instead. The parentheses are even optional when there is only one parameter, and you only need the curly braces when you have more than one expression. Just remember that if you do include the curly braces, the return keyword is required.

Using Arrow function you can have less code and remove some of the confusion when dealing with ‘this’ keyword, especially when nested functions are involved. Functions are having a special variable called this or you can also refer it as dynamic this.

The dynamic this will be having its functional scope but in nested functions it is not going to work with the traditional way. Let’s understand it by an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let users={
  welcome:'Welcome',
  user:['John','Ray'],
  welcomeMessage:function(){
    this.user.forEach(function(userName){
      console.log(this.welcome+' '+userName);
    });
  }
}

users.welcomeMessage();

//Output
//undefined John
//undefined Ray

A workaround for this could be that you add a new variable inside the function and assign this to it. And than use that variable instead of this in the nested scope. Let’s try this out in our playground.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
let users={
  welcome:'Welcome',
  user:['John','Ray'],
  welcomeMessage:function(){
    //Added self to store this functional scope
    let self=this;
    this.user.forEach(function(userName){
      console.log(self.welcome+' '+userName);
    });
  }
}

users.welcomeMessage();

//Output
//Welcome John
//Welcome Ray

But this is just a workaround, The arrow function that ES6 introduced has the lexical scope built in. That means by using arrow function we can get rid of this problem without any workaround.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let users={
  welcome:'Welcome',
  user:['John','Ray'],
  welcomeMessage:function(){
    this.user.forEach(userName=>{
      console.log(this.welcome+' '+userName);
    });
  }
}

users.welcomeMessage();

//Output
//Welcome John
//Welcome Ray

Now let’s talk about Better Parameter Handling

Prior to ES6, parameter handling in functions was tedious. To ensure that your code ran as expected, you often had to add manual checks within the function for any optional parameters.

For example

1
2
3
4
5
6
7
8
function helloWorld(p1,p2){
  p2=p2 || 'World!';
  return p1+' '+p2;
}
console.log(helloWorld('Hello'));

//Output
//Hello World!

ES6 offers better ways to handle function parameters. You can now specify default parameter values via an equal sign ( = ) in the parameter list. For the helloWorld function, the second parameter is optional, but you don't need that extra line of code inside the function.

1
2
3
4
5
6
7
function helloWorld(p1,p2='World!'){
  return p1+' '+p2;
}
console.log(helloWorld('Hello'));

//Output
//Hello World!


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments