DEV Community: Saurabh sharma

bind(), call() & apply() in JS

Saurabh sharma — Wed, 15 Sep 2021 04:22:01 +0000

In this you will get a deep knowledge about how call(), bind() and apply works.

These methods are available to every function in JavaScript. which are all used to change the scope of what this is equal to inside of a function or a method. Let's see the following examples.

`bind()`

We will start with a simple example of an object that has a method on it. With bind(), we can tell the JavaScript engine where to look for this.

const person = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hello ${this.name}`)
  }
}

function greetPerson() {
  console.log(this.myFunction())
}

const bindPerson = greetPerson.bind(person)

bindPerson();
//Expected Output :- Hello Saurabh

Things to notice here are :

The bind() creates bindPerson, and a copy of the greetPerson function.
bindPerson when called will have it's this variable pointing to the person object

`call()`

The call() calls a function with a given this value and arguments provided individually.

call() essentially does the same thing as bind() except that call() actually executes the function

const Saurabh = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hi, I'm ${this.name}`)
  }
}

function callingFunction(age, hobby) {
  console.log(`${this.myFunction()}, my age is ${age} and I 
  like to ${hobby}`);
}

callingFunction.call(Saurabh, 26, 'reading');

// Expected Output :- Hi, I'm Saurabh, my age is 26 and I like reading

`apply()`

call() and apply() do the exact same thing except that call() expects all parameters to be passed in individually, but apply() expects all additional parameters to be passed as an array.
so this what our existing sample code will look like :

const Saurabh = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hi, I'm ${this.name}`)
  }
}

function applyingFunction(age, hobby) {
  console.log(`${this.myFunction()}, my age is ${age} and I like 
  ${hobby}`)
}

applyingFunction.apply(Saurabh, ``[26, 'Reading']``)

// Expected Output :- Hi, I'm Saurabh, my age is 26 and I like Reading

Hope you find it useful and learned something new from it.

How does JavaScript treats its functions and variable environment..?

Saurabh sharma — Tue, 14 Sep 2021 14:02:07 +0000

Before starting it let's check out code snip.

var x = 1;
a();
console.log(x);

function a() {
  var x = 10;
  console.log(x);
}

you can actively participate and with me to understand the workflow of the program(assuming that you are having basic knowledge about how to write a function in html and JavaScript file and how to run that set of file.) and how things works behind the scene..
after running the code go to browser inspector and there you can check out the result in console tab and source tab.

now lets understand the flow step by step

Over here browser engine creates a execution context for the program. It has been pushed into the call stack and the control is at line 1
Before going further lets have a walk through on Execution context and call stack.
The execution context :
It is an internal JavaScript concept. Here JavaScript engine use to track the execution of code. The execution context is divided in two components

Memory Phase : In memory phase, javascript allocates memory to the variables and functions. For the variable, it allocates the keyword 'undefined' and for the functions, it allocates its function body itself as the memory
Code Execution Phase: In code execution phase javascript executes the program lines in order. This is what global execution context is.

The Call Stack :
The JavaScript Engine creates a stack data structure where function execution contexts are placed on creation — when the function is called or invoked. This data structure itself is called the Call Stack.

going further in our program the control is on line 1. Javascript allocated undefined to the variable 'X' and to the function a() it has allocated its function body.

after debugging line 2 we got to know that 'X' variable is considered as global variable and its value is 1.

Now let's put the debugger at line 6.

Here javascript creates new execution context for function a. This is been pushed to the call stack and then the control is now given to function which is at line number 5. As you can visualize we have a variable declared in function so a new local memory and global memory gets created and it will only considered for the function a.
let's check line no 7. here javascript looks for variable 'X' in local memory and allocates the value 10.

as you can notice that we have 1 more variable as 'X' in global scope

for examine we have to put the debugger at line 3

You can notice that in the call stack the execution context for function a() just got popped out and now the control is in line 3 back to the global execution context. Javascript ran the remaining program. It looked for variable 'X' in global memory and allocates the value '1' to variable 'X'. It now completed the global execution context in the call stack. And now the global execution context just got popped out of the stack. The call stack is now empty.

I Hope you find it useful and learned something new from it.

Cookies or JWT..? 🤔

Saurabh sharma — Wed, 08 Sep 2021 05:49:55 +0000

Cookie Based Authentication

First let us focus on what are cookies..?
Cookies are text formatted files with small piece of data included in it like username and password that are used to identify your system. Such cookies know as HTTP cookies and are used to identify specific user.

Now u might be thinking what are this HTTP cookies??
lets dive into it. HTTP cookies are built specifically for web browsers to track and save each users information about there sessions(sessions are the time you spent on that particular site).Cookies are created to identify you when you visit a new website. The web server stores the website data and sends a short stream to identify info of a web browser.
If a user returns to that site in the future, the web browser returns that data to the web server in the form of a cookie. This is when your browser will send it back to the server to recall data from your previous sessions.

To put it general words, cookies are more likely getting a ticket,
'You wanna a access the service' you pay for it and in return you get token or id for reference. This referral token needs to be stored locally in browser and should get triggered while making service calls which helps server to identify the browser or user info.
If in case you leave or return to the system this cookies helps server to serve the user at last where user has ended his last session.

The client sends a login request(with credentials) to the server from his device.
The server then validates the credentials. If the credentials are correct login is successful, the web server will create a session in the database.
This session ID is stored in a cookie on the user's browser and while the user is logged in the cookie is sent with every subsequent request.
At each request the server takes a look at the cookie to read the session id. If it matches the data stored in its memory it sends the response back.
If in case the logout request takes place the server will make the cookie expire by deleting it from the database.

Token Based Authentication

Now lets us have a look in Token-Based-Authentication:
Here, we store the user's data on the client side itself. This is achieved with JSON Web Token(JWT). It is a standard and a secure way of transmitting information between client and server in the form of JSON.
now lets dive into JWT.
JWT has three forms of data and is separated by dot(.)

First section is know as header it consist of algorithm and type.
Second section consist of payload and it consist of user information.
Third section consist of encrypted signature.

This is what sample token looks like :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The user submits login credentials.
On receiving the request the server verifies the credentials and generates an encrypted JWT with a secret and sends back to the client.
On client side the browser stores the token locally(in local storage, session storage or cookie storage).
On future requests the token is added to the authorization header and then its server duty to decode the token before proceeding the request this check is basically know as middleware authentication.
If in case the logout request takes place the token gets deleted without any server interaction.

Differences between JSON Web Tokens and Session Cookies..?

Cryptographic Signature: JSON web tokens have cryptographic signatures, and that’s not the case with session cookies.
Stateless: JSON web tokens are stateless because tokens are stored at client-side in local storage, rather than in the server memory.
Scalability: As session cookies are stored in the server’s memory, it has the potential of using a lot more resources if the website or app sees a lot of traffic though JSON web tokens are stateless, they can potentially save on server resources in many cases.

Conclusion

JSON web tokens and session cookies both offer secure user authentication, but they have key differences that make them suitable in varying situations. Hope you find it useful and learned something new from it.