DEV Community: Mohd Shahid

5 mistakes I made as a beginner developer 🤯.

Mohd Shahid — Wed, 11 May 2022 13:31:45 +0000

Today I wanted to look back at the time when I decided to start learning to code, changing my career from being a civil engineer to a software developer.

It was the best decision of my life, but as a beginner, I made a lot of mistakes.

I want to highlight some of them so that others can avoid the mistakes I made.

1. Be stuck in tutorial hell

This was the worst mistake, when I started I just wanted to watch courses and read articles without actually using the knowledge I was grasping.

This went on for about a year but when I realized that making projects was as important as watching lectures, I started making projects until then I had already forgotten most of the concepts, so I had to re-watch the videos every time I needed to refresh some concept.

Start practicing as soon as you learn something new.

2. Imposter syndrome

When I finally started using the knowledge I gained, making projects, I was getting lots of errors and bugs -at that time I did not know it was normal, so I used to get discouraged. I started to think that coding was not for me, and I do not have enough knowledge to complete the project I started.

Never think that you cannot do it.

3. Be a lone wolf

Whenever I was stuck and needed help I did not ask for it, I felt stupid that I was asking such a dumb question. I wanted to learn everything on my own, which is not possible. So please do not hesitate when asking for help, no matter how dumb a question you have, there are a lot of great people out there ready to help.

Be a team player.

4. Not applying for a job sooner

I did not apply for a job even after learning to code and making lots of projects, I always thought I was not a good fit for the market and that there is a lot of competition out there, and I wouldn't get a chance. But later I realized that one can land a job right after learning HTML and CSS.

5. Not building an online presence

Until a few months back no one knew that I was a software developer. I started using Twitter recently and I am so glad that I did. You can get lots of opportunities using online platforms like Twitter, Instagram, Dev.to and Hashnode, etc.

Build an online presence.

Thanks a lot for reading.

Please follow me on Twitter.

Interviewer's Favorite: Event Bubbling

Mohd Shahid — Sat, 15 Jan 2022 10:23:25 +0000

Hello everyone 👋

It's been a long time since I published my last article. I got busy in learning deployment, AWS, Docker, Kubernetes, etcetera, which I will share here as well, so be tuned! 👀

Today's article is gonna be about 'events', more specifically 'event bubbling'.

Let's get started 🚀

Before starting the article I want you to familiarize with the word 'event' in JS. Those who are already familiar can skip the introduction section.

Introduction

What is an event 🤔?

One of the most important questions that an interviewer asks around JS and DOM, is about 'events'.
When you start learning JS and playing with DOM (Document Object Model), you may hear/read the word 'event', so what is it?

In simple language when a user interact with the webpage in any way like click of a mouse button (left or right), pressing a keyboard button, form submission etc. These interactions are called 'events'.

Why 'events' are important 💭?

If you want to become a better front-end developer or a web developer in general, you really need to understand behind the scenes of what happens when user interacts with the web page.

Almost all the questions in the interview about DOM revolves around 'events'.

Now, when a user do something on the webpage that causes an event to happen you can capture that event and do some specific task accordingly.

What is 'Event Bubbling' 🙄?

With 'event' you will hear/read some more terms like 'Event Capturing', 'Event Propagation', and 'Event Bubbling'. Well, as you already know this article is gonna be about 'event bubbling', which is, without a doubt, is the most important.

Consider the following code snippet. 👇

<div>
  <ul>
    <li></li>
  </ul>
</div>

In the above example if you click on an li element, it will occur as if the click happened on its parent ul and all the other parents above it.

This is because the event bubbles up from the element it happened to all of its parents. It is called event bubbling.

Confusing 😵 right?

To visualize this I am creating a simple web page and attaching event listeners to div, ul and li.

<div class="list__container">
  <ul class="list">
    <li class="list__item">List item 1</li>
    <li class="list__item">List item 2</li>                  
    <li class="list__item">List item 3</li>
  </ul>
</div>

This is how it would look in in the inspector 👇

Now the magic of JS begins 💥

const listContainer = document.querySelector('.list__container');
const list = document.querySelector('.list');
const listItems = document.querySelectorAll('.list__item');

// on click changing the item's background color to be red.
listItems.forEach((listItem) => {
  listItem.addEventListener('click', function (event) {
    // `this` referes to the `li` element which was clicked.
    this.style.backgroundColor = 'red';
   });
});

The result 👇

Everything is working as expected right 👀?
...
Now let's add event listeners to div and ul. 👇

// click event to `div`
listContainer.addEventListener('click', function (event) {
    this.style.backgroundColor = 'yellow';
});

// click event on `ul`
list.addEventListener('click', function (event) {
    this.style.backgroundColor = 'green';
});

The result 👇

🤯 I know you might be thinking, 'Woah, wait Shahid, you never clicked on ul or div why the hell their background color changed 🤔?'

The answer is: 'Event Bubbling'.

When you click an element the event is bubbled up to all of its parent and it seems that the click is happened on each of its parent.

We can make some cool shit using the power of event bubbling, but that is out of the scope of this article.

If you want me to write more (and show more example) on event bubbling, please leave a comment below ⬇️.

Thanks a lot for reading this article. 💓
Follow me twitter to show some love ❣️

Notification API: Show notifications from your web app 🔔

Mohd Shahid — Sat, 04 Sep 2021 10:49:40 +0000

Hey guys.

Notifications are vital if you want to drive traffic to your web applications.

Notifications can be shown even if the user is not active on your website/webapp.

Whether you are building an e-commerce website and want to show offers to your user or you are building a chatting application and want to show the notification about new messages.

Many top web applications like Slack, Facebook, WhatsApp and a lot more are using the same technology to show notifications.

Using Notifications API is lot more simpler than you might think.

Introduction.

The Notifications API allow developers to show notifications from their website or web application.

Notifications API is compatible with existing notifications system in your OS (Windows, Mac or Linux).

How to use Notifications API 💭

Notifications can be initialised using the class Notification which is available globally.

Asking for permission ⬇️

// asking user to grant the permission on page load
// to show notifications
window.addEventListener('load', () => {
  Notification.requestPermission();
// permission cannot be asked again if the user chose
// to grant or deny the permission.
// once granted or denied, then user have to change the
// permission manually.
});

Checking if the user has granted the permission ⬇️

console.log(Notification.permission);

Result of the above console can be:

default: Permission is not asked yet, notifications will not be shown.

granted: User has granted the permission to show notifications.

denied: User has declined the permission.

Alternatively, you can also use Permission API to check for the permission. More about it here.

Showing notifications 🔔

const newMsgNotification = new Notification('A new message', {
  body: 'You have got a new message, check it out!',
  icon: 'https://images.unsplash.com/photo-1611605698335-8b1569810432?ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8aWNvbnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
});

Above code shows the notification in my ubuntu something like this 👇
.

And that is it, this is as much that you need to know to get started, continue to know more.

In the above example you see Notification class accepts 2 arguments.

Title of the notification.
Options object in which you can set settings for notifications.

Interacting with the notifications:

Users can also interact with the notification (like click on the notification).

EventListener can be added to notification instance.

// navigate the user to you website when
// user click on a notification
newMsgNotification.addEventListener('click', (e) => {
  e.preventDefault();
  window.open('http://yourwebappurl.com', '_blank');
});

In addition to click listener, notification can listen to 3 more events:

close: Fired when the notification is closed.

error: Fired when the notification could not be shown for some reason.

show: Fired when the notification in displayed.

That is it for this article guys, I hope you found it useful.

If you did please leave a like and share the article.

This is the basics of the Notification API, I wanted this post to be short and simple.

If you want to know more about it, please leave a comment below.

Thank you for giving it a read. ❤️
Follow me on twitter

Permissions API & Why should you start using it?

Mohd Shahid — Wed, 01 Sep 2021 08:53:56 +0000

Hey guys 👋

In this article I will explain the usage, importance and use cases of Permissions API and why is it so important for user experience.

Let's get started 🚀

Table of content

Introduction
Where can we use Permissions API
Accessing the API
Checking Clipboard permissions
Checking geolocation permissions

Introduction 🟢

The Permissions API can be used to determine if permission to access a particular API has been granted ✅ or denied ❌.

The Permissions API provides the tools to allow us developers to implement a better user experience as far as permissions are concerned.

Which is vital to increase the accessibility and usability of the application.

Permissions API does not work in Safari and IE.

Where can we use permissions API 🤔?

To learn more about Clipboard API read my article here.

Accessing the permissions API?

permissions object is available on Navigator.permissions property 👇

const permissions = navigator.permissions;

For checking the status of permission of a certain API .query() method is used which is available on permissions object.

.query() accepts a parameter say permissionDescriptor which is an object defining on which API query should fire on.

.query() will return a promise which will resolve to PermissionStatus object which will tell us about the status of the certain permission.

Enogh talk 😅, let's see it in action 👇

1️⃣ Using Permissions API for checking Clipboard permissions:

const permissions = navigator.permissions;

permissions.query({name: 'clipboard-write'}).then(cbWritePermission => {
console.log(cbWritePermission.state) // "granted"

// clipboard-write permission is granted by the browser automatically
});

In the above example the state property will tell us about the status of the permission. It can have following values:

granted: Permission is granted.

denied: Permission is denied.

prompt: Permission is not yet asked.

Let's see an example of clipboard-read permission 👇

// suppose a scnerio where you want to do 
// something with the text before it get pasted by the user 
// in your application. 
// or you want to auto-capture copied text
// checking the item before doing anything
// with it is also good for security.

// reading text on a click
button.addEventListener("click", async () => {
  const cbReadPermissionStatus = await permissions.query({
    name: "clipboard-read",
  });
  if (
    cbReadPermissionStatus.state === "granted" ||
    cbReadPermissionStatus.state === "prompt"
  ) {
    const text = await navigator.clipboard.readText();
    // do something with the text
  } else {
    // show a nice error message, or ask for the permission nicely
  }
});

2️⃣ Checking `geolocation` permissions using Permissions API:

building an application where the current location of the user is important for a feature to work in your application? Then this one is for you.

See the example below 👇

button.addEventListener("click", async () => {
  const geoPermissionStatus = await permissions.query({ name: "geolocation" });

  if (
    geoPermissionStatus.state === "granted" ||
    geoPermissionStatus.state === "prompt"
  ) {
    navigator.geolocation.getCurrentPosition((pos) => {
      console.log(pos);
      // do something with the location
      // show friends around the user for eg
      // or move the map to the user's location
    });
  } else {
    // show warning that certain feature of the app
    // will not work if the location permission is not provided
  }
});

Others APIs permissions can be checked using the same procedure as defined above.

Thank you for giving it a read. ❤️

Please follow me on twitter

Happy Coding

Click to Copy!

Mohd Shahid — Sat, 28 Aug 2021 06:39:54 +0000

Hey Guys 👋

Ever wondered how some websites have "click to copy" functionality?

You can also do just that, whether you're building an e-commerce website where you want user to click on share button to write the url of the product on their website.
or you are building some website/documentation where people can click somewhere and copy the code snippet.

In this article I will explain how you can mess around with the user's clipboard 😄.

Let's get started 🚀

To explain this better, I will create a demo project. You can follow along if you want to.

Make a folder and name it whatever you like.
In that folder make two files
- 1. index.html
- 2. app.js

Add the following HTML code in index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy to Clipboard 📋</title>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>

Now select h2 and button element in app.js:

const h2 = document.querySelector('h2');
const button = document.querySelector('button');

Preview the index.html in your browser.

Side note: This demo will not work in IE

It should look something like this 👇

Now to alter the user's clipboard we have to use Clipboard API.

The clipboard object is exposed by the navigator.clipboard property.

Add the following code in the app.js file:

const cb = navigator.clipboard;

console.log(cb) will look something like this 👇

👉 Remember: Clipboard API is asynchronous, means every method will return a promise which will resolve or reject.
To consume the promise we can either use async/await syntax or .then/.catch.

Reading text from clipboard 📋

To read the text from clipboard I will add a click event listener to the button:
In the event listener I will call a method called readText(), which is available on the cb object we accessed earlier:

button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
    // output will be whatever you last copied, 
    // or empty string if the
    // copied data is not of type text.
});

To read the text from clipboard user must grant read permission, otherwise the operation will fail. 👇
If permission is denied 👇

You can check if the user granted the permission or not using the Permission API.

To learn more about Permissions API read my article here.

Writing text to clipboard 📋

To write the text to user's clipboard we use writeText() method available on the cb object.
Writing permission is given automatically by the browser.

Write the following the code in the app.js:

button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});

That's it for this article guys.

See, how easy it is you mess with the user's clipboard 😂.

Thanks ❤️ for giving it a read, I hope you found it useful.

For concise tips and tricks, please follow me on Twitter

Happy Coding 💚

2 Important! Array methods you should know.

Mohd Shahid — Sun, 22 Aug 2021 08:35:09 +0000

Hey everyone 👋

Today's article is about two interesting (also important) array methods:

.flat()
.flatMap()

Let's get started 🚀

1. `.flat()`:

.flat() method recusively flattens the elements which are array into the original array and returns a new array.

#### Examples 👇

const array = [1,2,[3,4]];
const newArray = array.flat();
console.log(newArray);
// [1,2,3,4]

👉 .flat() receives an optional argument depth (1 by default).

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

👉 The .flat() method removes empty slots in arrays:

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

2. `.flatMap()`:

.flatMap() is identical to a .map() followed by a .flat() of depth 1.

#### Examples 👇

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

👉 .flatMap() only flattens the array up to depth 1.

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

👉 As you know .map always works one-to-one, but flatMap can be used to modify the number of items during map.

A nice example I found on MDN 👇

// Let's say we want to remove all the negative numbers
// and split the odd numbers into an even number and a 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =>
  (n < 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)

// [4, 1, 4, 20, 16, 1, 18]

That's it for this article, I hope you found it useful. 😊

Take a look on my article on array methods.

Please leave a like and follow me on twitter.

Thanks for reading. 💚

Happy coding.

Array methods in JavaScript: when to use which 🤔?

Mohd Shahid — Thu, 19 Aug 2021 15:55:12 +0000

Hey guys 👋

There are a lot of array methods in JavaScript and often we get confused 😕 about which to use when.

In this article I will summarise these methods and do my best to clear about which method should we use according to our needs.

Let's get started 🚀

As I said we will study the array methods according to our needs, so just think what do you want...

I want...

1. to mutate the original array

a) add to original array

i) .push:

this method adds an element to the end of the original array and returns the new length of the array.

let numbers = [1,2,3];
number.push(4);
console.log(numbers) // [1,2,3,4]

ii) .unshift:

this method is like .push method, except it adds the element at the start of the original array.

let numbers = [2,3,4];
numbers.unshift(1);
console.log(numbers) // [1,2,3,4]

b) remove from the original array

i) .pop:

this method removes the last element of the array and returns the removed element.

let names = ['Sid', 'Marty', 'John'];
const removedName = names.pop();
console.log(names) // ['Sid', 'Marty']
console.log(removedName) // 'John'

ii) .shift:

.shift is just like .pop except it removes the element from the start.

iii) .splice:

this method is bit tricky, it can remove and/or add the element(s) to the original array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

// At position 2, remove 1 element and add 2 elements:
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Mongo"]

Other mutating array methods:

i) .reverse

this method reverses an array. The first element becomes the last, and the last array becomes the first.

const array = [1,2,3,4,5]
array.reverse();
console.log(array);
// [5,4,3,2,1]

ii) .sort

this method sorts the array in place and also returns the sorted array. This method converts all the element to string and sorts them in ascending order by default.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

.sort receives an optional parameter a compare function, which can be used to override the default behaviour of .sort.

If compare function is supplied all array elements are sorted according to the return value of the compare function.

compare function receives two arguments say a and b. Where a is first element for comparison and b is second element for comparison.

If compareFunction(a, b) returns a value > than 0, sort b before a.
If compareFunction(a, b) returns a value < than 0, sort a before b.
If compareFunction(a, b) returns 0, a and b are considered equal.

I know it sounds confusing 😅 , take a look at the example 👇.

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => {
  return a - b;
})
console.log(numbers);
// [1,2,3,4,5]

iii) .fill

The .fill method changes all elements in an array to provided value, from a start index (which is 0 by default) to an end index (which is length of the array by default).

const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]


// fill with 5 from position 1
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]

console.log(array1.fill(6));
// [6, 6, 6, 6]

2. a new array

If you want a new array, please look at the following array methods:

i) .map:

As a react developer, .map is the most used array method for me. It loops over the array and perform a certain action on each element then returns the new array of the same length.

const numbers = [1,2,3,4];
const numberSqr = numbers.map((num) => num*num);
console.log(numberSqr) // [1,4,9,16]

.map receives a callback function, which accepts the following arguments:

i) The current element being processed in the array.

ii) index of the current element being processed in the array.

iii) array on which .map was called.
value returned from the callback function will be mapped the corresponding element in the array.

ii) .filter:

This methods creates a new array with all the elements that passed the condition given in the callback function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// ["exuberant", "destruction", "present"]

iii) .slice:

This method returns a copy of the portion of the array.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// ["camel", "duck"]

iv) .concat:

This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result is ['a', 'b', 'c', 1, 2, 3]

3. an array index

i) .indexOf:

This method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['Banana', 'Apple', 'Kiwi'];
console.log(fruits.indexOf('Apple')) // 1
console.log(fruits.indexOf('Orange')) // -1

ii) .findIndex:

This method returns the index of the first element that passed a given condition. Otherwise -1 indicating that no element passed the condition.

const numbers = [5,9,2,11,5];
const index = numbers.findIndex((element) => element > 8) // 2
const ind = numbers.findIndex((element) => element > 12) // -1

4. an array element

.find:

This method returns the first element which satisfies a provided condition. undefined otherwise.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// 12

5. to know if the array includes

i) .includes:

This methods returns true (if the array contains the element) or false.

const friends = ['Jon', 'Joe', 'Jack', 'Jill'];
console.log(friends.includes('Jon')) // true
console.log(friends.includes('Sid')) // false

ii) .some:

Name of this method sometimes confuse me 😣. This method returns true if at least one element passes the given condition.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

iii) .every:

This method returns true if all the elements in the array pass the given condition, false otherwise.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. a new string

.join:

This methods joins all the element of the array by a given string separator and return the string.

let words = ['JS', 'is', 'amazing'];
// joining the words by space
console.log(words.join(' ')) // 'JS is amazing'

// joining by dash ('-')
console.log(words.join('-')) // 'JS-is-amazing'

7. to just loop over an array

forEach:

This method executes a provided function once for each array element.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// 'a'
// 'b'
// 'c'

8. to transform the array to a single value

.reduce:

This methods reduces the array to a single value.

This value can be of any type: number, string, boolean, array or object.

The reducer function takes four arguments:

a) Accumulator

b) Current Value

c) Current Index

d) Source Array

Reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

// sum of the elements of the array using .reduce
let numbers = [1,4,5];
const sum = numbers.reduce((acc, el, i, arr) => acc+el);
console.log(sum) // 10

Phew, this was a lot to take in 😅.

I hope you guys found this article helpful, if you did please leave a like.

Find me on twitter.

DEV Community: Mohd Shahid

5 mistakes I made as a beginner developer 🤯.

1. Be stuck in tutorial hell

2. Imposter syndrome

3. Be a lone wolf

4. Not applying for a job sooner

5. Not building an online presence

Interviewer's Favorite: Event Bubbling

Let's get started 🚀

Introduction

What is an event 🤔?

Why 'events' are important 💭?

What is 'Event Bubbling' 🙄?

Notification API: Show notifications from your web app 🔔

Introduction.

How to use Notifications API 💭

Asking for permission ⬇️

Checking if the user has granted the permission ⬇️

Showing notifications 🔔

Interacting with the notifications:

Permissions API & Why should you start using it?

Hey guys 👋

Let's get started 🚀

Table of content

Introduction 🟢

Where can we use permissions API 🤔?

Accessing the permissions API?

Enogh talk 😅, let's see it in action 👇

1️⃣ Using Permissions API for checking Clipboard permissions:

2️⃣ Checking geolocation permissions using Permissions API:

Thank you for giving it a read. ❤️

Please follow me on twitter

Happy Coding

Click to Copy!

Hey Guys 👋

Let's get started 🚀

Reading text from clipboard 📋

Writing text to clipboard 📋

Thanks ❤️ for giving it a read, I hope you found it useful.

For concise tips and tricks, please follow me on Twitter

Happy Coding 💚

2 Important! Array methods you should know.

Hey everyone 👋

Let's get started 🚀

1. .flat():

2. .flatMap():

Thanks for reading. 💚

Happy coding.

Array methods in JavaScript: when to use which 🤔?

Hey guys 👋

Let's get started 🚀

I want...

1. to mutate the original array

a) add to original array

b) remove from the original array

2. a new array

3. an array index

4. an array element

5. to know if the array includes

6. a new string

7. to just loop over an array

8. to transform the array to a single value

Thanks for reading. 💚

Happy coding.

2️⃣ Checking `geolocation` permissions using Permissions API:

1. `.flat()`:

2. `.flatMap()`: