DEV Community: Alexander Antoniades

Call, Apply, Bind - The Basic Usages

Alexander Antoniades — Tue, 23 Apr 2019 15:16:17 +0000

In this article I'm going to show you some of the basic usages of call/apply & bind and the problems they solve. I will also show you some practical examples in order to start using them in your projects.

Call/apply & bind are all methods within the function prototype. Both methods are doing the same thing but slightly differently. What they actually do is allows us to call a function with a given this context and arguments. They let us call a function and have access to the properties of another function or object. We can borrow methods of one object’s prototype and use it to another, for example we could apply Array’s slice method to a string or use Math’s max to find the maximum number of a bunch of numbers in an Array.

WHAT IS "THIS"?

I'm not gonna dive into much details here but understanding the this keyword is crucial to grasp the concept of call/apply & bind.

Everything in javascript is an object, functions are objects too (first-class objects). Every object(or function) has a this object assigned to it. this object acts as a reference to the object's variables and methods:

let obj = {
  name: "Alex",
  getName: function() {
    return `My Name is: ${this.name}`;
  }
}

obj.getName(); // "My Name is: Alex"

this.name is a reference to the object's(obj) name property value. In other words this refers to the properties of this particular object.

But what if we try to access the name variable outside of the object?

let name = "Alex";
let obj = {
  getName: function() {
    return `My Name is: ${this.name}`;
  }
}

obj.getName(); // My Name is: Undefined

Now we get undefined because name is no longer within our local variable environment.

CALL METHOD

Call accepts a this value and a list of arguments:

Function.call(this, arg1,arg2,...)

Let's say we have an object with a food property key and a favFood function that accepts a string as an argument. In order for favFood to have access to the object's food key we need to call favFood using the call method and give it the _this context of the obj. In simple words we need to attach the obj to favFood:

let obj = { food: "Pizza" }

function favFood(text) {
  return `${this.food} ${text}`;
}

let text = "is awesome!";
favFood.call(obj, text); // "Pizza is awesome!"

As you can see we've just passed the object (obj) as a first parameter to the call method -therefore it's context (this)- and a single argument as a second parameter to our favFood function. This way we have access to any method and property of this particular object (obj).

We could also pass multiple arguments seperated by a comma.

APPLY METHOD

Apply is the same as call but instead, apply accepts a single array of arguments.

Function.apply(this, array)

let obj = { 
  add: function(a,b,c) {
    return a + b + c;
  }
}

function sumItUp(a,b,c) {
  return this.add(a,b,c);
}

let numbers = [1,2,3];
sumItUp.apply(obj, numbers); // 6

BIND METHOD

Τhe tricky part about bind is that it has the same functionality as apply but instead of calling the function immediately, it returns a bound function:

let obj = { 
  add: function(a,b,c) {
    return a + b + c;
  }
}

function sumItUp(numbers) {
  return this.add(...numbers);
}

let numbers = [1,2,3];
let bound = sumItUp.bind(obj); // Returns a bound function
bound(numbers) // 6

In this case we pass the obj to the sumItUp function -in order to have access to the obj context - then we call the bound function and pass an array of numbers as an argument. Nice thing about bind is that you can call the returned bound function whenever you need.

BORROWING PROTOTYPE METHODS

The cool thing about these methods (call, apply, bind) is that we can borrow methods and functionality from other object's prototype.

Borrowing Max from the Math Object

Let's say we have an array of numbers and we need to find the maximum number within the array:

let numArray = [1,3,4,5,6];

Now we know that the Math object has a method for finding the minumum and maximum values of a list of numbers, but arrays are not supported because they're not considered as numbers therefore are not a valid parameter. If we try:

let numArray = [1,3,4,5,6];
Math.max(numArray); // NaN

We'll get NaN (Not a Number) and that's totally normal beause an array is not a number:

Array === Number // False

But here's where the cool part comes, by using apply we can pass our array as an argument to the Math object like this:

let numArray = [1,2,3,4,5];
Math.max.apply(null, numArray); // 5

Here we pass null as the first argument because we don't need to pass any context to the max method, instead we only use the second argument to pass our array which is going to be converted into arguments and finally be accepted by max as a valid parameter.

Borrowing Filter from the Array Object

Now let's say we have some letters and we'd like to filter out some of them and store them in an array using the Array's filter method.

let letters = 'abcdef';
let arrayFilteredLetters = letters.filter(letter => letter);
console.log(arrayFilteredLettes); // Filter is not a function.

We get filter is not a function because letters are a String object thus it doesn't have access to Array's filter method. What we could do is use call again to invoke filter and pass letters as an argument.

let letters = 'abcdef';
let arrayFilteredLetters = Array.prototype.filter.call(letters, letter => letter !== 'c' && letter !== 'd');
console.log(arrayFilteredLetters); // [ 'a', 'b', 'e', 'f' ]

As you see, we can use call/apply & bind to borrow methods from one object’s prototype and use it to another. This is one of the coolest applications of call/apply & bind.

Important notes about Arrow Functions

In case of arrow functions our methods: Call/Apply & Bind doesn’t work as expected.

As the documentation of MDN states:

"Since arrow functions do not have their own this, the methods call() or apply() can only pass in parameters. thisArg is ignored."

Arrow functions doesn't have their own this. This is lexically bound and it uses the this of the context in which the arrow function was called. Call/Apply & Bind can be used only to pass parameters.

CONCLUSION

By now you should be able to understand the basic usage and applications of call/apply & bind and be able to attach different contexts to functions and objects. You’ll also be able to borrow methods from other prototypes and use it to pass unrelated values -like looping over a string using array’s filter-

In javascript there are countless ways to do something. All the examples above has many alternative syntaxes and methods to have the same results. In this article I decided to use simple examples in order to make sure you get the basic knowledge in the most simplest way.

Have Fun!

CSS Layout Centering Techniques

Alexander Antoniades — Tue, 06 Feb 2018 20:33:21 +0000

Centering elements with CSS sometimes can be tricky. There are plenty of techniques that you could use but what technique you should use depends on the element and the content. Some questions that you might ask yourself when trying to center an element could be:

Is it an inline or a block element?
Is it just one line of text or multiple lines?
Does it have a fixed width and height or its size is unknown?

These are likely the most common questions to ask yourself when you want to center an element.

I'm gonna divide the techniques by horizontal, vertical and both.
Let's get to the code.

Horizontal Centering

Text-align

That's the simplest horizontal centering technique that you could use for text and inline-* elements.

p { text-align: center; }

In case you want to center an inline element you should apply it on its parent and not directly on that element:

.parent { text-align: center; }

<div class="parent">
 <strong>I'm Centered</strong>
</div>

In case we have an inline-block element we could make it full width and apply text-align: center; on it directly instead of it's parent.

strong {
 display: inline-block; 
 width: 100%;
 text-align: center;
}

Pen
Margin Auto This is the most common technique for centering horizontally block elements, it's widely used by many frameworks like Bootstrap. You just set the left and rightmargin to auto, make sure you have also set a width:

.block-box { 
 width: 600px;
 margin: auto;
}

Pen

Absolute Position

A common technique for both horizontal and vertical centering is using an absolute positioned element as child of a relative parent.

What we do is basically position our child element left by 50% and we shift it back by half of its size using a negative 50% translateX in order to get it centered.

.parent { position: relative; }
.centered-element {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}

<div class="parent">
 <div class="centered-element">I'm Centered!</div>
</div>

That's also a nice way to center elements of unknown width (and height).

An alternative to that, -if you have elements of known width- would be to use a negative margin-left instead of translateX:

.centered-element { 
 position: absolute;
 width: 600px;
 left: 50%;
 margin-left: -300px; // Shift it back by half of it's size.
}

Pen

Flex

If you don't care about support of older browsers, a nice way to horizontally(and vertically) center an element or a bunch of elements is by using flex.

.parent { 
 display: flex; 
 justify-content: center;
 height: 100vh;
}

Note: Make sure you haven't set the flex-direction property to column otherwise you'll have the opposite effect (vertical center).

Pen

Vertical Centering

Absolute Position

Again, we could use the same absolute positioning technique we used previously but instead of setting the left position to 50% we set the top position to 50% and we shift it up using a negative 50% translateY:

.parent { position: relative; }
.centered-element {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

Pen

Table Cell

A nice way for vertical centering would be to use vertical-align: middle. Of course this is tricky because you have to apply it on elements of a parent that is set to display: table and children to display: table-cell.

.parent { 
 display: table;
 height: 100vh; 
}

.centered-element {
 display: table-cell;
 vertical-align: middle;
}

Note: Make sure that the parent element has height otherwise this won't work.

Pen

Line-height

This technique is okay if you want to center single words and not whole paragraphs or lines of text. If you have a single word inside an element you could vertically center it by setting a fixed height on that element and a line-height equal the height of the element:

.box { 
 width: 600px;
 height: 600px;
 line-height: 600px;
}

<div class="box">
 <strong>I'm Centered</strong>
</div>

Pen

The Ghost Element

In this technique, we have two inline-block elements: a container with a "ghost" pseudo element set to full height and a child that is set to vertical-align: middle; This way the child element aligns with the ghost element -which has also vertical-align: middle

.container { font-size: 0; }
.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.container strong {
 display: inline-block;
 vertical-align: middle;
 font-size: 1rem;
}

Note: The ghost element creates an empty space usually on the left side so make sure to add a negative margin (margin-right: -0.25em) or a font-size: 0 on the parent container and a font-size: 1rem on the child.

Pen

Flex

We've seen how to align horizontally with flex. We can do the same for vertical centering by using the align-items property.

.parent { 
 display: flex; 
 align-items: center;
 height: 100vh;
}

Note: again, make sure you haven't set the flex-direction to row, otherwise you'll have the opposite effect. (horizontal centering).

Pen

Horizontal & Vertical Centering

We can combine all the techniques we used previously to center in both axis.

From all the techniques we used, the absolute positioning and the flex technique will give us both Horizontal and Vertical centering.

Absolute Position

We position the element to 50% in both top and left and we shift back in both positions by using a negative translate of 50%:

.centered-element {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Pen

Flex

Again, using the same flex technique we use both align-items and justify-content set to center.

.parent { 
 display: flex; 
 align-items: center;
 justify-content: center;
 height: 100vh;
}

Pen

Have something to add? Feel free to throw it on the comments section.

Thanks to PVGR for the useful info and corrections.