loading...
Cover image for Arrays in JavaScript

Arrays in JavaScript

bhagatparwinder profile image Parwinder 👨🏻‍💻 Updated on ・3 min read

JavaScript with Parwinder (42 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 40 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays 42) 8 Features From ES2020/ES11 You Should Know!

What are Arrays?

Array in JavaScript is a type that is used to store multiple items or a list of items where the order matters. Keep in mind that array is of typeof object 🤷🏽‍♂️

Every item in the array has an index. The index is the position of the element in the array. Arrays have a 0 based index. The first element in the array has the index 0, the second element in the array has the index 1 and so on.

The total number of items in the array is the length of the array.

How can you create an array?

// Using the square bracket notation
const carArray = ["Honda", "BMW", "Ferrari", 27, true];

// Using new keyword
const bikeArray = new Array("Honda", "Ducati", "Yamaha");

🚨 Warning: It is not recommended to use the new keyword to create an array. See below.

How to know if a variable is an array?

Since the typeof array is object, when you do the following:

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
console.log(typeof(carArray)); // output will be object!

instead you need to do

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
console.log(Array.isArray(carArray)); // true

We can also do

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
carArray instanceof Array; // true

How do I access the properties of an array when they don't have keys?

Use the index!

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
console.log(carArray[2]); // Ferrari

Keep in mind that even though Ferrari is the 3rd element in the array, it is referred to by index 2 because arrays are 0 based index.

Changing the elements in an array

You can set the values in an array the same way as you retrieve the values. Both actions use an index.

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
carArray[2] = "Mazda";
console.log(carArray); // [ 'Honda', 'BMW', 'Mazda', 27, true ] 

How many items are in an array?

Use the length property!

const carArray = ["Honda", "BMW", "Ferrari", 27, true];
console.log(carArray.length); // 5

And if you need to access the last element of an array, you can do:

const carArray = ["Honda", "BMW", "Ferrari", 27];
console.log(carArray[carArray.length - 1]); // 27

Common array methods

We will discuss a ton of methods in the next few blog posts as we go in-depth with arrays. For now, there are two common methods I would like to discuss:

  1. Push: This allows you to add an element at the end of the array
   const carArray = ["Honda", "BMW", "Ferrari", 27, true];
   carArray.push("Mazda");
   console.log(carArray); // [ 'Honda', 'BMW', 'Ferrari', 27, true, 'Mazda' ] 
  1. Sort: This sorts the array in place. It is a mutable method. It will change the original array!
   const carArray = ["Honda", "BMW", "Ferrari", 27, true];
   carArray.sort();
   console.log(x); // [ 27, 'BMW', 'Ferrari', 'Honda', true ] 

Why not to use the new keyword when creating an array?

The square bracket [] notation and the new keyword do the same thing by creating an empty array or create an array with the passed value.

The new keyword however, has unexpected results at times.

let score = new Array(5, 10);
console.log(score); // [ 5, 10 ]

score = new Array(5);
console.log(score); // [ , , , ,  ]

The first example creates an array with items 5 and 10. The second example however, creates an array with 5 undefined elements instead of an array with element 5!

JavaScript with Parwinder (42 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 40 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays 42) 8 Features From ES2020/ES11 You Should Know!

Posted on by:

bhagatparwinder profile

Parwinder 👨🏻‍💻

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide