Object-Oriented JavaScript — Arrays and Functions

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 and functions.

ES6 Array Methods

ES6 added more useful array methods.

They provided that were previously provided by 3rd party libraries like Underscore and Lodash.

Array.from

The Array.from method lets us convert iterable objects and non-iterable array-like objects into an array.

For instance, we can use it to convert a NodeList returned from document.querySelectorAll into an array.

We can write:

const divs = document.querySelectorAll('div');
console.log(Array.from(divs));

Then we get an array.

We can also convert objects that have numeric index and a length property into an array.

For example, we can write:

const obj = {
  0: 'a',
  1: 'b',
  length: 2
};
console.log(Array.from(obj));

And we get:

["a", "b"]

Creating Arrays Using Array.of

We can use the Array.of method to create a new array.

For instance, we can with:

let arr = Array.of(1, "2", {
  obj: "3"
})

Then we get:

[
  1,
  "2",
  {
    "obj": "3"
  }
]

It takes one or more arguments and returns an array with the arguments.

ES6 Array.prototype Methods

The array instance all have more methods added to them.

They include the following methods:”

• Array.prototype.entries() 
• Array.prototype.values() 
• Array.prorotype.keys()

entries returns the key-value pair array.

values returns an array of values.

keys returns an array of keys.

So we can write:

let arr = ['a', 'b', 'c']
for (const index of arr.keys()) {
  console.log(index)
}

for (const value of arr.values()) {
  console.log(value)
}

for (const [index, value] of arr.entries()) {
  console.log(index, value)
}

We log the index with the keys method.

And we log the values withe values method.

And index and value with the entries method.

It also added the find and findIndex methods to let us find the first entry of the array that matches a given condition.

find returns the matched entry.

And findIndex returns the index of the matched entry.

For instance, we can write:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numbers.find(n => n > 3));
console.log(numbers.findIndex(n => n > 3));

Then we get 4 and 3 respectively from the console log.

Function

The Function constructor can be used to create a function

For instance, we can write:

const foo = new Function(
  'a, b, c, d',
  'return arguments;'
);

The first argument is the parameters and the 2nd is the function body.

It’s not a good idea to use it since we create functions with strings, which means there will be security and performance issues.

Functions objects have the constrictor and length properties.

The constructor property has the constructor that created the function, which should be the Function constructor.

And the length property has the number of parameters the function expects.

So if we have:

function foo(a, b, c) {
  return true;
}
console.log(foo.length);
console.log(foo.constructor);

We get 3 and ƒ Function() { [native code] } respectively.

Conclusion

We can create arrays with the Array.from and Array.from methods.

Also, we can traverse arrays with various methods.

The Function constructor shouldn't be used to create functions.