Javascript Cheat Sheet

Use

let number = 33;
console.log("number is", number) ->with a expresion-help before ("number is") to orientation in the console
console.log("the number is" + number) -> concatenation
console.log({number})-> destruckturing to see the object in the console
console.log(`the number is ${number}`) -> string literal

Other:

console.clear() -> clears console
console.error("Error!") -> logs as error into console

const

const -> declares a constant, the value can't be changed. Default way to declare variables

let

let -> declares a variable, the value can be changed. Only used when reassigning a new value is necessary.

var

var -> outdated, not used anymore.

Assignation

IMPORTANT Assignation with =
let counter = 0;

Variable Naming

let myFirstVariable = "hello" -> use camel case. Be very specific, longer names are better than shorter: updatedFollowerCounter instead of counter

Primitive Data Types(7)

• string -> a sequence of characters: "abcd" (with " ")
• number -> a number: 1234 (without " ")
• boolean -> a binary statement, can be true or false (without " ")
• null -> represents "nothing", is a value used in JavaScript to indicate that a variable has been deliberately set to "no value". It is an explicit value that you can assign to a variable to show that it is empty or has no value.
• undefined -> represents the state of "not existing". means that a variable has been declared, but no value has been assigned to it yet. If you access an uninitialised variable, it is set to undefined by default.
• BigInt -> uncommon, used for integers larger than 9007199254740991
• Symbol -> uncommon, used for creating unique elements

String methods & propierties

• length -> let firstName = "John"; firstName.length // 4

  length is a propierty

• indexOf -> const text = "Hello World";
  let letterHIndex = text.indexOf("H"); console.log(letterHIndex) // 0 ;
  let letterAIndex = text.indexOf("a"); console.log(letterAIndex) //-1 ;
  //in the order starting from 0, spaces are inclusive
• search -> const message = "Hello John!";
  let positionJ = message.search("John"); console.log(positionJ) // 6
  let positionM = message.search("Martha"); console.log(positionM) // -1
  //in the order starting from 0, spaces are inclusive
• concat() concatenates strings. string.concat("moreText") //Variable are posible too
• charAt() returns the character at a specific position in a string, starting at 0. string.charAt(0) // The first character of the string
• includes(subString) returns true if the string contains the subString. string.includes("hello")// true or false
• replace(oldString, newString) replaces a portion of a string and returns the result. string.replace("john", "jane")// string include the first time the word jane, not john
• replaceAll(oldString, newString) replaces all occurrences, not just the first one. string.replace("john", "jane")// string replace all "john" for "jane"
• slice() cuts the string up to the specified index and returns the remaining characters. string.slice(1)// the string without the first Word
  string.slice(1,2)// the string from the character in index 1 to character in index 2
• substring() also cuts the string based on specified indices (the same as slice, but dont work with negativ values).
• toLowerCase() converts the string to lowercase.
• toUpperCase() converts the string to uppercase.
• toString() converts numbers into strings.
• trim() returns a string with all whitespace removed from the beginning and end.
• startsWith(subString) returns true if the string starts with subString..
• endsWith(subString) returns true if the string ends with subString.
• More Methods:MDN
• -1 is normally used for the representation of non-existence or non-detection

+ ->console.log ("a + b =", (a += b)) ; // or use = a+b

- ->console.log("a - b =", (a -= b)); // or use = a-b

* ->console.log("a * b =", (a *= b)); // or use = a*b

/ ->console.log("a / b =", (a /= b)); // or use = a/b

% ->console.log("a % b =", (a %= b));// or use = a%b

** -> console.log("a ** b =", (a **= b)); //or use a**b;

Incrementation (1) a++

Decrementation (1) a- -

A === B
->strict equal: is true if both values are equal (including their type).

A !== B
->strict not equal: is true if both values are not equal (including their type).

A > B
->strictly greater than: is true if A is greater than B.

A < B
->strictly less than: is true if A is less than B.

A >= B
->greater than or equal: is true if A is greater than or equal B.

A <= B
-> less than or equal: is true if A is less than or equal B.

IMPORTANT: === and !== are strict equality operators. This is what you need almost always. Strict equality checks if type and value are the same: "3" === 3 is false.

!A
->not: flips a true value to false and vice versa.

A || B
->or: is true if either A or B is true.

A && B
->and: is true if both A and B is true.

truthy values:

• non zero numbers: 1, 2, -3, etc.
• non empty strings: "hello"
• true

falsy values:

• 0 / -0
• null
• false
• undefined
• empty string: ""

if / (else if) else

With an if statement we can control whether a part of our code is executed or not, based on a condition.

The else block is executed only if the condition is false.

if (hour < 12) {
console.log("Good Morning.");
} else if (hour < 18) {
console.log("Good afternoon.");
} else if (hour === 24) {
console.log("Good night.");
} else {
console.log("Good evening.");
}

Ternary Operator ? :

With if / else statements whole blocks of code can be controlled. The ternary operator can be used if you want to decide between two expressions, e.g. which value should be stored in a variable:

condition ? expressionIfTrue : expressionIfFalse;

->If the condition is true, the first expression is evaluated, otherwise the second expression.

We ALWAYS need an alternative value to true, no matter which: undefined, null, ""

const greetingText = time < 12 ? "Good morning." : "Good afternoon.";

switch

The "break" statement is necessary in a switch-case statement to exit the switch block after executing the code for a matched case, preventing the execution of subsequent case statements and ensuring that only one case is executed.

types of for loops

Function Declarations

Function Parameters

Function Calls

Return Statements

A function can return a value back to the place where it was called. This is done via a return statement. A function can return only one expression value, but can have multiple return statements, in combination with if else statements for

function add3Numbers(first, second, third)
{ const sum = first + second + third;
return sum;
}
const firstSum = add3Numbers(1, 2, 3); // the return value is stored in "firstSum", namely 6

function checkInputLength(inputString) {
if (inputString.length > 3) {
return true;
} else {
return false;
}
}

Implicit Return Statements

A callback function is a function that is passed as an argument into another function.

The outer function can execute this for: when an event is triggered,when the fetched data arrived on your computer, for each element in an array

button.addEventListener("click", () => {

console.log("Inside the callback function.");

});

1.- outer function(Higher Order Functions): addEventListener()

2.- first argument: 'click'

3.- second argument: callback function:

() => {

console.log("Inside the callback function.");

};

This type of function is called anonymous function, since it is declared without giving it a name

Higher Order Functions: .then,.forEach,.map,.filter

A callback function can accept parameters:

button.addEventListener("click", (event) => {

console.log("This button was clicked:", event.target);

});

Constructor: Function Version

function Person(nameParameter, ageParameter){

this.name = nameParameter;

this.age = ageParameter;

};

const personA = new Person("Jane", 23)

Constructor: Class Version

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

greet(){

console.log(`Hello, I am ${this.name} and i am ${this.age} years old`);

}

}

const personB = new Person ("Jake", 33)

personB.greet() // Hello, I am Jake and i am 33 years old

Class Inheritance with extend & super

we want a new constructor that actually has the same parameters as the person plus a new one:

class Student extends Person {

constructor(name, age, schoolClass) {

super(name, age);

this.schoolClass = schoolClass;

}

}

const student = new Student("Tim", 10, 4);

Setter method to check properties before writing it

class Client {

constructor(name, age) {

this.name = name;

this.setAge(age);

}

setAge(age) {

if (typeof age === "number") {

this.age = age;

} else {

this.age = "WRONG VALUE";

}

}

descrition() {

console.log(`${this.name} is ${this.age} years old`);

}

setName(newName) {

this.name = newName;

}

}

In this way if data is entered into our database we can check if it is correct.

const client1 = new Client("Jade", "55");

const client2 = new Client("Jude", 22);

client1.descrition()// Jade is WRONG VALUE years old

client1.descrition()// Jude is 22 years old

With the set method in the constructor we can also change values that already exist.

client2.setName("Julia")

client2.descrition()// Julia is 22 years old

IMPORTANT: It is NOT recommended to use dot notation (client2.name = "Julia") to change values. Set-methods should always be used

Access and change elements of one Array

let array =["a", "b", "c"];

console.log(array[1])// "b";

array[2]="d";

console.log(array);// ["a", "b", "d"]

Important Array Methods

How to use the Methods and propierties

const array = ["a", "b", "c", "d"]

3 ways to remove duplicates

const chars = ['A', 'B', 'A', 'C', 'B'];

Create objects

We can have all types of values types.

keys can be written as in this example or as strings ("name":"Jane"), being strings we can only access them with the bracket notation (see below).

const person = {

name: "Jane",

age: 42,

admin: true,

hobbies:["code", "cinema", "walking"]

socialMedia:{

linkedin: "..."

gitHub: "..."

},

city: "Barcelona",

greet: function() {

console.log(`Hola, I am ${this.name}`)

add: (a,b)=> a+b,

};

Accessing, Change Values, Delete and Functions use

We can use the dot notation & the bracket notation to access to our Object. With the above person object, we habe the same value:

console.log(person.name)

console.log(person["name"])

Wenn keys are strings ("name", "city", etc). We can only use bracket notation person["name"]

Rewrite Values:

person.age = 43

Add neu Value & Key:

person.job="Developer"

Delete:

delete person.job;

Functions:

person.greet()//Hola, I am Jane` console.log(person.add(1,2))// 3

Dynamical with this

We can give the greet function to other object and thiswill refer to the new object

To use this we need allway a traditional function declaration, dont work with arrow funtion

person.greet()//Hola, I am Jane

let person2 = {

name: "John",

age : "23",

};

person2.greet = person.greet;

person2.greet();//Hola, I am John

Use funtions in Objects

const doThings = {

add: (a, b) => a + b,

sub: (a, b) => a - b,

write: (a, b) => `Hello my name is ${a} and i am ${b} old`,

},

console.log(doThings.add(2, 4));

console.log(doThings.sub(10, 1));

console.log(doThings.write("Jude", person.age))

Work with keys, values and loops

With for...in loop we can extract the keys and the values together

for (let key in person) {

console.log(person[key]) //Only works with [..] notation, not dot notation

console.log(key + ": " + person[key]);

Interleaved arrays in objects and viceversa.

Especially arrays of objects are very often used when working with databases. [{},{},{}]

Objects in objects are also very frequent.{{},{},{}}

We cann access combining dot and bracket notation

console.log(person.socialMedia.gitHub)// ist the same as

console.log(person.socialMedia["gitHub"]

Or: let sozialValues = Object.values(person.socialMedia)

sozialValues[1]

Loops with Objects

If we habe a Arry of Objects we can use map or forEach

const people = [ {name:"Jane", city:"Barcelona"}, {name:"Joe", city:"Berlin"}, {name:"Jude", city:"Lima"} ]

people.forEach((person) => {

const card = `<div style="background-color:red"></div>`

<h2 style="margin:1rem;">${people.name}</h2>

<h2 style="margin:1rem;">${people.city}</h2>

</div> `;

document.body.insertAdjacentHTML("afterbegin", card);

});

Methods in Objects: Transform Object to Array to use Array methods (map, filter, sort, etc)

Extract keys too with: Object.keys(person)

You can use Object.keys().forEach():

Object.keys(person).forEach((key) => {

console.log(key + ": " + person[key]);

});

Extract values too with Object.values(person)

Extract entries with const entries = Object.entries(person)

We have now an Array of Arrays and we can access to values like:

console.log(entries[3][1])//cinema

Transform a Array of entries in a Object Object.fromEntries()

Function scope

Global scope

.addEventListener()

The method addEventListener is used to react to events. There different events you can listen to:

List

First you specify the kind of event, e.g. click, then you define what code should be executed when the event is triggered. You write that code between the {} brackets, e.g. a console.log.

const button = document.querySelector('[data-js="button"]'); button.addEventListener("click", () => { console.log("Yeah"); });

Promises

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Most of the time it is returned by a function that performs an asynchronous operation.

The Promise object has the following properties and methods:

state the state of the Promise object, can be "pending", "resolved" or "rejected"

result the result of the asynchronous operation (you'll almost never need to access this directly)

then()a method that takes a callback function that will be called when the asynchronous operation is complete

catch()a method that takes a callback function that will be called when the asynchronous operation fails

finally()a method that takes a callback function that will be called when the asynchronous operation is complete, regardless of whether it was successful or not

functionThatReturnsAPromise().then((value) => {

console.log(value);

});

Promises are almost always created for you by other asynchronous APIs, only rarely do you create them yourself. If you create a Promise yourself (new Promise()), you either know exactly what you are doing, or you are probably doing something wrong.

Some examples of asynchronous browser APIs that return a Promise:

fetch()— makes an HTTP request and returns a Promise that resolves to a Response object

element.animate().finished — animates an element and returns a Promise that resolves when the animation is complete

navigator.getBattery() — gets the current battery level and returns a Promise that resolves with the battery level

Asnyc Functions and Async/await

Using the await keyword, you can write asynchronous code that looks synchronous. Any function can be prefixed with the async keyword:

async function myAsyncFunction() {} const myAsyncArrowFunction = async () => {}

Inside an async function, you can use the await keyword to wait for a Promise to be resolved:

async function myAsyncFunction() {/p>

const value = await functionThatReturnsAPromise();

console.log(value);

}

This is can be easier to read than the Promise syntax especially when you have multiple asynchronous operations that depend on each other.

async function myAsyncFunction() {

const value1 = await functionThatReturnsAPromise1();

const value2 = await functionThatReturnsAPromise2(value1);

const value3 = await functionThatReturnsAPromise3(value2);

console.log(value3);

}

Compared to (avoid doing this):

function myFunction() {

functionThatReturnsAPromise1()

.then((value1) => {

return functionThatReturnsAPromise2(value1);

})

.then((value2) => {

return functionThatReturnsAPromise3(value2);

})

.then((value3) => {

console.log(value3);

});

}

Async functions always return a Promise. If the function returns a value, the Promise will be resolved with that value. Even if you're not using the return keyword the function will return a Promise that resolves to undefined when it reaches the end of it's scope. If the function throws an error, the Promise will be rejected with that error.

try/catch

When using Promises, you can use the catch() method to handle errors. Using async functions, you can use the try/catch syntax.

async function myAsyncFunction() {

try {

const value = await functionThatReturnsAPromise();

console.log(value);

} catch (error) {

console.error(error);

}

}

The try block will be executed, and if an error is thrown, the catch block will be executed. The catch block has access to the error that was thrown. If any error is thrown in the try block, the catch block will be executed immediately aborting the execution of any further code in the try block:

finally

You can also use a finally block after any try block to run code after the try block is resolved, regardless of whether it was successful or not:

async function myAsyncFunction() {

try {

const value = await functionThatReturnsAPromise();

console.log(value);

} catch (error) {

console.error(error);

} finally {

console.log("done");

}

}

IMPORTANT: The try/catch/(finally) syntax is not limited to async functions, you can use it with any JavaScript code that might throw an error.

Parallel Promises: Promise.all()

If you have multiple asynchronous operations that you want to run in parallel, you can use Promise.all(). It takes an array of Promises and returns a Promise that resolves to an array of the results of the Promises in the same order.

async function myAsyncFunction() {

try {

const values = await Promise.all([

functionThatReturnsAPromise1(),

functionThatReturnsAPromise2(),

functionThatReturnsAPromise3(),

]);

console.log(values); // [value1, value2, value3]

} catch (error) {

console.error(error);

}

}

This will run all three asynchronous operations in parallel, and wait for all of them to complete before continuing. If any of the asynchronous operations fail, Promise.all() will fail as well.

There are advanced use cases where you might want to control when to resolve or reject a Promise. Promise.allSettled() (does not care if Promises are rejected or resolved) and Promise.any() (resolves once the first Promise is resolved) are two methods that allow you to do that.

.querySelector()

Before we can add interactivity, we need to select the necessary HTML-Elements. A good practice is to use a data-* attribute, like that:

const mainElement = document.querySelector('[data-js="main"]');

Other css selectors work as well, but the data-* attribute selectors should be preferred.

Other methods to select:

.querySelectorAll() allows you to find and select multiple elements in the DOM based on these selectors

querySelectorAll('element')
->Selects all elements of the specified type.

querySelectorAll('.classname')
-> Selects all elements with the specified CSS class.

querySelectorAll('#id')
-> Selects the element with the specified ID (Note: IDs should be unique)

querySelectorAll('[attribute="value"]')
-> Selects all elements with the specified attribute and value.

querySelectorAll(':pseudo-class')
-> Selects all elements that match the specified pseudo-class, like :hover or :nth-child(n).

querySelectorAll('element.classname')
->to select all elements of a specific type with a certain class.

getElementById
-> Selects an element by its unique ID attribute.

getElementsByClassName
-> Selects elements by their class attribute.

getElementsByTagName
-> Selects elements by their HTML tag name.

getElementsByName
-> Selects elements by their name attribute.

Output in HTML

Inputs & Forms

.style

Use .style and the css propierty in without - in camelCase;

const mainElement = document.querySelector("#main");

mainElement.style.backgroundColor = "yellow";

mainElement.style.fontSize = "20px"

.classList

Add/remove & toggle classes:

Html collection

An HTML collection is an object-like array of HTML element nodes. It is used in JS to access a group of elements in the DOM = (Document Object Model).

- HTMLCollections are live! As soon as the HTML changes, so does the collection.

- index based - The first element is 0

- Often used with document.getElementByClassName(), document.getElementByTagName() or elment.children. (there we get a collection back)

How to get access to the individual HTML elements, we have a "form" in Html with the name="loginForm", and 2 input with the names "username" & "email":

let myForm = document.forms.loginForm;

console.log(myForm.username);

console.log(myForm.username.value);

console.log(myForm.email.value);

Html collection vs NodeList

A NodeList is a collection of nodes, therefore Nodes. Unlike HTML Collection, Nodelist can contain all kinds of DOM nodes.

Nodes can be static or live.

- index based - the first element is 0

NodeList supports more methods than HTML Collections. For example, you can use forEach methods to loop through the list.

NodeList are often received as return values from DOM methods like document.quarySelectorAll() or Node.childeNodes.

with the querySelectortAll() we usually get back a NodeList!

const liNodelist = document.querySelectorAll("li");

with the getElementByTagName we usually get back an HTML Collection.

const liHTMLCollection = document.getElementsByTagName("li");

Extract Child elements (example):

console.log(document.body.children[0])

console.log(document.body.children[0].children)

console.log(document.body.children[1].children[2])

Add a child element:

document.body.children[0].innerHTML += "<p> I am new here </p>"

Change Style:

document.body.children[0].children[0].style.color = "red";

Screen Object

The Screen Object is located in the Window Object. It gives us information about the screen/monitor on which the browser window is open.

console.log(window.screen);//

console.log("screen height", window.screen.height)//get the height back in px-> total height with taskbar

console.log("screenWidth", window.screen.width)//get the width back in px-> total width with taskbar

console.log("availHeight", window.screen.availHeight)//we get back the height of the screen WITHOUT the taskbar, i.e. only the usable area

console.log("availWidth", window.screen.availWidth)//we get back the width of the screen -> only the usable area

Window Methods

window.alert("Message")Popup containing a text

let promtAnswer=window.promt()Opens a popup where the user can enter something, to access the text input we need to store it in a variable

window.open("url", "_self"/"_blank")With window.open(url) we can redirect to another page. Attention: we can no longer click on the back arrow. By default, the page is always opened in a new tab. History will be deleted

window.onload = console.log("The page was loaded")when the page has been completely loaded, then something should happen

window.scrollTo(X,Y)koennen wir zu einem bestimmten Punkt auf der Seite scrollen (See if the html or elements are long enough to the point you choose -check your css).

window.location.reload()with this we can reload the current page

window.loacation.replace("url")we can redirect to another URL. History will be no deleted like in window.open()

window.historyFor back buttons. For example:

backButton.addEventListener("click", () => {

history.back();

});

TIME Methods in the Window Object

Window Object allows the execution of code at specific time intervals.the two main methods we use in JS are:

setTimeout(function, milliseconds)executes a function after waiting a specified number of milliseconds

let interval = setInterval(function, milliseconds)same as setTimeout(), but repeats the execution of the function continuously.

clearInterval(interval)deletes an interval again. We have to store the setInterval in a variable so that we can delete it again later.

let firstName = "Jane";
let lastName = "Doe";
let city = "Los Angeles";
let concatenation = firstName + lastName + " is from " + city;
let templateLiteral = `${firstName} ${lastName} is from ${city}`;

Any expression can be placed into these placeholders:

const greeting = `Hello ${
name !== null ? name : "mysterious person"
}, good to see you!`;


Destructuring Arrays

const greekLetters = ["alpha", "beta", "gamma", "delta"];

If we want to declare the values of greekLetters as distinct variables, accessing them might turn out to be quite tedious. Without Destructuring

const firstLetter = greekLetters[0];

const secondLetter = greekLetters[1];

const thirdLetter = greekLetters[2];

With Destructuring

const [firstLetter, secondLetter, thirdLetter, fourthLetter] = greekLetters;

If you don't need or want the second and the fourth value in our initial array greekLetters there's an option to skip values during the process of destructuring.

const [firstLetter, , thirdLetter] = greekLetters;

// firstLetter → 'alpha'

// thirdLetter → 'gamma'

thirdLetter now contains the third value of greekLetters. The extra comma skips the value at the respective position in greekLetters. The fourth value is ignored because the destructuring assignment ended.

Skipping values with extra commas can quickly become unreadable. Imagine wanting to skip 5 values: const [a, , , , , , g] = x;. General advice is to be very mindful with this feature.

Destructuring Objects

const coachObject = {

name: "Sam",

mood: "great",

skills: "amazing",

};

You can use destructuring assignment like this:

const { name, mood, skills, score } = coachObject;

In contrast to array destructuring the variable names are not arbitrary and do not depend on the order. Here the names of the variables have to match the keys of the object properties. You can rename the variable while destructuring

const { name: firstName } = coachObject;

You can also set a default value of a property in case it does not exist:

const { isAdmin = true } = coachObject;

// isAdmin → true

Rest Syntax (...)

The rest syntax allows you to say: "Put the rest into this variable" when using destructuring assignment or declaring function parameters. You can use it with arrays:

const greekLetters = ["alpha", "beta", "gamma", "delta"];

const [firstLetter, ...allTheOtherLetters] = greekLetters;

// firstLetter → "alpha"

// allTheOtherLetters → ["beta", "gamma", "delta"]

Or with objects:

const coachObject = {

name: "Sam",

mood: "great",

skills: "amazing",

};

const { name, score, ...theRestOfTheCoachObject } = coachObject;

And even with function parameters:

function logLetters(firstLetter, ...moreLetters) {

console.log("the first letter is", firstLetter);

console.log("even more letters", moreLetters);

}

logLetters("alpha", "beta", "gamma", "delta");

// the first letter is alpha

// even more letters (3) ['beta', 'gamma', 'delta']

Spread Syntax (...)

The spread syntax allows you to say: "spread everything inside this variable into here" when declaring array or object literals or calling functions.

It works like this with array literal declarations:

const greekLetters = ["alpha", "beta", "gamma", "delta"];

const moreGreekLetters = [...greekLetters, "epsilon", "zeta"];

// moreGreekLetters → ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']

You can spread two (or more) arrays into another array ...

const redColors = ["crimson", "pink", "purple"];

const blueColors = ["navy", "teal", "sky"];

const mixedColors = [...redColors, ...blueColors];

// mixedColors → ['crimson', 'pink', 'purple', 'navy', 'teal', 'sky']

... and it matters where respectively you spread one array into another:

const cats = ["cat", "cat", "cat"];

const dogs = ["dog", "dog", "dog"];

const catsAndDogs = [...cats, ...dogs];// catsAndDogs → ['cat', 'cat', 'cat', 'dog', 'dog', 'dog']

const dogsAndCats = [...dogs, ...cats];// dogsAndCats → ['dog', 'dog', 'dog', 'cat', 'cat', 'cat']

const catsBetweenBirds = ["bird", ...cats, "bird"];// catsBetweenBirds → ['bird', 'cat', 'cat', 'cat', 'bird']

Exporting using export Statements

Using the export statement you can export a variable or function to make it available to other modules. You can use named exports to export multiple variables or functions or one default export per module to export the main functionality of the module.

export const name = "Alex";

export const age = 26;

export function sayHello() {

console.log("Hello");

}

It is also possible to export functions or variables after they have been declared.

const name = "Alex";

const age = 26;

export { name, age};

Importing using import Statements

Code from other modules can be imported using the import statement. Import statements should always be placed at the top of the file. Everything that can be exported from a module can also be imported from another module.

Utility Functions and Constants

Utility functions are functions that are used in multiple places in your code. They are usually smaller functions that are used to perform a specific task. They should be be pure and not have any side effects.

Shared constants are constants that are used in multiple places in your code.

Functions and constants can be grouped into files that are named after the functionality they provide. For example math.js could contain functions like add, subtract, multiply and divide.The file should have a named export for each function.

It is recomended to create a utils folder in your project and put all utility functions in there.

Vanilla JavaScript Components

Recomendations:

Create a folder for each component

Make your component file and function names uppercase (PascalCase)

Each component has a named export for the component function (e.g. export function ButtonGroup())

Components can take arguments that are called props or properties a convention (e.g. export function ButtonGroup(props))

Components should not depend on the outside world and create their own DOM elements

Components should return a single DOM element

Fetch API (with async & await)

fetch is a web API to asynchronously fetch (load) resources from the network, like text documents.

async function fetchData() {

const response = await fetch("/url/to/something");

const data = await response.json();

return data;

}

• 1.-We mark the function with the async keyword, because we want to use await inside the function.
• 2.-We declare a variable named response. It stores the Response object that is returned by fetch.
• 3.-Once this promise resolves (the network request is finished), we call the .json method on the response variable. This function returns another Promise.
• 4.-This second promise resolves with the actual data (payload) converted from JSON (a formatted string) to a JavaScript value or object. This result is stored in the variable named data.
• 5.-The function returns the value stored in the data variable.

The Response object features other useful methods (all returning promises), among which are the following:

• response.json() returns a Promise that resolves to the downloaded data JSON-parsed as a JavaScript value or object
• response.text() returns a Promise that resolves to the downloaded data as raw text
• response.formData() returns a Promise that resolves to the downloaded data parsed as FormData
• response.blob() returns a Promise that resolves to the downloaded data as a raw blob (that's a machine readable format using zeros and ones)

JSON

structured data based on JavaScript object syntax. It is commonly used for transmitting data between a client (browser) and a server in web applications.

JSON is very close to being a subset of JavaScript syntax. Most valid JSON is also valid JavaScript code. This means that you can copy JSON into any .js file, put a const myData = in front, and watch Prettier make it look like real

A valid JSON even though it closely resembles JavaScript object literal syntax, it can be used outside of JavaScript. Other programming languages often feature the ability to read (parse) JSON.

JSON exists as a string that needs to be converted to a native JavaScript object when you want to access the data. JavaScript provides a global JSON object that features conversion methods in either direction.

HTTP Response Status Codes

HTTP response status codes usually indicate whether a specific HTTP request has been successfully completed. For the most part, any sort of response is considered a successful completion of the request.

With the exception of custom server software, these responses are standardized. You can find a list of HTTP response status codes here .

One of the most well-known HTTP response status codes is 404 not found

Error Handling

fetch() doesn't throw an error when the server returns a bad HTTP status, e.g. client or server errors.

A request will only register as rejected if a response cannot be retrieved. This may be due to network problems, such as no internet connection, the host not being found, or the server not responding.

We can separate good from bad HTTP response statuses by relying on the boolean response.ok property. It is set to true only if the HTTP response code is between 200-299.

If something goes wrong that causes that we do not receive a response the fetch API throws an error. Once an error is thrown execution stops and JavaScript looks for the closest catch block.

Any production fetch call should be inside a try...catch block:

async function fetchSomething() {

try {

const response = await fetch("/bad/url/oops");

if(response.ok) {

const data = await response.json();// Success (Good Response)

return data;

} else {

console.error("Bad Response"); // Failure (Bad Response)

}

} catch (error) {

console.error("An Error occurred"); // Failure (Network error, etc)

}

}

OLD version and problematic for debugging & not recomended

fetch(url)

.then((response) => response.json())

.then((data) => {

console.log(data);

})

.catch((error) => {

console.error("Error Message", error);

});

REST(REpresentational State Transfer) API

When you create an API, you need to come up with ideas on how to structure your API, shape the features you provide and which rules to apply. This is referred to as the architecture of your API.

REST is a set of architectural constraints, not a protocol or a standard. You as an API developer can implement REST in a variety of ways.

The overall idea is like this:

• A client requests a resource from a server (like a document containing information on a specific topic)
• The server formulates a response that represents the resource in a format the client understands (like JSON - other formats like HTML, XML oder plain text are also possible)
• This transfer of data changes the state of the web application.

Each resource has a unique address. The whole communication is done via HTTP and uses different HTTP methods (like GET/POST/PUT/DELETE) to describe desired actions.

More information here

Test Driven Development (TDD)

With Test driven development (TTD) the test is written first. Afterwards you write the function, which should create a desired result.

Following this approach you get feedback as early as possible whether your work is going into the right direction. In the beginning all tests will fail. Gradually more and more test will be successful. The implementation of your function is finished as soon as all test runs are successful.

Use Descriptive Variable and Function Names:

Utilize meaningful and descriptive names for variables and functions to enhance code readability and maintainability.

Follow a Consistent Coding Style:

Adhere to a consistent coding style, such as the popular JavaScript style guides like Airbnb, Google, or StandardJS, to make your code more understandable and easier to collaborate on.

Properly Comment Your Code

Add clear comments to your code to explain complex logic, important decisions, and any potential gotchas for other developers who may work on the code in the future.

Avoid Global Variables:

Minimize the use of global variables to prevent variable collisions and make your code more modular. Use modules or closures to encapsulate your code.

Use Strict Mode:

Enable strict mode by adding "use strict"; at the beginning of your JavaScript files to catch common coding mistakes and improve code quality.

Handle Errors Gracefully:

Implement proper error handling using try-catch blocks or other error-handling mechanisms to prevent unexpected crashes and provide better user experiences.

Optimize Performance:

Focus on code performance by minimizing unnecessary DOM manipulations, reducing loops and iterations, and employing techniques like debouncing and throttling for event handling.