JavaScript cheatsheet

JavaScript is a lightweight, interpreted programming language.

• JSON cheatsheet (quickref.me)
• Regex in JavaScript (quickref.me)

// => Hello world! console.log('Hello world!'); // => Hello QuickRef.ME console.warn('hello %s', 'QuickRef.ME'); // Prints error message to stderr console.error(new Error('Oops!')); 

let amount = 6; let price = 4.99; 

let x = null; let name = "Tammy"; const found = false; // => Tammy, false, null console.log(name, found, x); var a; console.log(a); // => undefined 

let single = 'Wheres my bandit hat?'; let double = "Wheres my bandit hat?"; // => 21 console.log(single.length); 

5 + 5 = 10 // Addition 10 - 5 = 5 // Subtraction 5 * 10 = 50 // Multiplication 10 / 5 = 2 // Division 10 % 5 = 0 // Modulo 

// This line will denote a comment /* The below configuration must be changed before deployment. */ 

let number = 100; // Both statements will add 10 number = number + 10; number += 10; console.log(number); // => 120 

let age = 7; // String concatenation 'Tommy is ' + age + ' years old.'; // String interpolation `Tommy is ${age} years old.`; 

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

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

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

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

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 

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'); } 

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.

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

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

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

// Defining the function function sum(num1, num2) { return num1 + num2; } // Calling the function sum(2, 4); // 6 

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

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

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

function myFunction() { var pizzaName = "Margarita"; // Code here can use pizzaName } // Code here can't use pizzaName 

const isLoggedIn = true; if (isLoggedIn == true) { const statusMessage = 'Logged in.'; } // Uncaught ReferenceError... console.log(statusMessage); 

// Variable declared globally const color = 'blue'; function printColor() { console.log(color); } printColor(); // => blue 

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.

// 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.

const fruits = ["apple", "orange", "banana"]; // Different data types const data = [1, 'chicken', false]; 

const numbers = [1, 2, 3, 4]; numbers.length // 4 

// Accessing an array element const myArray = [100, 200, 300]; console.log(myArray[0]); // 100 console.log(myArray[1]); // 200 

// 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.

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.

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

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

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.

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.

while (condition) { // code block to be executed } let i = 0; while (i < 5) { console.log(i); i++; } 

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 

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

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

for (let i = 0; i < array.length; i++){ console.log(array[i]); } // => Every item in the array 

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

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

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

const fruits = ["apple", "orange", "banana"]; for (let index in fruits) { console.log(index); } // => 0 // => 1 // => 2 

const fruits = ["apple", "orange", "banana"]; for (let fruit of fruits) { console.log(fruit); } // => apple // => orange // => banana 

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 Song { constructor() { this.title; this.author; } play() { console.log('Song playing!'); } } const mySong = new Song(); mySong.play(); 

class Song { constructor(title, artist) { this.title = title; this.artist = artist; } } const mySong = new Song('Bohemian Rhapsody', 'Queen'); console.log(mySong.title); 

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

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

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

Also see: JSON cheatsheet

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.

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

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

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

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); })