Javascript Basic of Array

Arrays in JavaScript are high-level list-like objects with a length property and integer properties as indexes.

Create Array

const arr = [1, 2];

// or

const arr = Array(1, 2);

Length

The length property of an object which is an instance of type Array sets or returns the number of elements in that array.

const arr = [1, 2];

console.log(arr.length);
// expect output: 2

Access Item

const fruits = ['Apple', 'Orange'];

console.log(fruits[0]);
// expect output: "Apple"

console.log(fruits[fruits.length - 1]);
// expect output: "Orange"

Push

The push() method adds one or more elements to end of Array and returns the new length.

const fruits = ['Apple', 'Orange'];

console.log(fruits.push('Banana'));
// expect output: 3

console.log(fruits);
// expect output: Array ["Apple", "Orange", "Banana"]

Pop

The pop() method removes the last element from the end of Array and returns that removed element.

const fruits = ['Apple', 'Orange'];

fruits.pop();

console.log(fruits);
// expect output: Array ["Apple"]

Shift

The shift() method removes the first element from the top of an Array and returns that removed element.

const fruits = ['Apple', 'Orange'];

fruits.shift();

console.log(fruits);
// expect output: Array ["Orange"]

Unshift

The unshift() method adds one or more elements to the top of an Array and returns the new length.

const fruits = ['Apple', 'Orange'];

console.log(fruits.unshift('Banana'));
// expect output: 3

console.log(fruits);
// expect output: Array ["Banana", "Apple", "Orange"]

Array Constructor

The most popular method for creating arrays is using the array literal syntax [], which is very straightforward. However an alternative method is using the Array constructor.

Let’s look what happens when creating a new Array of a given length. The constructor just sets the length property of the array to the given length, without setting the keys.

const arr = Array(3);

console.log(arr.length);
// expect output: 3

console.log(arr[0]); // undefined
console.log(arr[1]); // undefined
console.log(arr[2]); // undefined

Each key were never set (they don’t exist). This makes it useless to attempt to use any of the array iteration methods such as map(), filter() or reduce() to manipulate the array.

const arr = Array(3).map(() => 3);

console.log(arr[0]); // undefined
console.log(arr[1]); // undefined
console.log(arr[2]); // undefined

We can see that map() didn’t work here, because the index properties don’t exist on the array, only the length property exists. You can prove it

const arr = Array(3);

console.log(Object.getOwnPropertyNames(arr));
// expect output: ["length"]

const arr1 = [1, 2, 3];

console.log(Object.getOwnPropertyNames(arr1));
// expect output: ["0", "1", "2", "length"]

You can use the fill() method fills all the elements of an array from a start index to an end index with a static value. The end index is not included.

const arr = Array(3).fill(3);

console.log(arr[0]); // 3
console.log(arr[1]); // 3
console.log(arr[2]); // 3

You can find more info about the Fill Method at MDN

Array From

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

console.log(Array.from('foo'));
// expect output: Array ["f", "o", "o"]

Array Of

The Array.of() method creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.

console.log(Array.of(7));
// expect output: [7]

console.log(Array.of(1, 2, 3));
// expect output: [1, 2, 3]

Array is Array

The Array.isArray() method from the global object Array determines whether the passed value is an Array or not.

console.log(Array.isArray([1, 2, 3]));
// expect output: true

console.log(Array.isArray({foo: 'bar'}));
// expect output: false

console.log(Array.isArray('foobar'));
// expect output: false

console.log(Array.isArray(undefined));
// expect output: false

Toncho Dev TD