Object-Oriented JavaScript — Arrays and Functions
Tags: webdev, programming, javascript, beginners
Published: 2021-01-24 21:51:39

**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.