Logo

TODAY I LEARNED

5 posts about #javascript

Browsers' IndexedDB are shared across domain

I was working on a major refactor for a PWA which basically changed the DB schema by reducing the amount of versions, nothing outstanding. BUT, I didn't change the DB name.

I was puzzled why whenever accessing the previous version I had to delete the data to have the app load correctly, then I realized that despite the PWA being located at different URL paths, both versions were using the same IndexedDB because of the same domain policy.

Learned by juan-guajardo on Mar 19, 2021

973983 adforcodereview v3 0211021 c02 021121

NIX node manager

Use n, an extremely simple Node version manager that can be installed via npm.

Say you want Node.js v12.10.0 to build Ghost template.

npm install -g n   # Install n globally
n 12.10.0          # Install and use v12.10.0
Usage:
n                            # Output versions installed
n latest                     # Install or activate the latest node release
n stable                     # Install or activate the latest stable node release
n <version>                  # Install node <version>
n use <version> [args ...]   # Execute node <version> with [args ...]
n bin <version>              # Output bin path for <version>
n rm <version ...>           # Remove the given version(s)
n --latest                   # Output the latest node version available
n --stable                   # Output the latest stable node version available
n ls                         # Output the versions of node available

Learned by Victor Velazquez on Mar 10, 2021

973983 adforcodereview v3 0211021 c02 021121

Optional Chaining Operator (?) and Nullish Coalescing Operator (??)

Optional Chaining Operator(?) (**)

//Car object
const car = {
  attributes: {
   year: 2021,
   model: "Ferrari"
  }
}

Before in javascript to validate that the attributes of an object exist, it was necessary to use the And operator (&&) to validate if the attributes of the object existed.

See the following example:

if (car && car.attributes && car.attributes.model) {
  console.log('Exist',  car.attributes.model)
} else {
  console.log('Do not exist')
}

# => "Exist Ferrari"

Now with Optional Chaining Operator (?) We can validate if the property exit will return undefined if the property attributes or model doesn’t exist.

if (car?.attributes?.model) {
  console.log('Exist',  car.attributes.model)
} else {
  console.log('Do not exist')
}

# => "Exist Ferrari"

Nullish Coalescing Operator(??) (**)

//Car object
const car = {
  attributes: {
   year: 2021,
   model: "Ferrari"
  }
}

If we want to get the car model then we would like below:


console.log(car.attributes.model);
# => "Ferrari"

Now the new car object does not have the model property, so we get an undefined value

//Car object
const car = {
  attributes: {
   year: 2021,
  }
}
console.log(car.attributes.model);
# => "undefined"

To avoid the undefined value the OR (| |) operator can be used, It will now return the value BMW because the property model is undefined. But what if the name property is empty like below example

console.log(car.attributes.model | | "BMW" );
# => "BMW"

Now the problem is when the property model exists but has an empty, undefined or null value we will get the BMW value and this is not right.

//Car object
const car = {
  attributes: {
   year: 2021,
   model: ""
  }
}
console.log(car.attributes.model | | "BMW" );
# => "BMW"

The solution for this problem is to use the Nullish Coalescing Operator (??), Which will print the result as an empty string.

console.log(car.attributes.model ?? "BMW" );
# => ""

Learned by leyaim-jimenez on Mar 4, 2021

973983 adforcodereview v3 0211021 c02 021121

Optional Chaining in JavaScript

The Optional Chaining Operator ? allows you to read the value of a property located deep within an object without having to validate each property in the object. It works in a similar way than the chaining operator ., except that instead of causing an error if a reference is nullish, the expression will return a value of undefined.

A common way to validate properties was to do something like this:

const player = {
  stats: {
    stamina: 40
  }
}

let stamina
if (player && player.stats) {
  stamina = player.stats.stamina
}

This was done because calling player.stats.stamina directly could led into an error being thrown if stats didn't exists, and sometimes even the execution would stop.

Using the Optional Chaining Operator, we could do something like this:

const player = {
  stats: {
    stamina: 40
  }
}

const stamina = player.stats?.stamina

The result is shorter and simpler, and in case stats didn't exists the value would be undefined, without an error being thrown.

Learned by ricardo-santoyo on Mar 1, 2021

973983 adforcodereview v3 0211021 c02 021121

Export defualt const is invalid because...

const is a lexical declaration

default expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression

and thus, export default const someVariable is a SynthaxError

Learned by Eduardo Gutiérrez on Feb 21, 2021

973983 adforcodereview v3 0211021 c02 021121