Javascript - Object is loopable too??

Well, salam and hello again!

Previously, I discussed array loops, from the basics of the loop to using array loop methods. If you haven't read about it, head to the article straight away! 👇

Javascript - Into The Loop of Arrays

Atif Aiman ・ Sep 25 '21 ・ 8 min read

#beginners #javascript #webdev

This time, I want to discuss another loop-related thing, and that is the object. Chotto matte kudasai, the object is loopable too??

Understanding Objects in Javascript

Have you ever wonder what type exists in Javascript? Well, though Javascript is loosely typed language (note that you didn't even need to declare whether your let and const is a string or number or anything), we can still get what type is our variable is.

To know what type is your variable, just use typeof.

const name = "Naruto";
console.log(typeof name); // "string"

const team7 = ["Naruto", "Sasuke", "Sakura", "Kakashi", "Sai", "Yamato"];
console.log(typeof team7); // "object"

So, Javascript has 2 general types of variables - primitives and objects. Primitive type includes string, number, symbol, boolean. And, there are objects.

Remember that I told you that array is also an object? Well, that's how it works. An array is an object, with certain features attached to it, that enable several methods along the way like .map, .forEach and others. While that is the case that makes array iterable, the native object doesn't have them. That means all array loop methods we discussed before cannot be used with objects.

const character = {
  name: "Naruto",
  position: "Hokage",
  village: "Leaf Village",
  country: "Fire Country",
};

character.forEach(); // This will throw error for sure!

So, how do we iterate objects then? 🤔

Back to loop basics

We already discussed a way to loop in Javascript, mainly for, while and do...while. And later, I told you about there are two loops available, one for arrays and one for objects. Do you remember which one is which?

for...of is for the array. Since the index is in sequence, getting an index is not necessary, unless if you need one.

const team7 = ["Naruto", "Sasuke", "Sakura", "Kakashi", "Sai", "Yamato"];

for (let member of team7) {
  console.log(member)
}

/*
The output should be

Naruto
Sasuke
Sakura
Kakashi
Sai
Yamato

*/

On the other hand, for...in is specifically for objects. Though the loop only fetches the key for you, but you know the rest.

const character = {
  name: "Naruto",
  position: "Hokage",
  village: "Leaf Village",
  country: "Fire Country",
};

for (let info in character) {
  console.log(`${info}: ${character[info]}`);
}

/*
The output should be

name: Naruto
position: Hokage
village: Leaf Village
country: Fire Country

*/

Well, that's it about looping object..............wait! There is another way as well if you want to use the array loop methods we discussed before. But that means, we need to change our object to arrays, am I right?

Objects as arrays

There are in some dire situations, you had to execute a mission with a different approach. While we already have for...in for objects, we also have "some other way" to loop object.

Of course, we need to turn the object into an array, so the object can access all goodness offered by array loop methods. Though, in my experience, it's not that much, but pretty useful when you meet other data structures, especially Python that has dictionaries and tuples.

Well, shall we?

Object.keys

If you only need keys in the objects, for...in already did a good job on that. However, there is a way to convert it to an array with just keys. Using Object class inside Javascript, we can use methods offered for all objects. YES, I really mean in, ALL OBJECTS! That means, arrays can also use these methods as well, but what for, right?

One Object method is .keys, where it will convert to a list of keys of the object.

const character = {
  name: "Naruto",
  position: "Hokage",
  village: "Leaf Village",
  country: "Fire Country",
};

console.log(Object.keys(character));
// ["name", "position", "village", "country"]

As you see, the result will be an array. So, do you know where we are heading to? You are right! Array loop methods! You can use all array loop methods, maybe just in case you didn't need one of the properties, or maybe you need to count all letters, or maybe all starts with "A"? Who knows what your use case is, but this is neat, right?

Object.values

Of course, when we talked about objects, we need the values. The method that do the thing is Object.values.

const character = {
  name: "Naruto",
  position: "Hokage",
  village: "Leaf Village",
  country: "Fire Country",
};

console.log(Object.values(character));
// ["Naruto", "Hokage", "Leaf Village", "Fire Country"]

Instead of getting keys, we can straight away get all the values inside an object. Then, proceed with the array loop methods. But how about getting both keys and values?

Object.entries

The last Object method, that I used most of the time is Object.entries, since I need both keys and values to execute my functions based on the keys.

const character = {
  name: "Naruto",
  position: "Hokage",
  village: "Leaf Village",
  country: "Fire Country",
};

console.log(Object.entries(character));
// [["name", "Naruto"], ["position", "Hokage"], ["village", "Leaf Village"], ["country", "Fire Country"]]

So, what did you notice? Well, .keys and .values generate 1-dimensional array, but .entries generate 2-dimensional array. That means, if I use methods, I still have to call which index it is, right? Like entry[0] and entry[1]?

Destructuring 2-dimensional array

Well, I will write a more descriptive article about destructuring in future, but I will try my best to explain how it works specifically for the array loop method for Object.entries.

Take an example, where we will have an object, that lists all members of the ninja team in the Naruto era (sorry for non-anime followers, bear with me a little 😖).

const konohaNinja = {
  sandSibling: ["Gaara", "Kankuro", "Temari"],
  team7: ["Naruto", "Sasuke", "Sakura", "Kakashi"],
  team8: ["Shino", "Hinata", "Kiba", "Kurenai"],
  teamGuy: ["Rock Lee", "Neji", "Tenten", "Mighty Guy"],
  team10: ["Ino", "Shikamaru", "Choji", "Asuma"],
};

See how the object is structured? Keys that contains the team's name, and values that contains all the members of the team. This has been a complex data structure 🥶. So, how should I tackle this solution? Of course, I need to split the team first.

const konohaTeams = Object.entries(konohaNinja);

Now, I can do all sorts of things with this array. What about making a string that says "The members of {team} are {team members}"?

const teams = konohaTeams.map(([teamName, teamMembers]) => {
  return `The members of ${teamName} are ${teamMembers.join(", ")}`;
});

Chotto matte, what happened here? Okay, I have to admit, there are a lot of things that happened here. So let me go layer by layer.

Remember that when I use .map, I passed the value for each index? Yes, I do just that. So supposedly, I should write something like this.

const teams = konohaTeams.map((team) => {
  /**
  * since konohaTeams is a 2-dimensional array,
  * (in this case, 3-dimensional array in fact),
  * when you loop the object-turns-array, you will still get
  * the array, except now you know all subarray has 2 elements
  * only, which is key-value pair, given team[0] is a team name
  * and team[1] is the array of team members
  */

  return `The members of ${team[0]} are ${team[1].join(", ")}`;
});

However, it is hard to read. Maybe you already know what is team[0] and what team[1] stands for. But, is it better, if you can understand what variables are? Of course, there is a better way.

const teams = konohaTeams.map((team) => {
  const teamName = team[0];
  const teamMembers = team[1];

  return `The members of ${teamName} are ${teamMembers.join(", ")}`;
});

This is a step better than a previous example. You rename each of the keys and values, then use it in your return. But do you know, that destructuring can do that much for you, and has shorter syntax?

const teams = konohaTeams.map((team) => {
  const [teamName, teamMembers] = team;

  return `The members of ${teamName} are ${teamMembers.join(", ")}`;
});

What happened here? We all already know index 0 equals teamName, and index1 equals teamMembers. Using a declaration way of extracting our array, we can rename each index, so later in our function, we can use those. Shorter and cleaner, right? Okay, can we make it shorter? Of course, instead of destructuring it inside your function, why not we destructure during parameter passing? That is why, now we replace from (team) => to ([teamName, teamMembers]) =>.

const teams = konohaTeams.map(([teamName, teamMembers]) => {
  return `The members of ${teamName} are ${teamMembers.join(", ")}`;
});

console.log(teams);
/*
The output should be
[
  "The members of sandSibling are Gaara, Kankuro, Temari,",
  "The members of team7 are Naruto, Sasuke, Sakura, Kakashi,",
  "The members of team8 are Shino, Hinata, Kina, Kurenai,",
  "The members of teamGuy are Rock Lee, Neji, Tenten, Mighty Guy,",
  "The members of team10 are Ino, Shikamaru, Choji, Asuma,"
]

I know, for some beginners, this concept is hard to grasp, but try to take it to step by step, and understand what happens here.

Conclusion

The main point here, it is possible to loop objects as well, as much as how we loop arrays. When converting from object to array, we already provide powers given to arrays and use it for objects.

Of course, there is still a lot of things going on, but if you master how to loop arrays and objects, and how to modify them, either by changing the original one or create a new entity out of them by using array loop methods, I believe you can be a really good Javascript coder at this point.

Well, until next week, peace be upon ya!