Absorb Knowledge in 30 Seconds | Brain Bytes #3

Recap 🧠

Brain Bytes is a knowledge platform where you can learn new things about software development in less than 30 seconds.

Bytes of the Week

Don't forget about .finally() in your Promises

The .finally() method is useful to execute any function that needs to be executed after a Promise has been resolved (whether successfully or not).

As an example for a React app, it can be used to update the loading state.

getData()
  .then((res) => {
    setData(res.data);
  })
  .catch((err) => {
    setError(err);
  })
  .finally(() => {
    setIsLoading(false);
  });

Javascript variable assignment (value vs reference)

JS has 5 primitive types: String, Number, Boolean, null, and undefined.

When you assign a primitive type to a variable, the actual value is assigned, such as:

let string1 = 'hello world'
let string2 = string1

In this case, string2 is assigned the value of string1, being hello world.

Assigning a new value to string2 won't affect string1.

string2 = 'foor bar'

console.log(string1)
// 'hello world'
console.log(string2)
// 'foo bar'

However, when the assigned value is an Array, Function, or Object a reference to the object in memory is assigned.

Leading to unexpected situations:

let object1 = { name: 'Alan Grant' }
let object2 = object1

object2.name = 'John Wick'

console.log(object1)
// { name: 'John Wick' }
console.log(object2)
// { name: 'John Wick' }

Javascript Closures (Advanced Concept)

Closures are frequently used in JavaScript for object data privacy, in event handlers and callback functions.

A closure gives you access to an outer function’s scope from an inner function.

To use a closure, define a function inside another function and expose it. To expose a function, return it or pass it to another function.

Closures can be useful to create private variables or functions.

function OuterFunction() {

    let outerVariable = 1;

    function InnerFunction() {
        console.log(outerVariable);
    }

    return InnerFunction;
}

const innerFunc = OuterFunction();

innerFunc(); 
// 100

When you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

Type coercion

In javascript, type coercion is the automatic process of converting a value from one type to another (for example, from string to integer).

2 * "3"
// 6

"12" / 4
// 3

Cross-Site Request Forgery (CSRF)

CSRF attacks allow a malicious user to execute actions using the credentials of another user.

Example: John is evil. He knows that a particular site allows logged-in users to transfer money using an HTTP POST request that includes the account name and an amount of money.

John builds a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the Submit button disguised as a link to a "get rich quick" site).

Each time a user clicks on the submit button, an HTTP POST request is sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior). The server will check the cookies, and use them to determine whether or not the user is logged in and will authorize the transaction if so.

Progressive Web App (PWA)

A PWA is a web application that displays a website in the form of an app on smartphones. It is fast and can work with a poor internet connection.

Part of the magic of a PWA is based on Service Workers. Thanks to them, a PWA can store HTML files, CSS files, and images in the browser cache, and developers can fully control network communications, making PWAs work offline.

Twitter, Airbnb and Spotify are examples of PWAs.

Come and participate!

Brain Bytes is an open source project, so reach out to me to participate in its development! There is plenty to do!

Come now and share your knowledge!

Thanks for reading 🙏 ❤️

Comments

[Loïc Boset]

And you, what did you learn this week? 🧠