Cheatsheet

v.1.0.0

Variables
Variables can be declared in 2 ways

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
Strings
Strings can be manipulated with a few different methods

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
Arrays
Array can be manipulated with a few different methods

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]
Iterations
Javascript introduces a few iteration methods

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
Functions
Variables can be declared in 2 ways

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
Numbers
Numbers can be manipulated with a few different methods

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"
Objects
Objects can be accessed with a few different methods

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']]
Conditionals
Javascript introduces a few operators and conditional statements

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
Javascript introduces a few methods when dealing with Date objects

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)