In JavaScript, we store data in variables. Sometimes we need to store multiple pieces of information in one place—we use objects and arrays for that.
An array is what we use when we want to list a bunch of items in one place. For example:
const iceCreamFlavors = [‘Vanilla’, ‘Mint Chip’, ‘Strettatela’, ‘Chocolate’];
Now we have an array called ‘iceCreamFlavors’ which lists each of the flavors we have. Arrays have what’s called an ‘item index’ which tells the location of each item in the memory. In our example above, ‘Vanilla’ has an item index of 0, while ‘Chocolate has index of 3. Indexes start at 0.
let bestFriends = ['James', 'Hailey', 'Sharron'];
Let’s say, that we want to keep track of our best friends using JavaScript. If we decide we want to add another person to our array, we can use ‘.push’ or ‘.unshift’ to add a name at the beginning or the end of our array, respectively.
bestFriends.push['Bobby']; bestFriends.unshift['Tom']; return bestFriends; //['Tom', 'James', 'Hailey', 'Sharron', 'Bobby'];
Perfect, now what if we decide that we hate Bobby and that Tom is annoying? We use pop and shift.
bestFriends.pop['Bobby']; bestFriends.shift['Tom']; return bestFriends; // ['James', 'Hailey', 'Sharron'];
We can also loop through an array by using the item index. For example:
let newArray = ['item1', 'item2', 'item3']; function selectRandomItemFromArray() { const randomIndexNumber = Math.floor(Math.random() * (newArray.length)); console.log(newArray[randomIndexNumber]; }; // returns a random item from newArray[]
We can put just about anything we want into an array—functions, objects, other arrays, etc.
But what if we need to store a bunch of information about one thing and an array is insufficient? Enter the Object. The syntax for an object is variable keyword, space, object name, space, equals sign, and curly braces.
const newObject = { // Your code here };
Objects allow us to store a selection of data related to one thing—using something called a key:value pair. For example, if we create an object called userProfile:
let userProfile = { firstName: "John", lastName: "Doe", userName: "johndoe123", };
firstName is a key, and John is the value assigned to firstName. Another thing we can use is a method. A method is a function, that the object owns. For example, we can create a function that holds a message for when our user signs in:
let userProfile = { firstName: "John", lastName: "Doe", userName: "johndoe123", userMessage: function() { return `Hey ${this.firstName}, you are signed in as ${userName}!` }, }; console.log(userProfile.userMessage()); //We will see the message: "Hey John, you are signed in as johndoe123!"
It’s worth noting, we don’t name the function. Methods don’t exist outside of an object, so userMessage is the key and we are assigning its value to be this anonymous—or unnamed—function.
Recently, I built a stupid website called “Goat Rotator”. I used an object to store an image of a goat and the corresponding goat name for each goat inside of an array.
const goatHolder = [ { name: "Simon, the 'Kool' Goat", img: "goat_image_1.jpg"}, { name: "Tim", img: "goat_image_2.jpg"}, { name: "Jane", img: "goat_image_3.jpeg"}, { name: "Barnebas Crabappleby", img: "goat_image_4.jpg"}, ];
This allowed me to cycle through the objects inside of my array. JavaScript is very flexible about types and what you decide to do with them, so nesting objects inside of an array totally works.
If need to access an item from within an object we use one of two methods:
objectName.keyName; // returns keyValue objectName[keyName]; // returns keyValue
If we need to remove a key:value pair from our object later we use the delete method:
delete objectName.keyName;
That’s a basic overview of arrays and objects in JavaScript. There are a ton of array methods that are worth learning, but those are a few basic ones to get started with.
Leave a Reply