TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at JavaScript features that we can adopt in our JavaScript code.
Using Arrow Functions
Arrow functions are a way to concisely define functions.
They’re often used to define functions that are arguments of other functions.
In JavaScript, functions are regular objects, so they can be passed into another function as arguments.
For instance, we have an example below:
const addPrices = (...rest) => {
return rest.reduce((total, b) => total + b, 0);
};
In the code above, the outer function is a function.
We also passed a function into the reduce method.
There are 3 parts to an arrow function.
We have the input parameters, the equal sign, the great than sign, and the result value.
return and the curly braces are only required only if the arrow functions need to run more than one statement.
Arrow functions can be used anywhere that a function is used.
Working with Arrays
JavaScript arrays are similar to the ones that are in other programming languages.
However, they can be dynamically resized and can contain any combination of values.
This means that they can be in any combination of types.
The size of an array isn’t specified when it’s created and it’ll be allocated automatically as items are added or removed.
JavaScript arrays are zero-based and are defined using square brackets.
It can have initial contents separated by commas.
For instance, we can write:
const names = ['joe', 'jane', 'alex'];
Then we create an array with all strings.
Also, we elements in an array can be read or set using the square brackets in using some array methods.
It has a concat method which takes one or more arrays as arguments to combine it with another array.
join takes a separator string that combines the entries into a string and returns it, with each value separated by the separator .
pop removes and returns the last item of an array.
shift removes and returns the first element in the array.
push takes an item as an argument and add it to the end of the array in-place.
unshiift takes an item and add it to the start of an array.
reverse returns a new array with the items of the original array reversed.
slice(start, end) returns a second of an array.
sort sorts an array optionally with a comparison function for custom sorting.
splice(index, count) removes an item from the index and up to the count .
every(test) returns true if the test function returns true when it’s called with all values of an array.
some(test) returns true if the test function returns true when it’s called with some entries of the array.
filter(test) returns an array with the items that returns true when they’re called with test .
find(test) returns the first instance of something that returns true when called with test .
findIndex(test) returns the index of the first instance of something that returns true when called with test .
forEach(callback) loops through the and calls callback on each item.
includes(value) returns true if value is inside the array.
map(callback) returns a new array that has the results of invoking callback for all items in the array.
reduce(callback) returns an accumulated value produced by running the callback for every item of the array.
Spread Operator
Spread operator can be used on arrays in various ways.
We can use them for spreading array entries as arguments into a function call.
For instance, we can write:
const addPrices = (...rest) => {
return rest.reduce((a, b) => a + b, 0);
};
const prices = [1, 2];
const totalPrice = addPrices(...prices);
Then we spread the prices array as arguments into the addPrices function.
Conclusion
Arrow functions are useful in our TypeScript code.
Array methods are also very useful for finding things and manipulating items.
There are also methods to manipulate methods in place, like adding and remove items.
The spread operator to spread items that are in an array into arguments of a function.
