Module 2: Objects and Arrays

Working with Objects

let obj

let person = { first_name: 'Leeroy', last_name: 'Jenkins', age: 25 };
//  the keys or property names (first name, last name, age) are strings
//  property names don't need quotes if they would make valid variable names
//  the values ('Leeroy', 'Jenkins', 25) can be of any type we wish

const name = 'Amanda Johnson';
    const email = 'amandaj@gmail.com';
    let state = 'Florida';
    let favoriteProgrammingLanguage = 'Javascript';

const user = {
    name: 'Amanda Johnson',
    email: 'amandaj@noemail.com',
    state: 'Florida',
    'favorite programming language': 'Javascript'
    };

Getting properties from an object

Having lots of information within our objects is great, but in order to be useful, objects must allow us to access the values inside them. As a software developer, you will be accessing information from objects almost daily so this is an important skill employers look for when hiring for their team. The way we read a value from an object is by its key, also known as a property.

There are two ways to access properties within an object: using dot notation and square bracket notation.

In dot notation, we write the name of the object followed by a dot (.) followed by the property we would like to access.

// getting properties using dot notation
const dog = {name: 'Ruby', breed: 'Boxer', weight: 65, 'favorite toy': 'bone'}
dog.name; // evaluates to 'Ruby'
dog.breed; // evaluates to 'Boxer'
dog.weight; // evaluates to 65
let breed = dog.breed;
console.log(`It's a ${breed}!`); // prints "It's a Boxer!"

In square bracket notation, we write the name of the object followed by an open square bracket [ followed by the property we would like to access in quotes followed by a closing square bracket ].

// getting properties using square-bracket notation
let player2 = { username: 'elf123', role: 'ranger', 'health points': 15 };
let healthPoints = player2['health points']; // quotes needed
console.log(`Only ${healthPoints} points left!`); // prints "Only 15 points left!"

In square bracket notation, we have used strings for property names, but you could also use variables. While this is less common, it is something you may see out in the wild.

// getting properties using square-bracket notation and a variable
let plane = { model: 'Supermarine Spitfire' };
let propName = 'model';
console.log(plane[propName]); // quotes not needed as it's a variable, prints "Supermarine Spitfire"

Finally, if you are trying to access a property from an object that does not exist, you will receive undefined. This is great to know for when you need to debug code that isn't working.

// getting a property that doesn't exist
let empty = {};
console.log(empty.prop); // prints undefined

const  user = {
name: 'Josh Carter',
email: 'carterjosh@gmail.com',
state: 'Utah',
'favorite programming language': 'Javascript'
};

let nameToDisplay = user.name;
console.log(`Welcome Back, ${nameToDisplay}!`); // prints "Welcome Back, Josh Carter!"
user.state; // evaluates to 'Utah'
user.email; // evaluates to 'carterjosh@noemail.com'
user['favorite programming language']; // evaluates to 'Javascript'

Setting and deleting properties

We have learned so far that objects are very flexible, but what if we need to change the value of a property, or even remove a property altogether? The good news is that we can add, edit, or remove properties from objects at any time.

Like how we accessed properties, there are two ways to set and delete properties within an object: dot notation and square bracket notation.

To set a value using dot notation, we use the same “object.property” structure we're used to and add an equal sign =, and then the new value of that property (just like how you set values to variables).

//  setting properties using dot notation
let country = {};
country.name = 'United States'; // _adding_ a new 'name' prop
console.log(country); // prints { name: "United States" }

country.population = 340,092,699; // _adding_ a new 'population' prop
console.log(country); // prints { name: "United States", population: 340,092,699 }

country.population = 81; // editing an existing 'population' prop
console.log(country); // prints { name: "United States", population: 81 }

To set a value using square bracket notation, we use the same “object[property]” structure we're used to and add an equal sign = and the value of that property.

//  setting properties using square-bracket notation
country['favorite food'] = 'cheeseburger'; // _adding_ a new 'favorite food' prop
console.log(country); // prints { name: "United States", population: 81, "favorite food": "cheeseburger" }

To delete properties within an object, we use the delete operator followed by either “object.property” or “object[property]”, depending on the property you would like to delete.

//  deleting properties with the delete operator
delete country.population;
delete country['favorite food'];
console.log(country); // prints { name: "United States" }

const  user = {
name: 'Fabiola Dallas',
email: 'fabdallas@noemail.com',
state: 'Texas',
'favorite programming language': 'Python'
};

user['Github Username] = 'Fabiola123';

user.state = 'TX';

delete user['favorite programming language'];

Conclusion

In this core competency, we learned about one of Javascript's most flexible data types: Objects! We've covered the essential pieces of the object syntax, how to declare an object, how to access properties within an object, and how to add, edit, and remove properties within an object. We have only scratched the surface of how useful objects can be in our programs, but don't worry! You will learn more about objects later in the program. We highly recommend that you practice with objects because you will use them every day in your software development career.

Arrays

Welcome to arrays in JavaScript! Arrays are used to store and organize collections of data and are one of the most fundamental data structures in computer programming. You will use arrays almost every single day while you are on the job. You will find that arrays are incredibly versatile and offer endless data manipulation and organization possibilities. By mastering the use of arrays in JavaScript, you'll be equipped with a powerful tool that will enable you to write efficient and effective code.

Arrays can be used in countless real-life scenarios, from organizing a shopping list to tracking different destinations you'd like to travel to. Imagine you're a librarian and you need to keep track of all the books of each genre in your library. You could create an array to hold the titles of all the books, and then use different methods to change and access the data as needed.

In this core competency, you will learn how to declare an array, access and set elements in an array, work with array lengths, and how to split strings into an array. So let's dive in and explore the world of arrays!

Declaring an array literal

An array, or array literal, is an ordered collection of values separated by commas inside square braces. You can make an array using square brackets and adding values within those brackets, separated by commas. Then, just like any other value or object, you can set that array to a variable. Let's investigate the structure of an array:

// declaring an (empty) array literal:
const array = [];

Values within an array can be of any type, including other arrays. Let's look at a couple of examples of arrays with different types of values inside:

// array holding a boolean, a number, and an object
const values = [true, 15.4, { name: 'Bloomtech' } ];

// an array holding 2 arrays
const grid = [[1, 2], [3, 4]];

Pro Tip: You previously learned that Javascript is considered an object-oriented programming language and became familiar with a special data type called objects. You will notice that arrays and so much of JavaScript draw from the information we learn about objects. If you use the typeof operator on arrays, which tells us what data type a piece of our code is, it will return an object!

const  concerts = ['April 26', 'April 29', 'May 5', 'May 10', 'May 17'];

Accessing elements in an array

Accessing the values, also called elements, inside an array is done using the element's index, or numbered location within the array. As a software developer, you will be accessing information from arrays many, many times so this is an essential skill employers will expect you to have proficiency in.

The way you read an element from an array by its index is with square bracket notation. Indices start at zero and increase depending on the number of elements in the array. In square bracket notation, you write the name of the array followed by an opening square bracket [ followed by the index you would like to access, and then a closing square bracket ].

Let's take a closer look at this syntax using a friends example:

// getting elements using square bracket notation
const friends = ['Josh', 'Alla', 'Byron']; // array literal containing three strings

const firstFriend = friends[0]; // firstFriend evaluates to 'Josh'

const secondFriend = friends[1]; // secondFriend evaluates to 'Alla'

const thirdFriend = friends[2]; // thirdFriend evaluates to 'Byron'

If you are trying to access an index from an array that is too large, you will receive undefined. This is great to know for when you need to debug code that isn't working.

// getting an element that doesn't exist
const friends = ['Josh', 'Alla', 'Byron'];
const notThere = friends[3]; // notThere evaluates to undefined

const  concerts = ['April 26', 'April 29', 'May 5', 'May 10', 'May 17'];

console.log(“European Tour Dates!”); // prints "European World Tour Dates!"
concerts[0]; // evaluates to 'April 26'
concerts[1]; // evaluates to 'April 29'
concerts[2]; // evaluates to 'May 5'
concerts[3]; // evaluates to 'May 10'
concerts[4]; // evaluates to 'May 17'

Setting elements in an array

You are getting more comfortable with the structure of arrays and how to access elements within arrays, but what if you need to add an element to an array or even change an element altogether? Don't worry! You have the ability to add and overwrite elements within an array, similarly to how you did with objects.

Like how you accessed elements, the way to set or overwrite an element is with square bracket notation. To set an element using square bracket notation, you use the same array[index] structure you're used to and assign the value of that element.

// setting elements using square-bracket notation
const friends = []; // an empty array literal
friends[0] = 'Josh'; // setting the first element of the array
friends[1] = 'Alla'; // setting the second element of the array
friends[2] = 'Byron'; // setting the third element of the array
console.log(friends); // prints ['Josh', 'Alla', 'Byron']

// overwriting elements using square-bracket notation

friends[2] = 'Jess'; // changes the third element to 'Jess'

console.log(friends); // prints ['Josh', 'Alla', 'Jess']

const  concerts = ['April 26', 'April 29', 'May 5', 'May 10', 'May 17'];

concerts[0] = 'May 26';
concerts[1] = 'May 29';

Concerts[5] = 'May 1';

concerts[0] = 'May 1';
concerts[1] = 'May 5';
concerts[2] = 'May 10';
concerts[3] = 'May 17';
concerts[4] = 'May 26';
concerts[5] = 'May 29';

Working with array lengths

Arrays have a property called length that will return the length, or the number of items, in an array. To use the length property on an array, you use the same “object.property” structure you've used before. There are multiple ways to use the length property, so let's dive into some examples!

The first way you can use .length is by setting your array.length equal to a variable like this:

// finding the length of an array
const friends = ['Josh', 'Alla', 'Anne'];

const numberOfFriends = friends.length; //evaluates to 3

console.log(`I have ${numberOfFriends} friends!`); // prints I have 3 friends!

For our next examples, imagine hundreds of elements inside the array instead of three. Another way you can use .length is in an expression to find an index (an expression is a fancy way of saying pieces of code that evaluate as a single value). Putting an expression inside square brackets is okay as long as it evaluates to a number greater than or equal to zero. You can use this to grow an array!

// using .length to make an array grow
const friends = []; // we start sadly with no friends.

friends[friends.length] = 'Josh' // since friends.length is 0 this is the same as saying friends[0] = 'Josh'

friends[friends.length] = 'Alla' // rinse and repeat except that here, friends.length is 1

friends[friends.length] = 'Byron' // rinse and repeat except that here, friends.length is 2

console.log(friends); // prints ['Josh', 'Alla', 'Byron'] because we have pushed three elements into the array.

Scrolling infinitely through an array is not fun; luckily, there is a way to find the last element in an array. You can access the last element in an array by using the name of the array, followed by .length - 1.

Let's see this in action:

// accessing the last element in an array
const friends = ['Josh', 'Alla', 'Anne'];

const lastButNotLeast = friends[friends.length - 1]; // evaluates to 'Anne'

You can also access the last element in an array using the at method. We write this by starting with the name of the array, followed by .at(-1).

// accessing the last element in an array using at
const friends = ['Josh', 'Alla', 'Anne'];

const lastButNotLeast = friends.at(-1); // lastButNotLeast evaluates to 'Anne'
const nextToLast = friends.at(-2); // nextToLast evaluates to 'Alla'

Pro Tip: Previously, you covered that arrays were actually special objects with additional functionality. Because of this, you are able to combine what you learned from objects and use properties on arrays.

console.log(`2BU will be live in ${dates.length} concerts for their comeback World Tour!`); // prints '2BU will be live in 55 concerts for their comeback World Tour!'

console.log(`Your last chance to see 2BU is ${dates[dates.length - 1]}!`); // prints 'Your last chance to see 2BU is December 22!'

console.log(`Your last chance to see 2BU is ${dates.at(-1)}!`); // also prints 'Your last chance to see 2BU is December 22!'

Splitting a string into an array

Arrays are so useful for occasions where you are asked to count words in a piece of writing or even for security reasons to keep a user's password safe. Instead of having to take the time to break apart string yourself, did you know that you can create arrays from strings? You have functions called methods that can help us perform many different tasks. Methods should look familiar because you have been using a log method when typing console.log().

Strings have a method called split that we can use to create arrays. To split a string with the split method, you call the function on the string, like string.split() and in the parentheses, you will include what's called a separator, or the value where you would like to split the string. Let's look at the split method in action with some examples.

When you want to separate a string with no white space, you will use an empty string '' as your separator.

// Splitting words into characters
const name = 'Paris';
const characters = name.split(''); // splitting by empty string
console.log(characters); // prints ['P', 'a', 'r', 'i', 's']
            

When you want to separate a string with one or more white spaces, you will use a string with a single space ' ' as your separator.

// 👉 Splitting sentences into words
const sentence = 'Paris is on my bucket list to visit!';
const words = sentence.split(' '); // splitting by whitespace
console.log(words); // prints ['Paris', 'is', 'on', 'my', 'bucket', 'list', 'to', 'visit!']
            

Remember that having a space in a string still counts as a string!

let chicTour = "June 1, 2023 - Los Angeles, CA | June 3, 2023 - San Francisco, CA | June 5, 2023 - Seattle, WA | June 7, 2023 - Vancouver, BC";

chicDates = chicTour.split(" | "); // evaluates to [“June 1 - Los Angeles”, “June 3 - San Francisco”, “June 5 - Seattle”, “June 7 - Vancouver”]

Conclusion

Congratulations on completing this core competency on arrays in JavaScript! By now, you should understand how to declare an array, access and modify elements within an array, and work with array lengths. You've also covered how to split a string into an array, a valuable technique for manipulating data in a more structured way. But this is just the beginning! Arrays have much to offer you as a developer, but now you are comfortable with the basics before diving deeper. You will learn much more about arrays later on in the program. We highly recommend you keep practicing, experimenting, and exploring arrays because they will frequently be used in your software development career.

Basic Looping

Loops are one of the most commonly used tools in JavaScript. They are so common, in fact, that you will probably use them in every coding project both at BloomTech and in your careers. In short, loops allow you to repeat a block of code (or function) numerous times without writing the same code repeatedly. This is usually done to create new things like objects and arrays or to iterate over existing ones you want to pull information from or edit in some way.

Let's assume you were given a long list of items in an array, say a list of food items available for purchase at your local grocery store. It would be quite a tedious task if you wanted to show fifty items on a webpage and had to write a new function to display each item listed in an array. This is where loops come in handy. They allow you to perform the same function for multiple items in an array (or object) with a simple block of code.

In this reading, you will learn how to use one of the most common types of loops: the “for…in” loop, and how we can use that loop to carry out the same function for all items in arrays and objects.

Looping over array indices

Perhaps the most common way to loop through all items, or indices, of an array is by using the “for…in” loop. The standard format of a “for…in” loop looks like this:

const arrayName = ["item1", "item2", "item3"] // creating a sample array

for (let i in arrayName) { // loops through all indices in that array
    console.log(i, arrayName[i]) // prints out index position and item number
}

/* prints
0 item1
1 item2
2 item3
*/

There are a few key features within the parenthesis of this “for…in” loop worth explaining that are common in other types of loops:

• The let i portion is declaring a variable name for the index number or position of each item in the array that you can reference later in the function. Though i or index is typically usually used as a name, any name would technically work.
• With the in arrayName portion, you are specifying the name of which array you want to iterate, or loop, through.
• Finally, you have the function between the curly brackets that will perform on each item in that array. You can use the index variable, i, that you declared earlier to specify what you want to do with each item. Printing just i will print the index position, whereas printing arrayName[i] will print the actual value of that item with that index.

const cocoMart = ["Bananas", "Milk", "Eggs", "Bread", "Yogurt"] // created “Coco Mart” array
const cocoMart = ["Bananas", "Milk", "Eggs", "Bread", "Yogurt"] // created “Coco Mart” array

for (let i in cocoMart) { //declares “i” as variable index name, loops through items in cocoMart array
    console.log(`${cocoMart[i]} is now available!`)
}

/* prints out
Bananas is now available!
Milk is now available!
Eggs is now available!
Bread is now available!
Yogurt is now available!
*/

Looping over object properties

Similar to arrays, “for..in” loops can also be used to iterate over object properties within an object. However, since the order of properties of objects is arbitrary (meaning, there are no index positions for properties of an object), the variable i which was used to represent indices for arrays, is now replaced with a word like property for objects. And, instead of an index, the property variable will now refer to the property name, or key. Let's see this in the following example:

const sampleObject = { propertyA: "value1", propertyB: "value2", propertyC: "value3" } // sample created object

for (let property in sampleObject) { // iterates over all properties in the sampleObject
    console.log(property) // prints “propertyA, propertyB, propertyC”
    console.log(sampleObject[property]) // prints “value1, value2, value3”
}

Notice in the second console.log() we used the sampleObject[property] which refers to the actual value of each property, not the property name itself.

const foodItem = {
    name: "bananas",
    price: 2.99,
    availability: false
}

for (let property in foodItem) { // iterates through each property of the “foodItem” object
    if (property === 'price') { // checks if property is price
        console.log(`This product costs $${foodItem[property]}`) // prints "This product costs $2.99"
    }
}

Conclusion

In this core competency, we introduced the concept of loops and learned how to use one of the most commonly used types of loops, the “for…in” loop. We learned that when using a “for…in” loop with an array, the i refers to the index position, whereas in objects the i refers to the property name. We will cover a few more types of loops shortly, each with its own advantages and disadvantages, but the good news is that loops essentially do the same type of logic, performing the same function on every item within a list. We hope that you don't get too discouraged when working with loops. Like everything in coding, with practice, they will become very familiar. But unlike everything, loops can be necessary to keep your code succinct when working with lists.

Guided Project

Welcome to this Guided Project on objects and arrays! You will learn in this video how to manipulate these essential data objects in meaningful ways that will be helpful in your Module Project and Sprint Challenge. You will even see an example of working with string arrays which is helpful in job interviews (many job interviews have technical questions that involve manipulating string arrays). By the end of this video, you'll better understand how to work with objects and arrays and be ready to tackle more advanced coding challenges confidently.

Module 2 Project: Objects and Arrays

This module project offers more practice using objects and arrays - two essential data structures in Javascript. Without them, coding can become convoluted and disorganized. However, with a proper understanding of how to use objects and arrays, you will be able to write more structured, efficient, and maintainable code that is easier to understand and debug, making you a more valuable asset in any coding project or job.

The module project contains advanced problems that will challenge and stretch your understanding of the module's content. The project has built-in tests for you to check your work, and the solution video is available in case you need help or want to see how we solved each challenge, but remember, there is always more than one way to solve a problem. Before reviewing the solution video, be sure to attempt the project and try solving the challenges yourself.

If you can successfully get through all the Module Projects in a sprint, you are ready for the Sprint Challenge and Sprint Assessment, which you must pass to move on to the next Sprint.

Instructions

The link below takes you to Bloom's code repository of the assignment. You'll need to fork the repo to your own GitHub account, and clone it down to your computer:

Starter Repo: Objects and Arrays

• Fork the repository, and then use the green button and your terminal to clone the project down to your computer.
• Next, open the index.html file in both VSCode and the Chrome Browser. VSCode is where you will make code changes, and Chrome is where you will check if your code is passing all the tests.
• To check the tests, right-click on a Chrome window, select "Inspect," and ensure the console is visible. Then return to VSCode and start coding a solution to the first challenge. When you want to check if your code is correct, go to Chrome and refresh the page to run the tests and see your results.

Solution