Understanding call(),apply(),bind() in Javascript

BHAVANA S — Wed, 28 Sep 2022 08:21:20 +0000

Topics covered

Why we need call(),apply(),bind()?
What is call(),apply(),bind()?
When to use call(),apply(),bind()?

Traditionally in javascript, you can have objects that have their own properties and methods, one object cannot use the methods of another object but there is a way to overcome this restriction.
By using call(), apply() and bind() methods to tie a function into an object and call that function as if it belonged to that object.

We know that functions are a special kind of objects in JavaScript. So they have access to some methods and properties. To prove functions are objects, we can do something like this, for example:

function printMessage() {
  console.log('Welcome!');
}
printMessage.city = 'Bangalore';

// Prints 'Bangalore'
console.log(printMessage.city);

JavaScript also provides some special methods and properties to every function object. So every function in JavaScript inherits those methods. Call, bind, and apply are some of the methods that every function inherits.

call() :

By using call() you can tie a function into an object, this way you can call the function as if it belonged to the object.

Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}
console.log(add.call(object,3,5));// prints 10

apply() :

The apply() method does the exact same as call().
The difference is that call() accepts an argument list, but apply() accepts an array an array of arguments.

Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}
console.log(add.apply(object,[3,5]));// prints 10

We can use apply() to append an array to another array, for example

const numbers = [1,2,3];
const moreNumbers = [4,5,6];
numbers.push.apply(numbers, moreNumbers);
console.log(numbers); // prints [1,2,3,4,5,6]

bind() :

The bind() method is reminiscent of call() and apply(), but instead of executing a function immediately , bind() returns a function that can be executed later on.
Example:

let object = {
  number: 2
}

function add(a,b){
  return this.number + a + b;
}

const func = add.bind(object,3,5);
console.log(func())
// prints 10

Function currying using bind():

Example:

let multiply = function(x,y){
  console.log(x * y); //prints 10
}
let multiplyByTwo = multiply.bind(this, 2);
multiplyByTwo(5);

Here in this example, we created multiply function which multiplies two parameters x and y and logs it to the console.

Now let us create another function multiplyByTwo which is exactly the copy of multiply. We will generally create this copy by executing the bind method over multiply. Over here we will pass generally passing some arguments. The second argument we will pass is 2.

As we know that when we call the bind method gives the copy of the multiply method and doesn’t invoke it directly. So this means that the value 2 will be set as the value of x. So now let us execute the multiplyByTwo function.

Thanks for reading, happy to hear feedback and suggestion in comments section.

All you know about media queries

BHAVANA S — Tue, 15 Dec 2020 17:02:17 +0000

While building a website, sometimes we got many confusions about how to make it responsive? what is that responsive mean? what is that media query? why we need that and how to use that?

Cool, you will get an answers for the above questions here, let's go with responsive first

A responsive website will display a different interface depending on what device is used to access the site.

For example, the font-size of text, images width and height, padding, margin, and many other CSS properties will have different values for different screen sizes, like a website may appear one way on a laptop, another way on a tablet, and still another way on a smartphone.

That's what responsive mean, then how to make our website responsive, there are several ways for that,

One method is to dynamically detect the user's platform and load specific HTML and CSS for the corresponding device.

Another option is to use media queries, which automatically loads different CSS styles depending on the size of the browser window.

Then what is the media query? Wait, here we go,

Media query is a feature of CSS, which acts as filters for different screen sizes means it enable the webpage content to adapt to different screen sizes and resolutions.

why we need media queries? because to customize the appearance of websites for multiple devices.

How to use media queries?

Media queries may be inserted within a webpage's HTML or included in a separate .css file referenced by a webpage.

Ex:

The media query above activates if a user's browser window is 768 pixels wide or less. This could happen if you shrink your window on a desktop computer or if you are using a mobile device such as a tablet, to view the webpage.

You can also write media queries for different media types like:

Ex: @media print and(max-width:360px){ }
print define intended for paged material and documents viewed
on a screen in print preview mode.
Ex: @media screen and(min-width:670px){ }
Intended primarily for screens.
Ex :@media speech and(max-width:1024px){ }
Intended for speech synthesizers.
Ex: @media all and (min-width:520px){ } all define suitable
for all devices.

And at last, like all modules within a cascading stylesheet, the ones that appear further down the list override the ones above them. Therefore the default styles are typically defined first within a CSS document, followed by the media queries for different screen sizes.

For example, the desktop style might be defined first, followed by a media query will styles for tablet users, followed by a media query designed for smartphone users and styles may also be defined in opposite order.

Thanks for reading ,it's my first blog ,happy to hear a feedback and suggestion in comments section

DEV Community: BHAVANA S

Understanding call(),apply(),bind() in Javascript

Topics covered

All you know about media queries