Useful Javascript Array and Object Methods

Useful Javascript Array and Object Methods

Useful Javascript Array and Object Methods - Object has many useful built-in methods we can use and access to make working with individual objects straightforward...

Useful Javascript Array and Object Methods - Object has many useful built-in methods we can use and access to make working with individual objects straightforward...

I listened to a great Syntax FM podcast that summarized useful JavaScript array and object methods. These methods help developers write clean and readable code. A lot of these methods reduce the need to reach for utility libraries like Lodash.

All the methods in this article are chainable, meaning they can be used in combination with one another and they also don’t mutate data, which is especially important when working with React. With all these array and object methods you’ll find you never have to reach for a for or while loop ever again.


Creates a new array based on whether the items of an array pass a certain condition.


Create an array of student ages that meet the legal drinking age.

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter(age => age > 18); // equal to [19, 21]


Creates a new array by manipulating the values in another array. Great for data manipulation and it is often used in React because it is an immutable method.


Create an array that adds a $ to the beginning of each number.

const numbers = [2, 3, 4, 5];
const dollars = => '$' + number); // equal to ['$2', '$3', '$4', '$5']


This often overlooked method uses an accumulator to reduce all items in an array to a single value. Great for calculating totals. The returned value can be of any type (i.e. object, array, string, integer).


Add up the integers in an array.

const numbers = [5, 10, 15];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue); // total will be equal to 30

There are some really cool use cases for .reduce() outlined in the MDN docs that provide examples on how to do things likes flattening an array of arrays, grouping objects by a property, and removing duplicate items in array.


Applies a function on each item in an array.


Log each array item to the console

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach(emotion => console.log(emotion));

// Will log the following:
// 'happy'
// 'sad'
// 'angry'


Checks if any item in an array passes the condition. A good use case would be checking for user privileges. It can also be used similarly to a .forEach() where you would perform an action on each array item and break out of the loop once a truthy value is returned.


Check if there is at least one 'admin' in an array.

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some(element => element === 'admin'); // containsAdmin will be equal to true


Similar to .some(), but checks if all items in an array pass a condition.


Check if all ratings are equal to or greater than 3 stars.

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every(rating => rating >= 3); // goodOverallRating will be equal to true


Checks if an array contains a certain value. It’s similar to .some(),but instead of looking for a condition to pass, it looks if the array contains a specific value.


Check if the array includes an item with the string ‘waldo’.

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo'); // includesWaldo will be equal to true


This is a static method that creates an array based on another array or string. You can also pass a map callback function as an argument to further shape the data in the new array. Honestly, I’m not too sure why someone would use this over the .map() method.


Create an array from a string.

const newArray = Array.from('hello'); // newArray will be equal to ['h', 'e', 'l', 'l', 'o']

Create an array that has double the value for each item in another array.

const doubledValues = Array.from([2, 4, 6], number => number * 2); // doubleValues will be equal to [4, 8, 12]


Return an array of the values of an object.


const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red' };
const colors = Object.values(icecreamColors); // colors will be equal to ["brown", "white", "red"]


Return an array of the keys of an object.


const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red' };
const types = Object.keys(icecreamColors); // types will be equal to ["chocolate", "vanilla", "strawberry"]


Creates an array which contains arrays of key/value pairs of an object.


const weather = { rain: 0, temperature: 24, humidity: 33 };
const entries = Object.entries(weather);
// entries will be equal to
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array Spread

Spreading arrays using the spread operator () allows you to expand the elements in an array. It’s useful when concatenating a bunch of arrays together. It’s also a good way to avoid using the splice() method when looking to remove certain elements from an array because it can be combined with the slice() method to prevent direct mutation of an array.


Combine two arrays.

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];
const combined = [...spreadableOne, ...spreadableTwo]; // combined will be equal to [1, 2, 3, 4, 5, 6, 7, 8]

Remove an array element without mutating the original array.

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0, 3), ...animals.slice(4)]; // mammals will be equal to ['squirrel', 'bear', 'deer', 'rat']

Object Spread

Spreading an object allows for the addition of new properties and values to an object without mutations (i.e. a new object is created) and it can also be used to combine multiple objects together. It should be noted that spreading objects does not do nested copying.


Add a new object property and value without mutating the original object.

const spreadableObject = { name: 'Robert', phone: 'iPhone' };
const newObject = { ...spreadableObject, carModel: 'Volkswagen' };
// newObject will be equal to
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Function Rest

Functions can use the rest parameter syntax to accept any number of arguments as an array.


Display the array of passed arguments.

function displayArgumentsArray(...theArguments) {
displayArgumentsArray('hi', 'there', 'bud'); // Will print ['hi', 'there', 'bud']


Prevents you from modifying existing object properties or adding new properties and values to an object. It’s often what people think const does, however const allows you to modify an object.


Freeze an object to prevent the name property from being changed.

const frozenObject = { name: 'Robert' };
Object.freeze(frozenObject); = 'Henry'; // frozenObject will be equal to { name: 'Robert' }


Stops any new properties from being added to an object, but still allows for existing properties to be changed.


Seal an object to prevent the wearsWatch property from being added.

const sealedObject = { name: 'Robert' };
Object.seal(sealedObject); = 'Bob';
sealedObject.wearsWatch = true; // sealedObject will be equal to { name: 'Bob' }


Allows for objects to be combined together. This method is not really needed because you can use the object spread syntax instead. Like the object spread operator, Object.assign() does not do deep cloning. Lodash is your best friend when it comes to deep cloning objects.


Combine two objects into one.

const firstObject = { firstName: 'Robert' };
const secondObject = { lastName: 'Cooper' };
const combinedObject = Object.assign(firstObject, secondObject); // combinedObje


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.