ES6 introduced three great functions – map(), filter(), reduce(). If you’re going to build apps, you will use these all the time. map() allows you to iterate over array of objects to create elements and components in JSX.
React web apps often receive data as an array of objects. You can use map() to create real HTML elements using that data. Similarly, filter() takes a callback function argument as well. It returns a condition. Array items that meet the condition will be stored in the new array. This allows you to selectively create JSX elements based on a criteria.
reduce() is not used to create new elements. However, it is often used to aggregate certain values in the array. For example, add up all the numbers in the array.
Rest parameters are denoted by three dots before the argument name. Rest parameters must be the last in the order of arguments.
Spread, on the other hand, allows us to ‘unpack’ everything from iterable values like arrays and strings. For example, when you’re calling an array, you can use the spread syntax to pass every item in the array as an argument. When defining a function, you use the REST operator to accept unpredictable number of items in the array.
Spread syntax is often used to combine items from two arrays. Let’s look at an example:
let arr1 = [a,b,c]
let arr2 = [d,e,f]
let combined = […arr1, …arr2]
The combined variable will be an array that contains all items from arr1 and arr2 arrays.
Ternary operators are often used in React. For conditional rendering, conditional classNames, conditional styles. It is used to add dynamic functionality to web applications.
You can even nest multiple ternary operators into one.