Manipulating Objects and Arrays

#javascript

What are Objects and Arrays?

Objects and Arrays are complex data types that we use to carry information. This could be simple data types like strings, numbers, and booleans, or other complex data types like other arrays or objects. When this happens, we call those data types Nested.

What are the differences between Objects and Arrays? Arrays are like a list of values. Best way to think of it is as a shopping list. An Array can look like this:

var shoppingList = ['milk', 'apples', 'coffee'];

In our shoppingList array we have some string values

Objects are like lists but with a key representing them. So reusing our shopping list idea, with an object we can add more information, like how much of an item we are purchasing.

var shoppingListWithAmounts = { milk: 1,
                                apples: 3,
                                coffee: 2
                              };

Our shoppingListWithAmounts object has the item as a key and the amount as the value

Accessing Objects and Arrays

We can access the values inside Objects and Arrays in different ways. With Arrays we use the values index to access them. Each value in your array has a specific index depending on its location in the array. The index starts with zero

var myArray = ['Jenny', 'Frederick', 'Hannah'];
//   index:       0          1           2   
myArray[1]//'Frederick'

myArray[1] is accessing the value in index 1

There are two ways to access the values in an object, that work similarly but with different syntax. Dot notation and Bracket notation

var ItsAMe = {
    Name: 'Mario',
    Profession: 'Plumber',
    HasEnemies: true
};
ItsAMe.Name//'Mario'
ItsAMe['Profession']//'Plumber'

Dot notation is calling for the value in key Name, Bracket notation is calling for the value in key Profession.

Adding Values

There are ways to add values to your Objects and Arrays without going back to your code and changing the variable manually. With Arrays we manipulate the values using methods. Array methods have multiple ways to manipulate the values in an array. The two most popular ways to add values are the push method and the unshift method.

let numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
//Using Push 
numbers.push(10); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
//push method adds the value to the end of the array
//Using Unshift
numbers.unshift(-1); //[-1, 0, 1, ,2 , 3, 4, 5, 6, 7, 8, 9, 10]
//unshift method adds the value to the start of the array.

How push and unshift add values into an array

We can add key/value pairs to an existing object using dot and bracket notation. This method only works if the key does not exist in the object, if it does it will rewrite the value of that key instead.

let movies = {
    Name: 'The Menu',
    Director: 'Mark Mylod',
    Genre: ['Horror', 'Comedy'],
    };
movies.Year = 2022;
movies['Length'] = '106 minutes';
/* The movies object will now look like this
{
  Name: 'The Menu',
  Director: 'Mark Mylod',
  Genre: [ 'Horror', 'Comedy' ],
  Year: 2022,
  Length: '106 minutes'
}
*/

We used dot notation to add the movie year, and bracket notation to add the movie length

Removing Values

Just like how we can add values to an existing Array or Object, we can also remove values. For arrays we can use the counterparts to push and unshift; pop and shift.

let numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
//Using Pop
numbers.pop(); //[0, 1, 2, 3, 4, 5, 6, 7, 8] 
//pop method removes the value at the end of the array.
//Using shift
numbers.shift(); //[1, 2, 3, 4, 5, 6, 7, 8]
//unshift method removes the value at the start of the array.

How Pop and shift remove values from an array

When it comes to removing values from an Object, we use the delete operator. Operators are used to manipulate and or compare data types but I won't dwell into them on this blog post.

let movies = {
    Name: 'The Menu',
    Director: 'Mark Mylod',
    Genre: ['Horror', 'Comedy'],
    Year: 2022,
    Length: '106 minutes'
    };
delete movies.Director;
//deletes the key/value for director
delete movies[‘Year’];
//deletes the key/value for year
/*
after the operators have been used the object will now look like this
    {
     Name: 'The Menu',
     Genre: ['Horror', 'Comedy'],
     Length: '106 minutes'
    }
*/

Where do we go from here?

There are many more ways to manipulate Objects and Arrays. Using more complex functions to manipulate Objects and Arrays are a stepping stone to writing more complex code in Javascript. This is just the start of the foundation, but important concepts that you will utilize as you move on to more elaborate coding.