Forem: Whoissosick

How Do Event Bubbling, and Event Delegation Work?

Whoissosick — Fri, 05 Dec 2025 07:04:10 +0000

Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered. For example, consider this code:

<p>
  <span>Click me~!</span>
</p>

The p element here would be considered the parent of the span element.

When you click on the span element, like you are instructed to, the span element becomes the target of a click event. That event, however, also bubbles up to the parent – the p element can receive and consume that event as needed.

But what does this actually mean? Well, you could attach an event listener to the p element:

const p = document.querySelector("p");
p.addEventListener("click", (event) => {
  console.log(event.target);
});

Then, when you click on the span element you will see the text Click me~! logged to the console.

Just to be sure how things are working

const p = document.querySelector("p");
const span = document.querySelector("span");
p.addEventListener("click", (event) => {
  console.log("P listener: ");
  console.log(event.target);
});
span.addEventListener("click", (event) => {
  console.log("Span listener: ");
  console.log(event.target);
});

To give you an idea of how the event bubbles up, here's what you'll see in the console after clicking the span element:

"Span listener: "
<span>Click me~!</span>
"P listener: "
<span>Click me~!</span>

Now let's see what happens when you prevent the propagation of an event with stopPropagation(). We'll call it in our span's event listener:

const p = document.querySelector("p");
const span = document.querySelector("span");
p.addEventListener("click", (event) => {
  console.log("P listener: ");
  console.log(event.target);
});
span.addEventListener("click", (event) => {
  console.log("Span listener: ");
  console.log(event.target);
  event.stopPropagation();
});

"Span listener: "
<span>Click me~!</span>

This time, we don't see our p listener trigger. The event never fires for the p element, because we told it to stop propagation while it was being processed for the child span element.

Event delegation can be thought of as the opposite. It's the process of taking a captured event, and delegating it to another element.

Going back to our code, let's update it so clicking on a span element changes it to red:

const p = document.querySelector("p");
const span = document.querySelector("span");
p.addEventListener("click", (event) => {});
span.addEventListener("click", (event) => {
  event.target.style.color = "red";
});

But what if you have twenty span elements? Or maybe you use JavaScript to create more span elements on the fly?

Rather than having to attach an event listener to every single span element, you can actually use the listener on the p element for all of them. In other words, you can delegate the handling of the span clicks to the parent p element.

Our code might now look something like this:

const p = document.querySelector("p");
p.addEventListener("click", (event) => {
  event.target.style.color = "red";
});

Notice how we no longer have any listener attached to the span element at all. You have properly delegated the event handling to the p element. But does it work?

Let's generate a few extra span elements and see:

<p>
  <span>Click me~!</span>
  <span>Click me~!</span>
  <span>Click me~!</span>
  <span>Click me~!</span>
</p>

Now, each time we click on a span, that element's text will become red.

And just like that, with a single event listener we've properly allowed a click event to bubble up from span elements to the parent p, and delegated the logic for that click event to the p element.

Event propagation and delegation can be a complex topic, especially as you get into heavily nested elements like tables. You are encouraged to explore this further and experiment with some of the code we've written here.

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

  return instruments
    .map(({ instrument, price }) => {
      return `
          <div class="card">
            <h2>${instrument}</h2>
            <p>$${price}</p>
          </div>
        `;
    }).join("");
}

Higher Order Functions Review

Whoissosick — Fri, 05 Dec 2025 04:47:11 +0000

Callback Functions and the forEach Method

Definition: In JavaScript, a callback function is a function that is passed as an argument to another function and is executed after the main function has finished its execution.
forEach() Method: This method is used to iterate over each element in an array and perform an operation on each element. The callback function in forEach can take up to three arguments: the current element, the index of the current element, and the array that forEach was called upon.

const numbers = [1, 2, 3, 4, 5];

// Result: 2 4 6 8 10
numbers.forEach((number) => {
  console.log(number * 2);
});

Higher Order Functions
Definition: A higher order function takes one or more functions for the arguments and returns a function or value for the result.

function operateOnArray(arr, operation) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(operation(arr[i]));
  }
  return result;
}

function double(x) {
  return x * 2;
}

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = operateOnArray(numbers, double);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

map() Method: This method is used to create a new array by applying a given function to each element of the original array. The callback function can accept up to three arguments: the current element, the index of the current element, and the array that map was called upon.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(doubled); // [2, 4, 6, 8, 10]

filter() Method: This method is used to create a new array with elements that pass a specified test, making it useful for selectively extracting items based on criteria. Just like the map method, the callback function for the filter method accepts the same three arguments: the current element being processed, the index, and the array.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

reduce() Method: This method is used to process an array and condense it into a single value. This single value can be a number, a string, an object, or even another array. The reduce() method works by applying a function to each element in the array, in order, passing the result of each calculation on to the next. This function is often called the reducer function. The reducer function takes two main parameters: an accumulator and the current value. The accumulator is where you store the running result of your operations, and the current value is the array element being processed.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

console.log(sum); // 15

Method Chaining
Definition: Method chaining is a programming technique that allows you to call multiple methods on the same object in a single line of code. This technique can make your code more readable and concise, especially when performing a series of operations on the same object.

const result = "  Hello, World!  "
  .trim()
  .toLowerCase()
  .replace("world", "JavaScript");

console.log(result); // "hello, JavaScript!"

Working with the sort Method
Definition: The sort method is used to sort the elements of an array and return a reference to the sorted array. No copy is made in this case because the elements are sorted in place.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]
If you need to sort numbers, then you will need to pass in a compare

If you need to sort numbers, then you will need to pass in a compare function. The sort method converts the elements to strings and then compares their sequences of UTF-16 code units values. UTF-16 code units are the numeric values that represent the characters in the string. Examples of UTF-16 code units are the numbers 65, 66, and 67 which represent the characters "A", "B", and "C" respectively. So the number 200 appears before the number 3 in an array, because the string "200" comes before the string "3" when comparing their UTF-16 code units.

const numbers = [414, 200, 5, 10, 3];

numbers.sort((a, b) => a - b);

console.log(numbers); // [3, 5, 10, 200, 414]

The parameters a and b are the two elements being compared. The compare function should return a negative value if a should come before b, a positive value if a should come after b, and zero if a and b are equal.

Working with the every and some Methods
every() Method: This method tests whether all elements in an array pass a test implemented by a provided function. The every() method returns true if the provided function returns true for all elements in the array. If any element fails the test, the method immediately returns false and stops checking the remaining elements.

const numbers = [2, 4, 6, 8, 10];
const hasAllEvenNumbers = numbers.every((num) => num % 2 === 0);

console.log(hasAllEvenNumbers); // true

some() Method: This method checks if at least one element passes the test. The some() method returns true as soon as it finds an element that passes the test. If no elements pass the test, it returns false.

const numbers = [1, 3, 5, 7, 8, 9];
const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);

console.log(hasSomeEvenNumbers); // true

Working with the DOM, Click Events, and Web APIs

Whoissosick — Tue, 02 Dec 2025 04:19:11 +0000

What Is an API, and What Are Web APIs?

These types of APIs are often divided into two main categories: browser APIs and third-party APIs.

Browser APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.

They also provide access to various functionalities, such as manipulating the structure of the website, handling events, working with storage, and communicating with the network.

Some examples of commonly used Browser APIs include:

The DOM API, which you can use to manipulate HTML elements, their styles, and attributes. You will learn much more about the DOM in the coming lessons. It’s a core concept in web development.

The Storage API, to store data locally on the user’s device.

What Is the requestAnimationFrame() API, and How Can It Be Used to Set Up an Animation Loop?

To use the requestAnimationFrame() method, all you need to do is to call it and pass a callback function into it: requestAnimationFrame(callback);

Calling requestAnimationFrame() must first occur inside a function that handles the animation, such as animate(), along with a function to update the animation, traditionally called update():

function animate() {
 // Update the animation...
 // for example, move an element, change a style, and more.
 update();
 // Request the next frame
 requestAnimationFrame(animate);
}

The update() function is where the magic happens. Inside it, you get to change whatever you want to animate. For example, updating a style or changing the position of an element:

function update() {
 element.style.transform = `translateX(${position}px)`;
 position += 2;
}

What finally kicks off the animation is calling requestAnimationFrame() and passing in the animate function, this time outside the animate function: requestAnimationFrame(animate);

What Is the Web Animations API, and How Does It Relate to CSS Animation Properties?

When to use: When you need animations to respond to user interactions like clicks, scrolls, or allow dynamic control such as pausing or reversing.

The Web Animations API (WAAPI) allows you to create and control animations directly within JavaScript.

At the core of WAAPI is the Animation constructor, which provides several instance methods and properties that allow you to dynamically animate elements. A significant method in the Animation constructor is animate(). It allows you to create an animation by specifying keyframes and options like duration, direction, easing, and iterations.

const square = document.querySelector("#square");

const animation = square.animate(
  [{ transform: "translateX(0px)" }, { transform: "translateX(100px)" }],
  {
    duration: 2000, // makes animation lasts 2 seconds
    iterations: Infinity, // loops indefinitely
    direction: "alternate", // moves back and forth
    easing: "ease-in-out" // smooth easing
  }
);

const square = document.querySelector("#square");
const playBtn = document.querySelector("#playBtn");
const pauseBtn = document.querySelector("#pauseBtn");

const animation = square.animate(
  [{ transform: "translateX(0px)" }, { transform: "translateX(200px)" }],
  {
    duration: 5000, // Animation lasts 5 seconds
    // iterations: Infinity, // Loops indefinitely
    direction: "alternate", // Moves back and forth
    easing: "ease-in-out" // Smooth easing function
  }
);

// Set the onfinish property to log a message when the animation ends
animation.onfinish = () => {
  console.log("Animation finished!");
};

// Play the animation when the "Play" button is clicked
playBtn.addEventListener("click", () => {
  animation.play();
  console.log("You start the animation");
});

// Pause the animation when the "Pause" button is clicked
pauseBtn.addEventListener("click", () => {
  animation.pause();
  console.log("You pause the animation");
});

What Is the Canvas API, and How Does It Work?

The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. Everything begins with a canvas element in HTML. This element serves as a drawing surface that you can manipulate using the instance methods and properties of the Canvas API.

First, you need to create a canvas element in your HTML file:

<canvas id="my-canvas"></canvas>

The canvas element is represented by the HTMLCanvasElement interface, which provides methods and properties for manipulating it. Additionally, you can use methods and properties from other interfaces in the Canvas API.

You can give your canvas a width and height inside the HTML:

<canvas id="my-canvas" width="400" height="400"></canvas>

Or you can use the width and height properties of the HTMLCanvasElement interface:

const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;

For now, you can't see anything on the screen yet. After creating your canvas element, the next thing to do is to get access to the drawing context of the canvas with the getContext() method of the HTMLCanvasElement interface.

The most common context is 2d, which allows you to draw in two dimensions:

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext('2d');

If you log the ctx variable to the console, you'll see the methods and properties of CanvasRenderingContext2D that you can use to create shapes, colors, lines, and more, along with their default values:

The Canvas API provides several methods and properties for drawing shapes, lines, and text. One of those is the fillStyle property, which you can combine with the fillRect() method to draw a rectangle or square:

<html>
  <head>
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>
    <script src="index.js"></script>
  </body>
</html>
const canvas = document.getElementById("my-canvas");

const ctx = canvas.getContext("2d");

// Set the background color
ctx.fillStyle = "crimson";

// Draw a rectangle
ctx.fillRect(1, 1, 150, 100);

fillRect takes 4 number values which represent the x axis, y axis, width, and height, respectively.

There's something on the screen now. You can also draw text or even create an animation. Here's a canvas to represent text:

<canvas id="my-text-canvas" width="300" height="70"></canvas>

To finally draw the text, pass the text into the fillText() method as the first argument, followed by the values for the x and y axis:

<html>
  <head>
  </head>
  <body>
    <canvas id="my-text-canvas" width="300" height="70"></canvas>
    <script src="index.js"></script>
  </body>
</html>
const textCanvas = document.getElementById("my-text-canvas");

const textCanvasCtx = textCanvas.getContext("2d");

// Set font family and size
textCanvasCtx.font = "30px Arial";

// Set text color
textCanvasCtx.fillStyle = "crimson";

// Draw the text
textCanvasCtx.fillText("Hello HTML Canvas!", 1, 50);

The result in the browser will be the red text Hello HTML Canvas!.

These's much more you can do with the Canvas API. For example, you can combine it with requestAnimationFrame to create custom animations, visualizations, games, and more.

How Do You Open and Close Dialog Elements Using JavaScript?

Dialogs let you display important information or actions to users. With HTML's built-in dialog element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps.

A modal dialog is a type of dialog that forces the user to interact with it before they can access the rest of the application or webpage. It effectively blocks interaction with other content until the user completes an action, such as closing the dialog or submitting a form.

When you want to make sure the user focuses on a specific action or message of a modal, you can open the modal dialog using the showModal() method. This will add a backdrop to the other items on the page and disable them. This is ideal for modals that display forms, confirmations, and critical information that requires user action.

Here's the HTML for the modal dialog:

<dialog id="my-modal">
  <p>This is a modal dialog.</p>
</dialog>

For now, you can't see anything on the page because the modal is closed on the initial render. You can automatically open the modal by using the showModal() method:

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<script src="index.js"></script>
const dialog = document.getElementById("modal");
dialog.showModal();

The result in the browser will show a modal with the text This is a modal dialog.

It's best to give control to the user. To achieve this, you can add a click event listener to a button and use the showModal() method:

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<button id="open-modal-btn">Open Modal Dialog</button>
<script src="index.js"></script>
const dialog = document.getElementById("modal");
const openButton = document.getElementById("open-modal-btn");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

If you needed to show a dialog while still allowing interaction with content outside of the dialog, then you can use the show() method:

<dialog id="modal">
  <p>This is a modal dialog.</p>
</dialog>
<button id="open-modal-btn">Open Modal Dialog</button>
<script src="index.js"></script>
const dialog = document.getElementById("modal");
const openButton = document.getElementById("open-modal-btn");

openButton.addEventListener("click", () => {
  dialog.show();
});

To close a modal, you can add a button to the modal inside the dialog element and use the close() method:

closeButton.addEventListener("click", () => {
  dialog.close();
});

Callback functions

Whoissosick — Thu, 27 Nov 2025 09:16:31 +0000

What Is a Callback Function, and How Does It Work with the forEach Method?

Imagine you have a function that performs a task, and you want to do something after that task is complete. Instead of writing all the code in one big function, you can pass a second function (the callback) to be executed when the first function is done.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index, array) => {
  console.log(`Element ${number} is at index ${index} in array ${array}`);
});

What Is Method Chaining, and How Does It Work?

const result = "  Hello, World!  "
  .trim()
  .toLowerCase()
  .replace("world", "JavaScript");

console.log(result); // "hello, JavaScript!"

const transactions = [
  { amount: 100, type: "credit" },
  { amount: 20, type: "cash" },
  { amount: 150, type: "credit" },
  { amount: 50, type: "cash" },
  { amount: 75, type: "credit" }
];

const totalCreditWithBonus = transactions
  .filter((transaction) => transaction.type === "credit")
  .map((transaction) => transaction.amount * 1.1)
  .reduce((sum, amount) => sum + amount, 0);

console.log(totalCreditWithBonus); // 357.5

How Does the Sort Method Work?

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]

How Do the every() and some() Methods Work?

The every() method returns true if the provided function returns true for all elements in the array. If any element fails the test, the method immediately returns false and stops checking the remaining elements.

const numbers = [2, 4, 6, 8, 10];
const hasAllEvenNumbers = numbers.every((num) => num % 2 === 0);

console.log(hasAllEvenNumbers); // true

While every() checks if all elements pass a test, some() checks if at least one element passes the test. The some() method returns true as soon as it finds an element that passes the test. If no elements pass the test, it returns false.

const numbers = [1, 3, 5, 7, 8, 9];
const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);

console.log(hasSomeEvenNumbers); // true

Foundation JS

Whoissosick — Sun, 09 Nov 2025 20:26:48 +0000

toString() Method

It's a method you can use for numbers, booleans, arrays, and objects.

const num = 10;
console.log(num.toString()); // "10"

const arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"

const person = {
  name: "John",
  age: 30,
  isStudent: true
};

console.log(person.toString()); // "[object Object]"

What Is the Number Constructor, and How Does It Work for Type Coercion?

The Number() constructor is used to create a number object. The number object contains a few helpful properties and methods like the isNaN and the toFixed method.

const myNum = new Number("34");
console.log(typeof myNum); // "object"

In this example we pass in a string literal to the Number() constructor and the return type is of type object instead of a string.

When the Number() constructor is called as a function without the new keyword, then the return value will be the primitive number type. Most of the time you will be using the Number() constructor to convert other data types to the number data type. Here's an example of converting a string to a number:

const myNum = Number("100");
console.log(myNum); // 100

console.log(typeof myNum); // number

This is helpful when you are getting input from the user and you need to convert that string input to a number so you can perform mathematical calculations.

If you try to call the Number() constructor through an empty string then the result will be the number 0:

const num = Number("");
console.log(num); // 0

const num = Number("random");
console.log(num); // NaN

const boolTrue = Number(true);
const boolFalse = Number(false);
console.log(boolTrue); // 1
console.log(boolFalse); // 0

const undefinedNum = Number(undefined);
const nullNum = Number(null);
console.log(undefinedNum); // NaN
console.log(nullNum); // 0

When working with arrays there are a few things to consider.

An empty array will return 0. An array with a single number will return that number. An array with multiple numbers returns NaN. And an array with string(s) will also return NaN.

const emptyArr = Number([]);
const arrOneNum = Number([7]);
const arrMultiNum = Number([7, 36, 12]);
const arrStr = Number(["str1"]);
const arrMultiStr = Number(["str1", "str2"]);

console.log(emptyArr); // 0
console.log(arrOneNum); // 7
console.log(arrMultiNum); // NaN
console.log(arrStr); // NaN
console.log(arrMultiStr); // NaN

When working with objects, the result is always NaN.

Common Practices for Naming Variables and Functions?

For boolean variables, it's a common practice to use prefixes such as is, has, or can. This immediately tells the reader that the variable is a boolean:

let isLoading = true;
let hasPermission = false;
let canEdit = true;

function getUserData(){
  /* ... */
}

function isValidEmail(email) {
  /* For functions that return a boolean often called predicates */
}

function getProductDetails(productId) {
  /* retrieve data */
}

function handleClick(){
  /* For event handler functions */
}

How Can You Create an Empty Array of Fixed Length?

Array() constructor & Array.from()

const emptyArray = new Array(5);
console.log(emptyArray.length); // 5
console.log(emptyArray); // [undefined, undefined, undefined, undefined, undefined]

const fixedLengthArray = Array.from({ length: 5 });
console.log(fixedLengthArray.length); // 5

// [undefined, undefined, undefined, undefined, undefined]
console.log(fixedLengthArray);

If you want to create an array of specific length and fill it with a default value, you can use the Array.fill() method:

const filledArray = new Array(3).fill(0);
console.log(filledArray); // [0, 0, 0]

What Are Linters and Formatters, and How Can They Help You with Code Consistency?

Linters = A linter is a static code analysis tool that flags programming errors, bugs, stylistic errors, and suspicious constructs (ESLint).

Formatters = ensure a consistent code style across an entire project or team regardless of individual developer preferences (Prettier).

What Is Memory Management, and How Does It Work in JavaScript?

JavaScript however uses automatic memory management. This means that JavaScript (more specifically the JavaScript engine in your web browser) takes care of memory allocation and deallocation for you. You don't have to explicitly free memory in your code. This automatic process is often called garbage collection.

Closure = функция, которая "помнит" переменные из внешней области видимости
Управление памятью = garbage collector не может удалить то, на что ещё есть ссылки

What Are Closures, and How Do They Work?

Closure is a function that has access to variables in its outer enclosing lexical scope, even after the outer function has returned.

function outerFunction(x) {
    let y = 10;
    function innerFunction(){
        console.log(x + y);
    }
    return innerFunction;
}

let closure = outerFunction(5);
console.log(closure()); // 15

In this example, outerFunction takes a parameter x and defines a local variable y. It then defines an innerFunction that uses both x and y. Finally it returns innerFunction. When we call outerFunction(5) it returns innerFunction which we assign to the variable closure. When we later call closure() it still has access to x and y from outerFunction even though outerFunction has already finished executing. This is the essence of a closure.

Closures are particularly useful for creating private variables and functions. Consider this example:

function createCounter() {
    let count = 0;
    return function () {
        count++;
        return count;
    };
}

let counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

In this case, createCounter returns a function that increments and returns a count variable. The count variable is not directly accessible from outside createCounter, but the returned function (our closure) has access to it. Each time we call counter(), it increments and returns the count.

Closures can also capture multiple variables from their outer scope. For example:

function multiply(x) {
    return function (y) {
        return x * y;
    };
}

let double = multiply(2);
console.log(double(5)); // 10

One important thing to note about closures is that they capture variables, by reference not by value. This means if the value of a captured variable changes, the closure will see the new value. For example:

function createIncrementer() {
    let count = 0;
    return function () {
        count++;
        console.log(count);
    };
}

let increment = createIncrementer();
increment(); // 1
increment(); // 2

Each time we call increment its working with the same count variable, not a copy of it's initial value.

Loops [JS]

Whoissosick — Thu, 06 Nov 2025 06:52:09 +0000

The basic syntax for f "for" loop

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

How Does the For...of Loop Work, and When Should You Use It?

A for...of loop is used when you need to loop over values from an iterable. Examples of iterables would be arrays, and strings.

for (variable of iterable) {
  // code block to be executed
}

In this first example we have an array of numbers and we want to loop over each number and log it to the console.

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

We have created a variable called num that will represent the current number in the array. For iteration 1, num will be 1, for iteration 2, num will be 2, and so on.

Here is another example where we have a string and we want to loop over each character and log it to the console.

const str = 'WalterWhite';

for (let char of str) {
  console.log(char);
}

In this example, we have created a variable called char that will represent the current character in the string.

It is important to note that you can use let, or const when declaring the variable in a for...of loop.

If you are going to use const though, make sure that the value of the variable does not change inside the loop. If it does, you will get an error.

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
  num = num + 1; // This will cause an error
}

Let's take a look at one last example dealing with an array of objects.

const people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Jim', age: 40 }
];

for (const person of people) {
  console.log(`${person.name} is ${person.age} years old`);
}

for...of loops are really useful when you need to loop over values from an iterable like an array or a string.

What Is the For...in Loop, and When Should You Use It?

A for...in loop is best used when you need to loop over the properties of an object. This loop will iterate over all enumerable properties of an object, including inherited properties and non-numeric properties.

An inherited property is a property that is inherited from the object's prototype chain. A non-numeric property is a property that is not a number or a string that can be converted to a number.

const fruit = {
  name: 'apple',
  color: 'red',
  price: 0.99
};

for (const prop in fruit) {
  console.log(fruit[prop]);
}

The prop variable represents the current property of the object. fruit[prop] is used to access the value of each property.

For the first iteration, prop will be name. For the second iteration, prop will be color, and so on.

The results logged to the console will be apple, red, and 0.99.

In this second example, we have a nested object and we want to loop over each property and log the value to the console.

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

function isObject(obj) {
  return typeof obj === 'object' && !Array.isArray(obj) && obj !== null;
}

for (const prop in person) {
  if (isObject(person[prop])) {
    for (const nestedProp in person[prop]) {
      console.log(person[prop][nestedProp]);
    }
  } else {
    console.log(person[prop]);
  }
}

In this example, we have a custom function isObject that checks if the value is an object.

The Array.isArray method is used to check if the value is an array. By placing the logical NOT operator (!) in front of the method, we are checking if the value is not an array.

The reason why we can't just use typeof equals 'object' is because arrays are also considered objects in JavaScript. We want to exclude arrays from the check.

Also, due to a historical bug in JavaScript, typeof null returns 'object'. So we want to also exclude null values from the check.

If the condition is true, we nest another for...in loop that will loop over the properties of the nested object and log the value to the console.

The nestedProp variable represents the current property of the nested object.

What Is a While Loop, and How Does It Differ from the Do...while Loop?

while (condition) {
  // code block to be executed
}

while loops are useful when you do not know how many times you need to run the block of code. Here is an example of using a while loop:

let counter = 0;
while(counter < 5) {
  console.log(counter);
  counter++;
}

Another loop similar to the while loop would be the do...while loop. Here is the basic syntax:

do {
  // code block to be executed
} while (condition);

One key difference between a do...while loop and a while loop is that the do...while loop will execute the block of code at least once before checking the condition.

If the condition is true, the block of code will continue to execute. If the condition is false, the block of code will stop executing.

let counter = 0;
do {
  console.log(counter);
  counter++;
} while (counter < 5);

In this example, we have a variable called counter that is initialized to 0. The do...while loop will log the value of counter to the console and then increment counter by 1. After executing the block of code, it checks if the value of counter is less than 5. If it is, the loop will continue to run. If not, the loop will stop.

What Are the Break and Continue Statements Used for in Loops?

A break statement is used to exit a loop early, while a continue statement is used to skip the current iteration of a loop and move to the next one.

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

The break statement is useful when you want to exit a loop early based on a certain condition. For example, if you are searching for a specific value in an array, you can use a break statement to exit the loop once you find the value.

Sometimes you may want to skip a particular iteration of a loop without exiting the loop entirely. This is where the continue statement comes in. Here is an example of using a continue statement in a for loop:

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

The output of this code will print the numbers 0, 1, 2, 3, 4, 6, 7, 8, and 9. The number 5 is skipped because of the continue statement.

Another thing you can do with both the break and continue statements is to use labels to specify which loop you want to break or continue.

This is useful when you have nested loops and you want to control the flow of the outer loop from within the inner loop.

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop;
    }
    console.log(`i: ${i}, j: ${j}`);
  }
}

In this example, we have an outer for loop labeled outerLoop and an inner for loop labeled innerLoop.

When i is equal to 1 and j is equal to 1, we use the break statement with the outerLoop label to exit the outer loop early. This will exit both the inner and outer loops.

The output of this code will log the following to the console:

"i: 0, j: 0"
"i: 0, j: 1"
"i: 0, j: 2"
"i: 1, j: 0"

Object [JS]

Whoissosick — Mon, 03 Nov 2025 11:38:50 +0000

const exampleObject = {
  propertyName: value;
}

These pieces of information are called properties, and they consist of a name (or key) and a value.

There are two main ways to access object properties in JavaScript: dot notation and bracket notation.

console.log(person.name);  // Alice
console.log(person["name"]); // Alice
console.log(oddObject["1stProperty"]);  // Hello

How Can You Remove Properties from an Object?

delete operator

const person = {
  name: "Alice",
  age: 30,
  job: "Engineer"
};

delete person.job;

console.log(person.job); // undefined

Another way to remove properties is by using destructuring assignment with rest parameters. This approach doesn't actually delete the property, but it creates a new object without the specified properties:

const person = {
  name: "Bob",
  age: 25,
  job: "Designer",
  city: "New York"
};

const { job, city, ...remainingProperties } = person;

// { name: "Bob", age: 25 }
console.log(remainingProperties);

In this example, we use destructuring to extract job and city from the person object, and collect the remaining properties into a new object called remainingProperties. This creates a new object without the job and city properties.

How to Check If an Object Has a Property?

hasOwnProperty() method and in operator returns boolean

const person = {
  name: "Alice",
  age: 30
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("job")); // false

const person = {
  name: "Bob",
  age: 25
};
console.log("name" in person);  // true

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

console.log(car.brand !== undefined); // true
console.log(car.color !== undefined); // false

In this code, we check if car.brand and car.color are not undefined. This works because accessing a non-existent property on an object returns undefined. However, this method can give false negatives if a property explicitly has the value undefined.

How Do You Work with Accessing Properties from Nested Objects and Arrays in Objects?

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "alice@example.com",
    phone: {
      home: "123-456-7890",
      work: "098-765-4321"
    }
  }
};

console.log(person.contact.phone.work); // "098-765-4321"
console.log(person['contact']['phone']['work']); // "098-765-4321"

Now, let’s take a look at how we can access data where one of the object properties has the value of an array. Here is a modified person object that includes an array of addresses:

const person = {
  name: "Alice",
  age: 30,
  addresses: [
    { type: "home", street: "123 Main St", city: "Anytown" },
    { type: "work", street: "456 Market St", city: "Workville" }
  ]
};

console.log(person.addresses[1].city); // "Workville"

What Is the Difference Between Primitive and Non-Primitive Data Types?

Primitive data types are the simplest form of data in JavaScript. They include numbers, strings, booleans, null, undefined, and symbols. These types are called "primitive" because they represent single values and are not objects.

Primitive values are immutable, which means once they are created, their value cannot be changed. However, you can reassign a new value to the variable. Here's an example of working with primitive data types:

et num1 = 5;
let num2 = num1;
num1 = 10;

console.log(num2); // 5

When you create a variable with a non-primitive value, what's stored in the variable is actually a reference to the location in memory where the object is stored, not the object itself. This leads to some important differences in behavior. Here's an example with non-primitive types:

const originalPerson = { name: "John", age: 30 };
const copiedPerson = originalPerson;

originalPerson.age = 31;

console.log(copiedPerson.age); // 31

This is known as shallow copying by reference.

What Is the Difference Between Functions and Object Methods?

Object methods, on the other hand, are functions that are associated with an object. They are defined as properties of an object and can access and manipulate the object's data.

const person = {
    name: "Bob",
    age: 30,
    sayHello: function() {
        return "Hello, my name is " + this.name;
    }
};

console.log(person.sayHello()); // "Hello, my name is Bob"

A difference between functions and methods is how they are invoked. Functions are called by their name, while methods are called using dot notation on the object they belong to. For example, we call the greet function as greet("Alice"), but we call the sayHello method as person.sayHello().

What Is JSON, and How Do You Access Values Using Bracket and Dot Notation?

JSON stands for JavaScript Object Notation. Since JSON is language-independent, you can easily send JSON data from a Java application to a Python application, or from a JavaScript application to a C# application.

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "list of courses": ["Mathematics", "Physics", "Computer Science"]
}

Each key must be wrapped in double quotes, otherwise you will get an error.

How Do JSON.parse() and JSON.stringify() Work?

const user = {
  name: "John",
  age: 30,
  isAdmin: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'

The JSON.stringify() method also accepts an optional parameter called a replacer, which can be a function or an array. Here is an example of using an array for the optional replacer parameter:

const developerObj = {
  firstName: "Jessica",
  isAwesome: true,
  isMusician: true,
  country: "USA",
};

// result: {"firstName":"Jessica","country":"USA"}
console.log(JSON.stringify(developerObj, ["firstName", "country"]));

Replacer as function

const product = {
    name: "Телефон",
    price: 1000,
    currency: "USD",
    createdAt: new Date('2023-01-15')
};

const productJSON = JSON.stringify(product, function(key, value) {
    // Преобразуем даты в читаемый формат
    if (value instanceof Date) {
        return value.toISOString().split('T')[0]; // "2023-01-15"
    }

    // Исключаем поле currency
    if (key === 'currency') {
        return undefined; // исключаем из результата
    }

    return value; // все остальное оставляем как есть
});

console.log(productJSON);
// {"name":"Телефон","price":1000,"createdAt":"2023-01-15"}

Another optional parameter for the JSON.stringify() method would be the spacer parameter. This allows you to control the spacing for the stringified result:

const developerObj = {
  firstName: "Jessica",
  isAwesome: true,
  isMusician: true,
  country: "USA",
};

console.log(JSON.stringify(developerObj, null, 2));

/* result
{
  "firstName": "Jessica",
  "isAwesome": true,
  "isMusician": true,
  "country": "USA"
}
*/

What Is the Optional Chaining Operator, and How Does It Work?

The optional chaining operator is most useful when you're not sure if a property or method exists. It helps prevent errors and makes your code more robust.

const user = {
  name: "John",
  profile: {
    email: "john@example.com",
    address: {
      street: "123 Main St",
      city: "Somewhere"
    }
  }
};

console.log(user.profile?.address?.street); // "123 Main St"
console.log(user.profile?.phone?.number);   // undefined

Working with arrays [JS]

Whoissosick — Fri, 31 Oct 2025 12:06:05 +0000

Function methods

.pop()

The pop() method removes the last element from an array and returns that element.

let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"

.unshift()

Adds one or more elements to the beginning of an array and returns its new length. It works similarly to push().

let numbers = [2, 3];
let newLength = numbers.unshift(1);
console.log(numbers); // [1, 2, 3]
console.log(newLength); // 3

.shift()

Removes the first element from an array and returns that element. It's similar to pop().

let colors = ["red", "green", "blue"];
let firstColor = colors.shift();
console.log(colors); // ["green", "blue"]
console.log(firstColor); // "red"

One-Dimensional and Two-Dimensional Arrays

A one-dimensional array, often called an array, is like a single row of boxes.

Two-dimensional array is essentially an array of arrays.

let chessboard = [
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
];

console.log(chessboard[0][3]); // Outputs: "Q"

Array Destructuring

let fruits = ["apple", "banana", "orange"];

let [first, second, third] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(third);  // "orange"

Array destructuring also allows you to skip elements you're not interested in by using commas. For instance:

let colors = ["red", "green", "blue", "yellow"];
let [firstColor, , thirdColor] = colors;

console.log(firstColor); // Output: "red"
console.log(thirdColor); // Output: "blue"

Another powerful feature of array destructuring is the ability to use default values.

let numbers = [1, 2];
let [a, b, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Now, let's discuss the rest syntax, denoted by three dots (...). It allows you to capture the remaining elements of an array that haven’t been destructured into a new array.

The rest syntax must be the last element in the destructuring pattern.

let fruits = ["apple", "banana", "orange", "mango", "kiwi"];
let [first, second, ...rest] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(rest);   // ["orange", "mango", "kiwi"]

How Can You Use String and Array Methods to Reverse a String?

Steps

Splitting the string into an array of characters.
Reversing the array.
Joining the characters back into a string.

The first step in reversing a string is to convert it into an array of individual characters. We can do this using the split() method.
*An empty string (""), which splits the string into individual characters.
*A single space (" "), which splits the string wherever spaces occur.
*A dash ("-"), which splits the string at each dash.

let str = "hello";
let charArray = str.split("");
console.log(charArray); // ["h", "e", "l", "l", "o"]

The reverse() method is an array method that reverses an array in place. This means it modifies the original array rather than creating a new one.

let charArray = ["h", "e", "l", "l", "o"];
charArray.reverse();
console.log(charArray); // ["o", "l", "l", "e", "h"]

We can accomplish this using the join() method. The join() method creates and returns a new string by concatenating all of the elements in an array, separated by a specified separator string.

let reversedArray = ["o", "l", "l", "e", "h"];
let reversedString = reversedArray.join("");
console.log(reversedString); // "olleh"

Remember that strings in JavaScript are immutable, which means you can't directly reverse a string by modifying it. That's why we need to convert it to an array, reverse the array, and then convert it back to a string. This combination of string and array methods provides a powerful and flexible way to manipulate strings in JavaScript.

let str = "coding";
let reversed = str.split("").reverse().join("");
console.log(reversed);

How Do You Get the Index for an Element in an Array Using the indexOf Method?

let fruits = ["apple", "banana", "orange", "banana"];
let index = fruits.indexOf("banana");
console.log(index); // 1

If the element you're searching for is not found in the array, indexOf() returns -1.

If you want to start looking for an item after a specific index number, then you can pass a second argument like in this example:

let colors = ["red", "green", "blue", "yellow", "green"];
let index = colors.indexOf("green", 3);
console.log(index); // 4

In this example, the search does not start from the start of an array, rather it starts from the index number 3 which is yellow and gets the output of 4.

In order to find the proper object in an array use findIndex() method

const userIndex = users.findIndex(user => user.name === 'Dave');

How Do You Add and Remove Elements from the Middle of an Array?

**.splice()

The return value for the splice() method will be an array of the items removed from the array. If nothing was removed, then an empty array will be returned. This method will mutate the original array, modifying it in place rather than creating a new array.

array.splice(startIndex, itemsToRemove, item1, item2)

startIndex specifies the index at which to begin modifying the array, while itemsToRemove is an optional parameter indicating how many elements to remove. If itemsToRemove is omitted, splice() will remove all elements from startIndex to the end of the array. The subsequent parameters (item1, item2, and so on) are the elements to be added to the array, beginning at the start index.

let fruits = ["apple", "banana", "orange", "mango", "kiwi"];
let removed = fruits.splice(2, 2);

console.log(fruits);  // ["apple", "banana", "kiwi"]
console.log(removed); // ["orange", "mango"]

In this example, splice(2, 2) starts at index 2 and removes 2 elements.

Now, let's look at how to add elements to the middle of an array:

let colors = ["red", "green", "blue"];
colors.splice(1, 0, "yellow", "purple");

console.log(colors); // ["red", "yellow", "purple", "green", "blue"]

Here, splice(1, 0, "yellow", "purple") starts at index 1, removes 0 elements, and inserts yellow and purple. The second parameter (0) means no elements are removed before insertion. You can also use splice() to simultaneously remove and add elements:

let numbers = [1, 2, 3, 4, 5];
numbers.splice(1, 2, 6, 7, 8);

console.log(numbers); // [1, 6, 7, 8, 4, 5]

In this case, splice(1, 2, 6, 7, 8) starts at index 1, removes 2 elements (2 and 3), and inserts 6, 7, and 8.

One common use case for splice() is to remove a single element from an array when you know its index:

let fruits = ["apple", "banana", "orange", "mango"];
let indexToRemove = fruits.indexOf("orange");
if (indexToRemove !== -1) {
    fruits.splice(indexToRemove, 1);
}

console.log(fruits); // ["apple", "banana", "mango"]

You can also use splice() to clear an array by removing all elements:

let array = [1, 2, 3, 4, 5];
array.splice(0);

console.log(array); // []

How Can You Check if an Array Contains a Certain Value?

In JavaScript, the includes() method is a simple and efficient way to check if an array contains a specific value. This method returns a boolean value: true if the array contains the specified element, and false otherwise.

let fruits = ["apple", "banana", "orange", "mango"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape"));  // false

The includes() method can also accept an optional second parameter that specifies the position in the array to start the search. This is useful if you want to check for an element's presence in a specific part of the array. Here's how you can use this feature:

let numbers = [10, 20, 30, 40, 50, 30, 60];
console.log(numbers.includes(30, 3)); // true
console.log(numbers.includes(30, 4)); // true

It's worth noting that includes() uses the strict equality comparison (===), which means it can distinguish between different types. For example:

let mixedArray = [1, "2", 3, "4", 5];
console.log(mixedArray.includes(2));  // false
console.log(mixedArray.includes("2")); // true

In this case, the number 2 and the string "2" are considered different data types. So, the first console.log will return false, while the second console.log will return true.

What Is a Shallow Copy of an Array, and What Are Some Ways to Create These Copies?

If the array only contains primitive values like numbers or strings, the new array is completely separate. But if the array contains other arrays inside it, both the original and the copy have references to the same inner arrays. This means that if you change something inside a shared inner array, you will see that change in both arrays.

There are several methods for creating shallow copies of arrays, and we'll explore some of the most common ones: concat(), slice(), and the spread operator.

Let's start with the concat() method. This method creates a new array by merging two or more arrays. When used with a single array, it effectively creates a shallow copy. Here's an example:

const originalArray = [1, 2, 3];
const copyArray = [].concat(originalArray);

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

In this example, we are using the concat() method to concatenate an empty array to the originalArray. This will create a new array that is a shallow copy of originalArray.

The copyArray contains the same elements as originalArray, but it is a different array object, which is why the strict equality check (===) returns false.

Another method to create a shallow copy is the slice() method. When called without arguments, slice() returns a shallow copy of the entire array. Here's how it works:

const originalArray = [1, 2, 3];
const copyArray = originalArray.slice();

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

In this case, originalArray.slice() creates a new array that is a shallow copy of originalArray. Again, the copyArray contains the same elements but is a different array object.

The spread operator (...), introduced in ES6, provides another concise way to create shallow copies of arrays. Here's an example:

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false

The spread operator (...) spreads the elements of originalArray into a new array, effectively creating a shallow copy. It's important to note that all these methods create new array objects, which means you can modify the copy without affecting the original array.

How to use JWTokens properly

Whoissosick — Wed, 29 Oct 2025 08:16:39 +0000

User registration

First thing first we need to register a user

Destucturing the received username & password from request.
Check for duplicate username in the db
Encrypt the password using encrypt package
Create and save new user into db
Send proper status and make error handling

const { username, password } = req.body; 
  if (!username || !password) return res.status(400).json({ "message": 'Username and password are required.'});

  const duplicate = await User.findOne({ username: username }).exec();
  if (duplicate) return res.sendStatus(409); // Conflict

  try {
    // encrypt the password 
    const hashedPassword = await bcrypt.hash(password, 10); 

    // create and store the new user
    const result = await User.create({ 
      "username": username, 
      "password": hashedPassword 
    }); 

    res.status(201).json({ 'success': `New user ${username} created`});
  } catch (err) {
    res.status(500).json({ "message": err.message });
  }

User authorization

After we registrate user, we also need to get username/password from request.body and cookies (content from it)

Find user by username in db 1.1 If user is not found => 401 | Unathorized
Compare password using bcrypt package
Create AT (Access Token) & RT (Refresh Token). Tokens contains (payload, SECRET, options).
If user came in without RT inside cookies, array of RTs stays unchanged, if cookies contains something we save array without that RT. (This supports multiple devices).
Clear all cookie before we give new tokens
Update array of tokens inside db
User gets AT & RT

  const cookies = req.cookies; 
  const { username, password } = req.body;
  if (!username || !password) return res.status(400).json({ "message": 'Username and password are required' });

  const foundUser = await User.findOne({ username: username }).exec();
  if (!foundUser) return res.sendStatus(401);

  const matchPassword = await bcrypt.compare(password, foundUser.password);
  if (matchPassword) {
    const roles = Object.values(foundUser.roles);

    const accessToken = jwt.sign(
      {
        "UserInfo": {
          "username": foundUser.username,
          "roles": roles
        }
      },
      process.env.ACCESS_TOKEN_SECRET,
      { expiresIn: '30s' }
    );
    const newRefreshToken = jwt.sign(
      { "username": foundUser.username },
      process.env.REFRESH_TOKEN_SECRET,
      { expiresIn: '1d' }
    );

    const newRefreshTokenArray = 
      !cookies?.jwt
        ? foundUser.refreshToken
        : foundUser.refreshToken.filter(rt => rt !== cookies.jwt);
    if (cookies?.jwt) {
      res.clearCookie('jwt', { httpOnly: true, sameSite: 'None', secure: true });
    }

    foundUser.refreshToken = [...newRefreshTokenArray, newRefreshToken];
    const result = await foundUser.save();

    res.cookie('jwt', newRefreshToken, { httpOnly: true, sameSite: 'None', maxAge: 24 * 60 * 60 * 1000 });
    res.json({ accessToken });
  } else {
    res.sendStatus(401);
  }

Update AT by RT

Clear user cookie
Find user by RT in db
If user is not found in db, user is hacked. We intentionally clear array of tokens.
Create new array without received RT from cookie
Verify RT and give new tokens, then save it into db
Send cookie and result

const cookies = req.cookies;
  if (!cookies?.jwt) return res.sendStatus(401);

  const refreshToken = cookies.jwt;
  res.clearCookie('jwt', { httpOnly: true, sameSite: 'None', secure: true });

  const foundUser = await User.findOne({ refreshToken: refreshToken }).exec();

  if (!foundUser) {
    jwt.verify(
      refreshToken,
      process.env.REFRESH_TOKEN_SECRET,
      async (err, decoded) => {
        if (err) return res.sendStatus(403);
        const hackedUser = await User.findOne({ username: decoded.username }).exec();
        hackedUser.refreshToken = [];
        const result = await hackedUser.save();
        console.log(result);
      }
    );
    return res.sendStatus(403) // Forbidden
  };

  const newRefreshTokenArray = foundUser.refreshToken.filter(rt => rt !== refreshToken);

  jwt.verify(
    refreshToken,
    process.env.REFRESH_TOKEN_SECRET,
    async (err, decoded) => {
      if (err) { // if RT has been expired 
        foundUser.refreshToken = [...newRefreshTokenArray];
        const result = await foundUser.save();
        return res.sendStatus(403);
      }
      if (err || foundUser.username !== decoded.username) return res.sendStatus(403);

      const roles = Object.values(foundUser.roles);

      const accessToken = jwt.sign(
        {
          "UserInfo": {
            "username": decoded.username,
            "roles": roles
          }
        },
        process.env.ACCESS_TOKEN_SECRET,
        { expiresIn: '30s' },
      );

      const newRefreshToken = jwt.sign(
        { "username": foundUser.username },
        process.env.REFRESH_TOKEN_SECRET,
        { expiresIn: '1d' }
      );

      foundUser.refreshToken = [...newRefreshTokenArray, newRefreshToken];
      const result = await foundUser.save();

      res.cookie('jwt', newRefreshToken, { httpOnly: true, sameSite: 'None', maxAge: 24 * 60 * 60 * 1000 });
      res.json({ accessToken });
    }
  );

User logout

Get RT from cookies
Find user by RT inside db. (if user is not found, clear cookie)
Delete RT in db
Clear cookie

  const cookies = req.cookies; 
  if (!cookies?.jwt) return res.sendStatus(204); 

  const refreshToken = cookies.jwt; 

  const foundUser = await User.findOne({refreshToken: refreshToken}).exec(); 
  if (!foundUser) {
    res.clearCookie('jwt', { 
      httpOnly: true, 
      sameSite: 'None', 
      secure: true 
    });
    return res.sendStatus(204);
  }

  foundUser.refreshToken = foundUser.refreshToken.filter(rt => rt !== refreshToken);
  const result = await foundUser.save();
  console.log(result);

  res.clearCookie('jwt', { httpOnly: true, sameSite: 'None', secure: true }); // secure: true - only serves on https (it's on production)
  res.sendStatus(204);