DEV Community: Gaurav Kumar

Powerful JavaScript Shorthands That You Should Know

Gaurav Kumar — Thu, 17 Mar 2022 09:02:40 +0000

JavaScript has a lot of powerful features and tools that make the life of the developer much easier. The syntax contains a lot of shorthands that you can use to write JavaScript code much faster and reduce lines. Especially in the latest ECMAScript specifications.

Convert string to a number
Normally, to convert a string to a number, we use the method parseInt() . However, there is a shorthand that allows us to do that.
By using the unary operator + , we can easily convert a string into a number.
Here is an example:

let speed = "60";
console.log(typeof speed); //string
console.log(typeof +speed); //number
console.log(+speed); //60, not "60".

As you can see, only by adding + at the beginning of the variable speed , we were able to convert the speed to a number.
There is also another shorthand to convert from a number into a string. It’s by simply adding an empty string to the number.
Here is an example:

let speed = 100;
speed += ""; //returns "100" , not 100.
console.log(typeof speed); //string

Using the ternary operator
Another shorthand is the ternary operator, it allows us to easily write conditional statements in a short way using the keywords ? and :
Here is an example using IF else statements:
Longhand:

let speed = 80;
if(speed < 30){
 console.log('slow');
}else if(speed > 60){
 console.log('fast');
}else{
 console.log('between 30 and 60');
}
//output: fast

Here is the same example, but now using the ternary operator instead:
Shorthand:

let speed = 80;
console.log(speed < 30 ? 'slow': speed > 60 ? 'fast'
: 'between 30 & 60');
//output: fast

As you can see, by using the ternary operator shorthand, we were able to easily reduce the amount of code we had to write. It only took us 2 lines of code to write the conditional statements.

Short-circuit evaluation
Have a look at the below example using an IF statement.
Longhand:

let isOnline = true;
if(isOnline){
 console.log("Online");
}
//returns "online"

We can write the same statement using the short circuit && . Here is the example:
Shorthand:

let isOnline = true;
isOnline && console.log("Online");
//returns "online"

The short circuit evaluation && is one of the shorthands that allow you to write short conditionals. It’s used between two values, if the first value is truthy, it returns the second value. Otherwise, it returns the first value.

Flattening an array
The best shorthand to flatten a multidimensional array is by using the method flat() . I have seen, a lot of developers use the method filter, concat, and all other long ways to flatten an array. Maybe because they don’t know about the flat method yet.

So this amazing method allows you to flatten an array in one single line of code. It accepts one optional argument(number), which is the level of flattening(how deep you want to flatten an array).

Here is an example:

let numbers = [9, [102, 5], [6, 3], 2];
numbers.flat(); //returns [9, 102, 5, 6, 3, 2]

Merging and cloning arrays
When it comes to merging and cloning arrays in JavaScript, the spread operator {…} is the best shorthand you can use.
Merging arrays:

const employees = ["Chris", "John"];
const entrepreneurs = ["James", "Anna"];
//merging both arrays to a new array.
const all = [...employees, ...entrepreneurs];
console.log(all); //output: ["Chris", "John", "James", "Anna"]

Cloning an array:

const numbers = [4, 8, 9, 0];
//cloning the numbers array.
const clone = [...numbers];
console.log(clone); //output: [4, 8, 9, 0]

For loop shorthand
Mostly when we want to loop through an array using a for loop, we do it like this:
Longhand:

const users = ["John", "Chris", "Mehdi", "James"];
for(let i = 0; i < users.length; i++){
   console.log(users[i]);
}

/*output:
   John
   Chris
   Mehdi
   James
*/

But we can achieve the same thing using the loop for of shorthand:
Shorthand:

const users = ["John", "Chris", "Mehdi", "James"];

for (let user of users){
  console.log(user);
}
/*output:
   John
   Chris
   Mehdi
   James*/

Arrow functions
Arrow functions are a shorthand that allows you to easily write functions in a short way and reduce your code.
Here are the examples:
Normal function:

function addNums(x, y){
 return x + y;
}
addNums(6, 5); //11

Arrow function:
const addNums = (x, y)=> x + y;
addNums(6, 5); //11

Conclusion
As you can see, these are some of the popular shorthands that you can use in JavaScript. They allow you to reduce code syntax and keep your code short as much as you can.
Thank you for reading this article. I hope you found it useful.

Handle JavaScript Events

Gaurav Kumar — Thu, 17 Mar 2022 08:58:29 +0000

Events
Before diving deep, let’s clear out the basics first. Everyone loves to click that button see that magic happen but deep down inside JavaScript that click is an event and similar to that when the user interacts with the page, their actions are captured as events.
In order to have a button listen to an event, you need to register a listener or handler (whatever term suits you the best). Let’s say we have a button click and we want to register an event on the button to measure how many times the button gets clicked. Here’s how we’ll do it.

In this example what we did is we took the button element with id using querySelector and attached an event to it using addEventListener

Event Propagation
Now that we know what event is and how to attach eventListener to an element. Let just see how it works and how many events get triggered when a button is clicked (might surprise a lot of you).

What do you think? On how many elements a click event gets triggered if I click on that button above?
Without a doubt, it’s going to be the button itself but it’s also going to be all the button’s ancestors and even the document and window objects.

Why is that? Let's just find out.
An event basically propagates in 3 phases:
Capture Phase: The event starts from the window, document and deep dives through all the ancestors of the target element.
Target Phase: The event finds its target element and gets triggered on which the user has interacted.
Bubble Phase: The event goes up the hierarchy in a similar fashion it dived during the capture phase until it reaches the document and window.

Event Bubbling
Event bubbling is the propagation of an event from its origin towards the root element. Which means if an event has occurred on a button then it will also be triggered by its parent and its parent’s parent and so on up until the HTML element.
Now let’s see event bubbling in action.

Now if you have interacted with an above pen, a few things you would have realized by looking at the console is.
When you click on the white part, nothing happens.
When clicked on the green, GrandParent event is triggered.
When clicked on the yellow, parent as well as GrandParentevent is triggered.

When clicked on blue, all three parents, GrandParent and child event is triggered.
Now you must have realized by now that all of the events whether it happens on some sideline button or on the button you want everyone to see, each will trigger an event on the element that is wrapping them up.

Event Delegation
The modern application relies heavily on events to provide interactive interfaces to the users. It’s really common to have a vast number of event handlers on the web page, and it is during these times event delegation can really shine and can create a difference.
You’ll be surprised by how many events can there be some simple looking sites.

A good example of event delegation would be building a colour palette and attaching an event listener to every colour as we want to do some operations on it. So one way to do it will be attaching an event listener to every colour element so when the user will click on it, the operations get done. Just as shown below.

While the approach we’ve adopted is viable, it’s not as optimized as it could be. Our palette has 150 colours and, as a result, we are attaching 150 listeners to handle all of them. Besides, if our component had a feature that allowed the user to add custom colours, we would need to add our listener to each new colour added to the palette.

But a better way would be as you might think is utilizing what we have learned earlier on and applying it here. To solve the problem mentioned in the above section, we will put together everything we have learned so far to make use of a technique called event delegation.

As every event gets bubbled up maybe we don’t need to attach every colour element to the event what we can do instead is attach that event on parent element so whenever a colour element gets clicked it bubbles up to parent element which then fires the function we wanted.

Conclusion
Knowing a simple event delegation concept in our example reduced from having 150 events attached to just one and these small things matter when application gets complex and makes a real difference in performance.

Now that you know this concept, you’ll be able to build apps that are complex, interactive and at the same time doesn’t compromise on performance.