JavaScript Prerequisites To React - Part Two

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 we 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 an 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!


Recommended Ebook

Voice of a Developer: JavaScript From Scratch

Download Now!
Similar Articles