Best Practice Objects vs Arrays?

JavaScript
1

I’ve posted this in General because it’s technically not a help question on a specific exercise or project. But if it’s in the wrong place my apologies.

Okay so let me preface this by saying I’ve just gotten to the constructor function section and I was going to put an example or two in my notes when something occurred to me. I had two options, I could make an array to store my reusable objects, for example:

var players = [
 { 
    username : "Grabthar",
    class: "Fighter",
    level: 15
},
 { 
    username : "Backstabz",
    class: "Rogue",
    level: 31
},
 { 
    username : "Omin Dran",
    class: "Cleric",
    level: 99
}
]

Or I could make an object of objects:

var players = {
 { 
    username : "Grabthar",
    class: "Fighter",
    level: 15
},
 { 
    username : "Backstabz",
    class: "Rogue",
    level: 31
},
 { 
    username : "Omin Dran",
    class: "Cleric",
    level: 99
}
}

Which got me thinking, in terms of creating, storing, and retrieving data like this, which way is better? I have to assume there’s some preference depending on what and how exactly you’re working with something. But do you guys have preferences? Does it matter?

For the sake of a more concrete example, let’s say I’ve got a game website where users can login and view their stats,equipment, maybe see the current top players, etc.

2

With objects we want key-value pairs. Depending on what you’re going to do with the data, you may want an object of objects rather than an array of objects. If you were to do that though, it would probably look more like:

var players = {
  Grabthar: {
    class: "Fighter",
    level: 15
  },
  "Backstabz": {
    class: "Rogue",
    level: 31
  },
// etc
}

This allows you to do things like attack(players.Grabthar).

2 Likes
3

Interesting…which would make retrieving specific things a lot easier too right? Like for example something like:
players.Backstabz.level

I imagine with the array I’d have to know the exact index of the player I was looking for otherwise.

4

Second one is incorrect syntax. But anyway, an array is an ordered collection of things. An object, in the situation you’re talking about, is a dictionary. It’s an unordered key: value store. As an example, all the words beginning with a vs. a dictionary of all the a words. An array would be used for the first, a plain object for the second. With the array you can do things like find out the number of words or average length or filter/group/whatever really easily. You can’t, though, look up specific values easily. With the object you can’t do any of the nice array stuff, but you can look up the value by name, so if you have the ability to know what you’re looking for in advance, objects are great.

5 Likes
5

For things like this I use now Map objects. It’s new syntax, check it out.

6

Yup. Takes a little to wrap your brain around, but useful.

7

Hmmm I can see how objects within objects are pretty handy. I’m wondering though, in terms of constructor functions, if I’m adding a new player to an already existing list of player objects formatted like in Ariel’s example, how would I go about doing that?

Incoming codepen :laughing:

https://codepen.io/drding/pen/VXvzxg?editors=1111

Now, I know that I’m overwriting my players variable haha. Is there a way to not do that? I noticed FCC’s exercises on constructors all have us assigning new Whatnot() to a new variable. But my question is, is there a .push-like method for objects?

9

Whelp that serves me right for not going back over my object notes :sweat_smile: I had that all in there too.

Thanks everyone! You’ve all been a huge help on making constructors less mysterious. I’m definitely going to have to mess around more but I have much better understanding of them.

10

Hey @DanCouper can I ask you a follow up question? The incorrect syntax of the second example you mentioned, is it just incorrect to what I’m hypothetically looking to do, or is it incorrect in general? I just want to make sure going forward I’m forming things properly.

12

What @camperextraordinaire said ;). I assume you mistyped, as it was correct in the next examples.

Just one thing: a pretty common/useful pattern with JS is to make data structures that are similar to this:

{
  playerIds: [1,2,3],
  players: {
    1: {
      name: "Grabthar",
      class: "Fighter",
      level: 15
    },
    2: {
      name: "Backstabz",
      class: "Rogue",
      level: 31
    },
    3: {
      name: "Dylons",
      class: "Wizard",
      level: 20
    }
  }
}

So you have an object with two fields:

  1. a dictionary of your players, keyed by ID
  2. an array of those IDs

Now you can either look up player by ID, or you can use array methods to iterate over the collection. For example, if you want to find all players above level 15, then you can use filter on the array to grab a list of those players. IDs are likely to be UUIDs or similar (a string like 58ba1cff-d6a8-46af-9ad3-88357d9f110c, not just 1, 2, 3, 4 etc., so this becomes important).

Edit: Also I’m not that au fait on relational database theory, but I think this is possibly Second Normal Form

4 Likes
13

Excellent! Thanks again @camperextraordinaire & @DanCouper, I’ll update my notes. My original example was running off my shoddy memory of the Manipulating Complex Objects exercise, which now that I look at it again, wasn’t even using objects in an object but objects in an array. I realize now the proper syntax was right in Accessing Nested Objects.

Something tells me I need to go back over the object lessons before I move on :wink:

I really dig that array/object combo by the way, the organization makes a lot of sense and I like the accessibility of it. Maybe one day I can make a browser-base dungeon crawler.