Intro to Data Structures: Objects and Arrays

Subscribe to my newsletter and never miss my upcoming articles

Pre-requisite : knowledge of variables

Introduction

HTML, CSS, and JavaScript are languages that are often described as:

  • HTML: 🏠 House
  • CSS: 🎨 Paint
  • JavaScript: 🔌 Electricity

In the same way, data can be housed inside of a container. Both Arrays and Objects are data containers. However, objects are created using {} braces whereas arrays are created using [] square bracket notation. The name of an array or an object references the house. Additionally, the a key (of an object) or an index (of an array) references the address (location) of that data inside the data container.

Yellow and Black House Home Furnishing Logo (1).png

Create an Array
let pets = [];

Create an Object
// save key string to global variable
const sandwich = {meat: true, cheese: "swiss", pickles: false}; 

How to access an Array or an Object
dot notation . : Reference a specific location in the object with dot notation.
bracket notation [] : Change the key into a string when you use bracket notation.
// A downside to using bracket notation is that it uses more characters

Key-Value Pairs

You can use key:value pairs and access an object by using object.method or object.key. The syntax for an item inside an object is key: value. Keys are special. However, with bracket notation, the brackets MUST contain a string OR a number. You cannot have two keys that are the same. Values can be anything.

Access an Array

Accessing an array requires referencing the index of that array. An index is a position located in the array ranging from 0 to one less than the total number of items since we use zero-based counting in JavaScript. For example, an array with 20 items will have indices from 0 to 19.

let pets = ["cat", "dog", "fish"];

// references 0th index
    pets[0];

Access an Object

When you access a location in an object, it can have many different values stored in that memory location. For example, you could have a sandwich object that returns true when you access the sandwich['meat'] location. Conversely, this is the syntax for object['key'] using bracket notation.

With Bracket Notation

    // returns true    
   sandwich['meat'] 
   // contains swiss
    sandwich['cheese']
    // contains wheat
    sandwich[bread]

With Dot Notation

    // returns true
    sandwich.meat
     // contains swiss
    sandwich.cheese
    // contains wheat
    sandwich.bread

Examples of a Series of Tasks

// Let's say we have an array of planets.

let planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];

// If we wanted to remove pluto...
// we need to reference the index [9] to access "Pluto"
planets[9].pop;

// .pop method removes the last item in the array
// Here we have an object containing star phases.

const starPhases = {first:"Nebula", second:"Protostar", third:"Main Sequence", fourth:"Red Giant", fifth:"White Dwarf", sixth:"Black Dwarf"},

//delete beginning key containing first:"Nebula"
delete starPhases.first;
// Below is an Array housing shapes.

let shapes = ["Circle", "Triangle", "Rectangle", "Square", "Star", "Hexagon", "Heart"]; 

// add a Diamond at the last position
shapes.push("Diamond");

Unknown Value

// use for-in loop if you're looking for more information whereas
// if you have a known value, you can go straight to returning the array element or object key value

unknown value *iterates*
checking for multiple indices that follow the same rule

function(string > y )
for (i in array) {

}

known value *happens once*

Manipulate Array and Object Data

Let's say that you want to confirm the number of items in an array. You could use an if/else conditional statement to check the array item total. There are many methods you can use to allow the computer to manipulate data based on your given instructions. Here are a few of them.

  • .unshift: new item in first position (add first item +1)
  • .push: adds an item to the end of an array and increments by one (add last item +1)
  • .pop: remove the last item in the array and decrement by one (delete last item -1)
  • .shift: remove item in first position (delete first item -1)
  • .length: returns the number of items in that array
  • spread operator: "..." three dots indicating the insertion of another array, looks like this: [...originalArray]

    Link: MDN

  • .slice: returns a surface copy of a part of an array into a new array object, where you may select the position from starting to ending index (the end is truncated). The original array will not be changed with this method.

    Link: MDN

References

JavaScript Arrays

JavaScript Objects

No Comments Yet