Categories
Object-Oriented JavaScript

Object-Oriented JavaScript — Arrays

Spread the love

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at arrays.

Array

Array is a built-in function that lets us create an array.

For instance, we can use it by writing:

const a = new Array();

This is the same as:

const a = [];

Either way, we can populate it by writing:

a[0] = 1;
a[1] = 2;

We can use the Array constructor to populate an array.

For instance, we can write:

const a = new Array(1, 2, 3, 4);

Then a is:

[1, 2, 3, 4]

We can create an array with some empty slots by passing in one integer.

For instance, we can write:

const a = new Array(5);

Then we get:

[empty × 5]

Arrays are just objects.

We can convert it to a string with the toString method.

For instance, we can write:

const a = new Array(1, 2, 3, 4);
console.log(a.toString());

And we get:

'1,2,3,4'

logged.

And we can get the constructor with:

console.log(a.constructor);

And we get:

ƒ Array() { [native code] }

logged.

We can use the length property to get the number of items in the array.

For instance, we can write:

const a = new Array(1, 2, 3, 4);
console.log(a.length);

Then we get 4.

We can set the length to a different number to change the array size.

If we set the length to something bigger than what it is now, then we get new entries in the array.

For instance, if we have:

const a = new Array(1, 2, 3, 4);
a.length = 5;
console.log(a);

And we get:

[1, 2, 3, 4, empty]

logged.

If we set the length to a shorter length than what it is now, then the array is truncated.

For instance, if we have:

const a = new Array(1, 2, 3, 4);
a.length = 2;
console.log(a);

And we get:

[1, 2]

Array Methods

We can set use various array methods to manipulate arrays.

We can use the push method to add an entry to the end of the array.

For instance, if we have:

const a = [1, 2, 3, 4];

Then we can call push to add a new entry:

a.push(5);

And we get:

[1, 2, 3, 4, 5]

The pop method removes the last entry of the array.

For instance, we can write:

const a = [1, 2, 3, 4];
a.pop();
console.log(a);

Then we get:

[1, 2, 3]

We can use the sort method to sort an array.

For instance, we can write:

const a = [6, 3, 1, 3, 5];
const b = a.sort();
console.log(a);

Then we get:

[1, 3, 3, 5, 6]

it returns a new array with the entries sorted.

The slice method returns a part of an array without modifying the source array.

For instance, if we have:

const a = [1, 2, 3, 4, 5];
const b = a.slice(1, 3);
console.log(b);

Then we get:

[2, 3]

logged.

The splice method lets us modify the source array.

We can use it to remove a slice, return it, and optionally fills the gap with new elements.

For instance, we can write:

const a = [1, 2, 3, 4, 5];
b = a.splice(1, 2, 100, 101, 102);
console.log(a);
console.log(b);

Then a is:

[1, 100, 101, 102, 4, 5]

and b is:

[2, 3]

We replaced values from index 1 with 2 entries.

Then we replaced that with 100, 101, and 102.

The removed entries are returned.

Conclusion

Arrays let us store data in sequence. They have various methods we can use to manipulate them.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *