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

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

Examples
IMPURE
  1. var employee = {
  2. Name: 'Gourav',
  3. Id: 123
  4. }
  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

Examples
CALL
  1. var a = {
  2. Id: 123,
  3. Name: 'Gourav'
  4. }
  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. }
  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!