DEV Community: Omotayo David

Set vs Array

Omotayo David — Mon, 11 Oct 2021 07:13:52 +0000

There are several ways you can solve coding problems as a JavaScript developer, thanks to the plethora of pre-established data structures designed to solve simple to real-world problems.

Data structures are techniques for storing and organizing data, which enables efficient modification. The data structure also determines relationships between data and functions to use in accessing them.

JavaScript data structures have their respective use-cases; this is due to the unique properties each object possess. However, this doesn't mean there isn't any form of similarities between them. The Array and Set data structure types have a lot in common, and we're going to be looking at what similarities they share, how they differ from each other and their use-cases.

What is a Set and an Array?

Set

Set is a data type that stores data that are unique values of any type, whether primitive or object references. Set stores data in collections with keys that are iterable in the order of insertion.

Array

An array on the other hand - is a global object that stores high-level list-like objects called arrays in the consecutive memory for later use. Every array has several cells, and each cell has a numeric index that is used to access its data. It is the most basic and most used of all data structures.

Now that we know what they are, let's take a look at the similarities between these objects.

Similarities & Differences

For us to comprehend some of the technical aspects of this section, we need to understand how to construct or initialize either of the objects.

Both objects have a built-in constructor which utilises the new syntax for declaring a new data structure. However, unlike a set, an array is not limited to this method of declaration. An array can also be declared with the literal method.

You can initialize a new Set like this:


const set = new Set();

And a new array like this:


const arr = new Array();

Or:


const arr = [];

In addition, the literal method of initialising an array is much faster; construction-wise, and even performance-wise. The constructor method, however - is slower compared to the former, and prone to mistakes such as this:


const arr = new Array(20);

arr[0]  //outputs: undefined

arr.length //outputs: 10

//Literal method
const arrLtr = [20];

arrLtr[0] //outputs: 20

arrLtr.length //outputs: 1

//The later is accurate

With that out of the way, we can now go into the nitty-gritty of what these objects have in common.

The similarities between Set and Array is conspicuous. if you've ever worked with arrays before (who hasn't anyway), you'll immediately notice some of the things they have in common. But even with the glaring dead ringer, the differences between them are quite stretched.

One of the biggest, perhaps the biggest, differences between Set and Array is that; Set can only contain one instance of a value. For example, in an array of people, a peter value can appear as many times as you want. Whereas in Set, you can only have one peter value. If you try to add more, nothing happens.

What if you hard-code duplicate values into a set, what happens?
Set will only pick one of the duplicate values and delete the rest.
However, Set's intolerance for duplicate data values has its perks, especially in cases where you don't want duplicate values or data leaks in your data structure.

Most of Set and Array's likeness lies within how they operate; how they populate their structure with data and otherwise.

Inserting and removing elements

Each object has its built-in methods for adding and removing values from its respective structure. While Array has more than one method of inserting or removing values, Set only has one.

Before going deep into this section, we first need to understand how items are inserted and removed from a data structure.

A Data structure is basically a stack of objects that are inserted and removed according to the last-in-first-out principle, which is also known as (LIFO).
Elements can only be added and removed from the top of the stack. A helpful analogy is to think of a stack of books; you can add new books from the top and remove only the book at the top.

Inserting and removing elements in an Array

The Array has two methods for this functionality push() and pop(). The push method adds new items to the top of the data structure, while pop removes items from the top of the structure i.e the last item added.

Array.protoype.push()


const arr = [ ];
arr.push("Mario")

console.log(arr);
//Output:
// Mario

Array.protoype.pop()

const arr = ["Mario", "Luigi", "Bowser"]
//Remove "Bowser" 
arr.pop()

console.log(arr)

//Output:
// Mario, Luigi

Array.protoype.unshift() / shift()

The unshift() and shift() methods works contrary to the LIFO principle, these methods are used to insert and remove items to the bottom of a data structure i.e at index 0.

Array.protoype.unshift()


const arr = [ 4, 6, 8, 10 ];

//Add 2 to index 0
arr.unshift(2)

console.log(arr)

//Output:
// 2, 4, 6, 8, 10

Array.protoype.shift()


const arr = [ 2, 4, 6, 8, 10 ];

//Remove 2 from index 0
arr.shift()

console.log(arr)

//Output:
// 4, 6, 8, 10

Array.protoype.splice()

splice() is another array method that can be used to remove or replace an existing element in an array. The method takes in two parameters for deleting an element and three for replacing or adding a new element:

splice(start, deleteCount)

splice(start, deleteCount, item1)

start
The index at which you want to start inserting or delete elements from an array.

deleteCount
An integer specifying the number of elements to be removed from the start index. N.B This is an optional parameter.

item
This is the element to be added to an array from the start index. This is also an optional parameter.

Here is a basic splice() demo:

Remove 0 (zero) elements before index 2, and insert "John".

let students = ['Hugh', 'Jack', 'Dave', 'Katerina']; 
students.splice(2, 0, 'John');

console.log(student);

//Output:
//['Hugh', 'Jack', 'john' , 'Dave', 'Katerina']

Remove 1 element at index 1

let students = ['Hugh', 'Jack', 'Dave', 'Katerina']; 
let removedStudents = students.splice(1, 1);

console.log("Students:" + students);
console.log("Removed students:" + removedStudents);

//Output:
//Students: ['Hugh', 'Jack', 'john' , 'Dave', 'Katerina']
//Removed students: [ 'jack' ]

splice() can also be used to instantly clear every element in an array like this:

  let fruits = ['Mangos', 'papaya', 'Apple'];

  fruits.splice(0, fruits.length);

  console.log(fruits);

  //Output:
  // [ ] Empty array

For a more in-depth analysis on splice(), Visit the Mozilla docs.

Array.from()

The from() method lets you populate an array with an array-like or iterable object. That is; an object with a length property and iterable objects such as a set. In a nutshell, you can populate an array with elements in a pre-existing set.

   let fruits = new Set(['Mangos', 'papaya', 'Apple']);

   let arr = Array.from(fruits);

   console.log(arr);  

  //Output:
  // [ 'Mangos', 'papaya', 'Apple' ]

Inserting and removing items in a Set

Just as stated above, Set has only one method of adding items to its structure; using the add() method. This method works just like Array's push() method. It also has a delete() method for removing items just like the pop() method.
Set follows the LIFO principle of inserting and removing elements in a data structure, but unlike Array, Set doesn't have a way around the LIFO principle; elements can only be inserted and removed from the top of a set data structure.

set.prototype.add()


const set = new Set();

set.add("Peach");
set.add("Mario");

console.log(set)

//Output:
// "Peach", "Mario"

set.prototype.delete()


const set = new Set(["Peach", "Mario", "Bowser"]);

set.delete("Bowser");

console.log(set);

//Output:
// "Peach", "Mario"

Similarly to Array's from() method, Set can also populate its structure with a pre-existing array. Set doesn't require an extra method for this functionality, the constructor handles it just fine:

   let arr = ['John', 'Mike', 'Steph'];

   let newSet = new Set(arr);

   console.log(newSet);

  // Output:
  // { 'John', 'Mike', 'Steph' }

set.prototype.clear()

Set's clear() method is a very straightforward and efficient method for clearing out elements in a data structure. It doesn't require extra arguments like the former's method.

   let newSet = new Set([ 'John', 'Mike', 'Steph' ]);
   newSet.clear();

   console.log(newSet);

  // Output:
  // { } Empty set object

Accessing elements

How elements in a data structure are accessed or selected is determined by the data type being used. Take an Array, for example, elements in an array are accessed by their cell's numeric index. This means, the first element in an array can be accessed at index 0, and the last element; at the index value equal to the array's length minus 1.

Accessing the first element

  let arr = [ 'cat', 'dog', 'mouse' ];
  console.log(arr[0]);

  //This will output 'cat'
  //Because the 'cat' value is at index 0

Accessing the last element

  let arr = [ 'cat', 'dog', 'mouse' ];
  console.log(arr[ arr.length -1]);

  //This will output 'mouse'
  //Because the 'mouse' element is the last in the array

Set accesses elements in a data structure differently. This is because a set does not support the selection of random elements by its index like Array. So the indexOf() method will only work with an array.

  let arr = [ 'cat', 'dog', 'mouse' ];
  let newSet = new Set(arr);

  console.log(arr[0]) // outputs 'cat'
  console.log(newSet[0]) // outputs undefined

Set checks if an element is in its structure with the has() method. This method is simpler compared to Array's technique for checking elements.

  let animalSet = ([ 'cat', 'dog', 'mouse' ]);
  let isMouse = animalSet.has('mouse')

  console.log(isMouse) // outputs true

Performing something similar in an array requires an extra conditional check and code with the indexOf() method like this:

  let arr = [ 'Peach', 'Mario', 'Bowser' ];

  //checks if Mario is at index 1
  let isMario = arr.indexOf('Mario') === 1;

  console.log(isMario) // outputs true

The indexOf() method returns -1 if the element being searched for is not present in the structure.

Length and size

Certain functionalities require we check the total amount of elements present in an array or set structure. Javascript has a global length property for displaying the number of characters in a string and elements in any data type that stores list-like elements.
And If there's anything to go by, it's that an array works with almost every global method and property in Javascript. So without dwelling too much on it, here's a demo of the length property in an array:

const arr = [2, 3, 4];

console.log(arr.length)

//Outputs
// 3

Set has its unique method for checking the number of elements in a set; with the size method. This method works exactly like the length property:

const set = new Set();

set.add(2)
set.add(3)
set.add(4)

console.log(set.size)

//Outputs
// 3

Iteration

There are different ways one could iterate over elements in an array or set, but unlike the former; set isn't compatible with the conventional techniques for iterating over elements in programming using functions like the for and while loop statements.

Looping in a set can be easily done with the forEach() method. Although several other methods can be used in its stead, methods like:

iterator()
values()
entries()...

The forEach() method is perhaps the most unequivocal of them all.

const breeds = new Set();

breeds.add("dog")
breeds.add("cat")
breeds.add("bunny")

const iterate = (value) => {
  console.log(value + " breed" ); 
}

breeds.forEach(iterate);

//Outputs:
// dog breed
// cat breed
// bunny breed

When it comes to iteration, an array has a list of flexible options to choose from, your choice is often determined by the kind of functionality you're trying to implement. We can't go deeply into every one of these methods as they are beyond the scope of this article, but we'll examine the most used of them all; the for and while loop.

For loop


const arr = [ 1, 2, 3, ]

for (var i = 0; i < arr.length; i++) {
  console.log('number: ' + arr[i]);
}

//Output:
// number: 1
// number: 2
// number: 3

While loop


let x = 0;

while (x < 5) {
  x++;
}

console.log(x);

//Output:
// 5

Visit the Mozilla docs to learn more about these statements.

When to use Set or Array

Knowing when to use a set or an array is a no-brainer, it generally boils down to two things; unique elements and Performance.

Use set when you want unique elements in your data structure. Although an array can be modified to accept unique elements, set is, however, optimized for such functionalities out of the box.
If you want high-performance element lookups use set's has() method.
If you want an easy access of elements, easy element swapping and binary search of elements ( i.e accessing elements located in any part of a data structure; front, middle and back ), an array is your best bet.
If you want to prevent memory leaks in your data structure, use a set.
If you want flexibility and more feature, use an array.

Conclusion

One thing to note is that both objects shine within their range of specialities, even though the array has the efficacy of becoming the Swiss army knife of data structure; set's high-performance methods and intolerance for duplicates makes it stand out.

Your decision on which to use will be highly influenced by the nature of the project you're working on. It's not really about which is better, but which is right for the job.

Working with images in Next.js

Omotayo David — Sat, 18 Sep 2021 10:38:04 +0000

Rendering images in Next.js for the first time can be frustrating, especially for beginners who are not fond of reading documentation.

This article will help you understand how to render images in Next.js, the difference between the <img> tag and the <Image/> component, and the pitfalls to avoid when working with images in Next.js.

How to Render Images in Next.js

There are two ways you can display images in Next.js, you either use the conventional <img> tag or a specialized <Image/> component that is unique to Next. The differences between these tags are quite much, but they pretty much do the same thing; which is to display images to the browser.

If you’re rendering images or any media files relatively ( locally ) in your project, you must store them in the /public folder directory. Otherwise, you’ll get an error.

The `<img>` tag

This is the same HTML <img> tag you’re used to, and perhaps the tag you used the first time you rendered an image to the browser.
The tag has no special optimization feature, all it does is link images to a webpage by creating a holding space for the referenced image.

How to use the `<img>` tag

The <img> tag has two important attributes;

src
alt

The src attribute takes in a relative or absolute URL path of where the referenced image is located, while the alt attribute takes in an alternate text that displays when the image isn’t rendering properly in the browser for some reason.

Below is a typical example of a <img> tag markup:



<img src=”/public/dev_logo.png” alt=”dev logo”>

You can render images on your Next.js webpage without much hassle with the <img> tag, provided the image, if stored locally, is moved to the /public folder directory. But the issue of optimization remains.

Caveats of the `<img>` tag

The <img> tag renders images to the webpage with their original size and resolution regardless of the viewport the image is being rendered on.

A quick play around with CSS can fix this, but even with the image displaying precisely to each viewport, the intrinsic size, which is the original size and aspect ratio of the image sent by the server will remain the same.

This is not very efficient, as it will drastically reduce the web page's performance and increase the load time.

To optimize images rendered with the <img> tag in your project, you need to implement some extra set of functionalities. some of which are:

-Lazy loading: Images will only be fetched and rendered when they are scrolled into the viewport. libraries like “react-lazyload” can easily add this functionality to your project.

-Resizing: Detecting and fetching the appropriate image size for every viewport, provided there are images of different sizes stored on the server.

-Modern image formats: Conditionally serving stored images with WebP formats when it's supported by the browser.

As you might have noticed, this is a lot of work. If only there was a better way to do this without losing a limb. Oh wait, there is.

The `<Image/>` component

The <Image/> component was contrived by the creators of Next.js to solve the optimization issues the former lacks. It is a better and enhanced version of the <img> tag, but unlike the <img> tag, the <Image/> component is not a native HTML element – but a built-in API in Next.js.

The component essentially wraps the <img> element with other div elements to prevent cumulative layout shift.

Benefits of using the component

The <Image/> component’s API doesn’t just render images to the browser like the <img> tag, it also optimizes the image for every viewport by implementing each of the functionalities below out of the box:

-Lazy loading: Every image linked to a webpage with the <Image/> component is fetched and rendered on-demand as soon as its holding space is scrolled into view by default. So you never have to worry about slow load time on your web pages and writing extra scripts for such functionality.

-Responsiveness: Images are automatically responsive when rendered with the <image/> component, saving you the stress of CSS media queries.

-Resizing: The appropriate size and aspect ratio of an image for a viewport is fetched and rendered on-demand, instead of fetching the intrinsic size and aspect ratio before reducing it for the target viewport.

-Optimized file size: The <Image/> component fetches the appropriate file size for each viewport, taking away the need to store images with different file sizes for every viewport on the server, and fetching them one after the other when needed.

-Optimized image format: when an image is fetched from the server with the <Image/> component, the file format is changed to a more optimized and SEO-friendly one like WebP, if the browser supports it.

How to use the `<Image/>` component

To use the <Image/> component in your Next.js project, the first thing you need to do is import it into your desired component from Next’s library:



Import Image from ‘next/image’

The next step is to add the JSX syntax to your code with at least an src, widthand height property:



<Image src={“dev_logo.png”} width={150} height={150} />

N.B If your image is stored locally, it must be located in the /public folder, otherwise, you’ll get an error.

The width and height properties are mandatory, without these properties, Next.js will throw an error.

People, mostly beginners, often mistake these properties for inline styles. Well, that’s exactly what they are, but the image component needs them to perform its magic. They only accept pixels as values, which must also be an integer without a unit.

The component can be served in a project like so:



Import Image from ‘next/image’
const Home = () => {
  return (
    <>
      <h1>Homepage</h1>
      <Image src={“hero_image.png”} alt=”Hero image” width={150} height={150}/>
      <p>This is the homepage!</p>
    </>
  )
}
Export default Home

Passing the image’s file name into the src property is enough for Next to detect and serve the image, as long as the image is in the public folder. You could also import the image statically just as you did the component itself:



Import hero from ‘../public/hero_image.png’

With the above code added, the new block of code will look like this:



Import Image from ‘next/image’
Import hero from ‘../public/hero_image.png’

Const Home = () => {
  Return (
    <>
      <h1>Homepage</h1>
      <Image src={hero} alt=”Hero image” width={150} height={150}/>
      <p>This is the homepage!</p>
    </>
  )
}
Export default Home

The only difference here is that the former is being passed dynamically as a path string while the latter, is as a variable.

The <Image/> component has other optional properties, some of which are:

object-fit : Specifies how an image should be resized to fit its container.

layout : The layout behavior of the image as the viewport changes size.

sizes : A string mapping media queries to device screen sizes.

placeholder : A placeholder to use while the image is loading.

Visit the docs for more info.

Caveats of the `<Image/>` component

The only major drawback of the <Image/> component is its limitations and insusceptibility to CSS styling. The component isn’t immune to styling per se, and since it’s wrapped around an <img> element, the possibility of styling isn’t ruled out.

Styling the component isn’t as easy as slamming it a className and having a field day in your CSS stylesheet. There are procedures to follow.

The <image/> component cannot be styled with a component-scoped stylesheet that doesn’t use Next.js’ built-in CSS support.

So if we have a project that has a Homepage component and an embedded <image/> component with a className of “img”, a scoped CSS stylesheet for our Homepage component will be named like this:



Homepage.module.css

Adding rules to the “img” class in the Homepage stylesheet will be futile. Now imagine the inevitable frustration awaiting anyone using Next.js for the first time.

The only way you can style <image/> components in your project is to;
Create a global stylesheet, add rules to the images’ classes in the global stylesheet, and then importing the global stylesheet within page/_app.js as seen in the screenshot below.

Every page and component in your project will have access to the global stylesheet after the importation.

How to serve images from external sources in your Next.js project

Fetching and rendering images from a server, CMS or any external sources in Next.js isn’t as straightforward as passing the URL of the referenced image into the src property.

Since the <image/> component optimizes images automatically, either locally or externally, to prevent abuse on external URLs; you must specify which domains are allowed to be optimized in your project.

This is done by adding an image object with a domain to the next.config.js module in your project:



module.exports = {

  Images: {

    domains: [‘example.com’],

  },

}

Conclusion

We've seen the differences between the <img> tag and the <Image/> component, as well as their advantages and disadvantages. Now it's up to you to decide on what to use in your project. And how you could save yourself a lot of time and frustration by avoiding pitfalls like;

-Trying to style the <Image/> component from a non-global stylesheet.
-Not storing local images in the /public folder.
-Not specifying the domains of externally linked images.

Complicated as it may look, we've barely grazed the surface of the <Image/> component, so for more advanced stuff, please go to the official documentation.

Follow me on twitter and linkedin

DEV Community: Omotayo David

Set vs Array

What is a Set and an Array?

Set

Array

Similarities & Differences

Inserting and removing elements

Inserting and removing elements in an Array

Array.protoype.push()

Array.protoype.pop()

Array.protoype.unshift() / shift()

Array.protoype.unshift()

Array.protoype.shift()

Array.protoype.splice()

Array.from()

Inserting and removing items in a Set

set.prototype.add()

set.prototype.delete()

set.prototype.clear()

Accessing elements

Length and size

Iteration

For loop

While loop

When to use Set or Array

Conclusion

Working with images in Next.js

How to Render Images in Next.js

The <img> tag

How to use the <img> tag

Caveats of the <img> tag

The <Image/> component

Benefits of using the component

How to use the <Image/> component

Caveats of the <Image/> component

How to serve images from external sources in your Next.js project

Conclusion

The `<img>` tag

How to use the `<img>` tag

Caveats of the `<img>` tag

The `<Image/>` component

How to use the `<Image/>` component

Caveats of the `<Image/>` component