DEV Community: Mazen

Javascript: Nullish Coalescing vs OR operator

Mazen — Wed, 04 Oct 2023 21:00:04 +0000

First of all, what is a Nullish Coalescing operator? It is the following operator: ??

Now let’s explore what it does and what is the difference between it and the OR operator.

OR operator

The OR operator || uses the right value if the left value is falsy. A falsey value is one of the following values:

0, -0, 0n
false
"" (empty string)
null
undefined
NaN

Let’s look at examples:

// when left is falsy, the right value is used
console.log(0  || "right value") 
// Output: "right value"
console.log(false || "right value") 
// Output: "right value"
console.log(""     || "right value") 
// Output: "right value"
console.log(undefined || "right value") 
// Output: "right value"
console.log(null      || "right value") 
// Output: "right value"

// but when the left value is truthy, the left value is used
console.log(12 || "right value") 
// Output: 12

Nullish coalescing

In contrast, the Nullish coalescing operator ?? uses the right value if the left value is nullish (ie, null or undefined).

For example:

// only when the left is undefined or null that the right value is used:
console.log(undefined ?? "right value") 
// Output: "right value"
console.log(null      ?? "right value") 
// Output: "right value"

// when the left value is not nullish, then the left value is used 
console.log(0  ?? "right value") 
// Output:  0
console.log("jane" ?? "right value") 
// Output: "jane"
console.log(""     ?? "right value") 
// Output: ""
console.log(true  ?? "right value") 
// Output:  true
console.log(false ?? "right value") 
// Output:  false

Most frequently, you only want the right value if the left value is null or undefined. That's what the nullish coalescing operator ?? is for.

Happy coding!
Mazen
My Youtube channel: @WebDevKit
My Github: @djzenma
My twitter: @djzenma

Typescript utility types: unleashing the power of TS generics

Mazen — Wed, 27 Sep 2023 03:17:02 +0000

Typescript utility types are one of the most useful typing features in Typescript that you will see everywhere in open source projects and that you will definitely start using once I teach them to you today.

Without further ado, let’s dive straight into it.

Partial

Makes all the fields in the interface/type optional.

type Car {
  id: string
  name: string
}
Partial<Car> 
// {
//   id?: string | undefined
//   name?: string | undefined
// }

Required

The opposite of Partial, it makes all the fields required (even the optional ones)

type Car {
  id: string
  name?: string
}
Required<Car> 
// {
//   id: string
//   name: string
// }

Omit

Removes properties from a type/interface

type Car {
  id?: string
  name: string
  weight: number
}
Omit<Car, "id" | "name"> 
// {
//   weight: number
// }

Pick

Picks only the properties specified from the type/interface

type Car {
  id?: string
  name: string
  weight: number
}
Pick<Car, "id" | "name"> 
// {
//   id: string
//   name: string
// }

Readonly

Makes all the properties readonly.

type Car {
  id?: string
  name: string
  weight: number
}
Readonly<Person> 
// {
//   readonly id?: string
//   readonly name: string
//   readonly weight: number
// }

Awaited

Unwraps the return type of the promise

type StringPromise = Promise<string>
type Result = Awaited<StringPromise> 
// Result type is string

ReturnType

Gets the return type of a function

type Func = (a: string) => number;
type ReturnValue = ReturnType<Func>
// ReturnType type is number

NonNullable

Removes null and undefined from union types

type MaybeString = string | null | undefined
type DefinitelyString = NonNullable<MaybeString>
// DefinitelyString type is string

Happy coding!
Mazen
My Youtube channel: @WebDevKit
My Github: @djzenma
My twitter: @djzenma