DEV Community: Code Oz

How I improve my skills in Typescript #2 : Mapped Type

Code Oz — Mon, 03 Apr 2023 14:43:34 +0000

I will share with us some tips that improved my skill in Typescript ! Today we will learn how to use Mapped Type !

What is and why use Mapped Type ?

Using mapped type is usefull when :

need to create a derived type from another type and keep both sync

Let's check an exemple to understand !

type User = {
  name: string
  age: number
  userName: string
}

type UserPermissions = {
  canUpdateName: boolean
  canUpdateAge: boolean
  canUpdateUserName: boolean
}

Here we can see similar thing between User & UserPermissions type. Is there any solutions to link both type ? Because we don't want to add manually property in UserPermissions every time we add a new property in User type.

The answer is yes and the solution is named Mapped type !

Mapped type: The basics

Create the same type

Before answering to the issue above, let's see how Mapped type is working !

We will create a type from User type, to begin let's create the EXACT SAME type.

type User = {
  name: string
  age: number
  userName: string
}

type UserCopy = {
  [Property in keyof User]: User[Property]
}

If you check Usercopy type you will see this

type UserCopy = {
    name: string;
    age: number;
    userName: string;
}

But why we are doing this, we create the same type as User ?!

I choose a basic example to see you how Mapped type is working. I will try to explain you what the f*ck is going on.

type UserCopy = {
  [Property in keyof User]: User[Property]
}

First We are iterate each key in the User type with the in keyof operator (frequently used when using mapped type), each key is contains in the variable Property ('name', 'age', 'userName')

After this, we assign the value of each property with the dedicated value in User[Property]. Visually we are gonna something like:

1) Start : [Property in keyof User]: User[Property]

Iterate to the first propery of User : [name]: User['name'], so we get the following typing name: string
Iterate to the second propery of User : [age]: User['age'], so we get the following typing age: number
Iterate to the last propery of User : [userName]: User['userName'], so we get the following typing userName: string

2) After iterating on each key, we get a new Type that is the same type as User !

Edit value from type to type

We can also edit the property value type like :

type UserCopy = {
  [Property in keyof User]: boolean
}

And get something like

type UserCopy = {
    name: boolean;
    age: boolean;
    userName: boolean;
}

We begin to see the power of Mapped type ! If we are adding a new property in User type, it will be automatically added to the UserCopy type without doing anything ! Don't forget, developer are Lazy ;)

Mapped type: mapping modifier

Let's play with Mapped type from now !

We will use mapping modifier on mapped type.

If I need to create the folowing type UserReadonlyProperty that is the User type with readonly flag on each keys. I can create something like.

type User = {
  name: string
  age: number
  userName: string
}

type UserCopy = {
  readonly [Property in keyof User]: User[Property];
};

// type UserCopy = {
    // readonly name: string;
    // readonly age: number;
    // readonly userName: string;
// }

Wow it's interesting ! We direclty assign readonly flag on each key ! We can also do the opposite thing ! We just need to use - before readonly to remove all readonly flag from type ~

type User = {
  readonly name: string
  readonly age: number
  readonly userName: string
}

type UserCopy = {
  -readonly [Property in keyof User]: User[Property];
};

// We Get this 👇
type UserCopy = {
    name: string;
    age: number;
    userName: string;
}

This is called mapping modifier and we have another mapping modifier that I need to show you, the Optional mapping modifier (?:).

type User = {
  name: string
  age: number
  userName: string
}

type UserCopy = {
  [Property in keyof User]?: User[Property];
};

// We Get this 👇
type UserCopy = {
    name?: string | undefined;
    age?: number | undefined;
    userName?: string | undefined;
}

As you can see we can add 'readonly' and 'optionnal' flag on key but we can also remove them ! By using the (-) flags: [Property in keyof User]-?: User[Property]

type User = {
  name?: string
  age?: number
  userName: string
}

type UserCopy = {
  [Property in keyof User]-?: User[Property];
};

// We Get this 👇
type UserCopy = {
    name: string;
    age: number;
    userName: string;
}

And finally we can combine both 🔥

type User = {
  name: string
  age: number
  userName: string
}

type UserCopy = {
  readonly [Property in keyof User]?: User[Property];
};

// We Get this 👇
type UserCopy = {
    readonly name?: string | undefined;
    readonly age?: number | undefined;
    readonly userName?: string | undefined;
}

Mapped type: Key remaping with `as`

We see the mapping modifier, that is a very nice feature combined with mapped type ! So now let's go more deeper in mapped type

Literals string

We can remaping key using literals string !

type User = {
  name: string
  age: number
  userName: string
}

type RenameKey<Type> = {
  [Property in keyof Type as `canUpdate${string & Property}`]: Type[Property]
}

type UserCopy = RenameKey<User>

// We Get this 👇
type UserCopy = {
    canUpdatename: string;
    canUpdateage: number;
    canUpdateuserName: string;
}

Use as permits to change the key value and keep it in the new value !

Let's destructure the synthax step by step.

1) We iterate through Type key's, so we get name, age and userName.

2) In each iteration, we rename the key value as canUpdate${Property}, so we are getting

canUpdatename
canUpdateage
canUpdateuserName

2.5) If we pay attention on the synthax, we can see the {string & Property} synthax. Why are we needing to use string value here ? I will create a **dedicated article on this, but to summarize it, we need to tell to TS that the key is a string and not a symbol, because we cannot use symbol in literals string (other key type like number of bingint will be corce to string)

As you can see, remaping key is very powefull combined to mapped type. But there is a "little" issue here, we get canUpdatename not canUpdateName.

How can we achieve this ? 🧐

Intrinsic string

To help with string manipulation, TypeScript includes a set of types which can be used in string manipulation and we are going to use it now in order to transform canUpdatename to canUpdateName.

type User = {
  name: string
  age: number
  userName: string
}

type Copy<Type> = {
  [Property in keyof Type as `canUpdate${Capitalize<string & Property>}`]: Type[Property];
};

type UserCopy = Copy<User>

// We Get this 👇
type UserCopy = {
    canUpdateName: string;
    canUpdateAge: number;
    canUpdateUserName: string;
}

We do it ! Use intrinsic string allow us to Capitalize string value ! Here we capitalize the Key value from User type.

We can also use intrinsic string out of mapped type context.

type LowercaseGreeting = "hello, world"
type Greeting = Capitalize<LowercaseGreeting> //Hello, world

There are other Intrinsic string here

Type utils

I repeat it again, but Mapped type are powerfull, we can rename each key from a type to create another type, we can use intrinsic string to manipulate string.

There is another things to do with them ;)

We can use Type Utils ! (if you don't know what is this, check my last article about Typescript tips or go here)

If we need to exclude a set of keys from a type to create a transformed type, we can use mapped type combined with Type Utils !!

type User = {
  name: string
  age: number
  userName: string
}

type CopyWithoutKeys<Type, Keys> = {
  [Property in keyof Type as Exclude<Property , Keys>]: Type[Property];
};

type UserCopyWithoutNameAndUsername = CopyWithoutKeys<User, 'name' | 'userName'>

// We Get this 👇
type UserCopyWithoutNameAndUsername = {
    age: number;
}

I think you get the Mapped type synthax and concept. And of course we can use all features that we seen before !

Bonus : Get all values type from a Mapped type

A bonus for all people that read until this section.

You can get all key's values type from mapped type (and type)

type User = {
  name: string
  age: number
  userName: string
  isAdmin: boolean
}

type CopyWithoutKeys<Type> = {
  [Property in keyof Type]: Type[Property];
};

type UserCopy = CopyWithoutKeys<User>

type UserCopyValueTypes = UserCopy[keyof UserCopy] // string | number | boolean

Note that I added isAdmin key without adding it in UserCopy type, this is the magic of Mapped Type ;)

Advanced concept with Mapped type

Never as value in key/pair

Let's see what happened when you use Never as key/value with mapped type !

Never as key with mapped type

If you add a condition during key iteration when using mapped type with a never case, it will produce something cool

type isA<T> = T extends 'a' ? never : T

type To<T> = {
    [P in keyof T as isA<P>]: T[P]
}

type Toto = To<{ a: 1; b: 2; c: 3 }> // { b: 2; c: 3; }

When you set a key with the never value, it will be Omit from the final type !

Never as value with mapped type

As we seen before, using never can lead to some usefull tricks about mapped type, but what is happening if you are using never as value ?

type To<T> = {
    [P in keyof T]: T[P] extends never ? never : P
}

type Toto = To<{ a: 1; b: 2; c: never }> // {a: "a" b: "b" c: never;}

As you can see, never as value is not Omit like never as key.

Use never as value can be used to remove some key/value depending on a condition, so if you need to do this, use your condition at key level !

// type PropertyKey = string | number | symbol 
type isA<T extends Record<PropertyKey, unknown>, P extends PropertyKey> = T[P] extends 1 // Your condition
  ? never : P

type To<T extends Record<PropertyKey, unknown>> = {
    [P in keyof T as isA<T,P>]: T[P]
}

type Toto = To<{ a: 1; b: 2; c: 2 }> // {b: 2;c: 2;}

In the example above, we remove all key/value with a value equal to 1, we add the condition at the key level, so the never value will be automatically Omit !

Union type with value

If you have any issue about this kind ot error

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette: Record<Colors, string | RGB> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

const redComponent = palette.red.at(0); // Property 'at' does not exist on type 'string | RGB'.

You should read my last article about satisfies operator !

I hope you like this reading!

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

🇫🇷🥖 For french developper you can check my YoutubeChannel

And you can mark 🔖 this article!

How I improve my skills in Typescript #5 : Satisfies operator

Code Oz — Thu, 09 Mar 2023 11:31:54 +0000

I will share with us some tips that improved my skill in Typescript ! Today we will learn satisfies operator that appear in the 4.9 TS Update !

A "Boring" error

Let's go on the common error when using Record with multiple value.

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette: Record<Colors, string | RGB> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

const redComponent = palette.red.at(0); // Property 'at' does not exist on type 'string | RGB'.

Hm... It's really boring, we cannot direclty use array methods since Typescript don't know if red property is a string or RGB type ! It's because we use Record<Colors, string | RGB>.

Typescript cannot narrow the correct type between string and RGB.

First solution: Narrow it

We can narrow the type !

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette: Record<Colors, string | RGB> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

function setColor(color: RGB | string) {
    if (color instanceof Array) {
      return color.forEach(); // We can use array methods
    } else {
      return color.toUpperCase(); // It's a string ! So we can use String methods
    }
}

It's a solution but we need to add running code for typing things.

Second solution: No type

You can fix the issue with removing type.

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

const redComponent = palette.red.at(0);

It's also a "bad" solution, why ? You have no type, and you can add wrong key or misstypo thing !

const palette = {
    red: [255, 0, 0],
    green: null, // It should throw error
    bleu: [0, 0, 255] // It should throw error since it's not 'bleu' but 'blue'
};

Third solution: as const

Brief introduction to as const. as const is used to block any editing on a variable, like a const assignement. This bloking allow typescript to narrow the correct type with more details.

const a: string = 'hello' // is string
const b = 'hello' as const // is 'hello'

Let's try !

const palette = {
    "red": "yes",
    "green": false,
    "fakeKey": false, // It should throw error
    "bleu": "kinda", It should throw error
} as const;

So it's like the old solution, there is no strict typing ! So it can leads to wrong key or misstypo !

Last solution: Create specific type from the basic type

In order to have a correct Narrowing, you can also create specific sub type for each object.

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type One = Record<"red", RGB> & Record<"green" | "blue", string>

const palette: One = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: "#00ff00"
}

palette.red // RGB
palette.blue // string

It could be great since we have a correct narrowing ! But if you have a lot of key and value, I should say : Good luck my friend.

So it's the time...

Satisfies, here we go

The new satisfies operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.

TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.

As an example, we could use satisfies to validate that all the properties of palette are compatible with string | number[]

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>

palette.red // RGB !
palette.green // string !

It caught all possible error about typing,

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    wrongKey: "#00ff00", // Catch Error !
    bleu: [0, 0, 255], // Catch Error !
} satisfies Record<Colors, string | RGB>

palette.green = [0, 0, 255] // ! green is basically string, it cannot be RGB !

We solve the problem !

If I should give a short definition about satifies operator, it should be the following:

satisfies operator check a type like Record<string, A | B>, and narrow the correct type between A | B for each key

Bonus, satisfies + as const

You can add all benefits of as const combinated with satifies.

In this example:

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>

palette.red is RGB, not [255, 0, 0]. It's normal since we can edit palette.red with another RGB value like [255, 255, 255] !

If you need to have the strict value type, you can use as const.

type Colors = "red" | "green" | "blue";
// We use Readonly utils type for using as const
type RGB = Readonly<[red: number, green: number, blue: number]>

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} as const satisfies Record<Colors, string | RGB>

palette.red // [255, 0, 0]
palette.red = [255, 255, 0] // throw error since we cannot edit an property that is constant

I hope you like this reading!

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

🇫🇷🥖 For french developper you can check my YoutubeChannel

And you can mark 🔖 this article!

Javascript academy #2: Closures

Code Oz — Fri, 03 Dec 2021 14:01:59 +0000

Welcome to this new academy! In this I will NOT explain you javascript from scratch, the aim of this javascript academy is to explain you some concept in javascript that will help you to understand javascript engine!

Today I will teach you what is a Closure?

Short Definition

A Closure is a function that can access to variable outer its own scope.

🤔...

Ok let's take an example!

let b = 5

function toto(a) { return a + b }
toto(1) // 6

When the JS Engine will pass to the function, it will check for each variable if this variable is available in the current context, here only the variable a is available since it's the parameters.

But when it will check the b variable, it will check that this variable is not available in the function context! So it will check if this variable is available in the outer context!

This is called a Closure!

But the JS Engine need to make some tricks in order to keep the outer variable access in the function!

In fact JS Engine will store the outer variable (b) in the memory heap! So it keep a reference into this variable and when we will invoke the function, the variable will be available!

In fact this outer variable is store in an object name Lexical environment.

What is the `Lexical environment` ?

Lexical environment only exists “theoretically”! It grant all thing that a function need to have in order to be invoked! It's composed in 2 parts:

Environment Record that will store local variable.
Reference to the outer variable used in this function.

Now let's look how JS Engine manage variable scope in function

const toto = 5 // declared in the global scope

function hello () = {
   let a = 35
   let toto = 45
   console.log(a + toto)
}

hello() // 80

Why in the example above when we are calling console.log(a + toto) the value of toto is 45 and not 5?

When we will invoked a function, JS Engine will check if the variable is in the current context (Environment Record), in this case it will take this value, otherwise it will check if the variable exist in the outer context until reaching the Global Scope.

Another example to understand this behavior!

const toto = 'toto global | ' // declared in the global scope
const b = 'b global | '

function hello () {
   const a = 'a hello | '
   const toto = 'toto hello | '
   const c = 'c hello | '

   return function hey () {
      const c = 'c hey | '
      console.log(a + toto + b + c)
   }
}

hello()() // a hello | toto hello | b global | c hey |

Do you see the logic know?

The purpose of `Closure`

It use more ressource, so why use closure?

Moreover we can create side effect!

let toto = 55

function change() {
   toto = 69
}

change()
console.log(toto) // 69

But you can encapsulate data and create some secret & protected variable!

function hello() {
   let counter = 0
   return function () {
      counter++
      console.log(counter)
   }
}

const upCounter = hello()
upCounter() // 1
upCounter() // 2
upCounter() // 3

Your variable is safe and you can only change it by the function return by hello!

Moreover, each instance of hello() has its own context!

const upCounter1 = hello()
const upCounter2 = hello()

upCounter1() // 1
upCounter1() // 2

upCounter2() // 1

Quizz about Closure

const arrFuncs = []

for(var i = 0; i < 5; i++) {
  let toto = function () {
    return i
  }

  arrFuncs.push(toto)
}

console.log(i) // i is 5

arrFuncs.forEach(arrFunc => console.log(arrFunc())) // All logs

Why it's logging 5 and not 0, 1, 2, 3, 4 ?!

Let understand this step by step!

for(var i = 0; i < 5; i++)

equal to

var i
for(i = 0; i < 5; i++)

Since we are using var, the variable i is hoisted to the global scope!

So when we are doing

  let toto = function () {
    return i
  }

We are using toto function as Closure!

And as we know, closure used reference for outer variable(var i is an outer variable since it's declares on global scope)

So when we will execute each closure (during the forEach) we will get the variable value from the reference, and the current value at this point is 5!

So this is why we console log 5 five times!

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

3 Ways to CENTER a div in CSS

Code Oz — Wed, 24 Nov 2021 15:11:19 +0000

3 ways to center a div in HTML/CSS!!

With Position

/* Using positions */

.parent {
    position: relative;
}
.child {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div
     class="parent"
     style="background: blue; width: 500px; height: 250px;"
     >
    <div
         class="child"
         style="color: white;"
         >
      I'm center  
    </div>
</div>

With Flexbox

/* Using flexbox */
.container-flexbox {
    align-items: center;
    display: flex;
    justify-content: center;
}

<div
     class="container-flexbox"
     style="background: green; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center  
    </div>
</div>

With Grid

/* Using Grid */

.container-grid {
    display: grid;
    place-content: center;
}

<div
     class="container-flexbox"
     style="background: orange; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center  
    </div>
</div>

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

You MUST store this Javascript Operator Index

Code Oz — Thu, 18 Nov 2021 18:04:09 +0000

Here is a list of javascript operator and how to use it!

You should mark this and use it when you need to know what is this operator!

In order to naviguate, you can make a cmd + f or ctrl + f and put the operator that you need and put : after this.

Example: ...: if I'm looking for what is ... operator

🚨 Popularity is defined by my OWN usage.

Ambidextrous operator

`+`: addition | unary plus

Popularity: ★★★★☆

If you use `+` operator BEFORE operand, it will be used as `unary plus operator`.

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.

const x = 1
const y = -1

console.log(+x)
// expected output: 1

console.log(+y)
// expected output: -1

console.log(+'')
// expected output: 0

console.log(+true)
// expected output: 1

console.log(+false)
// expected output: 0

console.log(+'hello')
// expected output: NaN

📝 Note: If you try to use it with a string that is not a number, it will return NaN (not a number)

If you use `+` operator in other context will be used as `addition operator`.

It Produces the sum of numeric operands except for string

📝 Note: It will convert boolean to number, object to number

console.log(2 + 4) // 6
console.log(2 + true) // 3

When you use it with string it will make a string concatenation

const name = 'code oz'
console.log('hello ' + 'my name is ' + name)

📝 Note: you should use template litterals string instead of concatenation

`-`: subtraction | unary negation

Popularity: ★★★★☆

If you use `-` operator BEFORE operand, it will be used as `unary negation operator`.

The unary negation operator precedes its operand and negates it.

📝 Note: It will convert boolean to number, object to number & string to number

const a = 5
console.log(-a) // -5
console.log(-'1') // -1

📝 Note: If you try to use it with a string that is not a number, it will return NaN (not a number)

If you use `-` operator in other context will be used as `subtraction operator`.

It subtracts the two operands, producing their difference.

console.log(5 - 3)
// expected output: 2

console.log(3.5 - 5)
// expected output: -1.5

console.log(5 - 'hello')
// expected output: NaN

console.log(5 - true)
// expected output: 4

`...`: spread | rest

Popularity: ★★★★☆

If you use `...` operator as function argument during execution, it will turns array into a list of arguments. In this context it's called `Spread operator`.

let arr = [3, 5, 1]

Math.max(...arr) // 5 (spread turns array into a list of arguments)

You can use `...` operator in another way that is the `opposite of turning array into a list`, it's when you convert `some item into an array`!

It allows us to have an unlimited number of parameter for this function! since it will convert the arguments (list of item) into an array that is the argument!

// rest parameter is handle as array in the function
const add = (...rest) => {
   return rest.reduce((total, current) => total + current)
}

// Nice your function can handle different number of parameters !
add(1, 2, 3)
add(1, 2, 3, 4, 5)

You can also use it for extracting values from array or object

// We extract the first Item of the array into the variable and the others variable in an array named others
const [ firstItem, ...others ] = [ 1, 2, 3, 4 ]
firstItem // 1
others // [ 2, 3, 4 ]

const toto = { a: 1, b: 2, c: 3 }
const { a, ...others } = toto
a // 1, we extract the a key from toto object
others // { b: 2, c: 3 }, we extract other key in the object thanks to rest operator

📝 Note: When you are doing const toto = { ...anotherObject } it's equal to const toto = Object.assign({}, anotherObject)

Summarize:

Spread operator: Transform arrays into list of arguments.

Rest operator: Transform list of arguments into an array.

Logical operator

Thing to know: All value in Javascript are falsy or truthy value, it means that you can make Boolean(any value), and you will get boolean value. In Javascript all value are truthy value except 0, null, undefined, NaN, empty string

`&&`: logical AND

Popularity: ★★★★★

Use to check if all value (in general value are condition) are truthy.

It will return the first value falsy, otherwise it will return the final value.

const isTrue = true
const isFalse = false


const value = isFalse && isTrue // will return false 
const valueBis = isTrue && isFalse // will return false

const toto = 5 && 3 && 1 // will return 1 since all value before are true (5 & 3)

const tutu = 5 && 0 && 2 // will return 0 since it's the first falsy value

if (firstCondition && secondCondition) { console.log('hello') } // console log will be shown only if both condition are true!

`&&=`: logical AND assignement

Popularity: ★☆☆☆☆

Value is assigned only if value passed is truthy.

let toto = 0
let tutu = 2

toto &&= 5 // toto value will be NOT changed since toto is falsy (0)
tutu &&= 3 // tutu value will be replaced by 3 since tutu is trusly (2)

// toto &&= 5 It's a shortcut of 👇

let toto = 0 

toto = toto && 5

`||`: logical OR

Popularity: ★★★★☆

Use to check if one value (in general value are condition) are truthy among a set of value.

It will return the first value truthy, otherwise it will return the final value.

const isTrue = true
const isFalse = false

const value = isFalse || isTrue // will return true 
const valueBis = isTrue || isFalse // will return true

const toto = 5 || 3 || 1 // will return 5 since it's the first truthy value

const tutu = 0 || 2 || 5 // will return 2 since it's the first truthy value

if (firstCondition || secondCondition) { console.log('hello') } // console log will be shown if one condition matches!

`||=`: logical OR assignement

Popularity: ★☆☆☆☆

Value is assigned only if value passed is falsy.

let toto = 0
let tutu = 2

toto ||= 5 // toto value will be replaced by 5 since toto is falsy (0)
tutu ||= 3 // tutu value will NOT changed since tutu is not a falsy value (2)

// toto ||= 5 It's a shortcut of 👇

let toto = 0 

toto = toto || 5

`??`: logical Nullish Coalescing

Popularity: ★★★☆☆

Returns its its right-hand side operand when its left-hand side operand is null or undefined (nullish value).

const toto = 0 ?? 55 // 0 since 0 is not equal to nullish value.
const tutu = null ?? 'hello' // 'hello' since the right-hand side is equal to `null`
const tata = undefined ?? 55 // '55 since the right-hand side is equal to `undefined`
const titi = null ?? undefined // undefined since the right-hand side is equal to `null`

⚠️ Be careful: ?? operator is different of ||, so when you need to assign a value depending on other value, you should pick the correct operator!

const toto = 0 || 55 // 55 since 0 is a falsy value
const titi = 0 ?? 55 // 0 since 0 is different of nullish value

const tutu = undefined || 55 // 55 since undefined is a falsy value
const tata = undefined ?? 55 // 55 since undefined is equal to nullish value

`??=`: logical Nullish assignement

Popularity: ★☆☆☆☆

Value is assigned only if value passed is equal to null or undefined (nullish).

let toto = null
toto ??= 55 // toto is equal to 55 since it's a nullish value (null)

let tutu = 90
tutu ??= 23 // toto is equal to 90 since it's not a nullish value (90)
// toto ??= 5 It's a shortcut of 👇

let toto = null

toto = toto ?? 5 // Equal to 5 since toto is equal to null

`!`: logical NOT

Popularity: ★★★★★

Swap a true value into false value and false value into true value.

It also convert any value to boolean value. So all truthy value become falsy value and vice versa.

💡 Tips: I use double logical operator a lot in order to convert any value to boolean! It's equal to use Boolean(any value)

console.log(!true) // false
console.log(!true) // true
console.log(!0) // false
console.log(!1) // true

console.log(!{}) // false
console.log(![]) // false
console.log(!undefined) // true

// My tips 👇
console.log(!!{}) // true, equal to Boolean({})
console.log(!![]) // true, equal to Boolean([])

if (!!value) { ... } // I use a lot in order to check if a value is defined or undefined! (Be careful, if the value is equal to `0` it will be false!)

Special operator

`?.`: Optional chaining

Popularity: ★★★★☆

It allows to accesses a property on an object without having to check if each reference in the chain is valid.

It's not really clear? Ok let's have a look 👇

const toto = { a: { b: 5 } }
toto.a // { b: 5 }
toto.a.b // 5
toto.a.b.c // undefined
toto.a.b.c.d // Uncaught TypeError: Cannot read properties of undefined

In fact in you try to access to a property on an undefined property, Javascript engine will trigger an error!

So to be safe we need to make something like 👇

const toto = { a: { b: 5 } }

if (toto.a && toto.a.b && toto.a.b.c && toto.a.b.c.d) {
    console.log(toto.a.b.c.d) // It's safe to use it since we check before if the property exist!
}

But it's not really convenient to make this, isn't?

So opional chaining is here to save us! 🦸‍♂️

You can try to access to a property without check if all property exist before as show above! You just need to use this operator on property, if the property doesn't exist, it will return undefined.

const toto = { a: { b: 5 } }
toto?.a?.b // 5
toto?.a?.b?.c?.d // undefined

`?`: Ternary

Popularity: ★★★★☆

Is the only operator in Javascript that requires two pseudo operand (? and :). It evaluate a condition depending on whether that condition is falsy or truthy! It's equivalent to if (...) & else (...).

console.log(true ? 55 : 10) // 55
console.log(0 ? 13 : 34) // 34

const toto = 2 > 1
console.log(toto ? 'ok' : 'not ok')

//  It's a shortcut of 👇

if (toto) {
    console.log('ok')
} else {
    console.log('not ok')
}

Comparator operator

`==`: Equality

Popularity: ★☆☆☆☆

It checks whether its two operands are equal, returning a Boolean result. Unlike the === (strict equality operator), it attempts to convert (make an implicit coercion) and compare operands that are of different types.

📝 Note: The mechanic of implicit coercion is not easy to understand but you can check it in details at this post https://dev.to/codeozz/implicit-coercion-in-javascript-neh

Here an exemple of how the implicit corecion is done! 👇

// 1) Not the same type so implicit coercion will be made
'24' == 24

// 2) Convert string into number so 
Number('24') == 24

// 3) We got an number so we can check value
24 == 24 // true !

In general you should use === (strict equality) and avoid this operator!

`===`: Strict Equality

Popularity: ★★★★★

It checks whether its two operands are equal, returning a Boolean result. Unlike the == (equality operator), the strict equality operator always considers operands of different types to be different.

console.log(1 === 1)
// expected output: true

console.log('hello' === 'hello')
// expected output: true

console.log('1' ===  1)
// expected output: false

console.log(0 === false)
// expected output: false

You should always use this operator instead of == (equality operator)!

`!=`: Inequality

Popularity: ★☆☆☆☆

It checks whether its two operands are not equal, returning a Boolean result. Unlike the !== (strict inequality operator), it attempts to convert and compare operands that are of different types.

console.log(1 != 1)
// expected output: false

console.log('hello' != 'hello')
// expected output: false

console.log('1' !=  1)
// expected output: false

console.log(0 != false)
// expected output: false

In general you should use !== (strict inequality) and avoid this operator!

`!==`: Strict Inequality

Popularity: ★★★★★

It checks whether its two operands are not equal, returning a Boolean result. Unlike the (!= inequality operator), the strict inequality operator always considers operands of different types to be different.

console.log(1 !== 1)
// expected output: false

console.log('hello' !== 'hello')
// expected output: false

console.log('1' !==  1)
// expected output: true

console.log(0 !== false)
// expected output: true

You should always use this operator instead of != (inequality)!

`>`: Greater than

Popularity: ★★★★☆

It returns true if the left operand is greater than the right operand, and false otherwise.

console.log(5 > 3)
// expected output: true

console.log(3 > 3)
// expected output: false

console.log('ab' > 'aa')
// expected output: true

`>=`: Greater than or Equal To

Popularity: ★★★★☆

It returns true if the left operand is greater than or equal to the right operand, and false otherwise.

console.log(5 >= 3)
// expected output: true

console.log(3 >= 3)
// expected output: true

console.log('ab' >= 'aa')
// expected output: true

`<`: Less than

Popularity: ★★★★☆

It returns true if the left operand is less than the right operand, and false otherwise.

console.log(5 < 3)
// expected output: false

console.log(3 < 3)
// expected output: false

console.log('aa' < 'ab')
// expected output: true

`<=`: Less than or Equal To

Popularity: ★★★★☆

It returns true if the left operand is less than or equal to the right operand, and false otherwise.

console.log(5 <= 3)
// expected output: false

console.log(3 <= 3)
// expected output: true

// Compare bigint to number (note: bigint is not supported in all browsers)
console.log(3n <= 5)
// expected output: true

console.log('aa' <= 'ab')
// expected output: true

Arithmetic operator

`+=`: Addition Assignment

Popularity: ★★★☆☆

Adds the value of the right operand to a variable and assigns the result to the variable.

let a = 5
let b = 3

b += a // b will be equal to 8, since we are adding 5 to b variable!

`-=`: Subtraction Assignment

Popularity: ★★★☆☆

Subtracts the value of the right operand to a variable and assigns the result to the variable.

let a = 5
let b = 3

b -= a // b will be equal to 2, since we are subtracting 5 to b variable!

`*`: Multiplication

Popularity: ★★★☆☆

Its produces the product of the operands.

let a = 5
let b = 3

let c = a * b // 15

`*=`: Multiplication Assignment

Popularity: ★★★☆☆

Multiple the value of the right operand to a variable and assigns the result to the variable.

let a = 5
let b = 3

b *= a // 15

`/`: Division

Popularity: ★★★☆☆

Its produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.

let a = 10
let b = 2

let c = a / b // 2

console.log(1 / 0) // Infinity

`/=`: Division Assignment

Popularity: ★★★☆☆

Divide the value of the right operand to a variable and assigns the result to the variable.

let a = 10
let b = 2

b /= a // 2

``: Exponentiation**

Popularity: ★★★☆☆

Its returns the result of raising the first operand to the power of the second operand. It is equivalent to Math.pow, except it also accepts BigInts as operands.

let a = 10
let b = 2

let c = a ** b // 100, it equals to 10^2 or Math.pow(10, 2)

`=`: Exponentiation Assignment**

Popularity: ★★★☆☆

It raises the value of a variable to the power of the right operand.

let a = 10
let b = 2

b **= a // 1024, it equals to 2^10 or Math.pow(2, 10)
a **= b // 100, it equals to 10^2 or Math.pow(10, 2)

`%`: Remainder (modulo)

Popularity: ★☆☆☆☆

Its returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.

let a = 10
let b = 3

let c = a % b // 1

More information about modulo in mathematic -> https://simple.wikipedia.org/wiki/Modulo_operation

`%=`: Remainder Assignment

Popularity: ★☆☆☆☆

It divides a variable by the value of the right operand and assigns the remainder to the variable.

let a = 10
let b = 3

a %= b // 1 it's equal to a % b

More information about modulo in mathematic -> https://simple.wikipedia.org/wiki/Modulo_operation

`++`: Increment

Popularity: ★★★☆☆

It increments (adds one to) its operand and returns a value.

You can use it in two ways:

As pre increment: It increment the value before the operation

let toto = 55

console.log(toto) // 55
console.log(++toto) // 56
console.log(toto) // 56

As post increment: It increment the value after the operation

let toto = 55

console.log(toto) // 55
console.log(toto++) // 55
console.log(toto) // 56

`--`: Decrement

Popularity: ★★★☆☆

It decrement (subtracts one to) its operand and returns a value.

You can use it in two ways:

As pre decrement: It decrement the value before the operation

let toto = 55

console.log(toto) // 55
console.log(--toto) // 54
console.log(toto) // 54

As post decrement: It decrement the value after the operation

let toto = 55

console.log(toto) // 55
console.log(toto--) // 55
console.log(toto) // 54

Bits operator

`&`: Bitwise AND

Popularity: ★☆☆☆☆

Returns a 1 in each bit position for which the corresponding bits of both operands are 1s.

⚠️ Be careful: Don't be confused between & and && operator! The && is the logical operator AND

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a & b) // 00000000000000000000000000000001

💡 Tips: If you need to check if a number is even, you can use numberVar & 1, if the result is equal to 0, your number is even!

`&=`: Bitwise AND assignment

Popularity: ★☆☆☆☆

It uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable.

let a = 5      // 00000000000000000000000000000101
a &= 3         // 00000000000000000000000000000011

console.log(a) // 00000000000000000000000000000001

`~`: Bitwise NOT

Popularity: ★☆☆☆☆

It inverts the bits of its operand. Like other bitwise operators, it converts the operand to a 32-bit signed integer

const a = 5     // 00000000000000000000000000000101
const b = -3    // 11111111111111111111111111111101

console.log(~a) // 11111111111111111111111111111010
// expected output: -6

console.log(~b) // 00000000000000000000000000000010
// expected output: 2

`|`: Bitwise OR

Popularity: ★☆☆☆☆

It returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s.

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a | b) // 00000000000000000000000000000111
// expected output: 7

`|=`: Bitwise OR assignment

Popularity: ★☆☆☆☆

It uses the binary representation of both operands, does a bitwise OR operation on them and assigns the result to the variable.

let a = 5      // 00000000000000000000000000000101
a |= 3         // 00000000000000000000000000000011

console.log(a) // 00000000000000000000000000000111
// expected output: 7

`^`: Bitwise XOR

Popularity: ★☆☆☆☆

It returns a 1 in each bit position for which the corresponding bits of either but not both operands are 1s.

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a ^ b) // 00000000000000000000000000000110

`^=`: Bitwise XOR assignment

Popularity: ★☆☆☆☆

It uses the binary representation of both operands, does a bitwise XOR operation on them and assigns the result to the variable.

let a = 5      // 00000000000000000000000000000101
a ^= 3         // 00000000000000000000000000000011

console.log(a) // 00000000000000000000000000000110
// expected output: 6

`<<`: Left shift

Popularity: ★☆☆☆☆

Shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

const a = 5         // 00000000000000000000000000000101
const b = 2         // 00000000000000000000000000000010

console.log(a << b) // 00000000000000000000000000010100
// expected output: 20

`<<=`: Left shift assignment

Popularity: ★☆☆☆☆

Moves the specified amount of bits to the left and assigns the result to the variable.

let a = 5 // 00000000000000000000000000000101

a <<= 2   // 00000000000000000000000000010100

console.log(a)
// expected output: 20

`>>`: Right shift

Popularity: ★☆☆☆☆

Shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.

Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

const a = 5          //  00000000000000000000000000000101
const b = 2          //  00000000000000000000000000000010
const c = -5         // -00000000000000000000000000000101

console.log(a >> b)  //  00000000000000000000000000000001
// expected output: 1

console.log(c >> b)  // -00000000000000000000000000000010
// expected output: -2

`>>=`: Right shift assignment

Popularity: ★☆☆☆☆

Moves the specified amount of bits to the right and assigns the result to the variable.

let a = 5      //  00000000000000000000000000000101

a >>= 2        //  00000000000000000000000000000001
console.log(a)
// expected output: 1

let b = -5     // -00000000000000000000000000000101

b >>= 2        // -00000000000000000000000000000010
console.log(b)
// expected output: -2

`>>>`: Unsigned Right shift

Popularity: ★☆☆☆☆

Shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded.

Zero bits are shifted in from the left.

The sign bit becomes 0, so the result is always non-negative. Unlike the other bitwise operators, zero-fill right shift returns an unsigned 32-bit integer.

const a = 5          //  00000000000000000000000000000101
const b = 2          //  00000000000000000000000000000010
const c = -5         // -00000000000000000000000000000101

console.log(a >>> b) //  00000000000000000000000000000001
// expected output: 1

console.log(c >>> b) //  00111111111111111111111111111110
// expected output: 1073741822

`>>>=`: Unsigned Right shift assignment

Popularity: ★☆☆☆☆

Moves the specified amount of bits to the right and assigns the result to the variable.

let a = 5 //  00000000000000000000000000000101

a >>>= 2  //  00000000000000000000000000000001
console.log(a)
// expected output: 1

let b = -5 // -00000000000000000000000000000101

b >>>= 2   //  00111111111111111111111111111110
console.log(b)
// expected output: 1073741822

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

6 Repos github you should mark as web developper!

Code Oz — Wed, 10 Nov 2021 17:47:49 +0000

Today I will share with you some repository Github that will help you to be more efficient for every developper!

🎨 CSS

A collection of tips to help take your CSS skills pro.

https://github.com/AllThingsSmitty/css-protips

📚 Cheatlists

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

https://github.com/LeCoupa/awesome-cheatsheets

There is a website that gather all sheets if you prefer: https://lecoupa.github.io/awesome-cheatsheets/

👨‍🔬 Algo

This repository contains JavaScript based examples of many popular algorithms and data structures.

https://github.com/trekhleb/javascript-algorithms

🧹 Clean code

Clean code for javascript

https://github.com/ryanmcdermott/clean-code-javascript

🌎 How web works

What happens behind the scenes when we type google.com in a browser?

https://github.com/vasanthk/how-web-works

📖 Free programming books

Get free programming ebooks.

https://github.com/EbookFoundation/free-programming-books

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

Enhance your JS Skill by using the correct array method

Code Oz — Fri, 05 Nov 2021 10:51:19 +0000

I saw a lot of junior developper using forEach when they need to handle array.

I will show you and help you to over-abuse of forEach by using the correct array methods depending on the current context!

forEach

When to use?

As I said before, you don't need to over-abuse of forEach. In some case forEach is a very good method.

If you need to iterate an array in order to make a specific action (for example console log each item).

You shouldn't use forEach every time you need to fill a new array (before doing this, check if you can use other methods)

👇

const items = [1, 2, 3, 4, 5]

items.forEach(item => console.log(item))

forEach DOESN'T return any value !!

// 
// ...
const toto = items.forEach(item => console.log(item))
toto // undefined

filter

When to use?

As named, it allow us to filter some value in your array depending on your condition.

Example 👇

For example if you want to remove odd number

❌ With forEach

const items = [1, 2, 3, 4]
const evenValue = []
items.forEach(item => {
   if (item % 2 == 0) {
      evenValue.push(item)
   }
})

✅ With filter

const items = [1, 2, 3, 4]

const evenValue = items.filter(currentValue => {
   return currentValue % 2 == 0
})

💡 When you are using filter you should return a boolean (the condition of filter) in each iteration. (otherwise JS Engine will coerce the returned value into boolean!)

map

When to use?

When you need to transform items from array to another array!

Example 👇

For example if you want to multiply all value in an array by 2.

❌ With forEach

const items = [1, 2, 3, 4]
const result = []
items.forEach(item => {
   result.push(item * 2)
})

✅ With map

const items = [1, 2, 3, 4]
const result = items.map(item => {
   return item * 2
})

💡 When you are using map you need to return an item (transformed item) in each iteration.

reduce

When to use?

When you need to get a single value from an array. This 'single value' can be an array.

Example 👇

For example if you want to sum all number in array.

❌ With forEach

const items = [1, 2, 3, 4]
let accumulator = 0

items.forEach(item => {
   accumulator += item
})

✅ With reduce

const items = [1, 2, 3, 4]

const sum = items.reduce((accumulator, currentValue) => {
   return accumulator += currentValue
}, 0)

💡 When you are using reduce you need to return the accumulator (value that is returned by the reduce method) in each iteration and you should also init this accumulator (in the example above we init the accumulator to 0)!

find

When to use?

When you need to find an item that fit a condition and you are using this item after.

const items = [1, 2, 3, 4]

const item = items.find(item => item === 3)

// ...

// Use item afterwards

some

When to use?

If you need to check if one of you item match a condition (like find) but you don't need to use the item afterward.

Example 👇

For example if you want to check if you array has the number 2.

Using find is bad if you don't use item afterward, or you just use item for checking if the value is undefined or not (to know if the condition has matched)

❌ With find

const items = [1, 2, 3, 4]
const item = items.find(item => item === 2)
if (item !== undefined) {
   // ...
}

✅ With some

const items = [1, 2, 3, 4]
const hasNumber2 = items.some(item => item === 2)
if (hasNumber2) {
   ...
}

💡 some return boolean if at least one item matched your condition

every

When to use?

every is similar to some, it will check if ALL of your items match your condition. Instead of some that will return true if only one item match the condition, every will return true only if all items match the condition!

TLDR;

As you can see you can use a lot of array methods depending on the context, so you can avoid to over-abuse of forEach!

It's also a good point to use methods depending on the current context for other developers that will read you code (for example if I see filter I know that we need to filter a value from this array)

A good point that I didn't show above, it's about the fact that you can combining array methods (except forEach since forEach doesn't return value).

So you can make this 👇

You need to filter odd value from array and multiply event number by 2.

const items = [1, 2, 3, 4]

const result = items.filter(item => item % 2 == 0 ).map(item => item * 2)

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

7 Nice API for your projects !

Code Oz — Sat, 30 Oct 2021 14:41:31 +0000

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other!

Today I will share with you some nice API to use for your projects!!

🍿 Movie database (IMDB)

https://developers.themoviedb.org/3/getting-started/introduction

If you need informations about movies, series, etc... You can use IMDB API that is very easy to use!

🥄 Food Recipes (spoonacular)

https://spoonacular.com/food-api/docs

Are you looking for recipes? Soonacular is a great api that will provide you some recipes for your next project!!

👽 Rick & Morty database

https://rickandmortyapi.com/documentation/

The Rick and Morty API is based on the television show Rick and Morty. You will have access to about hundreds of characters, images, locations and episodes !!

🩲 Random Advice

https://api.adviceslip.com/#top

Very fast api to use! It will provide you some random advice!

You can test it right now from this url https://api.adviceslip.com/advice

🥸 Fake User

https://randomuser.me/?ref=undesign

Do you need fake user for your website? This API will give you a list of fake user!

🤡 User icons (DiceBear)

https://avatars.dicebear.com/docs/http-api#options

DiceBear is an avatar library for designers and developers. You can test it fastly at this url for example: https://avatars.dicebear.com/api/male/john.svg?background=%230000ff

🐱 Cats fact

https://alexwohlbruck.github.io/cat-facts/

This app will combine APIs and Services from the web to do just one thing… send cat facts.

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

Javascript academy #1: Primitive value vs reference value

Code Oz — Fri, 22 Oct 2021 14:43:34 +0000

Today I will show you the difference between primitive value & reference value.

Primitive value

Primitive value are string, number, boolean, null, undefined and symbols.

Reference value

All others things like plain object {}, array, Map, etc...

How data is stored?

For Primitive value the value is store on the stack, in other word, in the current context!

For Reference value the value is store in the heap, it's a big storage that keep all objects and each object has it's own adress! (Like house in a village, each house has its own adress)

So in order to get the object through the Heap you need to use the adress of this object!

Fortunately you don't need to manage the adress yourself!

Declaration of variable

For Primitive value the variable store the value. So you manipulate the actual value stored in this variable.

let toto = 5
toto = 6
console.log(toto) // 6

For Reference value unlike primitive value when you manipulate an object you work on the reference of that object! So you store the reference of the object in the variable.

let toto = {}
toto.a = 'hello'
console.log(toto) // { a: 'hello' }

Copy a value

For Primitive value when you assign a variable that store primitive value it will copy the value into a new variable.

So if you modify the value into a variable, the other variable value will be not changed.

let a = 55
let b = a

a = 100
console.log(a) // 100
console.log(b) // 55

For Reference value when you assign a variable that store reference value it will copy the reference of this object into a new variable.

So if you modify the value into a variable, the other variable value will change! Since both variable share the same reference!

let a = {}
let b = a

a.toto = 'hello'
console.log(b) // { toto: 'hello' }

Working with function parameters

For Primitive value when you pass a variable that contains a primitive value as arguments of your function, it will copy the value of this variable.

So if you edit this value into the function, it will not change the value in the original variable!

let a = 55

const foo = function (arg) {
   arg = 100
   console.log(arg) // 100
}
foo(a)
console.log(a) // 55

For Reference value when you pass a variable that contains a reference value as arguments of your function, it will copy the reference of this variable.

So if you edit this value into the function, it will change the value in the original variable!

let a = { toto: 'hello' }

const foo = function (arg) {
   arg.toto = 'changed'
   console.log(arg) // { toto: 'changed' }
}
foo(a)
console.log(a) // { toto: 'changed' }

As you can see when you are working with reference value you can edit other variable that are sharing this reference value!

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

7 HTML attribute you should know right now!

Code Oz — Fri, 15 Oct 2021 13:52:52 +0000

If you are web developper you are using HTML for sure! You are using a lot of HTML attribute, but today you will learn some news!

bdo

The HTML element overrides the current directionality of text, so that the text within is rendered in a different direction ! You can use dir option to indicate this direction.

ltr -> Indicates that the text should go in a left-to-right direction
rtl -> Indicates that the text should go in a right-to-left direction.

<p>
    <bdo dir="ltr">This text will go left to right.</bdo>
</p>
<p>
    <bdo dir="rtl">This text will go right to left.</bdo>
</p>

kbd

If you need to show shortcut to your user, you should use kbd! It represents a span of inline text denoting textual user input from a keyboard.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render a browser page.</p>

details

The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

contenteditable

The contenteditable attribute specifies whether the content of an element is editable or not!

<p contenteditable="true">This is an editable paragraph.</p>

abbr

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS" and show the complete title when hover this tag.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

translate

Indicate to HTML is this content need to be translated or not (by google translate for example).

<p translate="no">CodeOz</p>

color picker

Yes as you just learn, you can easily create a color picker! 👇

<input type="color">

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

Webpack Academy #BONUS: Use webpack with Typescript, Vuejs & Sass

Code Oz — Thu, 14 Oct 2021 12:32:08 +0000

A little bonus for people that follows my webpack academy course!

I will show you how to add typescript with vuejs2 and Sass!

I will divide this article into 3 parts! You can only follow the first if you need to add only typescript into your project!

Add typescript

For adding typescript we will need to add a loader and install some dependencies!

We will install ts-loader that will handling .ts file!

We need to add tsconfig.json (ts-loader will use it for transpiling ts file into js file).

After this we will remove all file in our src/ in order to add index.ts (expect html file).

We need to use ts-loader in our webpack config!

    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/,
        }]
    },

Alias typescript & webpack

If you use alias in webpack, you need to do the same alias for tsconfig file!

webpack.config

    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },

tsconfig.json

"paths": {
   "@/*": ["./src/*"]
},

You can check all changes from this

Add vuejs 2

So now we will install vue2! We will add the vue-loader.

We will need to install another loader, if you remember during the first academy, I explain the goal of style-loader (it inject css into the DOM). We will need to replace it (we use it only in dev mode) with vue-style-loader! (it will do the same thing but for css in vue file!)

Ok so now we need to make 4 things!

the first is to indicate the alias of vue for webpack
the second is linked to typescript
the third is to add vue library as cdn
the last is to configure vue & test!

Alias vue (vue.esm.js)

In the webpack config

'vue$': 'vue/dist/vue.esm.js',

Adapt typescript with vue file

When typescript will handle vue file, it will have some trouble! Since it's not a ts file! But we need to transpile vue file into js file!

So when we declare our ts-loader we need to add this

options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}

We also need to create a file called vue-shims.d.ts, it will tell the TypeScript compiler that importing .vue files is OK. So you can import vue file without issue in .ts!

declare module "*.vue" {
    import Vue from "vue"
    export default Vue
}

Also, we need to put this file in the ts-config

    "files": [
        "./vue-shims.d.ts",
    ]

😅 We almost finish! Be brave 💪

Import vue with cdn

Go to the part dedicated to cdn in my academy if you need to know how it's working but you need to add vue cdn link for dev mode and the same but vue.min in prod mode.

Don't forget to add external property into the webpack.config

Config vuejs

We just need to configure vuejs config and we are done!

So first of all we need to create index.ts that will be the entry file of vue.

import Vue from "vue"
import App from "./app/App.vue"

Vue.config.productionTip = false

export const app = new Vue({
    el: "#app",
    render: h => h(App),
})

I prefer to split .vue to .ts, my vue file will include my style and template, the typescript file will include all component logic.

app.vue

<template>
<div class="toto">
    Hello there
</div>
</template>

<script lang="ts" src="./App.ts"></script>
<style scoped>
    .toto {
        color: blue;
    }
</style>

app.ts

import Vue from "vue"

export default Vue.extend({})

The last thing to do is to go to html file and create the div that will be used by vuejs (vue will use this div to inject its components).

As mentioned by the entry file, the id is app. So we just need to inject it into our html!

<div id="app"></div>

You can check all changes from this

SASS

You can skip vuejs part if you are only interested by SASS with webpack!

Let's add sass-loader to our project, we need to use it before handling css! Since Sass transpilers file .scss into .css!

We also need to change our regex for handling .scss file

test: /\.(sa|sc|c)ss$/,

Alias for style

I like to use alias for style files!

So we can go to it, but we need to add it to webpack config and typescript config!

After this, we can create our first .sass file.

$main-colors: #6096BA;
$hover: #45718D;
$active: #385A71;
$grey: #677681;
$light: #B7D0E1;
$black: #233947;

And use it to .vue

<style lang="scss" scoped>
    @import "~style/import.scss";
    div {
        background: $grey;
    }
</style>

Note: We also need to install sass packages!

I hope you like this BIG bonus!

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

5 Quizz explained in Javascript #1

Code Oz — Thu, 07 Oct 2021 14:58:21 +0000

Welcome to the first javascript quizz!

You can answer to the question and check the response with the explication!

Good luck!

1

const myself = {
  name: 'code__oz',
  skills: ['js', 'ts', 'vuejs', 'nodejs'],
  getName() {
    return this.name
  },
  getMySkills: () => this.skills,
}

console.log(myself.getName())
console.log(myself.getMySkills())

What is the output? 👇

A) code__oz and ['js', 'ts', 'vuejs', 'nodejs']
B) undefined and undefined
C) code__oz and undefined
D) undefined and ['js', 'ts', 'vuejs', 'nodejs']

.
..
...
....
.....
......
.......
.......

C → We have undefined value since we are using arrow function and this in the same context, so the this keyword refers to its current surrounding scope, unlike regular functions! In a browser context, this refer to window object!

2

let toto = { message: 'Hello' }
let tutu

tutu = toto
toto.message = 'Bye'
console.log(tutu.message)

What is the output? 👇

A) undefined
B) Bye
C) Hello
D) ReferenceError

.
..
...
....
.....
......
.......
.......

B → In JavaScript, all objects interact by reference when setting them equal to each other. So in this example toto and tutu share the same reference so if you change value from one, you will change the shared reference and you will indirectly change the value of the other variable.

3

let number = 0
console.log(number++)
console.log(++number)
console.log(number)

What is the output? 👇

A) 1 1 2
B) 1 2 2
C) 0 1 2
D) 0 2 2

.
..
...
....
.....
......
.......
.......

D -> The postfix unary operator ++:

Returns the value (this returns 0)
Increments the value (number is now 1)

The prefix unary operator ++:

Increments the value (number is now 2)
Returns the value (this returns 2)

This returns 0 2 2.

4

function sum(a, b) {
  return a + b
}

sum(2, '5')

What is the output? 👇

A) TypeError
B) NaN
C) "25"
D) 7

.
..
...
....
.....
......
.......
.......

C → JavaScript converts the number 2 into a string. It's because during the addition of a numeric type (2) and a string type ('5'), the number is treated like a string ! So we have '2' + '5' → '25'

5

setInterval(() => console.log('Hey !'), 5000)

What does the setInterval method return in the browser? 👇

A) a unique id
B) the amount of milliseconds specified
C) the passed function
D) undefined

What is the output? 👇

.
..
...
....
.....
......
.......
.......

A -> It returns a unique id. This id can be used to clear that interval with the clearInterval() function.

Tell me your score in comment! 👨‍🏫

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

DEV Community: Code Oz

How I improve my skills in Typescript #2 : Mapped Type

What is and why use Mapped Type ?

Mapped type: The basics

Create the same type

Edit value from type to type

Mapped type: mapping modifier

Mapped type: Key remaping with as

Literals string

Intrinsic string

Type utils

Bonus : Get all values type from a Mapped type

Advanced concept with Mapped type

Never as value in key/pair

Never as key with mapped type

Never as value with mapped type

Union type with value

How I improve my skills in Typescript #5 : Satisfies operator

A "Boring" error

First solution: Narrow it

Second solution: No type

Third solution: as const

Last solution: Create specific type from the basic type

Satisfies, here we go

Bonus, satisfies + as const

Javascript academy #2: Closures

Short Definition

What is the Lexical environment ?

The purpose of Closure

Quizz about Closure

3 Ways to CENTER a div in CSS

With Position

With Flexbox

With Grid

You MUST store this Javascript Operator Index

Ambidextrous operator

+: addition | unary plus

If you use + operator BEFORE operand, it will be used as unary plus operator.

If you use + operator in other context will be used as addition operator.

-: subtraction | unary negation

If you use - operator BEFORE operand, it will be used as unary negation operator.

If you use - operator in other context will be used as subtraction operator.

...: spread | rest

If you use ... operator as function argument during execution, it will turns array into a list of arguments. In this context it's called Spread operator.

You can use ... operator in another way that is the opposite of turning array into a list, it's when you convert some item into an array!

Logical operator

&&: logical AND

&&=: logical AND assignement

||: logical OR

||=: logical OR assignement

??: logical Nullish Coalescing

??=: logical Nullish assignement

!: logical NOT

Special operator

?.: Optional chaining

?: Ternary

Comparator operator

==: Equality

===: Strict Equality

!=: Inequality

!==: Strict Inequality

>: Greater than

>=: Greater than or Equal To

<: Less than

<=: Less than or Equal To

Arithmetic operator

+=: Addition Assignment

-=: Subtraction Assignment

*: Multiplication

*=: Multiplication Assignment

/: Division

/=: Division Assignment

**: Exponentiation

**=: Exponentiation Assignment

%: Remainder (modulo)

%=: Remainder Assignment

++: Increment

--: Decrement

Bits operator

&: Bitwise AND

Mapped type: Key remaping with `as`

What is the `Lexical environment` ?

The purpose of `Closure`

`+`: addition | unary plus

If you use `+` operator BEFORE operand, it will be used as `unary plus operator`.

If you use `+` operator in other context will be used as `addition operator`.

`-`: subtraction | unary negation

If you use `-` operator BEFORE operand, it will be used as `unary negation operator`.

If you use `-` operator in other context will be used as `subtraction operator`.

`...`: spread | rest

If you use `...` operator as function argument during execution, it will turns array into a list of arguments. In this context it's called `Spread operator`.

You can use `...` operator in another way that is the `opposite of turning array into a list`, it's when you convert `some item into an array`!

`&&`: logical AND

`&&=`: logical AND assignement

`||`: logical OR

`||=`: logical OR assignement

`??`: logical Nullish Coalescing

`??=`: logical Nullish assignement

`!`: logical NOT

`?.`: Optional chaining

`?`: Ternary

`==`: Equality

`===`: Strict Equality

`!=`: Inequality

`!==`: Strict Inequality

`>`: Greater than

`>=`: Greater than or Equal To

`<`: Less than

`<=`: Less than or Equal To

`+=`: Addition Assignment

`-=`: Subtraction Assignment

`*`: Multiplication

`*=`: Multiplication Assignment

`/`: Division

`/=`: Division Assignment

``: Exponentiation**

`=`: Exponentiation Assignment**

`%`: Remainder (modulo)

`%=`: Remainder Assignment

`++`: Increment

`--`: Decrement

`&`: Bitwise AND

`&=`: Bitwise AND assignment

`~`: Bitwise NOT

`|`: Bitwise OR

`|=`: Bitwise OR assignment

`^`: Bitwise XOR

`^=`: Bitwise XOR assignment

`<<`: Left shift

`<<=`: Left shift assignment

`>>`: Right shift

`>>=`: Right shift assignment

`>>>`: Unsigned Right shift

`>>>=`: Unsigned Right shift assignment