Cheatsheet
v.1.0.0
Static variables
1const name = 'Hangman'; //string
2const age = 24; //number
3const isPilot = true; //boolean
4const pilots = ['Maverick', 'Rooster']; // array
5const fighterPilot = {
6 name: 'Bob',
7 age: 22,
8 isPilot: false,
9}; //object
Mutable variables
1let car = 'Honda';
2car = 'Toyota';
3console.log(car); //Toyota
Mutations
1//these methods returns a new string
2
3const text = 'Topgun Maverick';
4
5//slice(start, end)
6text.slice(6); //Maverick
7
8//substring(start, end)
9text.substring(0, 6); //Topgun
10
11//replace(stringToReplace, replacement)
12text.replace('Maverick', 'Rooster'); //Topgun Rooster
13
14//concat
15text.concat('β'); //Topgun Maverickβ
16
17//split ( returns an array )
18text.split(' '); //['Topgun', 'Maverick'];
19
20//toUpperCase & toLowerCase
21text.toLowerCase(); //topgun maverick
22text.toUpperCase(); //TOPGUN MAVERICK
23
24//trimming
25const text = ' Pilot ';
26text.trim(); //Pilot
27text.trimStart(); //"Pilot "
28text.trimEnd(); //" Pilot"
29
30//padding
31text.padStart(4, 'x'); //xxxTopgun Maverick
32text.padEnd(4, 'x'); //Topgun Maverickxxx
Extras
1const text = 'Topgun Maverick';
2
3//length
4text.length; //15
5
6//charAt & charCodeAt
7text.charAt(4); //u
8text.charCodeAt(4); //117
Transformation
1const fruits = ['π', 'π', 'π'];
2
3fruits.pop(); //['π', 'π']
4fruits.push('π'); //['π', 'π', 'π', 'π']
5
6fruits.shift(); //['π', 'π']
7fruits.unshift('π'); //['π','π', 'π', 'π']
8
9//splice(entryPoint, howManyToRemove, itemsToAdd)
10fruits.splice(2, 0, 'π'); //['π', 'π', 'π','π']
11
12//slice(start, end)
13fruits.slice(1, 2); //['π']
14
15const food = fruits.concat('π'); //['π', 'π', 'π', 'π']
16
17//map((item, index) => function)
18const mapped = fruits.map((fruit) => {
19 return fruit.concat('π§');
20}); //['ππ§', 'ππ§', 'ππ§']
Sorting
1const names = ['Bob', 'Alex', 'Kyle'];
2
3dogs.sort(); //['Alex', 'Bob', 'Kyle']
4dogs.reverse(); //['Kyle', 'Bob', 'Alex']
5
6const nums = [1, 10, 5, 2];
7
8nums.sort(function(a, b){return a - b}); //[1, 2, 5, 10]
9nums.sort(function(a, b){return b - a}); //[10, 5, 2, 1]
Searching
1const pets = ['π±', 'πΆ', 'πΈ'];
2
3pets.indexOf('π±'); //0
4pets.includes('π'); //false
5
6//find(item => function)
7const frog = pets.find(item => item === 'πΈ'); //'πΈ'
8
9//findIndex(item => function)
10const frogIndex = pets.findIndex(item => item === 'πΈ'); //2
11
12const nums = [1, 10, 5, 2];
13
14//filter(item => function)
15const filtered = nums.filter(item => item < 10); //[1, 5, 2]
For Loop
1const food = ['π', 'π', 'π'];
2for (let i = 0; i < food.length; i += 1) {
3 console.log('I like eating ' + food[i]);
4}
5//'I like eating π'
6//'I like eating π'
7//'I like eating π'
8
9for (let i = 0; i < food.length; i += 1) {
10 if (i === 0) continue; //loop skips on this condition
11
12 if (i === 2) break; //loop stops on this condition
13
14 console.log('I like eating ' + food[i]);
15}
16//'I like eating π'
For Each
1//forEach is similar to for loop with lesser code
2//break and continue does not work
3
4const food = ['π', 'π', 'π'];
5
6//Array.forEach((item, index) => function)
7food.forEach(item => {
8 console.log('I like eating ' + item);
9});
10//'I like eating π'
11//'I like eating π'
12//'I like eating π'
For In
1//for in is used to iterate over objects
2const user = {
3 name: 'Kratos',
4 job: 'God of War',
5}
6
7for (let item in user) {
8 console.log(user[item]);
9}
10//'Kratos'
11//'God of War'
While
1//while loops loop on entry
2let counter = 0;
3while (counter < 3) {
4 console.log(counter);
5 counter += 1;
6}
7//0
8//1
9//2
10
11//do while loops loop on exit
12let counter2 = 0;
13do {
14 console.log(counter2);
15 counter2 += 1;
16} while(counter2 < 1)
17//0
ES5 functions
1function sayHello() {
2 console.log('Hello! π');
3}
4
5sayHello(); //Hello! π
ES6 arrow functions
1const sayHello = () => {
2 console.log('Hello! π');
3}
4
5sayHello(); //Hello! π
Function parameters
1const iLikeFruit = (fruit) => {
2 console.log('I like ' + fruit);
3}
4
5iLikeFruit('π'); //I like π
Function parameters with default value
1const addBy4 = (num = 1) => {
2 console.log(num + 4);
3}
4
5addBy4(); //5
6addBy4(6); //10
Arithmetics
1const num1 = 10;
2const num2 = 2;
3
4num1 + num2; //12
5num1 - num2; //8
6num1 * num2; //20
7num1 / num2; //5
8num1 += 1; //increment
9num1 -= 1; //decrement
10
11//exponent
12num1 ** num2; //100
13//modulus ( remainder )
14num1 % num2; //0
Extras
1const num = 9.656;
2
3//toString
4num.toString(); //"9.656"
5//toExponential
6num.toExponential(4); //"9.6560e+0"
7//toFixed
8num.toFixed(4); //"9.6560"
9//toPrecision
10num.toPrecision(3); //"9.66"
Object.keys, values, entries
1const user = {
2 name: 'Chris',
3}
4
5user.name; //'Chris'
6user['name']; //'Chris'
7
8Object.keys(user); //['name']
9Object.values(user); //['Chris']
10Object.entries(user); //[['name','Chris']]
Operators
1const name = 'Bob';
2
3name === 'Jim'; //false
4name !== 'Jim'; //true
5
6true && true //true
7true && false //false
8true || false //true
9
1010 > 2 //true
1110 < 3 //false
122 >= 1 //true
1320 <= 20 //true
Conditionals
1const isTrue = true;
2
3if (isTrue) return 'its true!'
4else return 'its false!'
5//'its true!'
6
7const num = 3;
8
9switch (num) {
10 case 1: return 'One!';
11 case 2: return 'Two!';
12 case 3: return 'Three!';
13 default: return 'Default!';
14} //'Three!'
Date
1const date = new Date();
2//Tue Nov 29 2022 17:34:31 GMT+0800 (Malaysia Time)
3
4Number(date)
5//1669714471963 miliseconds passed since 1970
6
7// date declaration
8Date('2017-06-23');
9
10//is set to Jan 01
11Date('2017');
12
13//date - time YYYY-MM-DDTHH:MM:SSZ
14Date('2017-06-23T12:00:00-09:45');
15
16//long date format
17Date('June 23 2017');
18
19//time zone
20Date('Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)');
Getters
1getDay(); //getting the weekday
2getDate(); //day as a number (1-31)
3getDay(); //weekday as a number (0-6)
4getFullYear(); //four digit year (yyyy)
5getHours(); //hour (0-23)
6getMilliseconds(); //milliseconds (0-999)
7getMinutes(); //minutes (0-59)
8getMonth(); //month (0-11)
9getSeconds(); //seconds (0-59)
10getTime(); //milliseconds since 1970
Setters
1setDate(); //sets date
2setDate(); //day as a number (1-31)
3setFullYear(); //year (optionally month and day)
4setHours(); //hour (0-23)
5setMilliseconds(); //milliseconds (0-999)
6setMinutes(); //minutes (0-59)
7setMonth(); //month (0-11)
8setSeconds(); //seconds (0-59)
9setTime(); //milliseconds since 1970)