Using JavaScript Like A Pro

I have to maintain several websites that rely on JavaScript to render and interact with internet users. As a result, I created this post to document the most frequently used JavaScript features that help me to keep my websites running at optimal state. Some of the code below references from other sites as I found helpful to include it here.

I will cover JavaScript up to ECMAScript 6, also known as ECMAScript 2015. This is the latest version of the ECMAScript standard as of September 2019. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. If you find this page helpful, please click on the Amazon links on my website to purchase a product that you need. This will also help me to recoup the cost of running this website. Thanks!

1. Short hand of ‘if’ statements

Instead of checking if something is truly using an if expression, you can simply do:

expr && doSomething();

// Instead of:
if (expr) {
   doSomething();
}

2. Use anonymous function to group several statements to gether and execute immediately

// Declare an anonymous function
(function () {
   var foo = 42;
   console.log(window.foo);
   // → undefined
   console.log(foo);
   // → 42
})();
// and call it immediately

3. Use Arrow Functions new in ES6

Arrow functions allow a short syntax for writing function expressions.
You don’t need the function keyword, the return keyword, and the curly brackets.

Example:

// ES5
var x = function(x, y) {
     return x * y;
}

// ES6
const x = (x, y) => x * y;

4. Default function parameters

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5

5. Create a reference to the reused object and use it to resolve references

var items = document.forms["Main"].elements;
items.input1.value = "test";
items.input2.value = "test";

6. The most efficient way of creating objects in JavaScript

Moving away from the C++ like ways for creating objects, JavaScript promotes to use the [object literal] method, i.e., using {}.

// Using object literal method {} replacing new.

var testObj = {
   testObj.firstName = 'ECMA';
   testObj.lastName = 'Script';
   testObj.someFunction = function() {
      console.log("Name is " + this.firstName + " " + this.lastName);
   }
};

// To create an empty object, use the curly braces i.e. {}.

var newObject = {};

7. Use square brackets [] to initialize or create arrays

The usual approach:

var myArr = new Array();
myArr[0] = 'United States';
myArr[1] = 'United Kingdom';

The new approach:

var myArr = [United States', 'United Kingdom'];

8. More ways to create arrays

//shorthand
const arrOne = []
const arrTwo = [1,2,3]

// new is not required here, don't do it
const a = new Array()

// Array with a length of 10 'empty' elements
const tenItemsArray = Array(10)

// Array with indexes and elements as values
const arrDict = {
"0": 1,
"1": 2,
"2": 3
} 

9. Verify if an object has a property inside a [for-in] loop
   

Here is a sample code which could help you avoid iterating through the object’s prototype.

for (var prop in testObj) {
    if (testObj.hasOwnProperty(prop)) {
        // do something with prop
    }
}

Note:
About the testObj.hasOwnProperty() method, according to a post on stackoverflow, the above code has to be used with ‘strict mode’.

“Note: the following is nowadays largely obsolete thanks to strict mode, and hasOwnProperty. The correct solution is to use strict mode and to check for the presence of a property using obj.hasOwnProperty. This answer predates both these things, at least as widely implemented (yes, it is that old).”