Home
/
Blog
/
8 Javascript shortcuts you’re not using

8 Javascript shortcuts you’re not using

Coding in JavaScript is the basis for all kinds of web and software development. Needless to say, it is an extensive process that needs to be carefully executed in order to produce the desired results. Now, thanks to some smartly designed shortcuts, the process of coding in JavaScript has become easier and swifter. And here are 4 amazing JavaScript shortcuts to help you out.

JavaScript Shorthand
Real-Time JavaScript Editing
Declaring Multiple Variables Simultaneously
Delaying JavaScript Execution
Ternary Operator
If Presence Shorthand
For Loop Shorthand
Object Property Shorthand

JavaScript Shorthand:

This is one of the least used and most under-appreciated shortcuts out there. Most developers do not utilize the power of shorthand coding. Shorthand coding technique makes the code quicker to write and the source code more readable and less confusing. They help streamline the JavaScript code and reduce the number of lines of code, which in turn has a profound impact on the performance, making the code lighter and faster to execute. From declaring multiple variables simultaneously to checking whether the value of a variable is null or undefined, shorthand techniques save a lot of your valuable coding time by helping you achieve a more concise code.

Real-Time JavaScript Editing:

If you’re into website development, you’re going to love this! Normally, when you need to make any changes to your JavaScript code, you would need to reload the web page each time to see the changes take effect. This might be okay if you are sure of the effect of the change you’re making, but when you are faced with an experimental code that may or may not works as intended, wouldn’t it be nice to see the changes in real-time? This is now possible with web browsers that are either Chrome or Chromium-based. The process is simple –

Load your webpage completely and press the F12 key to bring up ‘Developer tools.’
Click on the ‘Sources’ tab on the top to open any JavaScript file loaded onto the browser.
Edit the file to include or delete your code.
Save the file (Ctrl + S) and then, the browser automatically displays the changes.

Declaring Multiple Variables Simultaneously:

When it comes to coding in JavaScript, declaring variables is a common practice. Most JavaScript developers utilize the ‘var’ keyword in front of each variable they wish to declare. Here are some examples:

var Michael

var Rick

var Bob

This is actually an inefficient and time-consuming way of declaring variables. The quicker way to do it involves using the ‘var’ keyword just once, followed by the variables that need to be declared, separated by commas. The code would look something like this –

var Michael, Rick, Bob

This method is not only useful for declaring the variables but can also be used to initialize the declared variables, like this –

var Michael=“15yr”, Rick=“28yr”, Bob=“56yr”

Delaying JavaScript Execution:

Typically, web browsers prioritize JavaScript execution. This means that until the block of JavaScript code gets executed, the browser will not render the rest of the web page. While this might seem trivial, having your scripts at the top of your web page effectively increases the time taken for your website to load, as the web browser tries to completely execute the block of code before moving on to the other parts of your web page. Therefore, in order to speed up the render time of your web page, have your scripts at the bottom of the page so that the browser loads all the necessary page elements before trying to execute the scripts. This can be achieved by using the defer attribute (defer=“true”) in the script tag.

Ternary Operator

As a developer, you might use a lot of if..else statements. This not only makes the code longer but you also need to type a lot of code….which makes you slow!

const y = 9;
let result;
 
if (y > 10) {
   answer = "Not True";
} else {
   answer =  "True";
}

You can completely change the way you write the code in a single line.

const result = y > 10 ? "Not True" : "True";

This saves you a lot of time. Not only that, but it also makes your code look clean and easy to read and maintain.

If Presence Shorthand

Checking for conditions is also common in your code. In fact, you might remember using the if statement where you use a variable name against true or false. The code for it will look like below.

if (value === true)

To shorthand the above code, you can simply write as below.

if (value)

This is only applicable if the value is true. In case, you are looking for a false value, then you simply need to use the !value.

if (!value):

For Loop Shorthand

Another shorthand that can help you improve your code is the for loop shorthand. As a developer, the way you declare the for loop and then loop through them is as below.

const graphics_card = ['3090','3080','3070']
for (let i=0: i<graphics_card.length; i++)

As you can see, you need to declare a variable and then use it to pass through each value in the array.

This can be shorthanded to below:

for (let graphics for graphics_card)

In case, you want to access the elements using the index, then you need to use the following shorthand.

for (let index in graphics_card)

There is also a shorthand for Array.forEach

['3090','3080','3070'].forEach(Function_Name)

Here, you need to define a function where you go through the elements one by one.

Object Property Shorthand

The last trick that you can utilize to improve your coding style and readability is the object property shorthand.

It is common for developers to use object literals in JavaScript as it is easy to handle them. You can define the object longhand as below.

const a = 21, b = 42;
const obj = { a:a, b:b };

The shorthand for the object property is as below:

const obj = { a, b };

So, the next time you prep yourself to write code, try some (or maybe all) of these shortcuts and watch your work get infinitely smoother. You can check for SQL tips needed for your coding.