Javascript Working with Objects and Arrays

Before I start here, I was working with objects and arrays in PHP and other languages. I have been using VueJS these days and always get confused about where to use array or object or convert the object to an array or convert array to object. It is always a dilemma if you are starting to work with javascript.

So, I thought it would help other developers too who have the same thoughts as mine. I am trying to list out all the necessary things while working out with object or array.

Here are some of it and I will keep on updating this one as my use case scenarios.

How to check if your variable is an object?

To check if a variable is an object:

const foo = { test: [{name: ‘foo’}, { name: ‘bar’ }]}
console.log(foo.constructor.name)
//Output:// "Object"

You can make a method to check quickly:
It will return true or false depending on your object.

function isObject(obj){
return (obj.constructor.name === 'Object')
}

How to check if your variable is an array?

Now you can handle to check the array in a similar way:

const foo = [{name: 'foo'}, { name: 'bar' }]
console.log(foo.constructor.name)
console.log(Array.isArray(foo))
//Output:// "Array"
// true

To check array you can either use constructor.name or just use Array.isArray whichever you feel easy to work with. I always go with Array.isArray as it directly returns the result in a single line.

You can even make a utility method like this one:

function isArray(arr){
return Array.isArray(arr)
}

Here, I have tried to cover the easy way as there are many ways to handle the checking mechanism. Now, let's move on converting the array to object or object to arrays.

How to convert an object to an array?

Let’s take the same example of the object from above and try to convert it into an array:

const foo = { test: [{name: 'foo'}, { name: 'bar' }]}
console.log(Object.entries(foo))
console.log(Object.keys(foo))
console.log(Object.values(foo))
//Output:// [["test", [{name: "foo"}, {name: "bar"}]]]
// ["test"]
// [[{ name: "foo"}, {name: "bar"}]]

Object.entries(foo):
Object.entries() methods convert the object to an array with a single line code.

Object.keys(foo):
Object.keys() methods convert the keys of an object to an array if you ever need only the keys of the object as an array.

Object.values(foo):
Object.keys() methods convert the values of an object to an array if you ever need only the values of the object as an array.

How to convert an object to an array?

Let’s take the same example of the object from above and try to convert it into an array:

const foo =  [{name: 'foo'}, { name: 'bar' }]
let obj1 = Object.assign({}, foo)
let obj2 = {...foo}
console.log(obj1)
console.log(obj2)
//Output:// { 0: { name: "foo" }, 1: { name: "bar" } }
// { 0: { name: "foo" }, 1: { name: "bar" } }

Object.assign({}, foo):
Object.assign(target, source) helps to convert the array to object.

{…foo}
{…array} is the spread operator that directly converts the array to object.

You can use whichever you feel easy with.

How to iterate through Object?

To iterate through Object you can use for loop easily:

const foo = { 'test': [{name: 'foo'}, { name: 'bar' }] }for (const prop in foo) {
console.log(prop)
console.log(foo[prop])
}
//Output:// "test"
// [{name: "foo"}, {name: "bar"}]

How to iterate through Array?

To iterate through Array, you can use forEach loop easily.

const foo =  [{name: 'foo'}, { name: 'bar' }]foo.forEach(function(item, index){
console.log(index);
console.log(item);
console.log(item['name']);
})
//Output:// 0
// {name: "foo"}
// "foo"
// 1
// {name: "bar"}
// "bar"

I have tried to cover all the basics of working with Array and Object. I will try to add other methods like map(), reduce(), filter() or tips if I find any. If you want to add more then write in the comments.

Written by

Tech Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store