Creating an Array in JS and the Array Object

Arrays are used to store a set of data in JavaScript. Arrays in JavaScript are represented by the Array object . The Array object provides a number of properties and methods with which we can manipulate an array and its elements.

Creating an array

You can create an empty array using square brackets or the Array constructor:

const users = new Array();
const people = [];

console.log(users); // array[0]
console.log(people); // array[0]

You can immediately initialize an array with some number of elements:

const users = new Array("Tom", "Bill", "Alice");
const people = ["Sam", "John", "Kate"];

console.log(users); // ["Tom", "Bill", "Alice"]
console.log(people); // ["Sam", "John", "Kate"]

Another way to initialize arrays is the Array.of() method – it takes elements and initializes an array with them:

const people = Array.of("Tom", "Bob", "Sam");
console.log(people); // ["Tom", "Bob", "Sam"]

You can define an array and define new elements into it as you go:

const users = [];
users[1] = "Tom";
users[2] = "Kate";
console.log(users[1]); // "Tom"
console.log(users[0]); // undefined

It does not matter that by default the array is created with zero length. With the help of indexes, we can substitute one or another element for a specific index in an array.

Array.from

And another way is represented by the Array.from() function . It has many options, consider the most common:

Array.from(arrayLike)
Array.from(arrayLike, function mapFn(element) { ... })
Array.from(arrayLike, function mapFn(element, index) { ... })

As the first parameter, an array like the function takes an object, which, relatively speaking, “looks like an array”, that is, it can be represented as a set of elements. It could be another array, or it could be a string, which essentially provides a set of characters. In general, some sets of elements can be converted into an array. In addition, it can also be some object in which the property is defined as length. For example:

const array = Array.from("Hello");
console.log(array); // ["H", "e", "l", "l", "o"]

In this case, a string is passed to the function and an array is returned, each element of which represents one of the characters in that string.

As the second parameter, a transformation function is passed, which, through the first parameter, receives the current element of the set and returns some result of its transformation. For example:

const numbers = [1, 2, 3, 4];
const array = Array.from(numbers, n => n * n);
console.log(array); // [1, 4, 9, 16]

In this case, an Array.from() array of numbers is passed to the function. The second parameter is a function (in this case, it is a lambda expression) that is run for each number from this array and receives this number through the parameter n. In the lambda expression itself, we return the square of this number. As a result, Array.from() will return a new array, which will contain the squares of the numbers from the numbers array.

And another version of the function Array.from()takes as the second parameter a conversion function, into which, in addition to an element from the iterated set, the index of this element is also passed: Array.from(arrayLike, function mapFn(element, index) { … }). We use this version and pass an object with the property to the function length:

const array = Array.from({length:3}, (element, index) => { 
    console.log(element);   // undefined
    return index;
});
console.log(array); // [0, 1, 2]

Here, an object is passed to the function, whose property length is equal to 3. For the function, Array.from this will be a signal, there should be three elements in the returned array. It does not matter that the conversion function from the second parameter takes an element of the set (parameter element) – in this case it will always be undefined, nevertheless, the value length:3will be a pointer that the returned array will have three elements with indices from 0 to 2, respectively. And through the second parameter transformation function – index we can parameter and get the current index of the element.

However, we can pass in an object where indexes are used as property names. In this case, the object will turn into an array-like object that can be iterated over:

const array = Array.from({length:3, "0": "Tom", "1": "Sam", "2": "Bob"}, (element) => { 
    console.log(element);   
    return element;
});
console.log(array); // ["Tom", "Sam", "Bob"]

length

To find out the length of an array, use the length property :

const fruit = [];
fruit[0] = "apples";
fruit[1] = "pears";
fruit[2] = "plums";

console.log("In array fruit ", fruit.length, " element");

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

In fact, the length of the array will be the index of the last element plus one. For example:

const users = []; // array has 0 elements
users[0] = "Tom";
users[1] = "Kate";
users[4] = "Sam";
for(let i=0; i < users.length;i++){
    console.log(users[i]);
}

Browser output:

Tom
Kate
undefined
undefined
Sam

Despite the fact that we did not add elements for indexes 2 and 3, the length of the array in this case will be the number 5. Just the elements with indexes 2 and 3 will have the value undefined.