Arrays in JavaScript

Introduction

Arrays are list-like objects with prototypes having their functions for traversal and mutation. In JavaScript, both the data types and the array length are not fixed, unlike many other programming languages. Let us see the important characteristics of arrays in JavaScript.

Characteristics

• JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.)
• JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers
• JavaScript arrays are zero-indexed: the first element of an array is at index 0
• JavaScript array-copy operations create shallow copies.

Properties:

• The length property indicates how many elements an array has.

var arr = ['a', 'b'];
arr.length //2

• The in operator works for arrays, too:

var arr = [ 'a', 'b', 'c' ];
1 in arr // is there an element at index 1? true

• Arrays are objects and can thus have object properties:

var arr = [];
arr.foo = 123;
arr.foo //123

Note:
While it's certainly possible to add object properties to your array, it's not something that you would normally want to do and it's important to note that object properties will not be included in any methods or functions which enumerate the array's values.
Example:

const myArray = ["a", "b", "c"]
myArray.foo="bob"
console.log(myArray) // [ 'a', 'b', 'c', foo: 'bob' ]
console.log(myArray.map(i => i)) // [ 'a', 'b', 'c' ]

Array Methods:

Arrays have many methods (see Array Prototype Methods). Here are a few examples:

var arr = [ 'a', 'b', 'c' ];

arr.slice(1, 2)  // copy elements [ 'b' ]
arr.slice(1) // [ 'b', 'c' ]

arr.push('x')  // append an element 4
arr // [ 'a', 'b', 'c', 'x' ]

arr.pop()  // remove last element 'x'
arr
[ 'a', 'b', 'c' ]

> arr.shift()  // remove first element
'a'
arr //[ 'b', 'c' ]

arr.unshift('x')  // prepend an element 3
arr //[ 'x', 'b', 'c' ]

arr.indexOf('b')  // find the index of an element 1
arr.indexOf('y') -1

arr.join('-')  // all elements in a single string 'x-b-c'
arr.join('') // 'xbc'
arr.join()
'x,b,c'

Iterating Over Arrays

There are so many methods to iterate through an array. But here we will see "forEach", "filter", and "map".

forEach iterates over an array and hands the current element and its index to a function:

[ 'a', 'b', 'c' ].forEach(
    function (elem, index) {  // (1)
        console.log(index + '. ' + elem);
    });

The preceding code produces the following output:

0. a
1. b
2. c

Here you can just take the elements as well by giving only elem as the parameter to the function.

map returns a new array by applying a function to each element of an existing array:

[1,2,3].map(function (x) { return x*x })
[ 1, 4, 9 ]

Array.prototype.filter(callback, thisValue?)
The output array contains only those input elements for which the callback returns true. For example:

[ 1, 0, 3, 0 ].filter(function (x) { return x !== 0 })
[ 1, 3 ]

There are two more functions in iterating over arrays,
They are:

• group()
  Groups the elements of an array into an object according to the strings returned by a test function.

• groupToMap
  Groups the elements of an array into a Map according to values returned by a test function.
  Note:
  The group() and groupToMap() functions are experimental only and is currently not supported in any web browsers.

Thank you so much❤️ @gilfewster, @dannyengelman for your valuable suggestions.

Reference

• Basic Arrays
• MDN Docs - Array
• Array Methods Cheat Sheet