Many newbie web developers look at salaries of React web developers and want to learn React right away. I hold the opinion that it’s better to master JavaScript first. All front-end frameworks are based on JavaScript anyway. If you master JavaScript (which is not an easy feat) you’ll have easier time learning front-end frameworks and UI libraries like React as well.
In this article, we will talk about most useful JavaScript concepts for building user interfaces in React.
Callback functions
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.
https://simplefrontend.com/react-loop-through-array-of-objects/
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
These allow you to define functions that accept flexible number of arguments. For example, you could specify what to do with first three arguments, and write something like …args. The function will take the first three arguments, and all remaining ones. Or the function could accept only this type of expandable number of arguments. It could be useful if you want a JavaScript function that adds up all numbers passed into it, for example.
Rest parameters are denoted by three dots before the argument name. Rest parameters must be the last in the order of arguments.
Spread syntax
Beginner JavaScript programmers often confuse spread syntax with rest parameters. Both are denoted by three dots. However, REST is used when functions are defined. It allows us to expand the number 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
One last great feature for conditional expressions are ternary operators. They allow you to evaluate a JavaScript expression (even a Boolean value) and return certain value if it is true, and other value if it’s false.
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.