DEV Community: Amitav Mishra

Play audio with HTMLAudioElement API in JavaScript

Amitav Mishra — Sat, 15 Jul 2023 16:10:25 +0000

The HTMLAudioElement API has access to all the properties and methods of the HTML <audio> element. This API allows us to play audio without even creating the <audio> elements. The Audio() constructor creates and returns a new HTMLAudioElement object.

const audio = new Audio('nature.wav');

This API inherits properties and methods from the HTMLMediaElement API that are needed to use the media capabilities like play, pause, mute, etc. Let’s discuss some of them.

Methods

The play() method

This method is used to play the audio. It returns a Promise which resolves when the audio successfully starts and rejects if any error occurs in starting the audio.

const audio = new Audio('nature.wav');
audio.play();

The pause() method

This method pauses the audio.

audio.pause();

The load() method

This method loads or resets the audio. If we call this method, the audio will start from the beginning when we play it next time.

audio.load();

Use case 1 – Load:

When we create a new HTMLAudioElement object and call the play() method for the first time, it takes some time to load and play the audio. So, for a scenario where we instantly want to play the audio on a button click or something, we see a delay.

To fix this delay, we can use the load() method to load the audio beforehand and keep it ready, so the next time we call play(), it will start playing without any delay.

const audio = new Audio('nature.wav');
audio.load();

// now play the audio whenever you want
audio.play();

Use case 2 – Reset:

If we want to stop the ongoing audio, and we want it to play from the beginning the next time we play it, then we can use the load() method to reset the audio after we pause it.

audio.pause();
audio.load();

Properties

duration

It returns the total duration of the audio in seconds.

console.log(audio.duration);

loop

It is used to set or get the loop value that indicates whether the audio should play repeatedly.

const audio = new Audio('nature.wav');
console.log(audio.loop); // false
audio.loop = true;
console.log(audio.loop); // true

muted

It is used to set or get the mute value of the audio.

const audio = new Audio('nature.wav');
console.log(audio.muted); // false
audio.muted = true;
console.log(audio.muted); // true

volume

It is used to set or get the volume of the audio. Its value ranges from 0.0 to 1.0. If we set any value higher than 1, it throws an error.

const audio = new Audio('nature.wav');
console.log(audio.volume); // 1
audio.volume = 0.1;

The Vibration API in JavaScript

Amitav Mishra — Wed, 19 Oct 2022 17:53:58 +0000

Vibrations are the best way to provide physical feedback to users for any action mostly for mobile users. For example, while showing a warning message or alert, while receiving a message or notification etc.

The Vibration API allows web apps to access the vibration hardware of the device (if exists) to create vibrations. It provides a method navigator.vibrate() for the same purpose.

The navigator.vibrate() method

This method takes a value of vibration duration in milliseconds and vibrates the device for that long.

navigator.vibrate(500); 
// device will vibrate for 500ms

The Vibration API doesn’t support in few of the browsers like IE, Opera, Safari, etc., so it will be better to check the browser support before using it.

if (navigator.vibrate) {
   navigator.vibrate(500);
}

Vibrating in a pattern

The vibrate() method can also accept an array of values as an argument. We can provide different values for how much time it will vibrate and how much time it won’t. It will vibrate for values at even index and pause for values at odd index.

navigator.vibrate([320, 200, 320, 1000, 320, 200, 320]);

Here it will first vibrate for 320ms and pause for 200ms, then again vibrate for 320ms and pause for 1000ms, and so on.

To cancel a running vibration, we can call vibrate() method by passing 0 or an empty array as an argument.

navigator.vibrate(0);
// OR
navigator.vibrate([]);

5 ways to convert a String into an Array in JavaScript

Amitav Mishra — Tue, 20 Sep 2022 15:09:36 +0000

The split() method

This method is used to split a string by a separator provided and returns an array of substrings.

const str = 'Tiger,Horse,Elephant,Wolf';
const arr = str.split(','); 
//split string by comma
console.log(arr);
// ["Tiger", "Horse", "Elephant", "Wolf"]

To split the string by each character, we can specify an empty string (“”) as the separator.

const str = 'jscurious';
const arr = str.split('');
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

The split() method accepts a second optional argument which sets the limit on the splits. This limit value decides how many elements will be included in the returned array.

const str = 'Cricket | Hockey | Football | Tennis';
const arr = str.split(' | ', 2);
console.log(arr); 
// ['Cricket', 'Hockey']

The Array.from() method

This method returns an array from any iterable object. We can pass a string value to this method to get a character array.

const str = 'jscurious';
const arr = Array.from(str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

This method also accepts two optional arguments. One is a map function to call on each element of the array, and the other is a value to use as this while executing the map function.

const str = 'jscurious';
const arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["j0", "s1", "c2", "u3", "r4", "i5", "o6", "u7", "s8"]

The spread operator (`…`)

The spread operator extracts and spreads each character of a String. We can wrap all those characters inside an array literal [] to create a new array from string.

const str = 'jscurious';
const arr = [...str];
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

The Object.assign() method

This method copies the values and properties from one or more source objects to a target object. We can provide a string as the source and an empty array as the target to create an array from a string.

const str = 'jscurious';
const arr = Object.assign([], str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

Using loop

We can loop through each character of a string and push that character to an empty array to create an array from a string.

const str = 'jscurious';
const arr = [];
for (let i of str) {
  arr.push(i);
}
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

5 ways to check if a key exists in an object in JavaScript

Amitav Mishra — Sun, 07 Aug 2022 18:40:00 +0000

Using the “in” operator

The in operator returns true if the specified property is present in the specified object or in its prototype chain, otherwise it returns false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log('name' in app); // true
console.log('release_date' in app); // false

Using the Reflect.has() method

Reflect is a built-in object that provides some utility methods for JavaScript operations. The has() method of this object returns true if the specified property is present in the specified object or in its prototype chain, otherwise it returns false. Syntax is:

Reflect.has(targetObject, propertyKey);

Let’s use it in one example.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(Reflect.has(app, 'name')); // true
console.log(Reflect.has(app, 'release_date')); // false

Using the hasOwnProperty() method

This method is present in the object prototype. So any object which is not created with Object.create(null), has access to this method. This method returns true if the specified property is present in the object (not inherited), otherwise, it returns false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(app.hasOwnProperty('type')); // true
console.log(app.hasOwnProperty('founder_name')); // false

By accessing the property and comparing it with “undefined”

If we access any property that doesn’t exist on the object, it returns undefined. This way, we can access the property and compare its value with undefined to know whether it exists or not.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(app['name'] === undefined); // false
console.log(app['founder_name'] === undefined); // true

// or simply use an if block without comparing to undefined
if (app['founder_name']) {
    // do your work
}

We can’t determine the existence of a property with this approach when a property exists in the object and has a value of undefined.

const auth = { token: undefined };
console.log(auth['token'] === undefined); // true
console.log(auth['timestamp'] === undefined); // true

The Object.hasOwn() method (ES2022 update)

This method returns true if the specified property is present in the object (not inherited), otherwise it returns false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(Object.hasOwn(app, 'type')); // true
console.log(Object.hasOwn(app, 'founder_name')); // false

Apart from the hasOwnProperty() and hasOwn() method, the other three ways work fine in the case of inherited properties. Let’s see one example of that.

function square(side) {
    this.side = side;
}

square.prototype.getArea = function () {
    return Math.pow(this.side, 2);
}

const sq = new square(5);
console.log(sq); // { side: 5 };
console.log(sq.getArea()); // 25
/*
 Here "side" will be part of own object whereas
 "getArea" will be inherited through prototype chain.
*/

// checking with 'in'
console.log('side' in sq); // true
console.log('getArea' in sq); // true

// checking with 'Reflect.has()'
console.log(Reflect.has(sq, 'side')); // true
console.log(Reflect.has(sq, 'getArea')); // true

// checking with 'hasOwnProperty()'
console.log(sq.hasOwnProperty('side')); // true
console.log(sq.hasOwnProperty('getArea')); // false

// comparing with 'undefined'
console.log(sq['side'] !== undefined); // true
console.log(sq['getArea'] !== undefined); // true

// checking with 'hasOwn()'
console.log(Object.hasOwn(sq, 'side')); // true
console.log(Object.hasOwn(sq, 'getArea')); // false

Conclusion

The first two approaches (in operator and Reflect.has() method) is more prominent while the other three come with some limitations.

As the name suggests, the hasOwnProperty() and hasOwn() methods work only for the object’s own properties and not for inherited properties.
The hasOwnProperty() method is not available for objects created with Object.create(null).
The “comparing with undefined” approach works fine unless the specified property exists but has undefined as value.

JavaScript shorthand tips and tricks

Amitav Mishra — Sat, 02 Jul 2022 12:44:23 +0000

Let's checkout some shorthand tips and other tricks.

Remember, some of these are not readable and might not seems relevant to use in a project, but my intensions here is to make you aware that these tricks exist.

Assigning values to multiple variables

We can assign values to multiple variables in one line with array destructuring.

//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

Assigning a default value

We can use OR(||) short circuit evaluation or nullish coalescing operator (??) to assign a default value to a variable in case the expected value is found falsy.

//Longhand
let imagePath;

let path = getImagePath();

if (path !== null && path !== undefined && path !== '') {
    imagePath = path;
} else {
    imagePath = 'default.jpg';
}

//Shorthand
let imagePath = getImagePath() || 'default.jpg';
// OR
let imagePath = getImagePath() ?? 'default.jpg';

AND(&&) Short circuit evaluation

If you are calling a function only if a variable is true, then you can use the AND(&&) short circuit as an alternative for this.

//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin && goToHomepage();

Swap two variables

To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.

let x = 'Hello', y = 55;

//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];

Template Literals

We normally use the + operator to concatenate string values with variables. With ES6 template literals, we can do it in a more simple way.

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

Multiple condition checking

For multiple value matching, we can put all values in one array and use indexOf() or includes() method.

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // Execute some code
}

// Shorthand
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
   // Execute some code
}

// OR
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}

Object Property Assignment

If the variable name and object key name are the same then we can just mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as the variable value.

let firstname = 'Amitav';
let lastname = 'Mishra';

//Longhand
let obj = {firstname: firstname, lastname: lastname};

//Shorthand
let obj = {firstname, lastname};

String into a Number

We can convert string to number by simply providing an unary operator (+) in front of the string value.

//Longhand
let total = parseInt('453', 10);
let average = parseFloat('42.6', 10);

//Shorthand
let total = +'453';
let average = +'42.6';

Exponent Power

We can use Math.pow() method to find the power of a number. There is a shorter syntax to do it with a double asterisk (**).

//Longhand
const power = Math.pow(4, 3); // 64

// Shorthand
const power = 4**3; // 64

Double NOT bitwise operator (~~)

The double NOT bitwise operator is a substitute for Math.floor() method.

//Longhand
const floor = Math.floor(6.8); // 6

// Shorthand
const floor = ~~6.8; // 6

The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator (~~) will give wrong results, so recommended to use Math.floor() in such case.

Find max and min number in an array

const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

Merging of arrays

let arr1 = [20, 30];

//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

Remove falsey values from Array

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];

let filterArray = arr.filter(Boolean);
// filterArray = [12, "xyz", -25, 0.5]

Note: Zero (0) is considered to be a falsey value so it will be removed in both the cases. You can add an extra check for zero to keep it.

Remove duplicates from Array

const arr = [10, 5, 20, 10, 6, 5, 8, 5, 20];
const unique = [...new Set(arr)];
console.log(unique); // [10, 5, 20, 6, 8]

Create random string token

const token = Math.random().toString(36).slice(2);
// it will create a 11 character string. Ex: '3efstaz9g8a'

Find number of arguments expected by a function

function func(a, b, c) {
  // code
}

console.log(func.length); // 3
// function with Rest parameter
function func(a, b, ...c) {
  // code
}
console.log(func.length); // 2

Check if a key exists in an object

const ob = {x: 5, y: 10};
// using "in" operator
console.log('x' in ob); // true
console.log('abc' in ob); // false
// using Reflect object
console.log(Reflect.has(ob, 'x')); // true
console.log(Reflect.has(ob, 'abc')); // false

JavaScript getters and setters

Amitav Mishra — Mon, 09 May 2022 18:32:33 +0000

The getters and setters are helpful to access object properties and manipulate them in an encapsulated way. Let’s explore these methods in detail.

Getter

The get keyword is used to create a getter function that will return a computed value. Unlike normal functions, we don’t need to call the getter function; instead, we can access it directly with its name.

const person = {
  first_name: 'Peter',
  last_name: 'Parker',
  get full_name() {
      return `${this.first_name} ${this.last_name}`
  }
}

console.log(person.full_name); // Peter Parker

The get keyword binds the getter function with an object property of the same name. When we access this object property, the getter function result gets returned.

Just remember, until and unless we access the object property, its value never gets calculated. That means it won’t execute the getter function and assign the returned value to the object property beforehand.

Things to remember while creating getters

It should not have any parameters.
There should not be another data property or getter with the same name present.

Like data properties, we can also delete getters.

const obj = {
  get data() {
      return 'jscurious';
  }
}
delete obj.data;
console.log(obj.data); // undefined

Setter

The set keyword is used to create a setter function. The set keyword binds the setter function with an object property of the same name. So, whenever we try to change the value of this object property, the setter function gets executed.

const obj = {
  msg: '',
  set message(value) {
    this.msg = value;
  }
}
obj.message = 'Hello';
console.log(obj.msg); // Hello

Things to remember while creating setters

It should exactly have one parameter.
There should not be another data property or setter with the same name present. But both getter and setter can have the same name.

Like data properties, we can also delete setters.

const obj = {
  msg: '',
  set message(value) {
    this.msg = value;
  }
}
delete obj.message;

Using getter and setter inside class

Let’s create one encapsulated class. The class will have one private field that can be accessed only through setter and getter.

class Square {
  #side_value;

  set side(value) {
    this.#side_value = value;
  }
  get side() {
    return this.#side_value;
  }
  get area() {
    return this.#side_value ** 2;
  }
}

const sq = new Square();
sq.side = 25;
console.log(sq.side); // 25
console.log(sq.area); // 625

A Brief Guide to Promises in JavaScript

Amitav Mishra — Sun, 04 Jul 2021 16:24:30 +0000

A Promise in JavaScript is an object which returns a result after an asynchronous operation has finished. The result of promise can either be a success or a failure.

The Promise has 3 states,

Pending — The Promise has no result yet.
Fulfilled — The Promise has resolved.
Rejected — The Promise has rejected.

let promise = new Promise((resolve, reject) => {
    const number = Math.round(Math.random() * 10);
    if(number <= 5) {
        resolve('Success');
    } else {
        reject(new Error('Failed'));
    }
});

To create a Promise we use the Promise() constructor with the new keyword. The Promise() constructor accepts a callback function called “executer” which accepts two arguments i.e. resolve and reject.

We need to call the resolve() function when the executer function obtains the result and call the reject() function when there is an error.

Now to consume the Promise we use the Promise methods like then(), catch() and finally().

Promise.then()

The then() method can accept two callback functions, first one executes when the Promise is resolved and second one when Promise is rejected.

function getPromise(isTrue) {
    return new Promise((resolve, reject) => {
        if(isTrue) {
            resolve('Success');
        } else {
            reject(new Error('Failed'));
        }
    });
}
getPromise(true).then(
    response => console.log('Promise is resolved with result = ' + response),
    error => console.log('Promise is rejected with error = ' + error.message)
);
// Promise is resolved with result = Success
getPromise(false).then(
    response => console.log('Promise is resolved with result = ' + response),
    error => console.log('Promise is rejected with error = ' + error.message)
);
// Promise is rejected with error = Failed

If we want to handle success and failure cases separately then we can use then() only for success and catch() for failure.

Promise.catch()

The catch() method takes a callback function which executes when the Promise is rejected.

function getPromise(isTrue) {
    return new Promise((resolve, reject) => {
        if(isTrue) {
            resolve('Success');
        } else {
            reject(new Error('Failed'));
        }
    });
}
getPromise(false)
.then(response => console.log('Promise is resolved with result = ' + response))
.catch(error => console.log('Promise is rejected with error = ' + error.message))
// Promise is rejected with error = Failed

If we are handling errors both in then() and catch(), then only the error handler inside then() executes in case of any error and not the handler inside catch().

let promise = new Promise((resolve, reject) => {
    reject(new Error('An error occurred'));
});
promise.then(null, () => console.log('Error caught inside then'))
.catch(() => console.log('Error caught inside catch'))
// Error caught inside then

If further any error occurred in error handler of then(), then it will get caught in catch().

let promise = new Promise((resolve, reject) => {
    reject(new Error('Error occurred in Promise'));
});
promise.then(null, 
    err => {
        console.log('Error caught inside then, message: ' + err.message);
        throw new Error('Error occurred in then');
    })
.catch(err => {
    console.log('Error caught inside catch, message: ' + err.message);
});
// Error caught inside then, message: Error occurred in Promise
// Error caught inside catch, message: Error occurred in then

Promise.finally()

The finally() method takes a callback function which executes after the Promise is either resolved or rejected.

On Success

let promise = new Promise((resolve, reject) => {
    resolve('Success');
});
promise.then(res => console.log(res))
.catch(err => console.log(err.message))
.finally(() => console.log('Executing Finally'));
// Success
// Executing Finally

On failure

let promise = new Promise((resolve, reject) => {
    reject(new Error('Failed'));
});
promise.then(res => console.log(res))
.catch(err => console.log(err.message))
.finally(() => console.log('Executing Finally'));
// Failed
// Executing Finally

Promises Chaining

We can execute a sequence of asynchronous operations one after other by chaining methods then(), catch() and finally().

takeOrder()
.then(order => makeOrder(order))
.then(order => serveOrder(order))
.then(status => console.log(status))
.catch(err => console.log(err));

Here takeOrder() will return a Promise that will be consumed in first then() method. The makeOrder() will return a Promise which will be consumed in second then() method and serveOrder() will again return a Promise which will be consumed in third then() method. If any error occurred in any of the promises then it will get caught in catch() method.

Promise.all()

The Promise.all() method takes an iterable of promises as an input, and returns a single Promise and it gets resolved when all the promises get resolved or any one of them gets rejected.

function getPromise(delay) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(delay + 100);
        }, delay);
    })
}
Promise.all([getPromise(1000), getPromise(3000), getPromise(2000)])
.then(responses => console.log(responses))
.catch(error => console.log(error));

Promise.race()

The Promise.race() method takes an iterable of promises and returns a single Promise which gets resolved/rejected as soon as any of the Promises resolved or rejected.

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 1');
    }, 1000);
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 2');
    }, 500);
});
Promise.race([promise1, promise2])
.then(res => console.log(res)) // Promise 2
.catch(err => console.log(err));

What Are Callback Functions In JavaScript?

Amitav Mishra — Tue, 18 May 2021 15:05:21 +0000

A callback is a function that is passed into another function as an argument which can be invoked later inside the function.

Synchronous callbacks

Synchronous means the code statements execute immediately after one another in a sequential manner.

function print(number, result) {
    console.log(`${number} is ${result}`);
}
function checkEvenOrOdd(number, callback) {
  const result =  (number % 2 === 0) ? 'Even' : 'Odd';
  callback(number, result);
}
checkEvenOrOdd(56, print);
// 56 is Even

Here the callback is executing immediately and it is not waiting for any asynchronous operation to finish. That’s why it is synchronous callback.

Asynchronous callbacks

If a callback is executing after an asynchronous operation has finished then it is an Asynchronous callback.

Let’s see one example where we will take an order and print it.

function takeOrder() {
    setTimeout(() => {
       return (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
    }, 1000);
}
let order = takeOrder();
console.log('Order is for: ' + order);
// Order is for: undefined

Here in the takeOrder function, the setTimeout will run after 1 sec, and by that time the console.log statement has already executed therefore printed value of order as undefined.

Now we can resolve this issue if we can log our message to console only after the data has returned from takeOrder. This can be done by passing a callback function to takeOrder which will be invoked inside takeOrder function.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}
takeOrder((order) => {
    console.log('Order is for: ' + order);
});
// Order is for: Tea

Here after 1 second the callback function will be called and the console statement will get executed with the correct order value.

Note: The output of takeOrder function may differ in your case as we are using Math.random() to decide order value.

Handling errors with callbacks

We can pass different callbacks for both success and failure scenarios.

function takeOrder(success, failure) {
    setTimeout(() => {
        const random = (Math.random() * 10);
        if(random < 8) {
            const order = random < 4 ? 'Coffee' : 'Tea';
            success(order);
        } else {
            failure('Order Not Available');
        }

    }, 1000);
}

takeOrder(
    (order) => {
        console.log('Order is for: ' + order);
    },
    (error) => {
        console.log(error);
    }
);

Nested callbacks

Let’s see the order process one by one.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}

function makeOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is prepared');
    }, 1000);
}

function serveOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is served');
    }, 1000);
}

takeOrder((order) => {
    console.log('Order is for: ' + order);
    makeOrder(order, (orderStatus) => {
        console.log(orderStatus);
        serveOrder(order, (orderStatus) => {
            console.log(orderStatus);
        })
    })
});

Output

Order is for: Coffee
Coffee is prepared
Coffee is served

Here makeOrder is called when response from takeOrder comes. Similarly serveOrder is called when response from makeOrder comes. Here we are nesting callbacks inside one another to execute functions in a sequence.

If the nesting of callbacks increases then it is called a Callback hell, where it is difficult to manage the callbacks and it reduces the readability of the code. Take a look at a sample callback hell.

takeOrder((order) => {
    makeOrder(order, () => {
        serveOrder(order, () => {
            provideBill(order, () => {
                takeBill(order, () => {
                    // some more callbacks
                })
            })
        })
    })
});

This callback hell can be fixed by using promise and async/await.

There are some built in methods available in JavaScript that accepts callback as argument.

// Array.map()
array.map((element) => {
    // your code here
});
// setTimeout
setTimeout(() => {
    // your code here
}, timeout);

Let’s see some other methods that accept callback.
Array.filter(), Array.reduce(), Array.find(), Array.sort(), Array.forEach(), setInterval(), addEventListener(), Promise.then(), Promise.catch() etc.

A guide to Array.reduce() Method in JavaScript

Amitav Mishra — Mon, 18 Jan 2021 06:35:18 +0000

The Array.reduce() method reduces the array to a single value. The reduce() method takes one reducer function as the first argument and one initial value as second optional argument. The reducer function executes for each element of array and returns a value which further provided as the first argument (accumulator) to the next reducer function call.

array.reduce(reducerFunction, initialValue);

The reducer function takes two required arguments i.e. accumulator and currentValue. The accumulator is either the initial value or the previously returned value. The second argument is the value of the current element.

function reducerFunction(accumulator, currentValue, currentIndex, array) {}

The reducer function also takes two optional arguments i.e. currentIndex and array. The currentIndex is the index of currentValue in array and the last optional argument is the array on which the reduce() method called upon.

How reduce() method works

Let’s see one example to sum all the values of array.

let numbers = [25, 48, 13];

let total = numbers.reduce(reducerFunction);

function reducerFunction(result, current) {
    return result + current;
}

console.log(total); // 86

So here the reducerFunction gets called first time with 25 and 45 as arguments and returns 73. The next second time reducerFunction gets called with previously returned value 73 and 13 and returns 86.

We can check how many times the reducerFunction has been called and values of the arguments by providing a console.log statement before return.

function reducerFunction(result, current) {
    console.log('result:' + result, 'current:' + current);
    return result + current;
}

Output:

result:25 current:48
result:73 current:13

If we pass an initial value to the reducerFunction then for the first call the initial value will be the first argument and the first element of array will be the second argument.

let numbers = [25, 48, 13];

let initial = 0;

let total = numbers.reduce(reducerFunction, initial);

function reducerFunction(result, current) {
    console.log('result:' + result, 'current:' + current);
    return result + current;
}

console.log(total); // 86

Output:

result:0 current:25
result:25 current:48
result:73 current:13
86

Let’s see some more examples of reduce() method.

Find maximum and minimum number in Array

If we have an array of numbers, then we can find both max and min number by comparing every two numbers of array.

let numbers = [25, 48, 13, 83, 59];

let maxNumber = numbers.reduce((max, current) => {
    return max > current ? max : current;
})

console.log(maxNumber); //83

Similarly we can find the minimum number by changing the reducer function as below:

let minNumber = numbers.reduce((min, current) => {
    return min < current ? min : current;
});

Convert Array to Object

Suppose we have an array of students object. Every student object has name and their semester marks.

let students = [
    {name: 'Joey', marks: 41},
    {name: 'Monica', marks: 83},
    {name: 'Ross', marks: 92},
    {name: 'Rachel', marks: 51},
    {name: 'Chandler', marks: 76},    
    {name: 'Pheobe', marks: 45}
]

Now we want to create one object from the array with students name as key and their marks as value. Let’s see how to do that with reduce().

let result = students.reduce((obj, student) => {
    obj[student.name] = student.marks;
    return obj;
}, {});

console.log(result);

Output:

{
    Joey: 41,
    Monica: 83,
    Ross: 92,
    Rachel: 51,
    Chandler: 76,    
    Pheobe: 45
}

5 ways to remove elements from Array in JavaScript

Amitav Mishra — Sat, 02 Jan 2021 15:35:00 +0000

There are various ways to remove an element from array. We will make use of pop, shift, splice, delete and length to remove elements from array. Let’s discuss all the 5 methods one by one in brief.

The pop() method

This method removes an element from the end of array. It returns the value that was removed.

const countries = ['India', 'US', 'Canada', 'France'];

const removedItem = countries.pop(); 

console.log(countries); // ['India', 'US', 'Canada']

console.log(removedItem); // France

The shift() method

This method removes an element from the beginning of array and returns the removed element.

const phones = ['Nokia', 'Samsung', 'Apple'];

const removedItem = phones.shift(); 

console.log(phones); // ['Samsung', 'Apple']

console.log(removedItem); // Nokia

The splice() method

This method can both remove and add elements at a specified index of array.

The first parameter of splice() takes an array index where you want to add or remove element.
The second parameter takes number of elements to be removed from the specified index. If not removing any element then this can be 0.
The third parameter takes elements to be added at the specified index. If we are only removing then this can be left as blank. We can add as many values as we want.

const language = ['JavaScript', 'Java', 'SQL', '.NET'];

language.splice(2, 1); 

console.log(language); //['JavaScript', 'Java', '.NET']

We can also remove and add new elements at the same time.

const language = ['JavaScript', 'Java', 'SQL', '.NET'];

language.splice(2, 2, 'Android', 'Swift'); 

console.log(language); //['JavaScript', 'Java', 'Android', 'Swift']

The splice method returns an array of deleted elements.

const numbers = [20, 40, 60, 80];

console.log(numbers.splice(1, 2)); // [40, 60]

The delete keyword

The delete keyword is used to delete a property of an object. This can be used to delete any element from array. The delete keyword deletes the element but leaves an undefined value at that place.

const games = ['Cricket', 'Football', 'Hockey'];

delete games[2]; 

console.log(games); // ['Cricket', 'Football', undefined]

Using Array length

If we want to remove some specified number of elements from the end of an array, then we can just set the array’s length property to original length of array subtracted by the number of elements to be removed.

const numbers = [10, 20, 30, 40, 50];

numbers.length = 3; // to remove two elements from end

console.log(numbers); // [10, 20, 30]

We have discussed 5 different methods to remove elements from an array. You can use any of the method based on your requirements.

6 Ways to add items to an Array in JavaScript

Amitav Mishra — Thu, 10 Dec 2020 12:13:03 +0000

There are various ways to add or append an item to an array. We will make use of push, unshift, splice, concat, spread and index to add items to array. Let’s discuss all the 6 different methods one by one in brief.

The push() method

This method is used to add elements to the end of an array. This method returns the new array length.

const movies = ['Avengers', 'Iron-man', 'Thor'];

const newLength = movies.push('Hulk'); 

console.log(movies); // ['Avengers', 'Iron-man', 'Thor', 'Hulk'];

console.log(newLength); //4

We can also add multiple values with push method.

const movies = ['Iron-man', 'Thor'];

movies.push('Avengers', 'Deadpool', 'Hulk');

console.log(movies); // ["Iron-man", "Thor", "Avengers", "Deadpool", "Hulk"]

The unshift() method

The unshift() method is used to add elements at the beginning of an array. This method returns the new array length.

const cars = ['Audi', 'BMW', 'Jaguar'];

const newLength = cars.unshift('Mercedes'); 

console.log(newLength ); // 4

console.log(cars); // ['Mercedes', 'Audi', 'BMW', 'Jaguar']

We can also add multiple values with unshift() method.

const cars = ['Audi', 'Jaguar'];

cars.unshift('Mercedes', 'Tesla'); 

console.log(cars); // ['Mercedes', 'Tesla', 'Audi', 'Jaguar']

The splice() method

This method can both add and remove items at a specified index of array.

The first parameter of splice() takes an array index where you want to add or remove item.
The second parameter takes number of elements to be removed from the specified index. If not removing any item then this can be 0.
The third parameter takes items to be added at the specified index. If we are only removing then this can be left as blank. We can add as many values as we want.

const language = ['Java', 'PHP'];

language.splice(1, 0, 'Android', 'Swift'); 
//['Java', 'Android', 'Swift' , 'PHP']

The concat() method

The concat() method is used to merge two or more arrays and returns a new array containing the merged values. This method does not change the existing arrays.

Passing array as parameter

const marvel = ['Avengers', 'Thor'];

const DC = ['Batman', 'Joker'];

const movies = marvel.concat(DC);

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]

Passing value as parameter

const marvel = ['Avengers', 'Thor'];

const movies = marvel.concat('Batman', 'Joker');

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]

The spread(…) operator

The spread operator(...) is used to expand and spread array elements. We can spread and merge an array with new values using spread operator.

const animals = ['Tiger', 'Horse'];

const zoo = [...animals, 'Elephant', 'Lion', 'Deer']

console.log(zoo);  // ['Tiger', 'Horse', 'Elephant', 'Lion', 'Deer']

Adding element with index

We can add a new value to the array by accessing the particular index and assign the new element.

const number = [15, 40];

number[2] = 65;

number[3] = 80;

console.log(number); //  [15, 40, 65, 80]

If we leave some of the indexes in the middle and assign values to array, then the left out places in the middle will be filled with undefined values.

const number = [15, 40];

number[3] = 65;

number[6] = 80;

console.log(number); //  [15, 40, undefined, 65, undefined, undefined, 80]

So we have discussed 6 different ways to append items to an array. You can use any of the 6 methods to add an item to array.

Let's explore the setTimeout and setInterval methods in JavaScript

Amitav Mishra — Fri, 04 Dec 2020 11:51:44 +0000

The setTimeout() method

The setTimeout() method calls a function after a specified time provided in milliseconds. This method takes a function as a first argument and time in milliseconds as the second argument. You can write your logic inside the function body which will execute after the time you have specified.

For example: Show an alert box after 5 seconds.

setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);

To cancel the timer, you can store the timer first in a variable and call the clearTimeout() function by passing the timer as argument.

var timer = setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);

clearTimeout(timer);

The setInterval() method

The setInterval() method calls a function at specified interval of time provided in milliseconds. It takes function and time (in milliseconds) as its arguments.

For example: Print a random number every second.

setInterval(() => {
    console.log(Math.random());
}, 1000);

To cancel the interval, you can store the interval first in a variable and call the clearInterval() function by passing the interval as argument.

var interval = setInterval(() => {
    console.log(Math.random());
}, 1000);

clearInterval(interval);

Create a running clock timer

To create a running clock, we need to take help of setInterval() method and Date object. We can get the current time by creating a new Date object.

new Date().toLocaleTimeString(); // 4:50:16 PM

Once we create a Date object, it will give us the information of current date and time, it will not change its value with the passing time. So we need to create a fresh new Date object every time to get the latest date and time.

For this example, we will create a new Date object every second and print that.

var date = setInterval(() => { 
   console.log(new Date().toLocaleTimeString());
}, 1000);

To show the running clock timer on a web page, you can create a div element in HTML and set the it’s innerHTML with the latest time every second.

<div id="time"> </div>

var date = setInterval(() => {
  const element = document.getElementById('time');
  element.innerHTML = new Date().toLocaleTimeString();
}, 1000);

DEV Community: Amitav Mishra

Play audio with HTMLAudioElement API in JavaScript

Methods

The play() method

The pause() method

The load() method

Use case 1 – Load:

Use case 2 – Reset:

Properties

duration

loop

muted

volume

You may also like

The Vibration API in JavaScript

The navigator.vibrate() method

Vibrating in a pattern

You may also like

5 ways to convert a String into an Array in JavaScript

The split() method

The Array.from() method

The spread operator (…)

The Object.assign() method

Using loop

You may also like

5 ways to check if a key exists in an object in JavaScript

Using the “in” operator

Using the Reflect.has() method

Using the hasOwnProperty() method

By accessing the property and comparing it with “undefined”

The Object.hasOwn() method (ES2022 update)

Conclusion

You may also like

JavaScript shorthand tips and tricks

Assigning values to multiple variables

Assigning a default value

AND(&&) Short circuit evaluation

Swap two variables

Template Literals

Multiple condition checking

Object Property Assignment

String into a Number

Exponent Power

Double NOT bitwise operator (~~)

Find max and min number in an array

Merging of arrays

Remove falsey values from Array

Remove duplicates from Array

Create random string token

Find number of arguments expected by a function

Check if a key exists in an object

You may also like

JavaScript getters and setters

Getter

Things to remember while creating getters

Setter

Things to remember while creating setters

Using getter and setter inside class

You may also like

A Brief Guide to Promises in JavaScript

Promise.then()

Promise.catch()

Promise.finally()

On Success

On failure

Promises Chaining

Promise.all()

Promise.race()

You may also like

What Are Callback Functions In JavaScript?

Synchronous callbacks

Asynchronous callbacks

Handling errors with callbacks

Nested callbacks

You may also like

A guide to Array.reduce() Method in JavaScript

How reduce() method works

Find maximum and minimum number in Array

Convert Array to Object

You May Also Like

The spread operator (`…`)