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.
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