Best Citizenships

20+ SIMPLE WOW HACKS IN JAVASCRIPT

StackOverflow made it clear in their survey held in 2017 that JavaScript is the most commonly used language for the development of interactive and engaging web pages. It is supported by all the major web browsers and is used by the website developers quite regularly. The introduction of JavaScript in the products introduced by Magento development company has enhanced the design of the e-commerce websites.

Learning JavaScript language is easy but using it to develop an interactive web interface requires specific tricks and techniques. Thus, to facilitate you to use this programming language easily, we have brought a list of 20 plus wow hacks that will help you optimize the performance, speed and save time while development of the website. These hacks are optimized codes that are made using smartly programmed logics.

 

Enjoy working with these simple wow JavaScript hacks!

 

  1. Async/ await with destructing

It’s simply wonderful how the Array Destructing can offer so many functions. If you wish to make a complex flow much simpler, just combine array destruction with async/await and see what it does!

 

Use this:

const [user, account] = await Promise.all([
 fetch('/user'),
 fetch('/account')
 ])

 

  1. Use ‘!!’ operator to convert to boolean

This (!!) is known as the double negation operator in the JavaScript language. The programmers can use it to find out whether a variable exists or has a valid value to be considered as true value or not. Thus, use a simple ‘!!variable’. This can convert the data automatically to a boolean which will come back as false if it showcases any of these values: 0,””, null, NaN, or undefined. In an otherwise case, it will come back as true. The hack is as follows:

 

function Account(cash) {

this.cash =cash

this.hasMoney = !!cash;

}

var account   =  new Account(100.50);

console.log(account.cash); // 100.50

console.log(account.hasMoney); // true



var emptyAccount = new Account(0);

console.log(emptyAccount.cash); // 0

console.log(emptyaccount.hasMoney); // fasle

 

In the above-mentioned case, if the value of account.cash is greater than zero, the account.hasMoney will be considered true. Try it out yourself and see how well it works!

 

  1. Swap variables

You can make this happen by using the array destruction to swap the values. Use this code to do it:

let a = 'world', b = 'hello'
 [a, b] = [b, a]
 console.log(a) // -> hello
 console.log(b) // -> world

// Yes, it's magic

 

  1. Use the + operator to convert to numbers

At number four, we have a very simple yet magical hack that works with string numbers. If not, then it will return as NaN that indicates being not a number.

 

function toNumber( strNumber) {

return +strNumber;

}

console.log(toNumber( “1234”)); // 1234

console.log(toNumber(“ABC”)); // NaN

 

You can use this magical hack with dates too. For the dates, it goes as follows:

console.log(+new Date( )) // 1461288164385

 

  1. Short-circuit conditionals

Are you willing to shorten the code? Using shortcodes can save time and speed up the operation. Thus, if you see such a code somewhere

 

If(connected){

Login()

}

 

You can combine the variables and a function with the help of && (AND operator) to shorten the code. The above code will look as below:

 

connected &&login();

 

Another code can also be used. It is:

User&&user.login();

 

  1. Debugging hack

If you use console.log to debug, you’ll be amazed by this hack. Here you go:

console.log({ a, b, c })

// outputs this nice object:
 // {
 //    a: 5,
 //    b: 6,
 //    c: 7
 // }

 

  1. How to detect properties in an object with a hack?

The answer to this very question is given below.  It is used to check if an attribute exists or not. It helps by preventing to run undefined functions or attributes.

An example will help you understand in a better way. Say you need a code that is compatible with the old internet explorer 6 version and you want to use document.querySelector() to get some of the elements by their ids.  But, in the latest browser this function does not exist and so you can use the ‘in’ operator to check the earlier existence of the function.

 

if (‘querySelector’ in document) {

document.querySelector(“#id”);

} else {

Document.get Element ById(“id”);

}

 

This states that if there is no ‘querySelector’ function in the document object, the document.getElementById function will be used as a fallback.

 

  1. One-liners

The Syntax is quite compact for the array operations

 

// Find max value
 const max = (arr) => Math.max(...arr);
 max([123, 321, 32]) // outputs: 321

// Sum array
 const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
 sum([1, 2, 3, 4]) // output: 10

 

  1. Array concatenation

Use the concat in place of the spread operator:

 

 one = ['a', 'b', 'c']
 const two = ['d', 'e', 'f']
 const three = ['g', 'h', 'i']

// Old way #1
 const result = one.concat(two, three)

// Old way #2
 const result = [].concat(one, two, three)

// New
 const result = [...one, ...two, ...three]

 

  1. Array filter usage

If you are looking for a hack to save time and omit the multiple lines of code, then array filter code is the one for you! Use this to filter out the desired elements from the array pool. With this process, you’ll create an array full of all array elements that pass a test. For the non-required elements, you can create a callback function.

 

For example:

schema = ["hi","ihaveboyfriend",null, null, "goodbye"]schema = schema.filter(function(n) {            return n        });Output:   ["hi","ihaveboyfriend", "goodbye"]

 

  1. Get your floating number ensuring good performance

The micro-optimization in the code is what boosts the performance and helps eliminate decimals using “~~” instead of math.ceil, math.floor, and math.round.

 

Thus, replace math.round(math.random*100)

with ~~ (math.random*100)

 

  1. Array elements are deleted using splice

How does this help? Well, to tell you the truth, it is the best JS code used for speed optimization. It saves the some of the “null/ undefined space” in the code. If you use delete instead of the splice, the object property would be deleted without the arrays reindex or length update.

The sample for you:

myArray = ["a", "b", "c", "d"] myArray.splice(0, 2) ["a", "b"] Result: myArray ["c", "d"]
  1. Get the last item in the array

If you want to cut the arrays, you can set the begin and end arguments like Array.prototupe.slice(begin, end).  Not setting the end argument means that the function will automatically go for the max value for the array. This function also accepts the negative values. If you set a negative number as begin an argument, you will obtain the last element from the array.

It is as follows:

var array=  [1, 2, 3, 4, 5, 6];

console.log(array. Slice(-1)); // [6]

console.log(array. Slice(-2)); // [5, 6]

console.log(array. Slice(-3)); // [4, 5, 6]

 

  1. Named parameters

The developers can use this code hack to make the function and function calls more readable with the help of destructuring. The hack is as follows:

const getStuffNotBad = (id, force, verbose) => {
 ...do stuff
 }
 const getStuffAwesome = ({ id, name, force, verbose }) => {
 ...do stuff
 }// Somewhere else in the codebase... WTF is true, true?
 getStuffNotBad(150, true, true)// Somewhere else in the codebase... I ? JS!!!
 getStuffAwesome({ id: 150, force: true, verbose: true })

 

  1. Cloning

Enjoy the ease of cloning arrays and objects with ease. Just keep in mind that it produces a shallow clone.

 

const obj = { ...oldObj }
 const arr = [ ...oldArr ]

 

  1. Variable caching

You can optimize the large arrays present in the loop by using this JS hack. This is one of the hacks that immensely improve the performance of JavaScript.

 

var cached = document.getElementById('someElement');cached.addClass('cached-element');

 

  1. Use of switch cases

The use of switch cases is preferred over if/ else statements and it delivers the same results.  The only benefit of using the switch cases is that the expression is evaluated only once and the execution time is quite less as compared to the use of is/else statements.

 

  1. Replace all function

By using the String and Regex, String.replace() function allows replacing string. It helps in replacing the first occurrence. To ease up the process, you can use /g at the end of Regex and simulate a replaceAll() function.

 

var string = “john john”;

console.log(string.replace(/hn/, “ana”)); // “joana john”

console.log(string.replace(/hn/g, “ana”)); // “joana joana”

 

  1. Shuffle array’s elements

The good news is that you can now shuffle the array’s elements without the help of any external library like Lodash. Use this amazing trick to do so:

 

var list = [1, 2, 3];

console.log(list.sort(function() {

return Math.randome () – 0.5

})); // [2, 1, 3]

 

 

  1. Resizing the array using ‘length’

The resizing is actually done by deleting or emptying an array. The technique that we are showing you below is preferred over other methods to resize the array elements.

Use array.length = n, if you want to delete the elements in an array like this

var array = [1, 2, 3, 4, 5, 6];

console.log(array.length); // 6  array.length = 3;  

console.log(array.length); // 3  console.log(array); // [1,2,3]

Use array.length = 0 if you want to empty the array

var array = [1, 2, 3, 4, 5, 6]; 

array.length = 0;   console.log(array.length); //
  1. Let’s convert the nodelist to arrays

Using the document.querySelectorAll(“p”) function will help you get the NodeList object but one without the array’s function like sort(), map(), reduce(), or filter(). If you want to activate the array’s function, you need to convert the NodeList into Arrays. This trick is made possible with the help of:  [ ].slice.call(elements).

 

The hack code is:

var elements = document.querySelectorAll("p"); // NodeList

var arrayElements = [].slice.call(elements); // Now the NodeList is an array

var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

 

  1. Array truncation

The idea of using this magic hack is to lock the array’s size. Even if it has 10 elements, you can get it fixed at five in the following way:

 

var array = [1, 2, 3, 4, 5, 6];

console.log(array.length); // 6

array.length = 3;

console.log(array.length); // 3

console.log(array); // [1,2,3]

 

  1. Merging arrays

The Array.concat() function is used to merge the two short arrays ensuring sufficient memory usage in this way:

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

console.log(array1.concat(array2)); // [1,2,3,4,5,6];

But, if you want to merge the large arrays you can use the Array.push.apply(arr1, arr2) function. This does not use much memory and ensures active performance by creating new arrays and by merging the second array in the first one.

 

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

 

With this, your stock of having cool and simple hacks for the JavaScript programming is now full. You can place these codes and functions in various places and enjoy the benefit of enhanced performance and good speed.