Javascript cheat sheet

Hello World

Using Console

// the hello world program
console.log('Hello World');

Using alert()

// the hello world program
alert("Hello, World!");

Variables

var a;  // variable
var b = "init"; // string
var c = "Hi" + " " + "John";  // = "Hi John"
var d = 1 + 2 + "3"; // = "33"
var e = [4,3,5]; // array
var f = false; // boolean
var g = /()/; // RegEx
var h = function(){}; // function object
const PI = 3.14; // constant
var a = 1, b = 2, c = a + b; // one line
let z = 'zzz'; // block scope local variable

Data types

var age = 18;  // number
var name = "Jane";  // string
var name = {first:"Jane", last:"Doe"};  // object
var truth = false;  // boolean
var sheets = ["HTML","CSS","JS"];  // array
var a; typeof a;  // undefined
var a = null;  // value null

Comments

// This line will denote a comment

/*  
The below configuration must be 
changed before deployment. 
*/

Assignment Operators

let number = 100;

// Both statements will add 10
number = number + 10;
number += 10;

console.log(number); 
// => 120

let Keyword

let count; 
console.log(count); // => undefined
count = 10;
console.log(count); // => 10

const Keyword

const numberOfColumns = 4;

// TypeError: Assignment to constant...
numberOfColumns = 8;

Operators in short

• Assignment: =
• Comparison: ==, ===, !=, !==, >, <, >=, <=
• Arithmetic: +, -, *, /, %
• Logical: &&, ||, !

More about Operators

Functions in short

Function declaration:

  function functionName(parameters) {
    // code
  }

Arrow function:

  const arrowFunction = (parameters) => {
    // code
  };

More about Functions

Loops in short

For loop:

  for (let i = 0; i < 10; i++) {
    // code
  }

While loop:

  while (condition) {
    // code
  }

Do-While loop:

  do {
    // code
  } while (condition);

More about Loops

Conditional Statements

If:

  if (condition) {
    // code
  }

If-Else:

  if (condition) {
    // code
  } else {
    // code
  }

Switch:

  switch(expression) {
    case x:
      // code
      break;
    default:
      // code
  }

More about Conditionals

Strings

var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don\'t \n know';   // \n new line
var len = abc.length;           // string length
abc.indexOf("lmno");            // find substring, -1 if doesn't contain
abc.lastIndexOf("lmno");        // last occurrence
abc.slice(3, 6);                // cuts out "def", negative values count from behind
abc.replace("abc","123");       // find and replace, takes regular expressions
abc.toUpperCase();              // convert to upper case
abc.toLowerCase();              // convert to lower case
abc.concat(" ", str2);          // abc + " " + str2
abc.charAt(2);                  // character at index: "c"
abc[2];                         // unsafe, abc[2] = "C" doesn't work
abc.charCodeAt(2);              // character code at index: "c" -> 99
abc.split(",");                 // splitting a string on commas gives an array
abc.split("");                  // splitting on characters
128.toString(16);               // number to hex(16), octal (8) or binary (2)

String Interpolation

let age = 74;

// String concatenation
' Silvester is ' + age + ' years old.';

// String interpolation
`Silvester is ${age} years old.`;

DOM Manipulation

• Selecting elements: document.querySelector('.class'), document.getElementById('id')
• Changing content: element.textContent = 'New content'
• Adding an event listener:

  element.addEventListener('eventType', (event) => {
  // code
  });

if Statement

const isMailSent = true;

if (isMailSent) {
  console.log('Mail sent to recipient');
}

Ternary Operator

var x=1;

// => true
result = (x == 1) ? true : false;

else if

const size = 10;

if (size > 100) {
  console.log('Big');
} else if (size > 20) {
  console.log('Medium');
} else if (size > 4) {
  console.log('Small');
} else {
  console.log('Tiny');
}
// Print: Small

switch Statement

const food = 'salad';

switch (food) {
  case 'oyster':
    console.log('The taste of the sea');
    break;
  case 'pizza':
    console.log('A delicious pie');
    break;
  default:
    console.log('Enjoy your meal');
}

== vs ===

0 == false   // true
0 === false  // false, different type
1 == "1"     // true,  automatic type conversion 
1 === "1"    // false, different type
null == undefined  // true
null === undefined // false
'0' == false       // true
'0' === false      // false

The == just check the value, === check both the value and the type.

The Basics

true || false;       // true
10 > 5 || 10 > 20;   // true
false || false;      // false
10 > 100 || 10 > 20; // false

Logical Operator &&

true && true;        // true
1 > 2 && 2 > 1;      // false
true && false;       // false
4 === 4 && 3 > 1;    // true

Comparison Operators

1 > 3                // false
3 > 1                // true
250 >= 250           // true
1 === 1              // true
1 === 2              // false
1 === '1'            // false

Logical Operator !

let lateToWork = true;
let oppositeValue = !lateToWork;

// => false
console.log(oppositeValue); 

Nullish coalescing operator ??

null ?? 'I win';           //  'I win'
undefined ?? 'Me too';     //  'Me too'

false ?? 'I lose'          //  false
0 ?? 'I lose again'        //  0
'' ?? 'Damn it'            //  ''

Functions

// Defining the function:
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function:
sum(3, 6); // 9

Anonymous Functions

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}

Arrow Functions (ES6)

With two arguments

const sum = (param1, param2) => { 
  return param1 + param2; 
}; 
console.log(sum(2,5)); // => 7 

With no arguments

const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // => hello

With a single argument

const checkWeight = weight => { 
  console.log(`Weight : ${weight}`); 
}; 
checkWeight(25); // => Weight : 25 

Concise arrow functions

const multiply = (a, b) => a * b; 
// => 60 
console.log(multiply(2, 30)); 

Arrow function available starting ES2015

return Keyword

// With return
function sum(num1, num2) {
  return num1 + num2;
}

// The function doesn't output the sum
function sum(num1, num2) {
  num1 + num2;
}

Calling Functions

// Defining the function
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function
sum(2, 4); // 6

Function Expressions

const dog = function() {
  return 'Woof!';
}

Function Parameters

// The parameter is name
function sayHello(name) {
  return `Hello, ${name}!`;
}

Function Declaration

function add(num1, num2) {
  return num1 + num2;
}

Scope

function myFunction() {

  var pizzaName = "Margarita";
  // Code here can use pizzaName

}

// Code here can't use pizzaName

Block Scoped Variables

const isLoggedIn = true;

if (isLoggedIn == true) {
  const statusMessage = 'Logged in.';
}

// Uncaught ReferenceError...
console.log(statusMessage);

Global Variables

// Variable declared globally
const color = 'blue';

function printColor() {
  console.log(color);
}

printColor(); // => blue

let vs var

for (let i = 0; i < 3; i++) {
  // This is the Max Scope for 'let'
  // i accessible ✔️
}
// i not accessible ❌

for (var i = 0; i < 3; i++) {
  // i accessible ✔️
}
// i accessible ✔️

var is scoped to the nearest function block, and let is scoped to the nearest enclosing block.

Loops with closures

// Prints 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(_ => console.log(i), 10);
}

// Prints 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) { 
  setTimeout(_ => console.log(j), 10);
}

The variable has its own copy using let, and the variable has shared copy using var.

Arrays

const fruits = ["apple", "orange", "banana"];

// Different data types
const data = [1, 'chicken', false];

Property .length

const numbers = [1, 2, 3, 4];

numbers.length // 4

Index

// Accessing an array element
const myArray = [100, 200, 300];

console.log(myArray[0]); // 100
console.log(myArray[1]); // 200

Mutable chart

Method .push()

// Adding a single element:
const cart = ['apple', 'orange'];
cart.push('pear'); 

// Adding multiple elements:
const numbers = [1, 2];
numbers.push(3, 4, 5);

Add items to the end and returns the new array length.

Method .pop()

const fruits = ["apple", "orange", "banana"];

const fruit = fruits.pop(); // 'banana'
console.log(fruits); // ["apple", "orange"]

Remove an item from the end and returns the removed item.

Method .shift()

let cats = ['Bob', 'Willy', 'Mini'];

cats.shift(); // ['Willy', 'Mini']

Remove an item from the beginning and returns the removed item.

Method .unshift()

let cats = ['Bob'];

// => ['Willy', 'Bob']
cats.unshift('Willy');

// => ['Puff', 'George', 'Willy', 'Bob']
cats.unshift('Puff', 'George');

Add items to the beginning and returns the new array length.

Method .concat()

const numbers = [3, 2, 1]
const newFirstNumber = 4

// => [ 4, 3, 2, 1 ]
[newFirstNumber].concat(numbers)

// => [ 3, 2, 1, 4 ]
numbers.concat(newFirstNumber)

if you want to avoid mutating your original array, you can use concat.

Create Set

// Empty Set Object
const emptySet = new Set()

// Set Object with values
const setObj = new Set([1, true, "hi"])

Add

const emptySet = new Set()

// add values
emptySet.add('a')   // 'a'
emptySet.add(1)     // 'a', 1
emptySet.add(true)  // 'a', 1, true
emptySet.add('a')   // 'a', 1, true

Delete

const emptySet = new Set([1, true, 'a'])

// delete values
emptySet.delete('a')    // 1, true
emptySet.delete(true)   // 1
emptySet.delete(1)      //

Has

const setObj = new Set([1, true, 'a'])

// returns true or false
setObj.has('a')     // true
setObj.has(1)       // true
setObj.has(false)   // false

Clear

const setObj = new Set([1, true, 'a'])

// clears the set
console.log(setObj)   // 1, true, 'a'
setObj.clear()        //

Size

const setObj = new Set([1, true, 'a'])

consoloe.log(setObj.size)   // 3

ForEach

const setObj = new Set([1, true, 'a'])

setObj.forEach(function(value){
  console.log(value)
})

// 1
// true
// 'a'

While Loop

while (condition) {
  // code block to be executed
}

let i = 0;
while (i < 5) {        
  console.log(i);
  i++;
}

Reverse Loop

const fruits = ["apple", "orange", "banana"];

for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(`${i}. ${fruits[i]}`);
}

// => 2. banana
// => 1. orange
// => 0. apple

Do…While Statement

x = 0
i = 0

do {
  x = x + i;
  console.log(x)
  i++;
} while (i < 5);
// => 0 1 3 6 10

For Loop

for (let i = 0; i < 4; i += 1) {
  console.log(i);
};

// => 0, 1, 2, 3

Looping Through Arrays

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

// => Every item in the array

Break

for (let i = 0; i < 99; i += 1) {
  if (i > 5) {
     break;
  }
  console.log(i)
}
// => 0 1 2 3 4 5

Continue

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

Nested

for (let i = 0; i < 2; i += 1) {
  for (let j = 0; j < 3; j += 1) {
    console.log(`${i}-${j}`);
  }
}

for...in loop

const fruits = ["apple", "orange", "banana"];

for (let index in fruits) {
  console.log(index);
}
// => 0
// => 1
// => 2

for...of loop

const fruits = ["apple", "orange", "banana"];

for (let fruit of fruits) {
  console.log(fruit);
}
// => apple
// => orange
// => banana

Functions Assigned to Variables

let plusFive = (number) => {
  return number + 5;  
};
// f is assigned the value of plusFive
let f = plusFive;

plusFive(3); // 8
// Since f has a function value, it can be invoked. 
f(9); // 14

Callback Functions

const isEven = (n) => {
  return n % 2 == 0;
}

let printMsg = (evenFunc, num) => {
  const isNumEven = evenFunc(num);
  console.log(`${num} is an even number: ${isNumEven}.`)
}

// Pass in isEven as the callback function
printMsg(isEven, 4); 
// => The number 4 is an even number: True.

Array Method .reduce()

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, curVal) => {  
  return accumulator + curVal;
});

console.log(sum); // 10

Array Method .map()

const members = ["Taylor", "Donald", "Don", "Natasha", "Bobby"];

const announcements = members.map((member) => {
  return member + " joined the contest.";
});

console.log(announcements);

Array Method .forEach()

const numbers = [28, 77, 45, 99, 27];

numbers.forEach(number => {  
  console.log(number);
}); 

Array Method .filter()

const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter(n => {  
  return n > 5;
});

Accessing Properties

const apple = { 
  color: 'Green',
  price: { bulk: '$3/kg', smallQty: '$4/kg' }
};
console.log(apple.color); // => Green
console.log(apple.price.bulk); // => $3/kg

Naming Properties

// Example of invalid key names
const trainSchedule = {
  // Invalid because of the space between words.
  platform num: 10, 
  // Expressions cannot be keys.
  40 - 10 + 2: 30,
  // A + sign is invalid unless it is enclosed in quotations.
  +compartment: 'C'
}

Non-existent properties

const classElection = {
  date: 'January 12'
};

console.log(classElection.place); // undefined

Mutable

const student = {
  name: 'Sheldon',
  score: 100,
  grade: 'A',
}

console.log(student)
// { name: 'Sheldon', score: 100, grade: 'A' }

delete student.score
student.grade = 'F'
console.log(student)
// { name: 'Sheldon', grade: 'F' }

student = {}
// TypeError: Assignment to constant variable.

Assignment shorthand syntax

const person = {
  name: 'Tom',
  age: '22',
};
const {name, age} = person;
console.log(name); // 'Tom'
console.log(age);  // '22'

Delete operator

const person = {
  firstName: "Matilda",
  age: 27,
  hobby: "knitting",
  goal: "learning JavaScript"
};

delete person.hobby; // or delete person[hobby];

console.log(person);
/*
{
  firstName: "Matilda"
  age: 27
  goal: "learning JavaScript"
}
*/

Objects as arguments

const origNum = 8;
const origObj = {color: 'blue'};

const changeItUp = (num, obj) => {
  num = 7;
  obj.color = 'red';
};

changeItUp(origNum, origObj);

// Will output 8 since integers are passed by value.
console.log(origNum);

// Will output 'red' since objects are passed 
// by reference and are therefore mutable.
console.log(origObj.color);

Shorthand object creation

const activity = 'Surfing';
const beach = { activity };
console.log(beach); // { activity: 'Surfing' }

this Keyword

const cat = {
  name: 'Pipey',
  age: 8,
  whatName() {
    return this.name  
  }
};
console.log(cat.whatName()); // => Pipey

Factory functions

// A factory function that accepts 'name', 
// 'age', and 'breed' parameters to return 
// a customized dog object. 
const dogFactory = (name, age, breed) => {
  return {
    name: name,
    age: age,
    breed: breed,
    bark() {
      console.log('Woof!');  
    }
  };
};

Methods

const engine = {
  // method shorthand, with one argument
  start(adverb) {
    console.log(`The engine starts up ${adverb}...`);
  },  
  // anonymous arrow function expression with no arguments
  sputter: () => {
    console.log('The engine sputters...');
  },
};

engine.start('noisily');
engine.sputter();

Getters and setters

const myCat = {
  _name: 'Dottie',
  get name() {
    return this._name;  
  },
  set name(newName) {
    this._name = newName;  
  }
};

// Reference invokes the getter
console.log(myCat.name);

// Assignment invokes the setter
myCat.name = 'Yankee';

Static Methods

class Dog {
  constructor(name) {
    this._name = name;  
  }

  introduce() { 
    console.log('This is ' + this._name + ' !');  
  }

  // A static method
  static bark() {
    console.log('Woof!');  
  }
}

const myDog = new Dog('Buster');
myDog.introduce();

// Calling the static method
Dog.bark();

Class

class Song {
  constructor() {
    this.title;
    this.author;
  }

  play() {
    console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

Class Constructor

class Song {
  constructor(title, artist) {
    this.title = title;
    this.artist = artist;
  }
}

const mySong = new Song('Bohemian Rhapsody', 'Queen');
console.log(mySong.title);

Class Methods

class Song {
  play() {
    console.log('Playing!');
  }

  stop() {
    console.log('Stopping!');
  }
}

extends

// Parent class
class Media {
  constructor(info) {
    this.publishDate = info.publishDate;
    this.name = info.name;
  }
}

// Child class
class Song extends Media {
  constructor(songData) {
    super(songData);
    this.artist = songData.artist;
  }
}

const mySong = new Song({ 
  artist: 'Queen', 
  name: 'Bohemian Rhapsody', 
  publishDate: 1975
});

Export

// myMath.js

// Default export
export default function add(x,y){
    return x + y
}

// Normal export
export function subtract(x,y){
    return x - y
}

// Multiple exports
function multiply(x,y){
    return x * y
}
function duplicate(x){
    return x * 2
}
export {
    multiply,
    duplicate
}

Import

// main.js
import add, { subtract, multiply, duplicate } from './myMath.js';

console.log(add(6, 2)); // 8 
console.log(subtract(6, 2)) // 4
console.log(multiply(6, 2)); // 12
console.log(duplicate(5)) // 10

// index.html
<script type="module" src="main.js"></script>

Export Module

// myMath.js

function add(x,y){
    return x + y
}
function subtract(x,y){
    return x - y
}
function multiply(x,y){
    return x * y
}
function duplicate(x){
    return x * 2
}

// Multiple exports in node.js
module.exports = {
    add,
    subtract,
    multiply,
    duplicate
}

Require Module

// main.js
const myMath = require('./myMath.js')

console.log(myMath.add(6, 2)); // 8 
console.log(myMath.subtract(6, 2)) // 4
console.log(myMath.multiply(6, 2)); // 12
console.log(myMath.duplicate(5)) // 10

Promise states

const promise = new Promise((resolve, reject) => {
  const res = true;
  // An asynchronous operation.
  if (res) {
    resolve('Resolved!');
  }
  else {
    reject(Error('Error'));
  }
});

promise.then((res) => console.log(res), (err) => console.error(err));

Executor function

const executorFn = (resolve, reject) => {
  resolve('Resolved!');
};

const promise = new Promise(executorFn);

setTimeout()

const loginAlert = () =>{
  console.log('Login');
};

setTimeout(loginAlert, 6000);

.then() method

const promise = new Promise((resolve, reject) => {    
  setTimeout(() => {
    resolve('Result');
  }, 200);
});

promise.then((res) => {
  console.log(res);
}, (err) => {
  console.error(err);
});

.catch() method

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {
    reject(Error('Promise Rejected Unconditionally.'));
  }, 1000);
});

promise.then((res) => {
  console.log(value);
});

promise.catch((err) => {
  console.error(err);
});

Promise.all()

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 300);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 200);
});

Promise.all([promise1, promise2]).then((res) => {
  console.log(res[0]);
  console.log(res[1]);
});

Avoiding nested Promise and .then()

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {
    resolve('*');
  }, 1000);
});

const twoStars = (star) => {  
  return (star + star);
};

const oneDot = (star) => {  
  return (star + '.');
};

const print = (val) => {
  console.log(val);
};

// Chaining them all together
promise.then(twoStars).then(oneDot).then(print);

Creating

const executorFn = (resolve, reject) => {
  console.log('The executor function of the promise!');
};

const promise = new Promise(executorFn);

Chaining multiple .then()

const promise = new Promise(resolve => setTimeout(() => resolve('dAlan'), 100));

promise.then(res => {
  return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')
}).then((res) => {
  console.log(res)
}, (err) => {
  console.error(err)
});

Fake http Request with Promise

const mock = (success, timeout = 1000) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(success) {
        resolve({status: 200, data:{}});
      } else {
        reject({message: 'Error'});
      }
    }, timeout);
  });
}
const someEvent = async () => {
  try {
    await mock(true, 1000);
  } catch (e) {
    console.log(e.message);
  }
}

Asynchronous

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

const msg = async function() { //Async Function Expression
  const msg = await helloWorld();
  console.log('Message:', msg);
}

const msg1 = async () => { //Async Arrow Function
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds
msg1(); // Message: Hello World! <-- after 2 seconds

Resolving Promises

let pro1 = Promise.resolve(5);
let pro2 = 44;
let pro3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([pro1, pro2, pro3]).then(function(values) {
  console.log(values);
});
// expected => Array [5, 44, "foo"]

Async Await Promises

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds

Error Handling

let json = '{ "age": 30 }'; // incomplete data

try {
  let user = JSON.parse(json); // <-- no errors
  console.log( user.name ); // no name!
} catch (e) {
  console.error( "Invalid JSON data!" );
}

Aysnc await operator

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds

JSON

const jsonObj = {
  "name": "Rick",
  "id": "11A",
  "level": 4  
};

Also see: JSON cheatsheet

XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');

XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.

GET

const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
req.onload = () => {
  console.log(xhr.response);
};

req.send();

POST

const data = {
  fish: 'Salmon',
  weight: '1.5 KG',
  units: 5
};
const xhr = new XMLHttpRequest();
xhr.open('POST', '/inventory/add');
xhr.responseType = 'json';
xhr.send(JSON.stringify(data));

xhr.onload = () => {
  console.log(xhr.response);
};

fetch api

fetch(url, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      'apikey': apiKey
    },
    body: data
  }).then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  }, networkError => {
    console.log(networkError.message)
  })
}

JSON Formatted

fetch('url-that-returns-JSON')
.then(response => response.json())
.then(jsonResponse => {
  console.log(jsonResponse);
});

promise url parameter fetch api

fetch('url')
.then(
  response  => {
    console.log(response);
  },
 rejection => {
    console.error(rejection.message);
);

Fetch API Function

fetch('https://api-xxx.com/endpoint', {
  method: 'POST',
 body: JSON.stringify({id: "200"})
}).then(response => {
  if(response.ok){
      return response.json();  
  }
    throw new Error('Request failed!');
}, networkError => {
  console.log(networkError.message);
}).then(jsonResponse => {
  console.log(jsonResponse);
})

async await syntax

const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  try{
const response = await fetch(endpoint, {cache: 'no-cache'});
    if(response.ok){
      const jsonResponse = await response.json()
    }
  }
  catch(error){
    console.log(error)
  }
}

5 useful coding tips

1. Use === Instead of ==
   Always use strict comparison (=== and !==) over abstract comparison (== and !=) to avoid type coercion bugs.

   // Good practice:
   if (value === "123") {
    // code...
   }

2. Declare Variables Outside Loops
   For better performance, declare variables outside loop bodies when they don't depend on the loop's scope.

   // Before the loop
   let i, len;
   for (i = 0, len = myArray.length; i < len; i++) {
    // loop body...
   }

3. Use Arrow Functions for Anonymous Functions
   Arrow functions provide a concise syntax and lexically bind the this value.

   // Instead of using function keyword for anonymous functions
   [1, 2, 3].map((x) => x * x);

4. Leverage Destructuring Assignment
   Destructuring makes it easier to extract properties from objects or items from arrays.

   const {name, age} = person;
   const [first, second] = array;

5. Spread Operator for Arrays and Objects
   Use the spread operator ... to easily copy or merge arrays/objects.

   // Copy array
   const newArray = [...oldArray];
   // Merge objects
   const mergedObject = {...obj1, ...obj2};

Useful links

1. JavaScript reference
2. JavaScript reference on DevDocs.io
3. Javascript Coding Playground (jsfiddle)
4. Javascript Tutorial
5. JavaScript Online Compiler
6. JavaScript Validator
7. Online JavaScript Minifier
8. JavaScript Obfuscator Tool