javascript.md

layout	title
../../layouts/CheatSheet.astro	Javascript Cheatsheet

Synopsis

Javascript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

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.

2. Lists

2.1. New Array

const newArray = [];

2.2. Add to Array

newArray.push(1); //To the end of array
newArray.unshift(1); //To the beginning of array

2.3. Remove from Array

newArray.pop(); //Last element of array
newArray.shift(); //First element of array and return the value of removed element

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

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

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

4.5. bind()

With the bind() method, an object can borrow a method from another object.

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

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

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

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

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

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

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

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

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