JavaScript cheat sheet

Arrow Functions

// Single argument, single instruction
var doubles = arg => arg * 2;

// Multiple arguments, single instruction
var sum = (arg1, arg2) => arg1 + arg2;

// Multiple arguments, multiple instructions
var op = (arg1, arg2) => {
  arg1 = arg1 * 2;
  return arg1 + arg2;
}

Regular Functions

// Single argument, single instruction
function doubles (arg) {
  return arg * 2;
}

// Multiple arguments, single instruction
function sum (arg1, arg2) {
  return arg1 + arg2;
}

// Multiple arguments, multiple instructions
function op (arg1, arg2) {
  arg1 = arg1 * 2;
  return arg1 + arg2;
}

IIFE

var result = ((arg1, arg2) => arg1 + arg2)(3, 6);

Regular function invocation

function sum (arg1, arg2) {
  return arg1 + arg2;
}

var result = sum(3, 6);

Map

(Collection of key/value pairs)

var m = new Map();

m.set('key', 'value');           // Adds a new key/value pair
m.get('key');                    // Retrieves an item by key
m.delete('key');                 // Removes an item by key
m.clear();                       // Removes all items
m.has('key');                    // Returns true/false
m.size;                          // Returns the Map length
m.forEach((value, key) => { });  // Iterates all items

Set

(Collection of unique values)

var s = new Set();

s.add(23);                 // Adds new value
s.has(23);                 // Returns true/false
s.delete(23);              // Removes a value
s.clear();                 // Removes all values
s.size;                    // Returns the Set length
s.forEach((value) => { }); // Iterates all values

Object

var o = new Object();
var o = {};
var o = {
  firstName: 'Chuck',
  lastName: 'Norris',
  age: undefined,
  power: 3000
};

o.age = 23;
o['age'] = 23;

delete o.age;
delete o['age'];
        

Array

// Create arrays
var a = new Array();
var a = [];
var a = [ 1, 1, 2, 3, 5, 8, 13, 21 ];

// Add element(s) to the end
a.push(34);
a.push(34, 55, 89);

// Add element(s) to the beginning
a.unshift(100);
a.unshift(100, 200, 300);

// Add element(s) at index
const i = 3;   // Index
const el = 34; // Element to be added
a.splice(i, 0, el);

// Remove last element
a.pop();

// Remove first element
a.shift();

// Remove element(s) by index
const i = 3; // Index
const n = 1; // How many elements
a.splice(i, n);

// Get length
a.length;

// Contains element? (true/false)
a.includes(2);

// Get index of an element
a.indexOf(5);

// Reverse order
var reversed = a.reverse();
        

Array of Object

var a = [
  { title: 'Foo', price: 101 },
  { title: 'Bar', price: 102 },
  { title: 'Baz', price: 103 }
];

// Loop through the array
a.forEach((item) => { });

// Sort
a.sort((a, b) => {
  if (a.price < b.price) { return -1; }
  if (a.price > b.price) { return 1; }
  return 0;
}

// Filter
var filtered = a.filter((item) => {
  return item.price < 103;
});

// Map
var mapped = a.map((item) => {
  return item.title;
});

// Find (returns the first match)
var found = a.find((item) => {
  return item.price === 102;
});

// Has some (returns true/false)
var hasSome = a.some((item) => {
  return item.price < 103;
});
  
// Has every (returns true/false)
var hasEvery = a.every((item) => {
  return item.price < 103;
});

// Reduce
var reduced = a.reduce((c, item) => {
  return item.price + c;
}, 0);

Create a DOM element

var newDiv = document.createElement('div');

Append a child element in DOM

document.getElementById('myDiv').appendChild(newDiv);

Get parent element

var parent = document.getElementById('myDiv').parentNode;

Local Storage

localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');

Session Storage

sessionStorage.setItem('key1', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');

Callback

function wait(callback) {
  setTimeout(() => {
    callback();
  }, 1000);
}

function display() {
  console.log('1000ms has passed by');
}

wait(display);

function guess(num, callback) {
  const secret = 2;
  if (num === secret) {
    callback('You guessed');
  } else {
    callback('You didn\'t guess');
  }
}

function display(result) {
  console.log(result);
  console.log('done');
}

guess(2, display);

Promise

function wait() {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

function display() {
  console.log('1000ms has passed by');
}

wait().then(display);

function guess(num) {
  return new Promise((res, rej) => {
    const secret = 2;
    if (num === secret) {
      res('You guessed');
    } else {
      rej('You didn\'t guess');
    }
  });
}

function display(result) {
  console.log(result);
}

guess(2)
  .then(display)
  .catch((e) => console.error(e))
  .finally(() => console.log('done'));

Async/Await

function wait() {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

async function waitAndDisplay() {
  await wait();
  console.log('1000ms has passed by');
}

waitAndDisplay();

function guess(num) {
  return new Promise((res, rej) => {
    const secret = 2;
    if (num === secret) {
      res('You guessed');
    } else {
      rej('You didn\'t guess');
    }
  });
}

async function guessAndDisplay() {
  try {
    const result = await guess(2);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
  console.log('done');
}

guessAndDisplay();