Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at the spread operator and functions in JavaScript.
Converting Iterable or Array-Like Objects to Arrays
We can convert iterable or array-like objects into arrays.
We can do this with the spread operator.
For example, we can write:
const set = new Set([1, 2, 6]);
const arr = [...set];
Then arr is [1, 2, 6] .
We can turn other iterable objects into an array the same way.
For instance, we can write:
const obj = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
const arr = [...obj];
Then arr is [1, 2, 3] .
If we have something that’s not iterable, but array-like, we can convert it to an array with the Array.from method.
For example, we can write:
const arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
`const` `arr` `=` `Array.from(arrayLike);`
Then arr is [“a”, “b”, “c”] .
We can’t use the spread operator to spread arrayLike into an array.
If we try, then we get a TypeError.
Callable Entities in ES6
There are several types of callable entities with ES6 or later.
They’re functions, methods, and constructors.
A function isn’t part of any object, so we call them by writing foo(1) .
Methods are functions that are properties of an object.
For example, we can call them by writing obj.foo(81) .
Constructors are functions that we can an object that’s an instance of the constructor.
For example, we can write new Constr(8) to call it.
super calls are restricted to specific locations.
We can call super method calls by writing:
super.method('abc')
And we can call the super constructor by writing:
super(8)
We can do this if a class is a subclass created by using the extended keyword.
For example, we can write:
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`hello ${name}`)
}
}
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
greet() {
super.greet()
}
}
We called the super constructor to call the Person constructor from the child Employee class.
And we called the Person instance’s greet method with super.greet() .
Prefer Arrow Functions as Callbacks
Callbacks usually don’t need their own values of this , so we can use arrow functions to define them.
It’s also more compact so we type less.
Some APIs use this as an implicit parameter for their callbacks.
This prevents us from using arrow functions as callbacks.
For example, addEventListener may use this in their callback:
document.addEventListener('click', function() {
console.log(this);
})
this is the document object.
However, we can change this to document so that we can use arrow functions for our callback:
document.addEventListener('click', () => {
console.log(document);
})
Prefer Function Declarations as Standalone Functions
If we have standalone functions, we should use function declarations so that we can use them anywhere.
So we can write:
function foo(arg1, arg2) {
// ···
}
They can be used anywhere and they look like generator functions.
However, we usually don’t need this for standalone functions.
If we don’t need their own this inside the function, then we can set the arrow function to a variable.
For example, we can write:
`const` `foo` `=` `(arg1,` `arg2)` `=>` `{`
//...
`};`
Then we don’t have to worry about the value of this inside the function.
Conclusion
We can convert non-iterable array-like objects to arrays.
Also, there’re various callable entities with modern JavaScript.
