Javascript Arrays

JavaScript arrays are a way to store and manipulate a collection of values, such as numbers or strings.

For creating an array in JavaScript, we can use square brackets [] and separate the values with commas.

As an example:

let myArray = [1, 2, 3, 4, 5];

Why use Arrays?

Arrays are a fundamental data structure in programming that allow you to store collections of values of the same type in a single variable.

Arrays are used in many different ways, such as:

Grouping related data

Arrays are a convenient way to group related data together.

As an example:

let myArray = ["John", "Doe", 30];

Easy to access and manipulate elements

Arrays provide a way to access and manipulate individual elements by their index. You can add, remove, and modify elements in an array using various methods like push(), pop(), shift(), and splice().

As an example:

let myArray = [1, 2, 3, 4, 5];

myArray.push(6); // adds 6 to the end of the array
myArray.pop(); // removes the last element from the array
myArray.shift(); // removes the first element from the array
myArray.splice(2, 1); // removes one element from the array at index 2

Efficient storage and retrieval

Because arrays store values in contiguous memory locations, they can be accessed and manipulated more efficiently than other data structures like linked lists.

As an example:

let myArray = [1, 2, 3, 4, 5];

console.log(myArray[0]); // prints 1
console.log(myArray[2]); // prints 3
console.log(myArray[4]); // prints 5

Iterating over elements

Arrays provide a convenient way to iterate over their elements using a loop like for or while. You can use this feature to perform operations on each element in the array, such as filtering or sorting.

As an example:

let myArray = [1, 2, 3, 4, 5];

for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]); // 1, 2, 3, 4, 5
}

Storing ordered data

Arrays preserve the order of their elements, which is important for many use cases like sorting and searching.

As an example:

let myArray = [1,5,2,4,3];

myArray.sort(); // sorts the array in ascending order
console.log(myArray); // prints [1,2,3,4,5]

Creating an Array

You can create an array by using square brackets [] to enclose a list of comma-separated values, like this:

// Creating an array of numbers
let numbers = [1, 2, 3, 4, 5];

// Creating an array of strings
let colors = ["red", "green", "blue"];

// Creating an array of mixed data types
let mixed = [1, "hello", true];

You can also create an empty array and add elements to it later using various array methods like push(), unshift(), or splice(), like this:

// Creating an empty array and adding elements to it
let empty = [];
empty.push(1);
empty.push(2);
empty.push(3);

console.log(empty); // Output: [1, 2, 3]

Using the JavaScript Keyword new

You can also create an array using the new keyword along with the Array constructor.

As an example:

let myArray = new Array(); // creates an empty array

let myArray2 = new Array(1, 2, 3); // creates an array with three elements

In the first line of code:

• We create an empty array by calling the Array constructor with no arguments and assigning the resulting array to a variable called myArray.
• We can then add elements to the array using the push method, just like before.

In the second line of code:

• we create an array with three elements (the numbers 1, 2, and 3) by calling the Array constructor with three arguments (the elements of the array) and assigning the resulting array to a variable called myArray2.

While using the new keyword and the Array constructor is another way to create arrays in JavaScript, it is less commonly used than the square bracket syntax.

Accessing Array Elements

You can access array elements using square bracket notation. The index of the first element in the array is 0, the index of the second element is 1, and so on.

As an example:

let myArray = [1, 2, 3, 4, 5];

console.log(myArray[0]); // prints 1
console.log(myArray[2]); // prints 3
console.log(myArray[4]); // prints 5

In the above example:

• We create an array myArray with five elements.
• We then use square bracket notation to access the first, third, and fifth elements of the array and print them to the console.

You can also use variables or expressions inside the square brackets to dynamically access array elements. Here's an example:

let myArray = [10, 20, 30, 40, 50];
let index = 2;

console.log(myArray[index]); // prints 30
console.log(myArray[index + 2]); // prints 50

In this example:

• We create an array myArray with five elements and a variable index set to 2.
• We then use square bracket notation with the index variable and an expression index + 2 to access the third and fifth elements of the array and print them to the console.

Changing an Array Element

You can change the value of an array element by assigning a new value to it using square bracket notation.

As an example:

let myArray = [1, 2, 3, 4, 5];

myArray[2] = 10;

console.log(myArray); // prints [1, 2, 10, 4, 5]

In this example:

• We create an array myArray with five elements.
• We then change the value of the third element (with index 2) to 10 by assigning a new value to it using square bracket notation.

You can also use variables or expressions inside the square brackets to dynamically change array elements.

As an example:

let myArray = [10, 20, 30, 40, 50];
let index = 2;

myArray[index] = myArray[index] * 2;

console.log(myArray); // prints [10, 20, 60, 40, 50]

In this example:

• We create an array myArray with five elements and a variable index set to 2.
• We then double the value of the third element (with index 2) by using myArray[index] on both sides of the assignment operator.

Access the Full Array

You can access the full contents of an array by simply referencing the array variable name.

As an example:

Editor

Loading...

In this example:

• We create a div element with the id of "my-array".
• We then use JavaScript to set the innerHTML property of this element to the string representation of the array, which is obtained using the toString() method.
• Finally, we use console.log to display the full internal HTML of the div element

Arrays are Objects

Arrays are a type of object. This means that you can add properties and methods to an array just like you would with any other object.

As an example:

let myArray = [1, 2, 3];

myArray.property = "value";

myArray.myMethod = function () {
  console.log("This is a method of myArray");
};

console.log(myArray.property); // prints 'value'

myArray.myMethod(); // prints 'This is a method of myArray'

In this example:,

• We create an array myArray with three elements. We then add a property property to the array and set its value to 'value'.
• We also add a method myMethod to the array that logs a message to the console.
• Finally, we use dot notation to access the property property and call the myMethod method on the array, both of which work as expected.

Array Elements Can Be Objects

Each element of an array can be an object. This means that you can store complex data structures, such as objects or arrays, as elements within an array.

As an example:

let myArray = [
  {name: "John", age: 30},
  {name: "Jane", age: 25},
  {name: "Bob", age: 40},
];

console.log(myArray[1].name); // prints 'Jane'
console.log(myArray[2].age); // prints 40

In this example:

• We create an array myArray with three elements, each of which is an object with name and age properties.
• We then use square bracket notation to access the name property of the second element and the age property of the third element, both of which work as expected.

You can also have arrays as elements of other arrays.

As an example:

let myArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(myArray[1][2]); // prints 6
console.log(myArray[2][0]); // prints 7

In this example:

• We create an array myArray with three elements, each of which is an array of three numbers.
• We then use square bracket notation to access the third element of the second array and the first element of the third array, both of which work as expected.

Using objects and arrays as elements within arrays can be a powerful way to store and manipulate complex data structures in JavaScript.

The Difference Between Arrays and Objects

Arrays and objects are both data structures used in programming, but they have some key differences.

Here are some key differences between arrays and objects:

• Indexing: Arrays are indexed by a numerical index starting from 0, whereas objects are indexed by keys, which are usually strings.

• Order: Arrays maintain the order of elements, whereas the order of elements in an object is not guaranteed.

• Type of data: Arrays are used to store a collection of data of the same type, whereas objects can store any type of data.

• Data structure: Arrays are a special type of object with a length property and built-in methods for manipulating their contents, whereas objects are a more general data structure with no built-in methods.

• Memory allocation: Arrays are typically allocated in contiguous memory locations, whereas objects are typically allocated in non-contiguous memory locations.

How to recognize an Array

You can use the Array.isArray() method to check if a variable is an array. This method returns true if the variable is an array and false if it is not.

As an example:

let myArray = [1, 2, 3];

console.log(Array.isArray(myArray)); // prints true

let myObject = {key: "value"};

console.log(Array.isArray(myObject)); // prints false

In this example:

• We create an array myArray and an object myObject.
• We then use the Array.isArray() method to check if myArray is an array (which it is) and if myObject is an array (which it is not).

use isArray() always

The typeof operator will return 'object' for an array, since arrays are a type of object in JavaScript. So if you want to check specifically if a variable is an array, you should use the Array.isArray() method.