Object-Oriented JavaScript — Arrays

John Au-Yeung - Jan 24 '21 - - Dev Community

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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();
Enter fullscreen mode Exit fullscreen mode

This is the same as:

const a = [];
Enter fullscreen mode Exit fullscreen mode

Either way, we can populate it by writing:

a[0] = 1;
a[1] = 2;
Enter fullscreen mode Exit fullscreen mode

We can use the Array constructor to populate an array.

For instance, we can write:

const a = new Array(1, 2, 3, 4);
Enter fullscreen mode Exit fullscreen mode

Then a is:

[1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

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

For instance, we can write:

const a = new Array(5);
Enter fullscreen mode Exit fullscreen mode

Then we get:

[empty × 5]
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

And we get:

'1,2,3,4'
Enter fullscreen mode Exit fullscreen mode

logged.

And we can get the constructor with:

console.log(a.constructor);
Enter fullscreen mode Exit fullscreen mode

And we get:

ƒ Array() { [native code] }
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

And we get:

[1, 2, 3, 4, empty]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

And we get:

[1, 2]
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

Then we can call push to add a new entry:

a.push(5);
Enter fullscreen mode Exit fullscreen mode

And we get:

[1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

[1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

[1, 3, 3, 5, 6]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

[2, 3]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then a is:

[1, 100, 101, 102, 4, 5]
Enter fullscreen mode Exit fullscreen mode

and b is:

[2, 3]
Enter fullscreen mode Exit fullscreen mode

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .