JavaScript to know before moving into React.
In this article, I’ll show you some basic JavaScript you should know before moving into React. When I started my journey to learn React I always used to get confused about arrow function, the spread operator, promises, and destructuring. Now my confusion is clear and I want to share that knowledge with you so that the same does not happen to you. So let’s get started.
1. Arrow Function
An arrow function is a feature introduced in ES6. It helps us write javascript functions in a shorter and concise way.
Syntax
(param1, param2, …, paramN) => { statements }- The first or common way to write an arrow function.
- Arrow function without curly braces if the return statement is one.
- Arrow function without parenthesis if there is one argument.
- Arrow function if there is no argument
- Arrow function in object literal.
Usage in React
- Arrow function usage with the javascript map function. Here we are fetching data from jsonplaceholder using Axios and then Iterating using the map function of javascript.
- Arrow function with async-await.
- Arrow function usage in functional components.
2. Map
The map() method creates a new array with the results of calling a function for every array element.
Syntax
let new_array = old_arr.map((val, index, arr)=> {
// return element to new Array
})* new_array => the new array that is returned.
* old_arr => the array on which map function to be run.
* val => the current element being processed in the array.
* index => the index of the current element being processed in the array. (optional)
* arr => The array map was called upon.(optional)
- Example 1
- Example 2 — Return object with value and index.
Usage in React
Here I am creating two functions mapMethod and createObject to demonstrate the above two examples in React.
3. Template literals
Template literals are string literals allowing embedded expressions.
Syntax
`string text``string text line 1
string text line 2``string text ${expression} string text`tag`string text ${expression} string text`
Example 1
For creating template literal you should use backticks (``):
Example 2 — Multi-line string
Example 3 — Interpolation, allows you to put expression inside the template literal.
4. Import and Export
Export
Export statement is used when we want to export a variable, function or a class from one file to be used by another file through Import statement.
The import statement is used to import a variable, function, or a class that is exported by another module.
Example 1 — Exporting array, const, class, and function before declaring and then importing
Export
Import
Example 2 — Exporting array, const, class, and function after declaring and then importing.
Export
Import
Example 3 — Export “as”
Import
Example 4 — Export default (You can only export one default per file) and then importing
Export
Import
Example 5 — You can also import all the exported variables, functions, classes at once.
5. Destructuring
Destructuring helps us create variables from values in arrays or properties from objects. It makes our code look simpler and prettier.
Array destructuring
Example 1 — Assigning array values to custom variables. Here the position of variable represents the position of values.
Example 2 — Assigning the first two values as a custom variable and rest values as an array.
Example 3 — Setting a default value for the variable if the passed array doesn’t have enough values.
Example 4 — Accessing the nested array
Example 5 — Swapping variables
Object Destructuring
Example 1 — Assigning object values to custom variables. This is most commonly used in React.
Example 2 — Assigning previously declared object variables to new variable names.
Example 3 — Default Value. If the declared variable doesn’t exist it will return an undefined error so assigning default value if a variable does not exist in the destructured object.
Example 4 — Assigning previously declared object variables to new variable names and providing default values. So it’s basically a combination of examples 2 and 3.
Example 5 — Nested Object Destructuring.
Example 6 — Nested Object Destructuring with the default value.
Example 7 — Assigning the first two values as a custom variable and rest values as an object.
Mixed Destructuring
Sometimes you have to deal with complex objects which include a combination of objects and arrays. So here is an example to show how to deal with them.
6. Promises
Promises are used to handle asynchronous operations in javascript. It’s basically an object that may produce some value in the future either a resolved one or rejected one.
Syntax
var mypromise = new Promise(function(resolve, reject){
//do something
});* Promise take one parameter which is a callback function.
* The callback function inside Promise takes two parameter resolve and reject.
* If operation is successful it will call resolve.
* If operation is unsuccessful it will call reject.
Example 1
Promise Consumers — then() , catch(), finally
- then() — If promises get resolved
syntax
.then(function(result){
//handle success
}, function(error){
//handle error
})* First function is executed if condition satisfy.
* Second function executed if condition doesn't satisy.
Example
- catch() — If promises fail.
syntax
.catch(function(error){
//handle error
})
* Used to handle promise rejection or error handling.- finally() — this method can be useful if you want to do some processing or cleanup once the promise is settled.
syntax
.finally(function(error){
//post processing
})Example
Chaining in promise
If you want to execute two or more asynchronous operation back to back, where each execution starts after completion of previous operation.
Example
Note:
- Each execution takes place after completion of the previous operation.
- Passing the value of a in resolve to get that as resposnse in then() and multiplying it with 2 in each step.
Chaining after a catch
Usage in react
Here we have created the getData method to create a new Promise to fetch data from jsonplaceholder API using Axios. If there is a response from API it will resolve and console the response else it will reject and respond with the error message from the API.
7. Spread Operator
Spread syntax (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected
Spread in function calls
Example
Spread in array literals
- Copying Arrays
- Merging Arrays
- In Destructuring variable
Spread in object literals
- Copying Objects
- Merging Objects
- In Destructuring variable
String to a single character array
Spread Operator in console.log
Remove Duplicate entries from an Array
8. Conditional (ternary) operator
A Conditional (ternary) operator allows us to specify that a particular code will be executed if a certain condition is met. It’s similar to the if-else statement with a shorter version of code.
syntax
condition ? epressionIfTrue : expressionIfFalseSingle condition checking
Multiple condition checking
9. Filter
The filter() method creates an array filled with all array elements that passes a certain condition
Basic Example
Example with some dummy data
10. Reduce
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value
syntax
array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)* accumulator - The accumulator accumulates callback's return values. It is the accumulated value previously returned in the last invocation of the callback—or initialValue, if it was supplied* currentValue - The current element being processed in the array.* currentIndex - Optional. The array index of the current element* arr - Optional. The array object the current element belongs to* initialValue - Optional. A value to be passed to the function as the initial value
Basic Example
Example with some dummy data
That’s it for all today. Below I have shared the live code and GitHub repository for reference and practice.
