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.

• JavaScript Prerequisites To React - Part One

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

const add = (x, y) => x + y;
console.log(add(1, 2)); // 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

var employee = {
    Name: 'Gourav',
    Id: 123
}

function impure() {
    employee.Name = "Rahul"
    employee.Id = 222
}
impure()
console.log(employee);

Output

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

PURE

var employee = {
    Name: 'Gourav',
    Id: 123
}
var purefunction = emp => ({
    ...emp,
    Name: 'RahulPure',
    Id: 12111
})
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

let list = [{
    title: 'A'
}, {
    title: 'B'
}]
var impurefunction = function(value, titles) {
    titles.push({
        title: value
    })
    return titles
}
console.log(impurefunction('c', list));
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

let list = [{
    title: 'A'
}, {
    title: 'B'
}]
var purefunction = (value, listObj) => (listObj.concat({
    title: value
}))
console.log(purefunction('c', list));
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

var named= function (a="Gourav", b="Cool")
{
   console.log(`${a} is ${b}`)
}
named()
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

var a = {
    Id: 123,
    Name: 'Gourav'
}

function callfunc(x1, y1) {
    return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`
}
console.log(callfunc.call(a, 'Cool', 'Smart'))

Output

1. Gourav is having 123 with values Cool and Smart

APPLY

var a = {
    Id: 123,
    Name: 'Gourav'
}

function callfunc(x1, y1) {
    return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`
}
console.log(callfunc.apply(a, ['Cool', 'Smart']))

Output

1. Gourav is having 123 with values Cool and Smart

BIND

var a = {
    Id: 123,
    Name: 'Gourav'
}
var bindFunction = function callfunc(x1, y1) {
    return `${this.Name} is having ${this.Id} with values ${x1} and ${y1}`
}
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

var employee = {
    Ids: [1, 2, 3],
    print: function(delay = 5000) {
        setTimeout(function() {
            console.log(this.Ids.join(","))
        }.bind(this), delay)
    }
}
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!