Introduction
JavaScript is a versatile and powerful programming language used extensively in web development. It allows developers to create dynamic and interactive user interfaces. This cheatsheet is designed to provide a quick reference guide for common JavaScript concepts, functions, and syntax.
Console Methods
Printing to the Console
console.log(‘Hello world!‘);
// => Hello RaajAryan
console.warn(‘hello %s‘, ‘RaajAryan‘);
// Prints error message to stderr
console.error(new Error(‘Oops!‘));
Numbers and Variables
Declaring Variables
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
Strings
Declaring Strings
let double = “Wheres my bandit hat?“;
// => 21
console.log(single.length);
Arithmetic Operators
10 – 5 = 5 // Subtraction
5 * 10 = 50 // Multiplication
10 / 5 = 2 // Division
10 % 5 = 0 // Modulo
Comments
/*
The below configuration must be
changed before deployment.
*/
Assignment Operators
// Both statements will add 10
number = number + 10;
number += 10;
console.log(number);
// => 120
String Interpolation
// String concatenation
‘Tommy is ‘ + age + ‘ years old.‘;
// String interpolation
`Tommy is ${age} years old.`;
let Keyword
console.log(count); // => undefined
count = 10;
console.log(count); // => 10
const Keyword
// TypeError: Assignment to constant…
numberOfColumns = 8;
JavaScript Conditionals
if Statement
if (isMailSent) {
console.log(‘Mail sent to recipient‘);
}
Ternary Operator
// => true
result = (x == 1) ? true : false;
Logical Operators
10 > 5 || 10 > 20; // true
false || false; // false
10 > 100 || 10 > 20; // false
true && true; // true
1 > 2 && 2 > 1; // false
true && false; // false
4 === 4 && 3 > 1; // true
1 > 3 // false
3 > 1 // true
250 >= 250 // true
1 === 1 // true
1 === 2 // false
1 === ‘1‘ // false
let lateToWork = true;
let oppositeValue = !lateToWork;
// => false
console.log(oppositeValue);
Nullish Coalescing Operator (??)
undefined ?? ‘Me too‘; // ‘Me too’
false ?? ‘I lose‘; // false
0 ?? ‘I lose again‘; // 0
” ?? ‘Damn it‘; // ”
else if Statement
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
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; // 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
JavaScript Functions
Defining and Calling Functions
function sum(num1, num2) {
return num1 + num2;
}
// Calling the function:
sum(3, 6); // 9
Anonymous Functions
function rocketToMars() {
return ‘BOOM!‘;
}
// Anonymous function
const rocketToMars = function() {
return ‘BOOM!‘;
}
Arrow Functions (ES6)
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;
console.log(multiply(2, 30)); // => 60
JavaScript Scope
Scope
let pizzaName = “Margarita“;
// Code here can use pizzaName
}
// Code here can’t use pizzaName
Block Scoped Variables
if (isLoggedIn) {
const statusMessage = ‘Logged in.‘;
}
// Uncaught ReferenceError…
console.log(statusMessage);
Global Variables
const color = ‘blue‘;
function printColor() {
console.log(color);
}
printColor(); // => blue
let vs var
// This is the Max Scope for ‘let’
// i accessible ✔️
}
// i not accessible ❌
for (var i = 0; i < 3; i++) {
// i accessible ✔️
}
// i accessible ✔️
Loops with Closures
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);
}
JavaScript Arrays
Arrays
// Different data types
const data = [1, ‘chicken‘, false];
Property .length
console.log(numbers.length); // 4
Index
const myArray = [100, 200, 300];
console.log(myArray[0]); // 100
console.log(myArray[1]); // 200
Mutable Chart
Add
Remove
Start
End
push
✔️
✔️
pop
✔️
✔️
unshift
✔️
✔️
shift
✔️
✔️
Method .push()
const cart = [‘apple‘, ‘orange‘];
cart.push(‘pear‘);
// Adding multiple elements:
const numbers = [1, 2];
numbers.push(3, 4, 5);
Method .pop()
const fruit = fruits.pop(); // ‘banana’
console.log(fruits); // [“apple”, “orange”]
Method .shift()
cats.shift(); // [‘Willy’, ‘Mini’]
Method .unshift()
cats.unshift(‘Willy‘); // => [‘Willy’, ‘Bob’]
cats.unshift(‘Puff‘, ‘George‘); // => [‘Puff’, ‘George’, ‘Willy’, ‘Bob’]
Method .concat()
const newFirstNumber = 4;
// => [4, 3, 2, 1]
[new
FirstNumber].concat(numbers);
// => [3, 2, 1, 4]
numbers.concat(newFirstNumber);
JavaScript Loops
While Loop
// code block to be executed
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Reverse Loop
for (let i = fruits.length – 1; i >= 0; i—) {
console.log(`${i}. ${fruits[i]}`);
}
// => 2. banana
// => 1. orange
// => 0. apple
Do…While Statement
let i = 0;
do {
x = x + i;
console.log(x);
i++;
} while (i < 5);
// => 0 1 3 6 10
For Loop
console.log(i);
};
// => 0, 1, 2, 3
Looping Through Arrays
console.log(array[i]);
}
// => Every item in the array
Break
if (i > 5) {
break;
}
console.log(i)
}
// => 0 1 2 3 4 5
Continue
if (i === 3) { continue; }
text += “The number is “ + i + “<br>“;
}
Nested Loops
for (let j = 0; j < 3; j += 1) {
console.log(`${i}–${j}`);
}
}
for…in loop
for (let index in fruits) {
console.log(index);
}
// => 0
// => 1
// => 2
for…of loop
for (let fruit of fruits) {
console.log(fruit);
}
// => apple
// => orange
// => banana
JavaScript Iterators
Functions Assigned to Variables
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
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 sum = numbers.reduce((accumulator, curVal) => {
return accumulator + curVal;
});
console.log(sum); // 10
Array Method .map()
const announcements = members.map((member) => {
return member + “ joined the contest.“;
});
console.log(announcements);
Array Method .forEach()
numbers.forEach(number => {
console.log(number);
});
Array Method .filter()
const filteredArray = randomNumbers.filter(n => {
return n > 5;
});
JavaScript Objects
Accessing Properties
color: ‘Green‘,
price: { bulk: ‘$3/kg‘, smallQty: ‘$4/kg‘ }
};
console.log(apple.color); // => Green
console.log(apple.price.bulk); // => $3/kg
Naming Properties
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
date: ‘January 12‘
};
console.log(classElection.place); // undefined
Mutable
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
name: ‘Tom‘,
age: ‘22‘,
};
const {name, age} = person;
console.log(name); // ‘Tom’
console.log(age); // ’22’
Delete Operator
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 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 beach = { activity };
console.log(beach); // { activity: ‘Surfing’ }
this Keyword
name: ‘Pipey‘,
age: 8,
whatName() {
return this.name;
}
};
console.log(cat.whatName()); // => Pipey
Factory Functions
// ‘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
// 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
_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‘;
JavaScript Classes
Static Methods
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
constructor() {
this.title;
this.author;
}
play() {
console.log(‘Song playing!‘);
}
}
const mySong = new Song();
mySong.play();
Class Constructor
constructor(title, artist) {
this.title = title;
this.artist = artist;
}
}
const mySong = new Song(‘Bohemian Rhapsody‘, ‘Queen‘);
console.log(mySong.title);
Class Methods
play() {
console.log(‘Playing!‘);
}
stop() {
console.log(‘Stopping!‘);
}
}
extends
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
});
JavaScript Modules
Export
// 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
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
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
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
JavaScript Promises
Promise States
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
resolve(‘Resolved!‘);
};
const promise = new Promise(executorFn);
setTimeout()
console.log(‘Login‘);
};
setTimeout(loginAlert, 6000);
.then() Method
setTimeout(() => {
resolve(‘Result‘);
}, 200);
});
promise.then((res) => {
console.log(res);
}, (err) => {
console.error(err);
});
.catch() Method
setTimeout(() => {
reject(Error(‘Promise Rejected Unconditionally.‘));
}, 1000);
});
promise.then((res) => {
console.log(value);
});
promise.catch((err) => {
console.error(err);
});
Promise.all()
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()
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
console.log(‘The executor function of the promise!‘);
};
const promise = new Promise(executorFn);
Chaining Multiple .then()
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
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);
}
};
JavaScript Async-Await
Asynchronous
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 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
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
try {
let user = JSON.parse(json); // <– no errors
console.log(user.name); // no name!
} catch (e) {
console.error(“Invalid JSON data!“);
}
Async Await Operator
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
JavaScript Requests
JSON
“name“: “Rick“,
“id“: “11A“,
“level“: 4
};
XMLHttpRequest
xhr.open(‘GET‘, ‘mysite.com/getjson‘);
GET
req.responseType = ‘json‘;
req.open(‘GET‘, ‘/getdata?id=65‘);
req.onload = () => {
console.log(xhr.response);
};
req.send();
POST
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
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
.then(response => response.json())
.then(jsonResponse => {
console.log(jsonResponse);
});
Promise URL Parameter Fetch API
.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 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();
// Handle jsonResponse
}
} catch (error) {
console.log(error);
}
};
Conclusion
This JavaScript cheatsheet covers a wide range of topics and provides examples to help you quickly reference and understand common JavaScript concepts. Whether you’re a beginner or an experienced developer, having a handy cheatsheet can make your coding more efficient and productive. Keep this guide close by to refresh your knowledge and enhance your JavaScript skills.
