DEV Community: Oluwatobi Sofela

Latest Release: React YouTube Playlist v2

Oluwatobi Sofela — Mon, 08 Jan 2024 20:28:21 +0000

React YouTube Playlist version 2 is out! 🥳

Let's discuss the highlights.

Breaking Changes

This release comes with one breaking change.

Replace default import with named import. This change provides better compatibility with Node and Babel-like tools.

Other Changes

Replace EmotionJS dependency with inline styling.
Convert all configuration files to TypeScript.
Change the loading spinner's color to improve its contrast on dark and light background schemes.

How to Update the React YouTube Playlist Package

Here are the steps required to upgrade to the latest version:

Step 1: Install the latest version

npm install @codesweetly/react-youtube-playlist@latest

Alternatively, you can use Yarn or pnpm like so:

yarn upgrade @codesweetly/react-youtube-playlist --latest

pnpm update @codesweetly/react-youtube-playlist --latest

Step 2: Update the package's `import` syntax

Replace the package's default import statement with the named import syntax like so:

- import YouTubePlaylist from "@codesweetly/react-youtube-playlist";
+ import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";

How to Use the React YouTube Playlist Package

See the complete project-based guide to learn how to add the YouTubePlaylist package to your React applications. You can use the library with Vite, NextJS, Remix, or any other React app.

Latest Release: React Image Grid Gallery v2

Oluwatobi Sofela — Mon, 08 Jan 2024 18:48:45 +0000

React Image Grid Gallery version 2 is out! 🥳

Let's discuss the highlights.

Breaking Changes

This release comes with two breaking changes.

Replace default import with named import. This change provides better compatibility with Node and Babel-like tools.
Rename imgArray prop to imagesInfoArray.

Other Changes

Change compiler from Babel to TypeScript.
Remove Babel dependency.
Replace uniqid dependency with crypto.randomUUID.
Convert all configuration files to TypeScript.
Replace external CSS with inline styling.

How to Update the React Image Grid Gallery Package

Here are the steps required to upgrade to the latest version:

Step 1: Install the latest version

npm install react-image-grid-gallery@latest

Alternatively, you can use Yarn or pnpm like so:

yarn upgrade react-image-grid-gallery --latest

pnpm update react-image-grid-gallery --latest

Step 2: Update the package's `import` syntax

Replace the package's default import statement with the named import syntax like so:

- import ImageGallery from "react-image-grid-gallery";
+ import { ImageGallery } from "react-image-grid-gallery";

Step 3: Update the package's props

Update the required prop's name as follows:

  <ImageGallery
-    imgArray={imagesArray}
+    imagesInfoArray={imagesArray}
     columnWidth={230}
     gapSize={24}
  />

Note for Docusaurus Users

Wrap the ImageGallery component in <BrowserOnly> if you get a ReferenceError: crypto is not defined error during your build step.

Example:

import BrowserOnly from "@docusaurus/BrowserOnly";

function YourComponent() {
  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => {
        const ImageGallery = require("react-image-grid-gallery").ImageGallery;
        return (
          <ImageGallery
            imagesInfoArray={imagesArray}
            columnWidth={230}
            gapSize={24}
          />
        );
      }}
    </BrowserOnly>
  );
}

The <BrowserOnly> component tells Docusaurus to render the ImageGallery library only in the browser.

Note: This process is essential because the ImageGallery package uses the Web Crypto API. Therefore, BrowserOnly ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering).

How to Use the React Image Grid Gallery Package

See the complete project-based guide to learn how to add the ImageGallery package to your React applications. You can use the library with Vite, NextJS, Remix, or any other React app.

JavaScript Closures Explained with Examples

Oluwatobi Sofela — Mon, 08 Jan 2024 17:10:26 +0000

A closure is an inner function referencing one or more items in its lexical scope (definition area).

Note: An inner function is a function defined inside a block, module, or another function.

In other words, a closure is a function that retains access to its lexical scope's features even after its execution closes.

For instance, consider the following code:

function createProfile() {
  const myName = "Oluwatobi";
  function showName() {
    return myName;
  }
  return showName();
}
createProfile();

Try Editing It

showName() is the closure in the example above because:

It is an inner function.
It retains a reference to its lexical scope's variable.

Note:

The createProfile() function's body is showName()'s lexical scope.
The showName() function retained a reference to its lexical scope's state (variable's value) by calling myName.
The reason showName() is a closure is not because it was returned nor invoked within createProfile(). Instead, it is a closure because it is an inner function that retains a reference to its lexical scope's feature (that is, myName).
All closures have three scopes:
- Local scope: The space within the closure.
- Parent scope: The space of the closure's block, module, or parent function. In other words, the parent scope is the outer/enclosing environment.
- Global scope: The space containing all the scopes/code.

So, now that we know what a closure is, we can discuss how browsers will process createProfile()'s invocation.

How Do Browsers Process a Closure's Lexical Scope's Invocation?

Below is a walk-through of how JavaScript will process the createProfile() function's invocation.

1. Allocate memory

{ // This is the createProfile() function's opening block

The first thing JavaScript does when browsers invoke createProfile() is to allocate the memory it needs to process the function's invocation.

2. Parse the variable's declaration

const myName;

JavaScript's second task is to analyze myName's declaration, following the hoisting principles.

3. Parse the function's declaration

function showName() {}

The computer's third step is to analyze showName()'s declaration, following the hoisting principles.

4. Initialize the variable

myName = "Oluwatobi";

The computer initializes myName with the "Oluwatobi" string value, following the hoisting principles.

5. Return the invoked function's output

return showName();

The fifth thing JavaScript does is to return showName()'s output to the createProfile() function.

6. Return the variable's content

return myName;

JavaScript returns the variable's value to the showName() function's invocation.

7. Empty the allocated memory

} // This is the createProfile() function's closing block

The computer ends the createProfile() function's execution and empties the allocated memory. Therefore, all the values JavaScript stored in createProfile()'s allocated memory will vanish forever!

So, what makes closures unique? Let's discuss this now.

What Makes Closures Unique?

No external scope can access a function's data by default, but a closure's scope can.

For instance, the snippet below returned an error because the global scope cannot access the createProfile() function's space.

// Define the createProfile function:
function createProfile() {
  const myName = "Oluwatobi";
}

// Call myName variable:
myName;

// The call above will return:
// Uncaught ReferenceError: myName is not defined

Try Editing It

You can, however, use closures to access createProfile()'s scope from another environment.

Here's an example:

// Define the createProfile function:
function createProfile() {
  const myName = "Oluwatobi";
  function showName() {
    return myName;
  }
  return showName;
}

// Invoke the createProfile and store its output in a variable:
const firstName = createProfile();

// Check the content inside the firstName variable:
firstName;

// The call above will return:
// function showName() {
//   return myName;
// }

// Invoke the function stored in the firstName variable:
firstName();

// The invocation above will return:
// "Oluwatobi"

Try Editing It

Note: createProfile() returned its inner function (the closure)—not the result of an invocation.

Question: Since the firstName variable contains only a function (showName()), how did the showName external function get access to createProfile()'s variable?

Answer: The reason the firstName variable's function gained access to createProfile()'s variable is because:

The firstName variable's function is a closure.
Closures retain reference to their lexical scope's data—even after JavaScript has closed their definition space's execution.

Let's discuss the reasons above in more detail.

How Do Closures Retain Access to Their Lexical Scope's Features?

Closures retain access to their lexical scope's features by storing referenced items in-memory.

For instance, reconsider our previous example:

// Define the createProfile function:
function createProfile() {
  const myName = "Oluwatobi";
  function showName() {
    return myName;
  }
  return showName;
}

// Invoke createProfile and store its output in a variable:
const firstName = createProfile();

// Check the content inside the firstName variable:
firstName;

// The call above will return:
// function showName() {
//   return myName;
// }

// Invoke the function stored in the firstName variable:
firstName();

// The invocation above will return:
// "Oluwatobi"

Try Editing It

Here's is how the computer will analyze the snippet above:

1. Allocate memory

{ // This is the createProfile() function's opening block

The first thing JavaScript does when browsers invoke createProfile() is to allocate the memory it needs to process the function's invocation.

2. Parse the variable's declaration

const myName;

JavaScript's second task is to analyze myName's declaration, following the hoisting principles.

3. Parse the function's declaration

function showName() {}

The computer's third step is to analyze showName()'s declaration, following the hoisting principles.

4. Initialize the variable

myName = "Oluwatobi";

The computer initializes myName with the "Oluwatobi" string value, following the hoisting principles.

5. Return the function

return showName;

The fifth thing JavaScript does is to return the showName function to createProfile().

Note the following:

The computer will store the returned showName function in the firstName variable since that's where the createProfile() invocator lives.
JavaScript will also store myName's value in the firstName variable's memory because showName referenced it.
The firstName variable's copy of showName and myName are new code instances the computer created during createProfile()'s execution.
Browsers will not run the "return myName" code at this stage because we did not invoke showName.

6. Empty the allocated memory

} // This is the createProfile() function's closing block

The computer ends the createProfile() function's invocation and empties the allocated memory. Therefore, all the values JavaScript stored in createProfile()'s allocated memory will vanish forever!

TLDR

The main gist of the walk-through above is this:

The const firstName = createProfile() statement made the computer do the following:
- Invoke createProfile().
- Store the invocation's returned function in the firstName variable.
- Store myName's current state (which showName() referenced) in the firstName variable's memory.

Therefore, here is what will happen whenever you invoke firstName's function:

1. Allocate memory

{ // This is the showName() function's opening block

The first thing JavaScript does when browsers invoke showName() is to allocate the memory it needs to process the function's invocation.

2. Return the variable's content

return myName;

The computer analyzes the return statement by doing the following:

It checks if there's a myName variable definition locally within the showName() function's local scope. But there's none, so the computer moves up to check the next scope—the firstName variable's environment.
JavaScript searches for myName in the firstName variable's memory. Fortunately, it found myName there! Therefore, the computer gets myName's content ("Oluwatobi") and returns it.

Note: The computer found myName in firstName's memory because JavaScript also stored all the data showName() referenced while storing showName inside firstName.

3. Empty the allocated memory

} // This is the showName() function's closing block

The computer ends showName()'s execution and empties the allocated memory. Therefore, all the values JavaScript stored in showName()'s allocated memory will vanish forever!

Note:

The myName variable will persist even after the computer closes showName()'s execution. This is because JavaScript stored myName in firstName's memory—not inside showName()'s memory.
The computer will empty firstName's memory when it closes its scope's execution.

So, now that we know how closures retain access to their lexical scope's features, we can discuss a few more examples.

Example 1: Generate Prepublication Years

// Define the generateYear function:
function generateYear() {
  let publicationYear = 2023;
  function decreasePublicationYear() {
    return --publicationYear; // The -- operator subtracts one from the publicationYear variable.
  }
  return decreasePublicationYear;
}

// Invoke generateYear and store its output in a variable:
const prePublicationYear1 = generateYear();

// Invoke another instance of generateYear and store its output in a variable:
const prePublicationYear2 = generateYear();

// Invoke the function stored in the prePublicationYear1 variable:
prePublicationYear1();

// The invocation above will return: 2022

// Invoke the prePublicationYear1's function again:
prePublicationYear1();

// The invocation above will return: 2021

// Invoke the prePublicationYear1's function one more time:
prePublicationYear1();

// The invocation above will return: 2020

// Invoke the function stored inside the prePublicationYear2 variable:
prePublicationYear2();

// The invocation above will return: 2022

Try Editing It

The snippet above consistently returns a value that is one (1) less than the previous year because:

JavaScript also stored all the data decreasePublicationYear() referenced while storing decreasePublicationYear inside prePublicationYear.
prePublicationYear's copy of the publicationYear variable remains accessible even after the computer closes decreasePublicationYear()'s execution.

Note:

prePublicationYear1 and prePublicationYear2 have different versions of generateYear()'s output because the computer creates new instances during each generateYear()'s execution.
The subtraction happens on prePublicationYear's copy of the publicationYear variable—not on the one inside the generateYear() function.
The --publicationYear code uses the decrement operator to subtract one from the publicationYear variable and return the value after the decrement.

Example 2: Generate the Multiple of a Constant

// Define the generateMultipleOfX function:
function generateMultipleOfX(x) {
  return function multiplyXByY(y) {
    return x * y;
  };
}

// Invoke generateMultipleOfX and store its output in a variable:
const multipleOfX = generateMultipleOfX(3);

// Invoke the multipleOfX variable's function:
multipleOfX(2);

// The invocation above will return: 6

// Invoke the multipleOfX variable's function again:
multipleOfX(10);

// The invocation above will return: 30

// Invoke the multipleOfX variable's function one more time:
multipleOfX(1);

// The invocation above will return: 3

Try Editing It

The snippet above consistently multiplies multipleOfX's argument by 3 because:

JavaScript also stored all the data multiplyXByY() referenced while storing multiplyXByY() inside the multipleOfX variable. (In the instance above, multiplyXByY referenced 3 (parameter x's value)).
multipleOfX's copy of the value 3 remains accessible even after the computer closes multiplyXByY()'s execution.

Note:

The multiplication happened on multipleOfX's copy of generateMultipleOfX's argument.
Your closure can be an anonymous function. We named the ones above for ease of referencing.

Example 3: Create a Publication Year Calculator

// Define the publicationYearCalculator function:
const publicationYearCalculator = (function () {
  let publicationYear = 2023;
  function updatePublicationYear(value) {
    publicationYear += value;
  }
  return {
    addOne: function () {
      updatePublicationYear(1);
    },
    subtractOne: function () {
      updatePublicationYear(-1);
    },
    defaultYear: function () {
      return publicationYear;
    },
  };
})();

// Check the publicationYearCalculator variable's content:
publicationYearCalculator;

// The invocation above will return:
// {addOne: ƒ, subtractOne: ƒ, defaultYear: ƒ}

// Invoke publicationYearCalculator's defaultYear() method:
publicationYearCalculator.defaultYear();

// The invocation above will return: 2023

// Invoke publicationYearCalculator's addOne() method:
publicationYearCalculator.addOne();

// The invocation above will return "undefined" because
// we programmed addOne() to invoke updatePublicationYear()
// only rather than return the result of the invocation.
// So, addOne() will increment publicationYear by one but
// will not return any value.

// Invoke publicationYearCalculator's defaultYear() method:
publicationYearCalculator.defaultYear();

// The invocation above will return: 2024

// Invoke publicationYearCalculator's subtractOne() method thrice:
publicationYearCalculator.subtractOne();
publicationYearCalculator.subtractOne();
publicationYearCalculator.subtractOne();

// Similar to the addOne() invocation, the invocations above
// will return "undefined" because we programmed subtractOne()
// to invoke updatePublicationYear() only rather than return
// the invocation's result.

// Invoke publicationYearCalculator's defaultYear() method:
publicationYearCalculator.defaultYear();

// The invocation above will return: 2021

Try Editing It

The defaultYear() method remembers the publicationYear's updated state because:

JavaScript also stored all the data updatePublicationYear() referenced while storing updatePublicationYear's invocator inside the publicationYearCalculator variable. (In the instance above, updatePublicationYear referenced publicationYear).
publicationYearCalculator's copy of publicationYear remains accessible even after the computer closes updatePublicationYear()'s execution.
The calculation happened on publicationYearCalculator's copy of publicationYear—not on the one inside the anonymous function.

Note the following:

The publicationYearCalculator variable's function is an Immediately Invoked Function Expression (IIFE).
Developers use the term "module pattern" to reference the neat organization of private and public features inside an object (as we've done in the publicationYearCalculator's IIFE above).
publicationYearCalculator's IIFE contains two private and three public items.
- publicationYear and updatePublicationYear() are the private features.
- addOne(), substractOne(), and defaultYear() are the public items because they are part of the returned object.
Although private items are inaccessible outside their lexical scope, you can access them through the public closures—because they have access to in-memory copies of their referenced features even after JavaScript has closed the IIFE's execution.
updatePublicationYear(), addOne(), substractOne(), and defaultYear() are all closures because they are inner functions that reference some of their lexical scope's features.

Tip: Exposing only the code you wish to make globally available is recommended. Private code restricts unwarranted access and accidental conflict with other interfaces/namespaces.

Overview

This article discussed what JavaScript closure is. We also used examples to see how it works.

Library is my name

Oluwatobi Sofela — Tue, 17 Jan 2023 17:07:59 +0000

Hi 👋

Library is my name.

I am a modular tool used as part of an app's add-on feature.

In other words, I am like your cloth, which you use as an add-on feature on your body.

Your cloth is your body's add-on feature. Similarly, a library is an app's add-on feature. (Image by Lothar Dieterich)

Visit CodeSweetly to find out more about me.

Framework is my name

Oluwatobi Sofela — Tue, 10 Jan 2023 17:07:36 +0000

Hi 👋

Framework is my name.

I am a ready-made skeletal structure used as your app's primary support system.

In other words, I am like your skeleton—your body's primary support system.

Your skeleton is your body's framework. Similarly, a framework is an app's skeleton. (Image by Lothar Dieterich)

Visit CodeSweetly to find out more about me.

CSS unit is my name

Oluwatobi Sofela — Wed, 04 Jan 2023 18:05:17 +0000

Hi 👋

CSS Unit is my name. I am the standard of measurement used in CSS to express the size of an element's property.

For instance, the snippet below used me to define the size of the div element's width—wherein px is the unit, and 300 is the number of pxs (pixels).

div {
  width: 300px;
}

About my children

My children's names are relative and absolute length units.

Relative length unit is a dynamic standard of measurement.

You will often see her as a percentage (%), element (em), root element (rem), or fraction (fr).

Absolute length unit is a fixed standard of measurement.

You will often see him as pixels (px), centimeters (cm), millimeters(mm), and inches (in).

Visit CodeSweetly to find out more about us.

JavaScript is my name

Oluwatobi Sofela — Fri, 30 Dec 2022 10:58:48 +0000

Hi 👋

JavaScript is my name.

My job is to command the elements of your document.

Here's how I relate with my siblings 👇

Find out more about me.

CSS is my name

Oluwatobi Sofela — Wed, 28 Dec 2022 21:10:51 +0000

Hi 👋

CSS is my name.

My job is to style the elements of your HTML document.

Here's a glimpse of how I relate with my siblings 👇

Find out more about me.

HTML is my name

Oluwatobi Sofela — Tue, 27 Dec 2022 08:17:24 +0000

Hi 👋

HTML is my name.

My job is to describe your document and its content.

Find out more about me.

Arguments vs Parameters in JavaScript

Oluwatobi Sofela — Tue, 11 Oct 2022 14:14:14 +0000

People often use arguments and parameters interchangeably, but they are different. So, let's discuss their differences.

What Is the Difference between Arguments and Parameters?

Arguments are the optional values you pass to a function through an invocator. And parameters are the names you assign to the values.

Arguments are values. Parameters are the names of the values.

Syntax of Arguments vs. Parameters

We specify parameters and arguments in the parentheses that follow your function's name. Here's the syntax:

function nameOfFunction(parameter1, parameter2) {
  // function's body
}

nameOfFunction(argument1, argument2);

Example of Arguments vs. Parameters

// Define a function with two parameters:
function bestColors(first, second) {
  return first + " " + second;
}

// Invoke the bestColors() function with two arguments:
bestColors("White", "Blue");

// The invocation above will return: "White Blue"

In the snippet above, "White" and "Blue" are the arguments (values) we passed to the function's first and second parameters.

Important Stuff to Know about Arguments and Parameters

Here are two essential facts to remember when using JavaScript arguments and parameters.

1. Arguments and parameters are optional

Arguments and parameters are optional components of a function. In other words, you can omit the parameters if your function won't use any argument.

For instance, JavaScript's trim() method has no parameter because it takes no arguments.

On the other hand, match() has a single parameter that accepts one argument.

2. Arguments vs. `arguments` object

JavaScript automatically adds an array-like object (called arguments) to every non-arrow function you define.

The arguments object stores all the arguments (values) you pass to your function's parameter.

In other words, JavaScript will put each value (argument) you pass to your function's parameter into the function's built-in arguments object.

Here's an example:

// Define a function with two parameters:
function bestColors(first, second) {
  return arguments;
}

// Invoke the bestColors() function with two arguments:
bestColors("White", "Blue");

// The invocation above will return:
["White", "Blue"]

// Note: Some browser's returned value may look like so:
{0: "White", 1: "Blue"}

bestColors() returned an array-like object having the values we passed to its parameters because we programmed it to return its built-in arguments object's content.

Overview

Arguments are the values users pass to a function's parameters.

Thanks for reading

I hope you've found this article helpful. Please, feel free to reach out if you have any questions.

You can also visit my website for more articles like this.

Want to connect? Follow me on Twitter.

Destructuring Array: How Does Destructuring Work in JS?

Oluwatobi Sofela — Mon, 27 Sep 2021 01:13:21 +0000

The destructuring array assignment is a unique technique you can use to copy an array’s value into new variables neatly.

For instance, without using the destructuring assignment technique, we would copy an array’s value into a new variable like so:

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const firstName = profile[0];
const lastName = profile[1];
const website = profile[2];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

Notice that the snippet above has a lot of repeated code which is not a DRY (Don’t Repeat Yourself) way of coding.

Let’s now see how the destructuring assignment makes things neater and DRY.

const profile = ["Oluwatobi", "Sofela", "codesweetly.com"];

const [firstName, lastName, website] = profile;

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

You see, like magic, we’ve cleaned up our code by encasing the three new variables (that is, firstName, lastName, and website) into an array object ([...]). Then, we assigned them the profile array’s values.

In other words, we instructed the computer to copy the profile array’s values into the variables on the left-hand side of the assignment operator.

Therefore, JavaScript will parse the profile array and copy its first value (“Oluwatobi”) into the destructuring array’s first variable (firstName).

Likewise, the computer will copy the profile array’s second value (“Sofela”) into the destructuring array’s second variable (lastName).

Lastly, JavaScript will copy the profile array’s third value (“codesweetly.com”) into the destructuring array’s third variable (website).

Notice the snippet above destructured the profile array by referencing it. However, we can also do direct destructuring of an array. Let’s see how below.

How to do direct array destructuring

JavaScript permits direct destructuring of an array.

Here’s an example:

const [firstName, lastName, website] = [
  "Oluwatobi", 
  "Sofela", 
  "codesweetly.com"
];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

Suppose you prefer to separate your variable declarations from their assignments. In that case, JavaScript has you covered. Let see how below.

How to use the destructuring assignment while separating variable declarations from their assignments

Whenever you use the destructuring assignment, JavaScript allows you to separate your variable declarations from their assignments.

Here’s an example:

let firstName, lastName, website;

[firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(website); // "codesweetly.com"

Try it on StackBlitz

What if you want “Oluwatobi” assigned to the firstName variable — and the rest of the array items to another variable? How can such be accomplished? Let’s find out below.

How to use the destructuring assignment to assign the rest of an array to a variable

JavaScript allows you to use the rest operator within a destructuring array to assign the rest of a regular array to a variable.

Here’s an example:

const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // ["Sofela", "codesweetly.com"]

Try it on StackBlitz

Note: Always use the rest operator as the last item of your destructuring array to avoid getting a SyntaxError.

Now, what if you only want to extract “codesweetly.com”. In that case, you can also use the destructuring assignment. Let’s find out how below.

How to use the destructuring assignment to copy values at any index

You can use destructuring to copy values at any index of an array like so:

const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(website); // "codesweetly.com"

Try it on StackBlitz

In the snippet above, we used commas to skip variables at the destructuring array’s first and second index positions. By so doing, we were able to link the website variable to the third index value of the regular array on the right-hand of the assignment operator (that is, “codesweetly.com”).

At times, however, the value you wish to extract from an array is undefined. In that case, JavaScript provides a way to set default values in the destructuring array. Let’s learn more about this below.

How default values work in a destructuring assignment

Setting a default value can be handy when the value you wish to extract from an array does not exist (or is set to undefined).

Here’s how you can set one inside a destructuring array:

const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"];

console.log(firstName); // "Oluwatobi"
console.log(website); // "CodeSweetly"

Try it on StackBlitz

In the snippet above, we set “Tobi” and “CodeSweetly” as the default values of the firstName and website variables.

Therefore, in our attempt to extract the first index value from the right-hand side array, the computer defaulted to “CodeSweetly” — because only a zeroth index value exists in ["Oluwatobi"].

So, what if you need to swap firstName’s value with that of website? Again, you can use the destructuring assignment to do so. Let’s see how below.

How to use the destructuring assignment to swap values

You can use the destructuring assignment to swap the values of two different variables.

Here’s an example:

let firstName = "Oluwatobi";
let website = "CodeSweetly";

[firstName, website] = [website, firstName];

console.log(firstName); // "CodeSweetly"
console.log(website); // "Oluwatobi"

Try it on StackBlitz

The snippet above instructed the computer to reassign the firstName and website variables by swapping their values.

As such, firstName’s value will change from "Oluwatobi" to "CodeSweetly". While website’s content will change from "CodeSweetly" to "Oluwatobi".

Examples of other ways to use the destructuring array

See the resources below for examples of other ways to use the destructuring assignment to copy an array’s value into new variables neatly.

Overview

This article discussed how the destructuring assignment works with JavaScript arrays. We also used examples to understand various ways of destructuring array literals.

Now that we know how destructuring array works, let's discuss destructuring object here so we can see the differences.

Thanks for reading!

Spread Operator: How Spread Works in JavaScript

Oluwatobi Sofela — Fri, 27 Aug 2021 23:16:16 +0000

The spread operator (...) is a syntax that helps to expand iterables into individual elements.

The spread syntax serves within array literals, function calls, and initialized properties object to spread the values of iterable objects into separate items.

Note

A spread syntax is effective only when used within array literals, function calls, or initialized properties objects.

So, what exactly does this mean? Let’s see with some examples.

Spread Example 1: How spread works in an array literal

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]

Try it on StackBlitz

The snippet above used spread (...) to copy myName array into aboutMe.

Note

Alterations to myName will not reflect in aboutMe because all the values inside myName are primitives. Therefore, the spread operator simply copied and pasted myName’s content into aboutMe without creating any reference back to the original array.

As mentioned by @nombrekeff in the comment section, the spread operator only does shallow copy. So, keep in mind that supposing myName contained any non-primitive value, the computer would have created a reference between myName and aboutMe. See info 3 for more on how the spread operator works with primitive and non-primitive values.

Suppose we did not use the spread syntax to duplicate myName’s content. For instance, if we had written const aboutMe = ["Oluwatobi", myName, "name."]. In such a case, the computer would have assigned a reference back to myName. As such, any change made in the original array would reflect in the duplicated one.

Spread Example 2: How to use spread to convert a string into individual array items

const myName = "Oluwatobi Sofela";

console.log([...myName]);

// The invocation above will return:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

Try it on StackBlitz

In the snippet above, we used the spread syntax (...) within an array literal object ([...]) to expand myName’s string value into individual items.

As such, "Oluwatobi Sofela" got expanded into [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].

Spread Example 3: How the spread operator works in a function call

const numbers = [1, 3, 5, 7];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16

Try it on StackBlitz

In the snippet above, we used the spread syntax to spread the numbers array’s content across addNumbers()’s parameters.

Suppose the numbers array had more than four items. In such a case, the computer will only use the first four items as addNumbers() argument and ignore the rest.

Here’s an example:

const numbers = [1, 3, 5, 7, 10, 200, 90, 59];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16

Try it on StackBlitz

Here’s another example:

const myName = "Oluwatobi Sofela";

function spellName(a, b, c) {
  return a + b + c;
}

console.log(spellName(...myName));      // returns: "Olu"
console.log(spellName(...myName[3]));   // returns: "wundefinedundefined"
console.log(spellName([...myName]));    // returns: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"
console.log(spellName({...myName}));    // returns: "[object Object]undefinedundefined"

Try it on StackBlitz

Spread Example 4: How spread works in an object literal

const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }

Try it on StackBlitz

In the snippet above, we used spread inside the bio object to expand myNames values into individual properties.

Important stuff to know about the spread operator

Keep these two essential pieces of info in mind whenever you choose to use the spread operator.

Info 1: Spread operators can’t expand object literal’s values

Since a properties object is not an iterable object, you cannot use the spread syntax to expand its values.

However, you can use the spread operator to clone properties from one object into another.

Here’s an example:

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Try it on StackBlitz

The snippet above used the spread operator to clone myName’s content into the bio object.

Note

The spread operator can expand iterable objects’ values only.

An object is iterable only if it (or any object in its prototype chain) has a property with a @@iterator key.

Array, TypedArray, String, Map, and Set are all built-in iterable types because they have the @@iterator property by default.

A properties object is not an iterable data type because it does not have the @@iterator property by default.

You can make a properties object iterable by adding @@iterator onto it.

Info 2: The spread operator does not clone identical properties

Suppose you used the spread operator to clone properties from object A into object B. And suppose object B contains properties identical to those in object A. In such a case, B’s versions will override those inside A.

Here’s an example:

const myName = { firstName: "Tobi", lastName: "Sofela" };
const bio = { ...myName, firstName: "Oluwatobi", website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Try it on StackBlitz

Observe that the spread operator did not copy myName’s firstName property into the bio object because bio already contains a firstName property.

Info 3: Beware of how spread works when used on objects containing non-primitives!

Suppose you used the spread operator on an object (or array) containing only primitive values. The computer will not create any reference between the original object and the duplicated one.

For instance, consider this code below:

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
["Oluwatobi", "Sofela", "is", "my", "name."]

Try it on StackBlitz

Observe that every item in myName is a primitive value. Therefore, when we used the spread operator to clone myName into aboutMe, the computer did not create any reference between the two arrays.

As such, any alteration you make to myName will not reflect in aboutMe, and vice versa.

Take for an example, let’s add more content to myName:

myName.push("real");

Now, let’s check the current state of myName and aboutMe:

console.log(myName); // ["Sofela", "is", "my", "real"]
console.log(aboutMe); // ["Oluwatobi", "Sofela", "is", "my", "name."]

Try it on StackBlitz

Notice that myName’s updated content did not reflect in aboutMe — because spread created no reference between the original array and the duplicated one.

What if `myName` contains non-primitive items?

Suppose myName contained non-primitives. In that case, spread will create a reference between the original non-primitive and the cloned one.

Here is an example:

const myName = [["Sofela", "is", "my"]];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", ["Sofela", "is", "my"], "name." ]

Try it on StackBlitz

Observe that myName contains a non-primitive value.

Therefore, using the spread operator to clone myName’s content into aboutMe caused the computer to create a reference between the two arrays.

As such, any alteration you make to myName’s copy will reflect in aboutMe’s version, and vice versa.

Take for an example, let’s add more content to myName:

myName[0].push("real");

Now, let’s check the current state of myName and aboutMe:

console.log(myName); // [["Sofela", "is", "my", "real"]]
console.log(aboutMe); // ["Oluwatobi", ["Sofela", "is", "my", "real"], "name."]

Try it on StackBlitz

Notice that myName’s updated content is reflected in aboutMe — because spread created a reference between the original array and the duplicated one.

Here’s another example:

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName };

myName.firstName = "Tobi";

console.log(myName); // { firstName: "Tobi", lastName: "Sofela" }
console.log(bio); // { firstName: "Oluwatobi", lastName: "Sofela" }

Try it on StackBlitz

In the snippet above, myName’s update did not reflect in bio because we used the spread operator on an object that contains primitive values only.

Note

A developer would call myName a shallow object because it contains only primitive items.

Here’s one more example:

const myName = { 
  fullName: { firstName: "Oluwatobi", lastName: "Sofela" }
};

const bio = { ...myName };

myName.fullName.firstName = "Tobi";

console.log(myName); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }
console.log(bio); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

Try it on StackBlitz

In the snippet above, myName’s update is reflected in bio because we used the spread operator on an object that contains a non-primitive value.

Note

A developer would call myName a deep object because it contains a non-primitive item.

You do shallow copy when you create references while cloning one object into another. For instance, ...myName produces a shallow copy of the myName object because whatever alteration you make in one will reflect in the other.

You do deep copy when you clone objects without creating references. For instance, I could deep copy myName into bio by doing const bio = JSON.parse(JSON.stringify(myName)). By so doing, the computer will clone myName into bio without creating any reference.

You can break off the reference between the two objects by replacing the fullName object inside myName or bio with a new object. For instance, doing myName.fullName = { firstName: "Tobi", lastName: "Sofela" } would disconnect the pointer between myName and bio.

Wrapping it up

This article discussed what the spread operator is. We also looked at how spread works in array literals, function calls, and object literals.

Now that we know how spread works, let’s discuss the rest operator in this article so we can see the differences.

Thanks for reading!

DEV Community: Oluwatobi Sofela

Latest Release: React YouTube Playlist v2

Breaking Changes

Other Changes

How to Update the React YouTube Playlist Package

Step 1: Install the latest version

Step 2: Update the package's import syntax

How to Use the React YouTube Playlist Package

Latest Release: React Image Grid Gallery v2

Breaking Changes

Other Changes

How to Update the React Image Grid Gallery Package

Step 1: Install the latest version

Step 2: Update the package's import syntax

Step 3: Update the package's props

Note for Docusaurus Users

How to Use the React Image Grid Gallery Package

JavaScript Closures Explained with Examples

How Do Browsers Process a Closure's Lexical Scope's Invocation?

1. Allocate memory

2. Parse the variable's declaration

3. Parse the function's declaration

4. Initialize the variable

5. Return the invoked function's output

6. Return the variable's content

7. Empty the allocated memory

What Makes Closures Unique?

How Do Closures Retain Access to Their Lexical Scope's Features?

1. Allocate memory

2. Parse the variable's declaration

3. Parse the function's declaration

4. Initialize the variable

5. Return the function

6. Empty the allocated memory

TLDR

1. Allocate memory

2. Return the variable's content

3. Empty the allocated memory

Example 1: Generate Prepublication Years

Example 2: Generate the Multiple of a Constant

Example 3: Create a Publication Year Calculator

Overview

Library is my name

Framework is my name

CSS unit is my name

About my children

JavaScript is my name

CSS is my name

HTML is my name

Arguments vs Parameters in JavaScript

What Is the Difference between Arguments and Parameters?

Syntax of Arguments vs. Parameters

Example of Arguments vs. Parameters

Important Stuff to Know about Arguments and Parameters

1. Arguments and parameters are optional

2. Arguments vs. arguments object

Overview

Thanks for reading

Destructuring Array: How Does Destructuring Work in JS?

How to do direct array destructuring

How to use the destructuring assignment while separating variable declarations from their assignments

How to use the destructuring assignment to assign the rest of an array to a variable

How to use the destructuring assignment to copy values at any index

How default values work in a destructuring assignment

How to use the destructuring assignment to swap values

Examples of other ways to use the destructuring array

Overview

Spread Operator: How Spread Works in JavaScript

Spread Example 1: How spread works in an array literal

Spread Example 2: How to use spread to convert a string into individual array items

Spread Example 3: How the spread operator works in a function call

Spread Example 4: How spread works in an object literal

Important stuff to know about the spread operator

Info 1: Spread operators can’t expand object literal’s values

Info 2: The spread operator does not clone identical properties

Info 3: Beware of how spread works when used on objects containing non-primitives!

What if myName contains non-primitive items?

Wrapping it up

Step 2: Update the package's `import` syntax

Step 2: Update the package's `import` syntax

2. Arguments vs. `arguments` object

What if `myName` contains non-primitive items?