Javascript Objects

Arrays are a composite data type used to store ordered collections of information.

Table of Contents

  1. Arrays
  2. Array Literals
  3. Array Length
  4. Retrieving Array Values
  5. Updating Array Elements
  6. Multi-Dimension Arrays
  7. Arrays and Objects
  8. Looping over Array Elements
  9. For Of Enumeration
  10. forEach Callback Loop
  11. Longer forEach Callbacks
  12. Further Reading

Arrays

We can use arrays in Javascript to store collections information.

Javascript arrays are a special type of Object with auto-assigned number keys and a special length property.

Array Literals

Arrays and their contents can be defined using square braces:

let emptyArray = [];

let treats = ["🍩 Doughnut", "🍫 Chocolate Bar", "🍪 Cookie"];

Array Length 

console.log(`There are ${treats.length} tasty treats available for our snack.`);

Retrieving Array Values

We can retrieve array elements using [] square-braces and zero-based indexes:

console.log(treats[0]); // 🍩 Doughnut

Updating Array Elements

Elements can be overwritten using square braces too:

treats[0] = "Green Apple 🍏"; // Overwrite the zero-th element.

Multi-Dimension Arrays

Arrays can be made to hold other arrays. Square braces are chained to index into nested arrays.

let emojiWithNames = [
  ["💌", "Love Letter"],
  ["🏺", "Amphora"],
  ["🧭", "Compass"],
];

console.log(emojiWithNames[1][0]); // Prints: 🏺

💡 Best Practice:

Place a trailing comma after the final element in multiline arrays.

Follwing this best practice makes adding new elements or moving elements around less error-prone.

Arrays and Objects

Arrays and objects can be nested within each other.

let character = {
  name: "Daisy",
  bagOfHolding: ["🛡️", "🗡️", "🧪"],
};

We’ll see much more of this in the JSON module.

Looping over Array Elements

Here’s how we can loop over the elements of an array using a plain old for loop:

let fruitBasket = ["🍎", "🍓", "🍒", "🥝"];

for (let i = 0; i < fruitBasket.length; i++) {
  console.log(fruitBasket[i]);
}

For Of Enumeration

Beyond the for loop, there are two other popular ways to loop through Arrays in Javascript.

The for of loop assigns each element in turn a loop variable:

// for-of: Concise loop when you don't need the index value.
for (const fruit of fruitBasket) {
  console.log(fruit);
}

The fruit variable is scoped to the curly-braced code block.

💡 Best Practice:

Loop variables set as const prevent accidental modification of array elements.

forEach Callback Loop

The array forEach method passes each element in turn as an argument to a provided callback:

// Print every element using an arrow function:
fruitBasket.forEach(function (fruit) {
  console.log(fruit);
});

// With forEach you can also get access to the index:
fruitBasket.forEach(function (fruit, i) {
  console.log(`${i}: ${fruit}`);
});

// 0: 🍎
// 1: 🍓
// 2: 🍒
// 3: 🥝

Longer forEach Callbacks

Longer forEach callbacks are also possible.

Let’s build a fruit pyramid:

fruitBasket.forEach(function (fruit, i) {
  let length = fruitBasket.length;
  let row = " ".repeat(length - i) + fruit.repeat(i + 1);
  console.log(row);
});

//    🍎
//   🍓🍓
//  🍒🍒🍒
// 🥝🥝🥝🥝

Further Reading