10 JavaScript Uses Every Web Developer Should Know
Optimizing your JavaScript code with these can help you write cleaner code, save resources, and optimize programming time.
According to RedMonk, JavaScript is one of the most popular programming languages. This means that many developers use JavaScript.
1. Use shortcuts for conditions
JavaScript lets you use specific shortcuts to make your code easier. In some simple cases you can use the logical operators && and || Use instead of if and else.
Let's examine the && operator in action.
Example:
- // instead of
- if (accessible) {
- console.log("It’s open!");
- }
- // use
- accessible && console.log("It’s open!");
Operator || Acts as an "or" command. Now using this operator requires a bit of skill because it can prevent the program from running. However, we can add a condition to bypass it.
Example:
- // instead of
- if (price.data) {
- return price.data;
- } else {
- return 'Getting the price’';
- }
- // use
- return (price.data || 'Getting the price');
2. How to convert to the largest Integer using the operator (~~)
Using Math.floor to Return the Largest Integer (Integer), which in a statement is less than a definite number, takes resources, needless to say, is a relatively long string to keep in mind. A more efficient way is to use the (~~) operator.
An example is given here:
- // instead of
- Math.floor(Math.random() * 50);
- // use
- ~~(Math.random() * 50);
- // You can also use the ~~ operator to convert anything into a number value.
- // Example snippet:
- ~~('whitedress') // returns 0
- ~~(NaN) // returns 0
3. Resize or empty the array using array.length
Sometimes you have to adjust the size of your array or empty it. The most efficient way to do this is to use array.length.
Example:
- let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
- console.log(array.length); // returns the length as 10
- array.length = 4;
- console.log(array.length); // returns the length as 4
- console.log(array); // returns ['a', 'b', 'c', 'd']
You can also use array.length to remove all values from a specified array.
Example:
- let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
- array.length = 0;
- console.log(array.length); // returns the length as 0
- console.log(array); // returns []
4. How to merge arrays without causing server overload
There may be serious pressure on the server when merging arrays, especially if you are dealing with a large data set. Use the Array.concat () and Array.push.apply (arr1, arr2) functions to keep things simple and maintain performance.
Using any of these functions depends on the size of your arrays.
Let's see how to deal with smaller arrays.
Example:
- let list1 = ['a', 'b', 'c', 'd', 'e'];
- let list2 = ['f', 'g', 'h', 'i', 'j'];
- console.log(list1.concat(list2)); // returns the merged values of both arrays, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
When using the Array.concat () function in a larger data set, it consumes a lot of memory while a new array is being created. To bypass the performance drop, use Array.push.apply (arr1, arr2), which merges the second array into the first array without creating a new one.
Example:
- let list1 = ['a', 'b', 'c', 'd', 'e'];
- let list2 = ['f', 'g', 'h', 'i', 'j'];
- console.log(list1.push.apply(list1, list2)); // returns 10, the new length of list1
- console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
5. How to use filters with arrays
Filtering an array is useful when working with multiple relevant data columns. In this case, you can describe the data based on any attribute that describes a group in your array.
Use the filter () function to filter the array.
Example:
- const cars = [
- { make: 'Opel', class: 'Regular' },
- { make: 'Bugatti', class: 'Supercar' },
- { make: 'Ferrari', class: 'Supercar' },
- { make: 'Ford', class: 'Regular' },
- { make: 'Honda', class: 'Regular' },
- ]
- const supercar = cars.filter(car => car.class === 'Supercar');
- console.table(supercar); // returns the supercar class data in a table format
You can also use the filter () with Boolean to remove all null or undefined values from your array. Example:
- const cars = [
- { make: 'Opel', class: 'Regular' },
- null,
- undefined
- ]
- cars.filter(Boolean); // returns [{ make: 'Opel', class: 'Regular' }]
6. How to extract unique values
Suppose you have a data set of duplicate values and you need to generate unique values from this set. You can do this with a combination of syntax ... and the Set object type. This approach works with both numbers and words.
Example:
- const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
- const unrepeated_cars = [...new Set(cars)];
- console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari
7. How to use the Replace function
You should be familiar with the String.replace () function. However, it replaces a string with a specific line only once and stops from there. Suppose you have a larger data set and you have to write this function several times. It gets boring after a while.
To make it easier for you to operate, you can put / g at the end of the regex, so the function runs non-stop in the first place and replaces all match conditions.
Example:
- const grammar = 'synonym synonym';
- console.log(grammar.replace(/syno/, 'anto')); // this returns 'antonym synonym'
- console.log(grammar.replace(/syno/g, 'anto')); // this returns 'antonym antonym'
8. How to drag values
When you work with large arrays and need to request elements with Id using getElementById (), or with a class name using getElementsByClassName (), JavaScript runs through the array in a loop with each request for the same element. This can take a lot of resources.
However, if you know you are using a specific selection on a regular basis, you can increase performance by swiping a certain amount.
Example:
- const carSerial = serials.getElementById('serial1234');
- carSerial.addClass('cached-serial1234');
9. Check if the object has value
When working with multiple objects, it is difficult to keep track of which ones have real values and which ones you can delete.
Here is a quick way to check if an object is empty or empty with the Object.keys () function.
Example:
- Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values
10. How to shrink JavaScript files
Large JS files affect page load and response performance. When writing code, you can delete unnecessary lines, comments, and unused code.
There are tools to help you clean up code and make JS files lighter, or so-called minify their developers. Doing so is very beneficial for developers.
There are tools to help you clean up code and make JS files lighter, or so-called minify their developers. Doing so is very beneficial for developers.
Using these 10 items will help you build cleaner code, save server resources, and save programming time.