DEV Community: Ritik Rana

JavaScript Coding Challenge #2: Add all Integer in a string using JavaScript.

Ritik Rana — Fri, 24 Apr 2020 16:24:51 +0000

Input : A single string "1bn22vg4n62"

Output : 89

Problem : Add all Integer in a string using JavaScript.


let s = '1bn22vg4n62';                //Input String
temp = "";                       //temp var to capture digit from string
sum=0;                               //sum variable to add
for(let i=0;i<s.length;i++){

  if(!isNaN(parseInt(s[i]))){    //logic to check char in string is digit
    temp+=s[i];                  //if true add char to temp string
  }
  else{
    sum+=parseInt(temp);         //if char in string is char- add to sum after 
                                 //converting into integer
    temp="0"                     //setting temp to 0 to neglect effect
  }
}
console.log(sum+parseInt(temp));  
//89

Next Coding Challenge: updated soon

JavaScript Coding Challenge #1:Learn Split, Splice and Join.

Ritik Rana — Thu, 23 Apr 2020 20:04:54 +0000

Input : A single string "aaababbcdff"

Output : Reduced string "abacd"

Problem : Delete each pair of adjacent letters that match from the above string.


let s="aaababbcdff";
let arr = s.split("");
for(let i=0;i<arr.length;i++){
  if(arr[i]==arr[i+1]){
    arr.splice(i,2); 
  }
}
s=arr.join("");
console.log(s);

Next Coding Challenge: Add all Integer in a string using JavaScript.

Closure, Currying and IIFE in JavaScript

Ritik Rana — Mon, 20 Apr 2020 17:56:32 +0000

These are some of the concepts of JavaScript where everyone struggle in beginning.
Lets try to simplify them bit by bit.

Closure

Closure is a function that can remember all the things that are used in its defination but are available outside its scope.
Lets see what this line means:


function outerFunction(){
    let i=2;
    function innerFunction(){
        console.log(i);
    }
    return innerFunction;
}

console.dir(outerFunction());
//[[Scopes]]:
//0: Closure (outerFunction) {i: 2}

You will see something like this when you run the sample code.
Lets break the code:

1.There is an outerFunction() with a variable i.

2.And a function insideFunction() which it returns as an output.

3.When we invoke outerFunction() inside console.log() we get innerFunction() in return.

4.innerFunction() wants variable i but not in its scope.

What will happen if we invoke innerFunction:


    function outerFunction(){
        let i=2;
        function innerFunction(){
            console.log(i);
        }
        return innerFunction;
    }

    const inner = outerFunction();
    inner();
    //2

Output is 2.

But outerFunction is already executed and its scope is vanished from stack. So how does innerFunction()
get the value of "i" from outerFunction(). Does it Re-Run the outerFunction()? NO!

So what innerFunction does is, it creates a closure with the lexical environment it needs.
It has to use the value of variable "i" in future so it saves it,in its lexical environment(scope).
And whenever innerFunction() is invoked irrespective of outerFunction(), it gets help from its lexical environment.

Does it stores all variables or functionality of outerFunction() in its lexical environment? NO:


    function outerFunction(){
        let i=2;
        let j=3;
        function innerFunction(){
            console.log(i);
        }
        return innerFunction;
    }

    console.dir(outerFunction());
    //[[Scopes]]:
    //0: Closure (outerFunction) {i: 2}

So there is no variable "j" in lexical environment (scope).
It just store what it may need during the time of execution.
Closures are used in IIFE which we will see in later part of this article.(stay tuned)

Currrying

Currying is process of transforming a function which takes multiple attributes into nested form of functions which takes
attribute one by one.


function multiply(x,y){
    console.log(x*y)
}
multiply(5,4);
//20

Currying it:


function multiply(x){
    return function(y){
        console.log(x*y);
    }
}
multiply(5)(4);
//20

But how it is helping in our code. Lets see:


function multiply(x){
    return function(y){
        console.log(x*y);
    }
}
const multiplyby3 = multiply(3);
const multiplyby5 = multiply(5);

multiplyby3(2);
//6
multiplyby5(2);
//10

It helps in loosely binding the attributes and to make reusable code.

IIFE

IIFE stands for Immediately Invoked Function Expression. It is a design pattern which helps in running a
function as soon as it is defined.


(function(){
    //logic
})();

This is the IIFE syntax consist of an anonymous function with () to invoke immediately.

Lets create a IIFE:


(function(){
    console.log("Its an IIFE")
})();
//Its an IIFE

IIFE also provide other benefits, like it helps in making our variable and methods private.


const world = (function(){
    let val;

    return{
        createNewWorld: function(){
                        val = true; 
                        },
        destroyWorld: function(){
                    val=false;
                    },
        result:function(){
            val?console.log("New world is Created"):console.log("Your world needs to be recreated")
        }

    }

})();

world.createNewWorld();
world.result();
//New world is Created

world.destroyWorld();
world.result();
//Your world needs to be recreated

In the above code sample variable "val" is a private member. We can not access it directly.
The public methods under return function helps in accessing the private member.
These public methods are the closures that share the same lexical environment.
This is one of the application of closures.

The End

In this article we learn about Closures, Currying and IIFE. <3
This article is also available at ritikrana.in

What the hack is call, apply, bind in JavaScript

Ritik Rana — Sun, 19 Apr 2020 21:08:18 +0000

Before start looking into call, apply, bind you should understand - how does "this" keyword works in JavaScript.
In short "this" creates a reference to an object. It may refer to global object i.e.{window object} in global scope.


console.log(this);
//Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

And inside an Object to the Object itself.


const student = {
    name:"ritik",
    getDetails(){
        console.log(this);
    }
}

student.getDetails();
//{name: "ritik", getDetails: ƒ}

So that is how "this" gets context by its scope automatically.

But what if we want to specify the context(environment) of "this" to a specific object.
Lets see this in code:


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(){
    console.log(`${this.type} is the ${this.property} religion`);
}

getDetails();
//undefined is the undefined religion

So here "this" is refering to "window" object (according to its default behaviour in function "this" refers to "window" object).
But we want it to refer to "religion" object.
That is where call, apply, bind comes into picture.


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(){
    console.log(`${this.type} is the ${this.property} religion`);
}

getDetails.call(religion);
//humanity is the greatest religion
getDetails.apply(religion);
//humanity is the greatest religion

Here "call" or "apply "method helps to make connection between "religion" object and "getDetails" function.
Or we can say "call" or "apply" method helped in creating a reference of "this" in "getDetails" funtion to "religion" object.

Both "call" and "apply" work in the same way but they handle arguments in different manner.
Now let us pass some parameters to the function "getDetails".



const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

getDetails.call(religion,"modern world","human");
//humanity is the greatest religion in the modern world of human

getDetails.apply(religion,["modern world","human"]);
//humanity is the greatest religion in the modern world of human

"call" method takes arguments additional to the "this" context linearly seperated by comma while
"apply" handles argument as an array.

Now what if you wanted to use "getDetails" function with different "arguments" in many places of your code.
Using "call" or "apply" method multiple times-can be one of the solution but "bind" method can make the process more easy.

"Bind" method creates a reference of "this" to the object it has been passed with, same like "apply" or "call" but returns a function.
Now that function can be used multiple times with different "arguments" in your code.


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

const newgetDetails = getDetails.bind(religion);
newgetDetails("modern world","human");
//humanity is the greatest religion in the modern world of human

newgetDetails("future world","different creatures");
//humanity is the greatest religion in the future world of different creatures

If you dont want to store the returning function than, It can be invoked directly like this:


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

getDetails.bind(religion)("modern world","human")
//humanity is the greatest religion in the modern world of human

TheEnd

In this article we learn about call, apply, bind in JavaScript. Try out the code samples and play with "this" keyword.
{This post is also available on ritikrana.in}

Understand "this" keyword in JavaScript

Ritik Rana — Sat, 18 Apr 2020 17:22:15 +0000

Most of the time we confuse with this keyword in JavaScript. So lets simplify it.
"this" is just used to create a reference to any object.

Let say we have a two object "studentFirst" and "studentSecond".


const studentFirst = {
    name:"ritik",
    age:"21"
}

const studentSecond = {
    name:"gaurav",
    age:"45"
}

And a function "getDetails" which will log the student details in console.


function getDetailsFirst(){
    console.log(`${studentFirst.name} is ${studentFirst.age} years old.`);
}

function getDetailsSecond(){
    console.log(`${studentSecond.name} is ${studentSecond.age} years old.`);
}

getDetailsFirst();
getDetailsSecond();

//ritik is 21 years old.
//gaurav is 45 years old.

Above we are using two seperate function and using object properties by calling their Object seperatly.
It can be done more efficiantly using "this". Lets see:


const studentFirst = {
    name:"ritik",
    age:"21"
}

const studentSecond = {
    name:"gaurav",
    age:"45"
}

function getDetails(){
    console.log(`${this.name} is ${this.age} years old.`);
}

getDetails.call(studentFirst); //this gets a reference to studentFirst Object //A
getDetails.call(studentSecond);//this gets a reference to studentSecond Object //B

//ritik is 21 years old.
//gaurav is 45 years old.

Here "call" method is used to create a reference for "this" in "getDetails" method.
At position A "this" creates a reference to "studentFirst".
At position B "this" creates a reference to "studentSecond".

Now lets see how does "this" behave in different scopes.

Open Chrome Dev-Tool and in console just log "this".


console.log(this);
//Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

So in global scope "this" is refering to "window" object.

Now lets try "this" inside a object.


const student = {
    name:"ritik",
    getDetails(){
        console.log(this);
    }
}

student.getDetails();
//{name: "ritik", getDetails: ƒ}

Inside a Object "this" refers to scope of same Object in which it is defined.


const student = {
    name:"ritik",
    getDetails(){
        console.log(this.name);
    }
}

student.getDetails();
//ritik

or you replace "this" with Object name "student" like this:


const student = {
    name:"ritik",
    getDetails(){
        console.log(student.name);
    }
}

student.getDetails();
//ritik

Most of the time "this" is seen inside a constructor which is one of the usecase of it.

Hope you get the basic of "this" in JavaScript.
{This post is also available on ritikrana.netlify.com}

Must to know Array Methods in Javascript

Ritik Rana — Sun, 12 Apr 2020 17:55:42 +0000

Array are mostly used in web development and most of the task on web
need Array along with its methods. In JavaScript, arrays have many predefined methods in its _proto_.So lets discuss some commonly used array methods along with their purpose.

1. Array.find()

The find() method takes a callback function which executes on each element in array taking three argument i.e. element, index, array
and returns the value of the first element in the provided array.


function greater_than_20(item){
    return item > 20;
}
const all_numbers = [2,4,5,7,20,23,15,9];
const found = all_numbers.find(greater_than_20);
console.log(found);
//23

or you can do it like this: using arrow function.


const all_numbers = [2,4,5,7,20,23,15,9];
const found = all_numbers.find(item => item > 20);
console.log(found);
//23

and if you want to use all three argument that is possible than:


function greater_than_20(item,index,array){
     if(item>20 && index>4){
         console.log(item +" "+ index + " "+ array[index]);    
        }
    }
const all_numbers = [2,21,5,7,20,23,15,9];
const found = all_numbers.find(greater_than_20);
//23 5 23

2. Array.filter()

The filter() method takes each element of array and check the condition provided in callback function and creates a new array of those
elements that satisfies the condition. If no element satisfies then a empty array is returned.
Lets see the code :


const people_age = [12,8,10,19,20,5,25,36]
function people_above_18(age) {
    return age > 18; 
}
const people_18 = people_age.filter(people_above_18);
console.log(people_age);
console.log(people_18);

or you can do it like this: using arrow function.


const people_age = [12,8,10,19,20,5,25,36]
const people_18 = people_age.filter(age=>age>18);
console.log(people_age);
console.log(people_18);
//[12, 8, 10, 19, 20, 5, 25, 36]
//[19, 20, 25, 36]

It also accepts optional parameters like index, array.

3. Array.forEach()

The forEach() method just runs a function for each element of array. It does not return anything i.e. undefined.
It is same like for loop.


const arr = ['a', 'b', 'c'];
arr.forEach(element => console.log(element));
//a
//b
//c

4. Array.map()

The map() method runs a function for each element of array just like forEach() method but it also creates a new array of result, of each element.


const number = [1,2,3,4,5,6]
function inc_by_5(element){
    return element + 5;
}
const number_incremented_by_5 = number.map(inc_by_5);
console.log(number_incremented_by_5);
//[6, 7, 8, 9, 10, 11]

or you can do it like this: using arrow function.


const number = [1,2,3,4,5,6]
const number_incremented_by_5 = number.map(element=>element+5);
console.log(number_incremented_by_5);
//[6, 7, 8, 9, 10, 11]

5. Array.reduce()

The reduce() method executes a reducer function on a provided array elements and returns a single output value.
A reducer function is a special one. It uses two arguments accumulator and currentValue. The result of each iteration is stored in
accumulator.
Lets see an example :


const marks = [50,60,75,80,40];
function reducer(accumulator , currentValue) {
  return accumulator + currentValue;
}
const total_marks = marks.reduce(reducer);
console.log(total_marks);
//305

In the first iteration 'accumulator' holds value of first element in array.
We can also assign it directly to some value by passing along with reducer.


const marks = [50,60,75,80,40];
function reducer(accumulator , currentValue) {
  return accumulator + currentValue;
}
const total_marks = marks.reduce(reducer,-305);
console.log(total_marks);
//0

6. Array.sort()

The sort method sorts the elements of the provided array. By default it sorts in ascending order.


const debts= [5500,2500,1365,5000,7584,45,745];
debts.sort();
console.log(debts);
//[45,745,1365,2500,5000,5500,7584]

We can change the sort order according to our use by passing a callback funtion.
Lets sort the "debts" array in descending order.


const debts= [5500,2500,1365,5000,7584,45,745];
debts.sort((num1,num2)=>num2-num1);
console.log(debts);
//[7584, 5500, 5000, 2500, 1365, 745, 45]

7. Array.slice()

The slice methods returns a portion of array into a new array. It takes two parameters as index value - begin and end.
"End index value is not included".


const data = ["ritik","rahul","shubham","ashish","gaurav","piyush"]
const partOfData = data.slice(2,5);
console.log(partOfData);
//["shubham", "ashish", "gaurav"]

What is forget or give large value to end index i.e


const data = ["ritik","rahul","shubham","ashish","gaurav","piyush"]
const partOfData = data.slice(2);
console.log(partOfData);
//["shubham", "ashish", "gaurav", "piyush"]
const partOfData2 = data.slice(2,5);
console.log(partOfData2);
//["shubham","ashish","gaurav"]

It checks data.length property if end index is missing or greater than length of array.

8. Array.splice()

The splice method is used to alter the array. It helps in deleting or adding items inside a array at
any particular position. It returns the array with deleted items.
It takes 3 parameter starting index , delete count from that index , and if something to add after that index.


const alpha = ["a","b","c","d","e"];
alpha.splice(2,1);
//goes to index 2 and deletes 1 element
console.log(alpha);
// ["a", "b", "d", "e"]
alpha.splice(2,0,"c")
//goes to index 2 and deletes nothing and adds "c"
console.log(alpha)
//["a", "b", "c", "d", "e"]
alpha.splice(0);
//deletes full array as starting index is 0 and by default delete count it takes arr.length
console.log(alpha);
//[]

Thats all. You can also read this at ritikrana.netlify.com