12 extremely useful tricks for JavaScript programmers

  1. 5 free online HTML editing tools that test the best code
  2. 13 skills needed to become Frontend Developer
  3. Beginners of computer programming need to focus on what?
  4. 13 important SQL statements Programmer needs to know

In this article, TipsMake.com will share 12 extremely useful tricks for JavaScript programmers . These tips will help you reduce the amount of code as well as help the code run better. Invite you to welcome reading!

1. Convert to boolean using operator !!

Sometimes we need to check if a variable exists or has a valid value, to see them as true values . To determine, you can use !! (Double negation operator) a simple !!variable , will automatically convert any boolean data type and this variable will return false when it has values ​​like: 0 ; null ; "" ; undefined 0 ; null ; "" ; undefined 0 ; null ; "" ; undefined or NaN , otherwise it will return true . To better understand how it works, take a look at the following simple example:

 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); // false

In the above example, if the account.cash value is greater than 0, account.hasMoney will have a value of true.

12 extremely useful tricks for JavaScript programmers Picture 1

2. Convert to number using the + operator

This procedure is excellent and easy to perform. However, it only works with numeric strings, otherwise it returns NaN (Not a Number - Not a number). Take a look at the following example:

 function toNumber(strNumber) { 
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

This trick also works for both Date and in this case it returns the timestamp number:

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

3. Shorten the conditions

If you see a code like the one below:

 if (conected) { 
login();
}

You can shorten it by combining a variable (to be validated) and a function using && (AND operator) in the middle. For example, the above code may become more concise in a line:

 conected && login(); 

You can do the same to check if the property or function exists in the object. Similar to the code below:

 user && user.login(); 

4. Set the default value using the || operator

Currently, ES6 has the default parameter feature. To simulate this feature in older browsers, you can use || (OR operator) by inserting the default value as the second parameter to use. If the first parameter returns false , the second parameter will be used as the default value. See the following example:

 function User(name, age) { 
this.name = name || "Oliver Queen";
this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27 console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

5. Store array.length in the loop

This trick is very simple and has a great impact on performance when processing large arrays in the loop. Basically, most people use a for loop to browse the array as follows:

 for (var i = 0; i < array.length; i++) { 
console.log(array[i]);
}

It's okay to work with small arrays, but if you handle large arrays, this code will recalculate the size of the array after each iteration and that will cause a bit of delay. To avoid this, you can store the array.length in a variable to use it instead of calling array.length in each iteration:

 var length = array.length; 
for (var i = 0; i < length; i++) {
console.log(array[i]);
}

To make it look more compact, simply rewrite the following:

 for (var i = 0, length = array.length; i < length; i++) { 
console.log(array[i]);
}

6. Identify attributes in an object

This trick is extremely useful when you need to check if the property exists and avoid running unspecified functions or attributes. If you intend to write code that runs on multiple browsers, you can also use this technique.

For example, imagine you need to write code that is compatible with the old Web browser Internet Explorer 6 - IE6 and you want to use document.querySelector() to get some elements by their ID. However, in IE6 this function does not exist. To check if the function exists, use the in operator as the example below:

 if ('querySelector' in document) { 
document.querySelector("#id");
} else {
document.getElementById("id");
}

In this case, if there is no querySelector function in the document, we can use document.getElementById() instead.

7. Get the last element in the array

Array.prototype.slice(begin, end) can cut the array when you set the begin and end parameters. But if you do not enter the end parameter, this function will automatically set the maximum value for the array. Surely few people know that this function can accept negative values ​​and if you set the begin parameter to be a negative number, you will get the last element from the array:

 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]

8. Short cut array

This technique can lock the array size, which is useful when you want to delete some elements of the array based on the number of elements you set. For example, if you have an array of 10 elements but you only want to get the first 5 elements, you can truncate the array, making it smaller by setting array.length = 5 . See the following example:

 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]

9. Replace the whole

The String.replace() function allows to use String and Regex to replace strings, but this function only replaces the first substring that appears. You can simulate a function replaceAll() using /g at the end of the Regex:

 var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10. Include the array

If you need to put two arrays together, you can use the Array.concat() function:

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

However, this function is not the best way to merge large arrays as it will consume a lot of memory by creating a new array. In this case, you can use Array.push.apply(arr1, arr2) instead of creating a new array, it will merge the second array into the first array thereby reducing memory usage:

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

11. Convert NodeList to array

If you run document.querySelectorAll("p") , it will return an array containing DOM elements, NodeList objects. But this object doesn't have all the functions of the array like: sort() ; reduce() ; map() ; filter() sort() ; reduce() ; map() ; filter() sort() ; reduce() ; map() ; filter() . To be able to use these and many other available functions of the array, you need to convert the NodeList into an array. You only need to use the function: [].slice.call(elements) :

 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

12. Mix elements in the array

To tamper with the elements in the array without using separate libraries like Lodash , you only need to use the following trick:

 var list = [1, 2, 3]; 
console.log(list.sort(function() {
return Math.random() - 0.5
})); // [2,1,3]

Conclude

Now you have learned some useful JavaScript tricks that are mostly used to minimize code and some tricks used in popular JavaScript frameworks like Lodash, Underscore.js, Strings.js and many frameworks. other.

Hope you enjoy this article and if you still know any other useful JavaScript tips, let us know in the comment section below!

Refer to some more articles:

  1. Do you know the 15 hottest programming languages ​​on this GitHub?
  2. 7 Framework JavaScript for mobile application development
  3. If you want a successful career, find out about the five 2018 technology trends!

Having fun!

3.5 ★ | 2 Vote

May be interested

  • ! = and! == What is the difference in JavaScript?! = and! == What is the difference in JavaScript?
    javascript includes operators like in other languages. an operator performs some operations on one or more operands (data values) and produces a result. today's article will help readers learn about 2! = and! == operators in javascript.
  • Learn about ES6 in JavascriptLearn about ES6 in Javascript
    es6 refers to version 6 of the ecma script programming language. ecma script is the standard name for javascript and version 6 is the next version after version 5, released in 2011.
  • How to ProgramHow to Program
    as technology becomes more accessible, the demand for programmers is also increasing. programming is a skill that is cultivated and perfected over time. however, anyone must go through a certain initial step. there are countless languages ​​that are suitable for beginners, regardless of their chosen field (eg. javascript, etc. javascript is relatively advanced, so start with html or css). please continue reading to get started with your programming learning journey.
  • Tips to avoid burn out syndrome for programmersTips to avoid burn out syndrome for programmers
    fast deadlines, continuous programming for a long time can make programmers feel exhausted. using the following tips will help programmers reduce stress and increase work efficiency.
  • GitHub launches 'Copilot', an AI that can code with youGitHub launches 'Copilot', an AI that can code with you
    github has just officially launched a new ai programming tool called copilot. this tool will accompany programmers and developers to help them create more quality code in a variety of programming languages ​​such as python, javascript, typescript, ruby and go.
  • Summary of JavaScript exercises with sample codeSummary of JavaScript exercises with sample code
    in order to make your javascript learning easier, tipsmake.com has compiled a number of javascript exercises with sample solutions for you to practice.
  • JavaScript location in HTML FileJavaScript location in HTML File
    there is flexibility in providing javascript code anywhere in an html document. however, the most preferred ways to include javascript in an html file.
  • How to Turn on JavaScriptHow to Turn on JavaScript
    javascript is a language used in many websites to provide additional functionality and access to the user. developers use javascript to deliver a large part of their site's functionality to you, the user. your browser must have javascript...
  • What is the difference between Java and JavaScript?What is the difference between Java and JavaScript?
    although the names of java and javascript seem to be related (javascript seems to be a script in java?), but that's the only similarity. these two languages ​​are not technically related to each other.
  • Void keywords in JavaScriptVoid keywords in JavaScript
    void is an important keyword in javascript that can be used as a unary operator before its single operand, which can be in any type. this operator defines an expression to be evaluated without returning a value.