DEV Community: Aakash Srivastav

Array Destructuring in Depth

Aakash Srivastav — Thu, 04 Jun 2020 08:32:52 +0000

In this post, our major focus will be on learning how to harness the power of destructuring to simplify our JavaScript programs.

What does the term Destructuring mean ?

You can think of it mentally as Decomposing a structure into individual parts .
The purpose of destructuring as a feature is to assign individual parts from some larger structure.

i) Let’s imagine , we’ve a function that returns us some user names.And I would grab the data and assigning it off into a variable , say awesomeTeachers.

function instructors(){
return ['Will','Kyle','Jonas'];
}
var awesomeTeachers= instructors();

Now , I want to get these three usernames into three different variables.
Let's follow the normal approach first :

Normally , I would be assigning off the individual element values into three different variables like this :

function instructors(){
return ['Will','Kyle','Jonas'];
}
var awesomeTeachers= instructors();

var teacherOne = awesomeTeachers[0];
var teacherTwo = awesomeTeachers[1];
var teacherThree = awesomeTeachers[2];

console.log(teacherOne );       // Will
console.log(teacherTwo );       // Kyle
console.log(teacherThree );     // Jonas

Now , let's use Destructuring approach:

function instructors(){
return ['Will','Kyle','Jonas'];
}

let [ teacherOne,
      teacherTwo,
      teacherThree
    ] = instructors();

That's it. We have reduces plenty of lines of code by this approach.

Now , let's handle the varieties of this example:

a) What will happen if we removed the third name from the array i,e

function instructors(){
return ['Will','Kyle'];
}

let [ teacherOne,
      teacherTwo,
      teacherThree
    ] = instructors();

Now , teacherThree will be undefined.
Remember , if our destructuring pattern indicates something that doesn’t exist, then it just gets assigned undefined .

b) I had an extra value but we didn’t account for it on the left-hand side i,e

function instructors(){
return ['Will','Kyle','Jonas','Andrew'];
}

let [ teacherOne,
      teacherTwo,
      teacherThree
    ] = instructors();

Nothing significant will happen ,last value i,e 'Andrew' just get ignored.

c) What if it was possible for one of these positions to come back as undefined ?

function instructors(){
return ['Will',,'Jonas',];
}

let [ teacherOne,
      teacherTwo,
      teacherThree
    ] = instructors();

In this case, value of teacherTwo would be undefined .
It would always be best to provide some sort of default.

function instructors(){
return ['Will',,'Jonas',];
}

let [ teacherOne,
      teacherTwo = 'teacher',
      teacherThree
    ] = instructors();

Note:

It’s important to understand that the default value expression only applied when there’s an undefined .
If I got null instead of undefined what the variable teacherTwo would be null not the default value provided.

d) What if our array had several other names in it and I couldn’t predict how many values it had in it? But I want all of them to have to be collected up into an array ?

We can use the gather or rest syntax.

function instructors(){
return ['Will','Kyle','Jonas','Wes','Andrew','Dylan','Maximilian'];
}

let [ teacherOne,
      teacherTwo,
      teacherThree,
      ...fourth
    ] = instructors();

e) Till now , we've been directly gathering the values in appropriate variables. But it might be the case that we’d actually like to have a reference to the whole structure as well.

Then we need to do this :

function instructors(){
return ['Will','Kyle','Jonas'];
}

let [ teacherOne,
      teacherTwo,
      teacherThree,
    ] = wholeArray = instructors();

Here , first wholeArray will get assigned the array and then that array is gonna get destructured by the given pattern.

ii) Declaration-assignment

We can also declare the variables first and then use destructuring pattern.Let's have a look:

function instructors(){
return ['Will','Kyle','Jonas'];
}

let wholeArray = instructors();

let [ teacherOne,
      teacherTwo,
      teacherThree
    ] = wholeArray ;

a) Assigning to objects:

If we’re can assign them to variables that already exist, we could also assign them to entirely other locations.Let's see :

function instructors(){
return ['Will','Kyle','Jonas'];
}

wholeArray = instructors();
let obj = { };

let [ obj.teacherOne,
      obj.teacherTwo,
      obj.teacherThree
    ] = wholeArray ;

b) Assigning to array:

In the same way as we did for objects, we can also assign them to any array position :

function instructors(){
return ['Will','Kyle','Jonas'];
}

wholeArray = instructors();
let arr= [ ];

let [ arr[0],
      arr[1],
      arr.[2]
    ] = wholeArray ;

iii) Comma Seperation

What if I didn't care about any name in the array ?
We can ignore them just by using comma . Let's see:
If I don't want our second item i,e 'Kyle' , we can just use comma at that place.

function instructors(){
return ['Will','Kyle','Jonas'];
}

wholeArray = instructors();

let [ teacherOne,
      ,
      teacherThree,
    ] = wholeArray ;

iv) Parameter Arrays

If we can do array destructurings on our assignment list, __we can also do them in parameter positioning .

function data([
  teacherOne,
  teacherTwo,
  teacherThree
]) {
    // ...
}

v) Providing Defaults:

function instructors(){
return null;
}

wholeArray = instructors();
let arr= [ ];

let [ teacherOne,
      teacherTwo,
      teacherThree,
    ] = wholeArray ;

In the above code , what would happen if our function instructors didn't returned any array or returned null ?
We’ll get a type error .

So , in order to fix this , we can provide a default empty array , so that if data comes back false from function , then it will just pick up the empty array .

function instructors(){
return null;
}
instructors();

let arr= [ ];

let [ teacherOne,
      teacherTwo,
      teacherThree,
    ] = instructors() || [ ];

The only motive of this was to save ourself from typeError.
teacherOne , teacherTwo and teacherThree are still undefined .

We can do the same thing in parameter too :

function data([
  teacherOne,
  teacherTwo,
  teacherThree
] = []) {
    // ...
}

vi) Nested Array Destructuring

Let's use destructuring for Nested Array.
In destructuring , if we have a position inside an array that is also an array, then we need to break that thing down again as a destructuring pattern.
Let's see-

function instructors(){
return ['Will',['Kyle','Kent'],'Jonas'];;
}
instructors();

let arr= [ ];

let [ teacherOne,
     [
      teacherTwo,
      teacherThree
     ],
      teacherFour
    ] = instructors() || [ ];

So at position two, instead of having the target be a variable, we want the target to be another destructuring pattern.

a) What if instead of getting subarray at position two , we got undefined ?

Again ,we’re gonna get type error .
So , just like we did earlier , we can provide empty array as default here too :

function instructors(){
return ['Will',['Kyle','Kent'],'Jonas'];;
}
instructors();

let arr= [ ];

let [ teacherOne,
     [
      teacherTwo,
      teacherThree
     ] = [ ],
      teacherFour
    ] = instructors() || [ ];

vii) Swaping Two variables

We can use destructuring assignment to swap the values of variables.

let firstName = 'Will';
let lastName = 'Sentance';

[ firstName , lastName ] = [ lastName , firstName ]

Conclusion

JavaScript is full of complex objects and arrays. Whether it’s the response from an HTTP request, or static data sets, being able to access the embedded content efficiently is important. Using destructuring assignment is a great way to do that. It not only handles multiple levels of nesting, but it allows for focused access and provides defaults in the case of undefined references.

Thank you or reading :)

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

Conditional Rendering in React

Aakash Srivastav — Mon, 04 Nov 2019 18:25:43 +0000

What is conditional rendering in React?

Conditional rendering as a term describes the ability to render different UI markup based on certain conditions. In other words, it is a way to render different elements or components based on a condition.

Scenarios where you will mostly use conditional rendering:

Rendering external data from an API
Showing/hiding elements
Toggling application functionality
Implementing permission levels
Authentication and Authorization

When we are developing a React application, we often need to show or hide an element given a certain condition. Be it a user interaction, the presence of data coming from a request, or even permission levels.In a conditional render a component decides based on one or several conditions which elements it will return. For instance, it can either return a list of items or a message that says "Loading...". When a component has conditional rendering, the instance of the rendered component can have different looks.

1. Using if/else:

The easiest way to have a conditional rendering is to use an if else in React in your render method. Imagine you don't want to render your component, because it doesn't have the necessary props or data. For instance, an App component shouldn't render the name and date until it's loading. You can use an if statement to return true if it's loading.

Example 1 -

.
.
function isLoading(){
  return true
}

export default class App extends React.Component{
  render(){
    if ( isLoading() === true ) {
      return null
    }

    const name = 'Aakash'

    return (
      <div>
        <h1>Hello, {name}</h1>
        <p>Today is {new Data().toLocaleString()}</p>
      </div>
    );
  }
}
.
.

Now , we'll get empty page because we're telling React - Don't show any UI if isLoading is true

2. Using ternary orperator:

JavaScript’s ternary operator is a little like a shorthand if/else statement, but with one crucial difference: it’s an expression, not a statement.

Example 2 -

ifTrue ? thenA : elseB

 <div>
    {props.question ? <h3>Question: {props.question}</h3> : null}
</div>

Example 3 -

 <div>
     <h3 style={{display: props.question ? "block" : "none"}}>Question:{props.question}</h3>
     <h3>Answer: {props.punchLine}</h3>
     <hr/>
</div>

3. Using AND orperator:

JavaScript’s makes the && operator more useful than it might look at first.

The logical && helps us specify that an action should be taken only on one condition, otherwise, it would be ignored entirely. In other words , If the condition is true, the expression after the logical && operator will be the output. If the condition is false, React ignores and skips the expression.
This is useful for situations where you only need to take an action when a certain condition is true, otherwise do nothing.

Example 4 -

<div>
    {props.question && <h3>Question: {props.question}</h3>}

    <h3>Answer: {props.punchLine}</h3>
</div>

Example 5 -

<div>
    <h3 style={{display: !props.question && "none"}}>Question: {props.question} 
    </h3>
    <h3>Answer: {props.punchLine}</h3>
    <hr/>
</div>

The 2nd and 4th example mentioned above will do the same thing i,e they will check whether there is any "question" property present or not , if "yes" , it will be rendered , otherwise "null" will be returned.
In example 3rd and 5th , they will check whether "question" property is present or not , if not then it will apply the CSS rule of "display:none" otherwise "display:block".

Conclusion

Just as with many things in programming, there are many ways to implement conditional rendering in React.

All of the above approaches are valid when used in the right context, it is up to us to choose the appropriate method in appropriate situation.

I’d say that with exception of the method (if/else with many returns), you’re free to choose whatever method you want.

You can decide which one is best for your situation based on:

Your programming style
How complex the conditional logic is
How comfortable you are with JavaScript, JSX, and advanced React concepts (like HOCs)
And all things being equal, always favor simplicity and readability.

And you, do you use any specific approach you would like to share with me?

Happy coding!

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

Six Reasons to Learn JavaScript

Aakash Srivastav — Sun, 03 Nov 2019 18:26:22 +0000

JavaScript is the most popular and versatile programming language in the world.
It’s also the first programming language many developers learn. But lots of people still ask the question, why it’s worth to learn JS. Since a few years, Javascript spread so much that it’s visible almost everywhere, front-end, back-end and even mobile development and the popularity of this programming language is not getting smaller. There are tones of different frameworks which grown on Javascript basics and are used almost in every project which needs any user interface. Taking into consideration this information, I’ll try to describe to you a few reasons why it’s still a great idea to learn Javascript in this article.

It’s Used Everywhere

JavaScript is a computer programming language that executes complex actions on web pages. No matter if you’re on your phone, on a laptop, or an old PC at the public library, any time you click a button, see social posts update in real-time, you will learn JavaScript is most likely involved in making that happen.

JavaScript is like the Starbucks of stacks–it’s everywhere.
Anytime you get stuck, there’s going to be someone out there that has the same problem.” This leads to getting answers sooner and creates a “level playing field for everybody and a universal open platform.” More users = more opportunity to create stuff faster.

Beginner Friendliness

The learning curve in Javascript is pretty gentle. Javascript is a very beginner-friendly programming language, and everybody can start learning without any previous experience. You can get started with coding JavaScript straight from your browser without setting up any development environment, which is a reason many beginners seem to like it.Taking into consideration that Javascript is mostly focused on front-end development and user interfaces, it would be great to learn HTML and CSS first.

Career Opportunities

Salary information from gooroo.io

Taking into consideration that demand on the market is huge for Javascript developer, it’s a great opportunity for your career. JavaScript is also the most demanded programming skill at Angel List.What’s most exciting is knowing JavaScript opens up all sorts of high-paying job opportunities. For instance, the US Bureau of Labor & Statistics predicts that developer jobs will grow 15% between now and 2024. That’s a much faster rate than other professions.

It’s projected to be the most in-demand programming language in the next few years. It’s a great time to be learning JavaScript.While you are getting familiar with this programming language, you have tones of different possibilities to start working, from remote freelancing to a lucrative full-time position with crazy tasty coffee in the office.

It’s built into the browser.

JavaScript’s history is intimately tied to the Internet itself. It was originally created by Brendan Eich while working at Netscape in 1995, and eventually was adopted by all browsers as the de facto way to build interactive websites. (For more on the history, check out A Short History of JavaScript.) There are currently over a dozen active JavaScript engines competing for market share; the most popular is Google’s V8 engine, used to power the Google Chrome web browser.

Growing, vibrant community

Community size is important, because the larger a programming language community is, the more support you'd be likely to get.As a very popular programming language, Javascript has a very big community of programmers.You would probably get help much faster than in case when the community is not so numerous. On the Stack Overflow, Javascript developers community is one of the biggest.

Lots of sources to learn

Not only the community of Javascript programmers is big, but there are also lots of sources to learn this programming language. This is a very important aspect of the programming language which you decide to learn as if the number of sources wouldn’t be big you would be very limited.
A growing number of online tutorials and classes that teach JavaScript have emerged in recent years. Platforms like Codecademy, Udacity, W3Schools.com, and General Assembly are providing millions of people with the opportunities to learn JavaScript (and other languages) in an engaging and interactive manner.

In the article, I went through the six reasons why it’s still good to learn Javascript. I think that it’s a programming language which has a bright future and can give lots of possibilities.

Happy coding!

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

React vs Angular vs Vue: Which Framework to Choose in 2020

Aakash Srivastav — Sat, 02 Nov 2019 17:29:14 +0000

If you are a developer starting out on a project and cannot decide on which JavaScript framework to use, this guide should help you make a decision.
Once you’ve mastered the basics of JavaScript, selecting a front end JavaScript framework can be a difficult, confusing process. You’ve probably heard of React and Angular — now there’s this new thing called Vue?

You don’t have time to learn all three. So, how do you choose?

Whatever you do, don’t overthink it.

You can be successful with any of these frameworks, and learning one framework makes it easier to learn another. Picking a framework is important, but it’s far more important to focus on learning these shared concepts. This will prepare you for whatever you happen encounter in your development.

As you learn everything you need to know about a given framework, you won’t just learn about that specific framework, you’ll also learn about these concepts all three share:

Single-Page Applications (SPAs) Architecture
Component Design and Development
Data Flow through an application
State Management
Templating
Data Binding
Working with Backend APIs
Client-Side Routing
Language Abstractions like Sass and TypeScript
Testing
Front end Builds

When deciding on which to use, think about your situation or requirements.

If you’re looking to land a job as a developer, what are employers in your area looking for? Do you want to work for a startup or for a more established enterprise? Do a survey of local job openings or talk with a recruiter.

Which framework has the most active local community? Get out and attend a local meetup that’s focused on React, Angular or Vue and meet other developers who are passionate about those frameworks.

If you’re selecting a framework for your team’s next project, what’s the collective skill set for your team? Do you have a lot of general JavaScript knowledge? Would your team benefit from selecting a framework with a gentler learning curve? What features are most important for the application that you’re building?

A Brief History of Angular, React, and Vue

Angular, developed by Google, was first released in 2010, making it the oldest of the lot. It is a TypeScript based JavaScript framework.
Google and Wix are among the most popular companies using Angular.

Vue, also known as Vue.js, is the youngest member of the group. It was developed by ex-Google employee Evan You in 2014. Over the last two years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. Websites like GitLab and Alibaba are using Vue.

React, developed by Facebook, was initially released in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp).
Whatsapp, Instagram , Paypal, Glassdoor, BBC are some of the popular companies using React. It is highly dynamic and offers great support in creating interactive user interfaces.

Popularity 🔥

As “angular” and “react” are common words, it is difficult to grasp their popularity from Google Trends. Though, a good proxy for their popularity is the number of stars that their GitHub repositories get. A sudden shift in the number of stars of Vue occurred in mid-2016 and, recently, Vue has been up there with React as the most popular frameworks.

Job market for Angular vs React vs Vue 👷‍♂️

The best sources of data that indicate the trends on the job market are the various job boards.
As seen from the trends of late 2018, the number of jobs that require a skill set of Angular or React is roughly the same, whereas that of Vue’s is still only a fraction of this number (about 20%). This list is definitely not exhaustive but gives a good picture of the overall tech industry.

If you are looking strictly from the point of view of the current job market, your best bet is to learn Angular or React. However, given that Vue has gained popularity over the last two years, it may take some time for projects to use Vue, or new projects that adopt Vue to reach a maturity level that commands a higher number of developers.

Ease of Learning

At their core, React and Vue are focused on building user interfaces while Angular is focused on building applications. Because of this, Angular is bigger, more complex and has a steeper learning curve.Even though it takes time to learn Angular, the investment pays dividends in terms of understanding how the front end works.
While they’re initially smaller and less complex, the more that you extend React and Vue the more their size and complexity grows.
React is not a complete framework and advanced features require the use of third-party libraries. This makes the learning curve of the core framework not so steep but depends on the path you take with additional functionality.
Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option

Tooling Support

All three frameworks provide CLIs, or Command Line Interfaces. These make it easy to create new projects, support local development and prepare your apps for deployment. All three also have great support within code editors like Visual Studio Code and Atom. To get the best experience and maximize your results, you’ll need to install the appropriate editor extensions.

Performance

While performance benchmarks (i.e. how quickly specific tasks take to complete, such as rendering a list of items) vary for some use cases, each of these frameworks offers similar performance, so this isn’t a significant differentiating factor for most developers or teams.

The Verdict

React

Pros

Easy, lightweight component creation
Elegant API that encourages composition
Large supporting community
Popular with startups
Lots of open-source extensions

React offers easy, lightweight component creation — functional stateless components are about as easy as it gets. Furthermore, React’s elegant API encourages you to embrace composition using components.

React is very popular, evidenced by its large supporting community. React’s popularity has helped to drive adoption with startups. The availability of a wide variety of open-source, community-developed extensions for React gives you lots of options for building out complete solutions.

Cons

Adjusting to JSX
Complete solutions require third-party libraries
Availability of options can overwhelm or confuse

Component templates are written using JSX, not native HTML, so you should expect a bit of an adjustment period. Because of its focus on building UIs, you’ll likely need to extend React with third-party libraries. For example, if you need to support client-side routing in your app, you’ll likely use the popular third-party library React Router. Luckily, there are lots of great choices for fulfilling almost any requirement. But having more choices can be overwhelming or confusing—especially for beginners.

Angular

Pros

All-inclusive framework
Guidance on how to build complete solutions
Popular with enterprises
Capable CLI
TypeScript
Support for native HTML and CSS

Angular is an all-inclusive framework that provides more “out of the box” than React or Vue. As a result, it provides more guidance on how to build complete solutions. Its focus on application development — evidenced by the inclusion of features like routing and form validation — makes it popular with enterprises.

Angular has the most capable CLI of the three frameworks. It’s used throughout the development of your app to create new components, install packages and run migration and installation scripts. TypeScript — with its static typing and amazing editor enhancements — offers skilled developers who don’t have a lot of JavaScript experience a friendlier transition to client-side development. And while its binding syntax can take a bit to get used to, being able to leverage native HTML and CSS for component templates and styles is a plus.

Cons

Large API
Steep learning curve
Code can feel verbose and complex

Angular’s large API and overall approach to developing apps results in the steepest learning curve of the three frameworks. Angular code — with its use of static types, decorators and configuration-based approach — can feel verbose and complex at times when compared to React and Vue.

Vue

Pros

Easy onramp for developers
Grows with you
More inclusive than React
Support for native HTML and CSS
Well written documentation

Vue’s scaled-down experience offers an easy onramp for developers who are newer to client-side development, while still being capable enough to grow with you as your skills develop. And while it’s not as inclusive as Angular, Vue does offer more “out of the box” than React. This makes it a popular choice for beginners.

Like Angular, Vue also allows you to leverage your native HTML and CSS skills instead of needing to learn a new templating language, as you do with React. And it’s known for its well written documentation.

Cons

Newer than React and Angular
Smaller community (for now)
Lack of support for large-scale projects

Introduced in 2014, Vue is newer than both React (2013) and Angular (v.1 2010, v.2 2014). So, while its community is growing, it’s not currently as established or as big as the others.

The Conclusion

Trying to decide which of these front end frameworks is the “best” is a little like trying to decide which ice-cream flavor is the “best” — it’s a subjective decision that will vary for each person and situation, and your favorite will likely change over time.
Every framework has its own pros and cons, meaning that there should be just the right choice for every single case during product development.Make no mistake — front end web development, like all programming specialities, will continue to change and evolve over time.

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

Mastering the JavaScript "this" Keyword

Aakash Srivastav — Fri, 01 Nov 2019 17:55:17 +0000

“this” keyword allows you to decide which object should be focal when invoking a function or a method.

The this keyword is a very important concept in JavaScript, and also a particularly confusing one to both new developers and those who have experience in other programming languages. In JavaScript, this is a reference to an object. The object that this refers to can vary, implicitly based on whether it is global, on an object, or in a constructor, and can also vary explicitly based on usage of the Function prototype methods bind, call, and apply.

Five types of binding

The ‘this’ keyword is probably one of the most misunderstood aspects of JavaScript.
The first thing to understand regarding this keyword is to understand its purpose, or what it is that ‘this’ keyword allows us to do in JavaScript.
- It allows us reuse functions with different contexts
- It allows us to decide which objects should be focal when invoking a function or a method.

The first thing we need to ask when using this keyword is -
Where is this function invoked?

Because whenever you’re trying to find out what this keyword is you have to look at when the function was invoked… not when it was defined, but specifically when it was invoked.
We won’t know what this keyword is in a function until that function is invoked.
Now that you know the first step to figuring out what the this keyword is referencing is to look at where the function is being invoked, what’s next? To help us with the next step, we’re going to establish 5 rules or guidelines.

1) Implicit Binding
2) Explicit Binding
3) new Binding
4) Lexical Binding
5) window Binding

1. Implicit Bindind

Implicit Binding is the most common rule and will be found in about 80% of use cases when trying to figure out what this is.

Example 1:

// Implicit Binding
// Left of the Dot at Call Time
var me = {
  name: 'Aakash',
  age: 22,
  sayName: function() {
    console.log(this.name);
  }
};

me.sayName(); // Aakash

Implicit Binding says that in order to find the this keyword we look to the left of the dot of the function invocation. That’s what the this keyword is going to reference.

me.sayName();

In the code above, we see the sayName() invocation and look to the left of the dot. The me object is what this reference.

Example 2:

// Implicit Binding
// Left of the Dot at Call Time
var sayNameMixin = function(obj){
  obj.sayName = function(){
    console.log(this.name);
  }
}

var me = {
  name: 'Aakash',
  age: 22
};

var you = {
  name: 'Shehan',
  age: 21
}

sayNameMixin(me); 
sayNameMixin(you);

When we pass both of these objects into our mixin it decorates them with a new sayName() property.
Then when we invoke each we look to the left of the dot to see what this references.

.
.
// Now it will print
me.sayName(); // Aakash
you.sayName(); // Shehan

Example 3:

// Implicit Binding
// Left of the Dot at Call Time
var Person = function(name, age) {
  return {
    name: name,
    age: age,
    sayName: function() {
      console.log(this.name);
    }
  }
}

var jim = Person('Aakash', 22);
jim.sayName(); // Aakash

But what if we made this a bit more complex.:

// Implicit Binding
// Left of the Dot at Call Time
var Person = function(name, age) {
  return {
    name: name,
    age: age,
    sayName: function() {
      console.log(this.name);
    },
    mother: {
      name: 'Sandhya',
      sayName: function(){
        console.log(this.name);
      }
    }
  }
}

var jim = Person('Aakash', 22);
jim.sayName(); // Aakash
jim.mother.sayName() // Sandhya

Once again we look to the left of the dot of the function invocation to get the object this refers to.

This seems deceptively easy, and because it is very straight-forward, whenever you get into situations where you need to find out what this is, the very first thing you should do is look at when the function was invoked and then look to the left of that function to find out what this is referencing.

2. Explicit Binding

Uses call, apply, or bind:

a) Example 1 - call

Let’s change things around so that sayName is just a function on the global scope but what we want to do is still call the function in the context of the stacey object.

// Explicit Binding
// call, apply, bind
var sayName = function() {
  console.log('My name is ' + this.name);
}

var aakash = {
  name: 'Aakash',
  age: 22
}

sayName.call(aakash) // Aakash

What we can do is type the function name and then use the call method, which is available to every function, to do just that.
The first argument that it takes in is the context that you want to call the function from.

So now the sayName function is going to be invoked but the this keyword inside of sayName will now reference the aakash object.

So in this example we’re explicitly stating what the this keyword is when we use call. It is the very first argument we pass to call.

.call() provides a new value of this to the function/method.
With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
Additional arguments to the function are passed in one by one after the first argument.

Example 2 - call with args

Now if we want to pass a few more parameters to sayName we can do that.
Let’s create an array and then pass the array elements to the function.
The very first argument in .call() is the context. Every argument after that will be passed to the function.

// Explicit Binding
// call, apply, bind
var sayName = function(lang1, lang2, lang3) {
  console.log(`My name is ${this.name}. I know ${lang1}, ${lang2}, ${lang3}.`);
}

var aakash = {
  name: 'Aakash',
  age: 22
}

var languages = ['JavaScript', 'CSS', 'Python'];

// sayName.call(aakash, languages[0], languages[1], languages[2]);
// You can also use "spread" operator
sayName.call(aakash, ...languages);

So, we are invoking sayName in the context of aakash and we are also passing along three arguments.

Example 3 - apply :

Next what we could do is rather than pass in the arguments one by one, we could pass them in as an array.

sayName.apply(aakash, languages);

This is exactly what .apply() does. It allows us to pass in the arguments as an array.

.apply() provides a new value of this to the function/method.

Instead of having to pass additional arguments one by one, you can pass them in as an array after context which is the first argument.

Example 4 - bind :

The .bind() is almost the same thing as .call() except there’s one thing that’s different.

What .bind() will do is return us a new function instead of invoking the original function.

Looking at our code from before.

// sayName.bind(aakash, languages[0], languages[1], languages[2]);
var newFn = sayName.bind(aakash, ...languages);

Now, instead of invoking sayName, it’s just going to bind this to aakash, pass in the languages arguments, and return a brand new function which we can call later.

Now we can invoke the new function with newFn().

SUMMARY

call, apply, and bind allow us to explicitly state what the this keyword is going to be in any given function.
call and apply behave in the exact same way. They will immediately invoke the function.
call requires additional arguments to be passed in one by one
apply allows you to pass in the arguments as an array
bind is the same as call except that instead of immediately invoking the function it returns a brand new function that can be invoked later

3. New Binding

Whenever you invoke a function with the new keyword, under the hood, the JavaScript interpretor will create a brand new object for you and call it this.
So, naturally, if a function was called with new, the this keyword is referencing that new object that the interpretor created.

Example:

function User (name, age) {
  /*
    Under the hood, JavaScript creates a new object called `this`
    which delegates to the User's prototype on failed lookups. If a
    function is called with the new keyword, then it's this new object
    that interpretor created that the this keyword is referencing.
  */

  this.name = name
  this.age = age
}

const me = new User('Aakash', 22)
// "this" will now refer to "me" always.

4. Lexical Binding

Arrow function allow you to write functions in a more concise format.
Even more than conciseness, arrow functions have a much more intuitive approach when it comes to this keyword. Unlike normal functions, arrow functions don’t have their own this. Instead, this is determined lexically. That’s a fancy way of saying this is determined how you’d expect,

Example :

const user = {
  name: 'Aakash',
  age: 22,
  languages: ['JavaScript', 'CSS', 'Python'],
  greet() {
    const hello = `Hello, my name is ${this.name} and I know`

    const langs = this.languages.reduce(function (str, lang, i) {
      if (i === this.languages.length - 1) {
        return `${str} and ${lang}.`
      }

      return `${str} ${lang},`
    }, "")

    alert(hello + langs)
  }
}

You’ll notice it’s throwing the error Uncaught TypeError: Cannot read property 'length' of undefined.
According to our error, this.langauges is undefined.It’s not referencing user.

Steps to find the this context:

First, we need to look at where the function is being invoked. Wait? Where is the function being invoked?
The function is being passed to .reduce so we have no idea.
We never actually see the invocation of our anonymous function since JavaScript does that itself in the implementation of .reduce. That’s the problem.
We need to specify that we want the anonymous function we pass to .reduce to be invoked in the context of user.
That way this.languages will reference user.languages.
As we learned above, we can use .bind.

const user = {
  name: 'Aakash',
  age: 22,
  languages: ['JavaScript', 'CSS', 'Python'],
  greet() {
    const hello = `Hello, my name is ${this.name} and I know`

    const langs = this.languages.reduce(function (str, lang, i) {
      if (i === this.languages.length - 1) {
        return `${str} and ${lang}.`
      }

      return `${str} ${lang},`
    }.bind(this), "")

    alert(hello + langs)
  }
}

So we’ve seen how .bind solves the issue, but what does this have to do with arrow functions. Earlier I said that with arrow functions "this is determined lexically. That’s a fancy way of saying this is determined how you’d expect, following the normal variable lookup rules."
If we re-write the code above and do nothing but use an anonymous arrow function instead of an anonymous function declaration, everything “just works”.

const user = {
  name: 'Aakash',
  age: 27,
  languages: ['JavaScript', 'CSS', 'Python'],
  greet() {
    const hello = `Hello, my name is ${this.name} and I know`

    const langs = this.languages.reduce((str, lang, i) => {
      if (i === this.languages.length - 1) {
        return `${str} and ${lang}.`
      }

      return `${str} ${lang},`
    }, "")

    alert(hello + langs)
  }
}

5. window Binding

Example:

// window Binding
var sayAge = function() {
  console.log(this.age);
};

var me = {
  age: 22
}

If we wanted to call sayAge in the context of me we’d have to do this.

sayAge.call(me);

But if we don’t do this but instead just call sayAge we get undefined.
The reason is if we invoke a function that uses the this keyword but doesn’t have anything to the left of the dot, it’s not using the new binding, and it’s not using call, apply, or bind, then the this keyword is going to default to the window object.
So if we decide to add a property of age to the window object we will get that result back.

window.age = 22

function sayAge () {
  console.log(`My age is ${this.age}`)  
}

sayAge()  // 22

Binding rules recap

The four rules in a quick recap.

1) Implicit Binding - look to the left of the dot at call time
2) Explicit Binding - tells a function what the context of the this keyword is going to be using call, apply, or bind
3) new Binding - is whenever you have a function invoked with the new keyword where the this keyword is bound to the new object being constructed
4) lexical Binding - this is determined lexically i,e this is determined how you’d expect, following the normal variable lookup rules.
5) window Binding - if none of the previous rules apply then the this keyword is going to default to the window object unless you’re in strict mode in which case it will be undefined

Now , you should be able to determine the value of this in your programs :)

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

# REACT CONTEXT API

Aakash Srivastav — Thu, 31 Oct 2019 18:19:27 +0000

Context provides a way to pass data through the component tree without having to pass props down manually at every level

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Let's see an example :

import React, { Component } from 'react';


const Family = (props) => (
  <div className="family">
    <Person />
  </div>
)

class Person extends Component {
  render() {
    return (
      <div className="person">
        <p>Hey I'm a {this.props.name}
      </div>
    )
  }
}

class App extends Component {
  state = {
    name: 'Aakash',
    age: 50,
    loveReact: true
  } 
  render() {
    return (
        <div>
          <p>I am the app</p>
          <Family name={this.state.name}/>
        </div>
    );
  }
}
export default App;

So , we've a issue here and that is we can't directly pass data from App down to Person.So , what I need to do is I need to pass the data to Family component and then my Family component would need to pass data down again to Person component.
So , it's fine if we've to pass only upto 2-3 levels but what if we've 6 or 7 levels , well , that's where people start to reach for some sort of data store like Redux.
Now React's Context api is going to work very similar to that where we can inject our data at any level we want.
It need two different pieces -

1) Provider
2) Consumer

Let's see how it works:

STEP 1 : We will make a new context

const MyContext = React.createContext();

STEP 2 : Create a Provider Component and that's where you data is actually going to live.
So , we'll move our state into our Provider Component.

class MyProvider extends Component {
  state = {
    name: 'Aakash',
    age: 50,
    loveReact: true
  }
  render() {
    return ()
    }
}

Now , what we actually return from our Provider component is context provider.

class MyProvider extends Component {
  state = {
    name: 'Aakash',
    age: 50,
    loveReact: true
  }
  render() {
    return (
      <MyContext.Provider value="I'm the value"   // **value** is the data we want to pass down
        this.props.children
      </MyContext.Provider>
    )
    }
}

So , what this is going to do is , it's going to live at the top level of application and there's is going to be another components that we'll use to actually access the data.
We need to pass a value to our Provider and that's going to be the actual data we want to pass down. Let's say it's "I'm the value" for now.
So , so far , we aren't able to access state but that's okay , we have passed down the value("I'm the value") to anything that is wrapped inside our Provider.
Now , we will go to our App component and wrap the entire app in that Provider.Now , any child inside the Provider , it doesn't matter if it's directly there or anywhere down the chain , we're able to access the actual data.

.
.
const Family = (props) => (
  <div className="family">
    <Person />               //  removed the props getting pass down Person component as we don't need it anymore.
  </div>
)
class App extends Component {
  render() {
    return (
      <MyProvider>
        <div>
          <p>I am the app</p>
          <Family />              //  removed the props getting pass down Family componet as we don't need it anymore.
        </div>
      </MyProvider>
    );
  }
}

Now , the question is How do I access my data in my Person component?
Currently our tree is like :
App
- Provider // Data lives here
- Context.Provider
  - Family
  - Person // But we need to access it here i,e inside Person
The way we do that is by creating a Consumer. Provider is where your data lives and Consumer is where you actually want to access your data.So , all we need to do is to go into Person component because that's where we want to access our data.And then creating , MyContext.Consumer because , it's where we going to grab our data from.
And then inside of MyContext.Consumer , it's not going to pass it down via props , it's going to use render prop(i,e we will have render prop and pass it's value a function or you can pass render prop as a child also , which we're going to use here ).
The child of consumer is always always always be a function

.
.
class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <p>I am inside the {context}</p>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

Output: I am inside the I'm the value.

So , we can say value is going to be the actual data we want to pass down and that lives inside of our Provider.
Then , when we want to actually access that data then ,we can access it inside Consumer by wrapping it in a Consumer tag and then giving the only child of that Consumer tag to be a render function and then inside , we can render our anything.
Now , the questin is how do I pass down state ?
We can pass an object containing the state object like shown below.
And then finally , we can access any state property that lives inside our Provider inside our Consumer.

.
.
class MyProvider extends Component {
  state = {
    name: 'Aakash',
    age: 50,
    loveReact: true
  }
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state           // Passing state down.
        }
      }
    )
  }
}

class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>       
              <p>Name: {context.state.name}</p> 
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

Now the question is "How do I update that state" ?

So what you can do is much like passing down states , you can also pass down your functions(actions in Redux).

Let's say we want to increment age by clicling on a button.
We'll create a function first :

.
.
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        growAYearOlder: () => this.setState({   // Function to increment age
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <button onClick={context.growAYearOlder}>Increment Score</button>     
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

BOOM BOOM! .So , we can see , we still have our actual data i,e State inside Provider but we can magically access it at any level deep by just wrapping our code in Consumer tag.

So, that it.
Here's full code :

import React, { Component } from 'react';

// first we will make a new context
const MyContext = React.createContext();

// Then create a provider Component
class MyProvider extends Component {
  state = {
    name: 'Aakash',
    age: 50,
    loveReact: true
  }
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        growAYearOlder: () => this.setState({
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

const Family = (props) => (
  <div className="family">
    <Person />
  </div>
)

class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>
              <p>Name: {context.state.name}</p>
              <button onClick={context.growAYearOlder}>🍰🍥🎂</button>
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}


class App extends Component {
  render() {
    return (
      <MyProvider>
        <div>
          <p>I am the app</p>
          <Family />
        </div>
      </MyProvider>
    );
  }
}


export default App;

When To Use Context

There are two use cases when to use it:

When your React component hierarchy grows vertically in size and you want to be able to pass props to child components without bothering components in between.
When you want to have advanced state management in React with React Hooks for passing state and state updater functions via React Context through your React application. Doing it via React Context allows you to create a shared and global state.

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!

Render Props in React

Aakash Srivastav — Wed, 30 Oct 2019 14:16:07 +0000

What is Render Prop?
A render prop is a prop that is a function that renders something – i.e. a function that returns JSX.

As we know , we can pass data to child components from parent components.The child components capture the data in the props object argument.

class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return <div>{this.props.name}</div>
    }
}
<Fruits name="Mango" />

Objects, arrays, booleans, strings, Numbers can be passed to child components via props. The child component uses the props argument to know what to render.

Passing an object via props:

<Fruits obj={ { name: "Mango" } } />
class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return (
            <div>
                Fruit: {this.props.obj.name}
            </div>
        )
    }
}

Now, we can pass a function to the props object.

class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return <div>{this.props.render()}</div>
    }
}
<Fruits render={() => [ "Mango", "Pineapple" ]} />

You see we passed a function () => [ "Mango", "Pineapple" ] to Fruits via render,then it can access it by referencing it as key in the props argument: this.props.render.
This props render bearing a function value is called a render props.

The function if a little bit complex, it is the same thing as this:

function() {
    return [ "Mango", "Pineapple" ]
}

It just returns an array. Hope the above will be clearer.

The Fruits gets the function through this.props.render and calls the function.

render() {
        return (
            <div>
                {this.props.name()}
            </div>
        )
    }

This will render the array containing fruit names:

Mango Pineapple

We actually used the render prop(a function prop) to know what to render. The render prop here is called the render prop.

So we can define a Render Prop as a function props that is used by a component to know what to render.

The render prop can return a HTML markup:

<Fruits render={()=><h1>Pineapple</h1>} />

Using Props Other Than render

It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.

We can rewrite our Fruits example:

class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return <div>{this.props.render()}</div>
    }
}
<Fruits render={() => [ "Mango", "Pineapple" ]} />

to use a different name other than render:

class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return <div>{this.props.name()}</div>
    }
}
<Fruits name={() => [ "Mango", "Pineapple" ]} />

Props inside an Element

Following traditon, Whenever we want to pass props to child components we normally use the “attributes” like this:

<Fruits name={() => [ "Mango", "Pineapple" ]} />

Now, according to Reactjs Blog, we can actually put the props attributes inside the JSX element:

<Fruits>
    {() => [ "Mango", "Pineapple" ]}
</Fruits>

Noticed anything? The name props is no longer there. The render prop () => [ "Mango", "Pineapple" ] is now a child component to <Fruits>, it will be passed to <Fruits> in children props.

To access the render prop () => [ "Mango", "Pineapple" ], we do this this.props.children.

class Fruits extends React.Component {
    constructor(props) { }
    render() {
        return <div>{this.props.children()}</div>
    }
}
<Fruits>
    {() => [ "Mango", "Pineapple" ]}
</Fruits>

Take-aways

render prop is used for sharing code between components.
Every higher order component can be re-created using render props.
render prop makes it possible to write reusable components.

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!