javascript-cheatsheet.md

Table of Contents

• Table of Contents
  • 1. Declaring Variables
  • 2. Lists
    • 2.1. New Array
    • 2.2. Add to Array
    • 2.3. Remove from Array
    • 2.4. Loop through Array
    • 2.5. Loop through Array with Index
    • 2.6. Loop through Array in Reverse
  • 3. Objects
    • 3.1. New Object
    • 3.2. Add to Object
    • 3.3. Remove from Object
    • 3.4. Loop through Object
    • 3.5. Loop through Object with Index
    • 3.6. Loop through Object in Reverse
  • 4. Functions
    • 4.1. New Function
    • 4.2. Call Function
    • 4.3. Call Function with Parameters
    • 4.4. Call Function with Parameters and Return Value
  • 5. Classes
    • 5.1. New Class
    • 5.2. New Class with Constructor
    • 5.3. New Class with Constructor and Methods
    • 5.4. New Class with Constructor and Method and Property and Getter
    • 5.5. New Class with Constructor and Methods and Properties and Inheritance
  • 6. Conditionals
    • 6.1. If
    • 6.2. If Else
    • 6.3. If Else If
    • 6.4. Switch
  • 7. Loops
    • 7.1. For
    • 7.2. For In
    • 7.3. For Of
    • 7.4. While
    • 7.5. Do While
  • 8. Try Catch
    • 8.1. Try Catch
    • 8.2. Try Catch Finally
  • 9. Promises
    • 9.1. New Promise
    • 9.2. New Promise with Resolve
    • 9.3. New Promise with Reject
    • 9.4. New Promise with Resolve and Reject
    • 9.5. New Promise with Resolve and Reject and Async
  • 10. Async Await
    • 10.1. New Async Function
    • 10.2. New Async Function with Await
  • 11. Fetch
    • 11.1. New Fetch
    • 11.2. New Fetch with URL
    • 11.3. New Fetch with URL and Method
    • 11.4. New Fetch with URL and Method and Headers
    • 11.5. New Fetch with URL and Method and Headers and Body
    • 11.6. New Fetch with URL and Method and Headers and Body and Async
    • 11.7. New Fetch with URL and Method and Headers and Body and Async and Await
    • 11.8. New Fetch with URL and Method and Headers and Body and Async and Await and Response
    • 11.9. New Fetch with URL and Method and Headers and Body and Async and Await and Response and JSON
  • 12. Events
    • 12.1. New Event
    • 12.2. New Event with Type
    • 12.3. New Event with Type and Options

1. Declaring Variables

Declaration	Code	Notes
var	var a = 1;	Can be updated and re-declared.
let	let a = 1;	Can be updated but cannot be re-declared.
const	const a = 1;	Cannot be updated or re-declared.

🔼Back to Top

2. Lists

2.1. New Array

const newArray = [];

2.2. Add to Array

newArray.push(1);

2.3. Remove from Array

newArray.pop();

2.4. Loop through Array

newArray.forEach((item) => {
  console.log(item);
});

2.5. Loop through Array with Index

newArray.forEach((item, index) => {
  console.log(index, item);
});

2.6. Loop through Array in Reverse

newArray.reverse().forEach((item) => {
  console.log(item);
});

🔼Back to Top

3. Objects

3.1. New Object

const newObject = {};

3.2. Add to Object

newObject.key = 'value';

3.3. Remove from Object

delete newObject.key;

3.4. Loop through Object

for (const key in newObject) {
  console.log(key, newObject[key]);
}

3.5. Loop through Object with Index

Object.entries(newObject).forEach(([key, value]) => {
  console.log(key, value);
});

3.6. Loop through Object in Reverse

Object.entries(newObject).reverse().forEach(([key, value]) => {
  console.log(key, value);
});

🔼Back to Top

4. Functions

4.1. New Function

function newFunction() {
  console.log('newFunction');
}

4.2 Call Function

newFunction();

4.3. Call Function with Parameter

function newFunctionWithParameter(parameter) {
  console.log(parameter);
}

4.4. Call Function with Parameter and Return Value

function newFunctionWithParameterAndReturnValue(parameter) {
  return parameter;
}

🔼Back to Top

5. Classes

5.1. New Class

class NewClass {
  constructor() {
    console.log('NewClass');
  }
}

5.2. New Class with Constructor

class NewClassWithConstructor {
  constructor(parameter) {
    console.log(parameter);
  }
}

5.3. New Class with Constructor and Method

class NewClassWithConstructorAndMethod {
  constructor(parameter) {
    console.log(parameter);
  }

  method() {
    console.log('method');
  }
}

5.4. New Class with Constructor and Method and Property and Getter

class NewClassWithConstructorAndMethodAndPropertyAndGetter {
  constructor(parameter) {
    console.log(parameter);
  }

  method() {
    console.log('method');
  }

  property = 'property';

  get getter() {
    return 'getter';
  }
}

5.5. New Class with Constructor and Methods and Inheritance

class NewClassWithConstructorAndMethodsAndInheritance extends NewClassWithConstructorAndMethod {
  constructor(parameter) {
    super(parameter);
  }

  method() {
    super.method();
    console.log('method');
  }
}

🔼Back to Top

6. Conditionals

6.1. If

if (true) {
  console.log('true');
}

6.2. If Else

if (true) {
  console.log('true');
} else {
  console.log('false');
}

6.3. If Else If

if (true) {
  console.log('true');
} else if (false) {
  console.log('false');
}

6.4. Switch

switch (true) {
  case true:
    console.log('true');
    break;
  case false:
    console.log('false');
    break;
}

🔼Back to Top

7. Loops

7.1. For

for (let i = 0; i < 10; i++) {
  console.log(i);
}

7.2. For In

const newObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

for (const key in newObject) {
  console.log(key, newObject[key]);
}

7.3. For Of

const newArray = [1, 2, 3];

for (const item of newArray) {
  console.log(item);
}

7.4. While

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

7.5. Do While

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

🔼Back to Top

8. Try Catch

8.1. Try Catch

try {
  console.log('try');
} catch (error) {
  console.log('catch');
}

8.2. Try Catch Finally

try {
  console.log('try');
} catch (error) {
  console.log('catch');
} finally {
  console.log('finally');
}

🔼Back to Top

9. Promises

9.1. New Promise

const newPromise = new Promise((resolve, reject) => {
  resolve('resolve');
});

9.2. New Promise with Resolve

const newPromiseWithResolve = new Promise((resolve, reject) => {
  resolve('resolve');
});

9.3. New Promise with Reject

const newPromiseWithReject = new Promise((resolve, reject) => {
  reject('reject');
});

9.4. New Promise with Resolve and Reject

const newPromiseWithResolveAndReject = new Promise((resolve, reject) => {
  resolve('resolve');
  reject('reject');
});

9.5. New Promise with Resolve and Reject and Async

const newPromiseWithResolveAndRejectAndAsync = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('resolve');
    reject('reject');
  }, 1000);
});

🔼Back to Top

10. Async Await

10.1. New Async Function

async function newAsyncFunction() {
console.log('newAsyncFunction');
}

10.2. New Async Function with Await

async function newAsyncFunctionWithAwait() {
await newPromiseWithResolveAndRejectAndAsyncAndAwait;
console.log('newAsyncFunctionWithAwait');
}

🔼Back to Top

11. Fetch

11.1. New Fetch

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((json) => console.log(json));

11.2. New Fetch with URL

const newFetchWithUrl = fetch('https://jsonplaceholder.typicode.com/todos/1');

11.3. New Fetch with URL and Method

const newFetchWithUrlAndMethod = fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
});

11.4. New Fetch with URL and Method and Headers

const newFetchWithUrlAndMethodAndHeaders = fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});

11.5. New Fetch with URL and Method and Headers and Body

const newFetchWithUrlAndMethodAndHeadersAndBody = fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});

11.6. New Fetch with URL and Method and Headers and Body and Async

const newFetchWithUrlAndMethodAndHeadersAndBodyAndAsync = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});
const json = await response.json();
console.log(json);
};

11.7. New Fetch with URL and Method and Headers and Body and Async and Await

const newFetchWithUrlAndMethodAndHeadersAndBodyAndAsyncAndAwait = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});
const json = await response.json();
console.log(json);
};

11.8. New Fetch with URL and Method and Headers and Body and Async and Await and Response

const newFetchWithUrlAndMethodAndHeadersAndBodyAndAsyncAndAwaitAndResponse = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});
const json = await response.json();
console.log(json);
};

11.9. New Fetch with URL and Method and Headers and Body and Async and Await and Response and Json

const newFetchWithUrlAndMethodAndHeadersAndBodyAndAsyncAndAwaitAndResponseAndJson = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
});
const json = await response.json();
console.log(json);
};

🔼Back to Top

12. Events

12.1. New Event

const newEvent = new Event('build');

12.2. New Event with Type

const newEventWithType = new Event('build');

12.3. New Event with Type and Options

const newEventWithTypeAndOptions = new Event('build', {
bubbles: true,
cancelable: true,
});