JavaScript Prerequisites To React - Part Two

This article will try to cover all the JavaScript prerequisites to learn ReactJS.

Introduction

This article will try to cover all the JavaScript prerequisites that we must be aware of before we start learning ReactJS.

Please refer to my previous article, i.e., Part 1, to learn a few more concepts.

This article will cover the following.
  • Implementation - Const Functions
  • Implementation - Pure functions
  • Implementation - Mutability in List
  • Implementation – Immutability in List
  • Implementation - Named parameters
  • Implementation - Call, apply and bind
  • Implementation - SetTimeOut () using bind

Implementation Const Functions

These are the functions where objects can’t be changed. Here, I will show you an example of the same.

Examples

  1. const add = (x, y) => x + y;  
  2. console.log(add(1, 2)); // 3  
  3. add = (x, y) => x - y; // Uncaught TypeError: Assignment to constant variable.  

Implementation Pure and Impure functions

  • Anything under {} is an object.
  • Pure Functions - It should have arguments, create a new copy of the object, and return the object
  • Impure Functions – If any function can’t follow any of the above conditions, then it's an impure function. 

Examples

IMPURE

  1. var employee = {  
  2.     Name: 'Gourav',  
  3.     Id: 123  
  4. }  
  5.   
  6. function impure() {  
  7.     employee.Name = "Rahul"  
  8.     employee.Id = 222  
  9. }  
  10. impure()  
  11. console.log(employee);  

Output

  1. {Name: "Rahul", Id: 222} 

PURE

  1. var employee = {  
  2.     Name: 'Gourav',  
  3.     Id: 123  
  4. }  
  5. var purefunction = emp => ({  
  6.     ...emp,  
  7.     Name: 'RahulPure',  
  8.     Id: 12111  
  9. })  
  10. console.log(purefunction(employee));  

Output

  1. Name: "RahulPure", Id: 12111}

Implementation Mutability in List

Here, we will see how we see mutability in a list, i.e., if there is a change in the list passed in the method, then it would change the base list object as well.

Example

  1. let list = [{  
  2.     title: 'A'  
  3. }, {  
  4.     title: 'B'  
  5. }]  
  6. var impurefunction = function(value, titles) {  
  7.     titles.push({  
  8.         title: value  
  9.     })  
  10.     return titles  
  11. }  
  12. console.log(impurefunction('c', list));  
  13. console.log(list);  

Output

  1. 0: {title: "A"}
  2. 1: {title: "B"}
  3. 2: {title: "c"}
  4. 0: {title: "A"}
  5. 1: {title: "B"}
  6. 2: {title: "c"}

Implementation Immutability in List

Here, we would see how we can achieve immutability in a list, i.e., if there is a change in the list passed in the method, then it would not change the base list object.

Example

  1. let list = [{  
  2.     title: 'A'  
  3. }, {  
  4.     title: 'B'  
  5. }]  
  6. var purefunction = (value, listObj) => (listObj.concat({  
  7.     title: value  
  8. }))  
  9. console.log(purefunction('c', list));  
  10. console.log(list);  

Output

  1. 0: {title: "A"}
  2. 1: {title: "B"}
  3. 2: {title: "c"}
  4. 0: {title: "A"}
  5. 1: {title: "B"}

Implementation Named parameters

Here, let us see how can have named parameters in the functions in case we don’t proceed with any value.

Example

  1. var named= function (a="Gourav", b="Cool")  
  2. {  
  3.    console.log(`${a} is ${b}`)  
  4. }  
  5. named()  
  6. named('Rahul''not-cool')  

Output

  1. Gourav is Cool
  2. Rahul is not-cool

Implementation Call, apply, and bind

  • Call - To use an object context in a function
  • Apply - To pass an array as argument into the function
  • Bind - Sends arguments in normal form but returns the function instead of values 

Examples

CALL

  1. var a = {  
  2.     Id: 123,  
  3.     Name: 'Gourav'  
  4. }  
  5.   
  6. function callfunc(x1, y1) {  
  7.     return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`  
  8. }  
  9. console.log(callfunc.call(a, 'Cool''Smart'))  

Output

  1. Gourav is having 123 with values Cool and Smart

APPLY

  1. var a = {  
  2.     Id: 123,  
  3.     Name: 'Gourav'  
  4. }  
  5.   
  6. function callfunc(x1, y1) {  
  7.     return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`  
  8. }  
  9. console.log(callfunc.apply(a, ['Cool''Smart']))  

Output

  1. Gourav is having 123 with values Cool and Smart

BIND

  1. var a = {  
  2.     Id: 123,  
  3.     Name: 'Gourav'  
  4. }  
  5. var bindFunction = function callfunc(x1, y1) {  
  6.     return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`  
  7. }  
  8. console.log(bindFunction.bind(a, 'Smart''Cool')())  

Output

  1. Gourav is having 123 with values Smart and Cool

Implementation SetTimeOut() using bind

Here, let us see how we can use SetTimeOut() using the bind function.

Example

  1. var employee = {  
  2.     Ids: [1, 2, 3],  
  3.     print: function(delay = 5000) {  
  4.         setTimeout(function() {  
  5.             console.log(this.Ids.join(","))  
  6.         }.bind(this), delay)  
  7.     }  
  8. }  
  9. employee.print()  

Output (Would print after 5 seconds)

1. 1,2,3

Stay tuned for my next article which will cover the basics of ReactJS.
 
Happy learning!