×

Index

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

How to invoke a function call in JavaScript?

Invoking function in JavaScript: Here, we are going to learn how to invoke a function call in JavaScript?
Submitted by Siddhant Verma, on December 02, 2019

What are functions in JavaScript?

Functions are a way to break down your code into various blocks. o as to write neat, understandable and more modular code. Functional programming is widely used across different platforms with different languages today and so it's important to understand how to deal with functions, more specifically how to invoke or call them?

How to invoke a function call in JavaScript?

When you write down a function it simply stays there and does nothing at all. No memory is allotted to its code or it's local variables unless and until you call it.

Example

function multiply(a, b) {
    return a * b;
}

When we type in this, it does nothing. But when we call the multiply() function and pass in some parameters,

Example

console.log(multiply(4, 5));

Output

20

Now it does what it was intended to do. It also allocated some memory for its local variables a and b and also outputted the value it returned to the console.

So is this a pure function? Not associated with any object? Well, JavaScript is all about objects. Everything in JavaScript is essentially an object. Any user-defined functions you make in JavaScript also attach themselves to an object when not stated while declaring and defining them. On the browser, this global object is the window object and you can verify this,

console.log(window.multiply(4, 5));

Output

20

We didn't attach the multiply() function as a method to the window object yet we can invoke it as one!

Objects and global objects in functions

Speaking of objects and global objects, the this keyword attains the value of an object when used inside a function and owns that function. When we call a function without an object and use this inside it, it automatically becomes the global object or attains a global scope.

Example

function greet() {
    return this;
}
console.log(greet());

Output

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Our function returned a global object!

Example

function greet2() {
    console.log("returning global object inside this!");
    return this;
}
console.log(greet2());

Output

returning global object inside this!
Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

We can create our objects and use the function as a method. Then use this inside our object to invoke our method call,

Example

const squirtle= {
    name: 'Squirtle-1',
    HP: 100,
    type: 'water',
    speak: function() {
        return `I'm ${this.name} of ${this.type} and is very healthy! My HP is
 $ {
            this.HP
        }
        `
    }
}

console.log(squirtle.speak());

Output

"I'm Squirtle-1 of water and is very healthy! My HP is
		100 "

Example

Our squirtle object has a function which is invoked using the object. The object squirtle owns the speak function and we can also verify this,

const squirtle= {
    name: 'Squirtle-1',
    HP: 100,
    type: 'water',
    speak: function() {
        return this;
    }
}

console.log(squirtle.speak());

Output

{name: "Squirtle-1", HP: 100, type: "water", speak: ƒ}

Invoke a function as a constructor

We can also invoke a function as a constructor using the new keyword,

Example

function pokemon(name, type) {
    this.name = name;
    this.type = type;
}

const pikachu = new pokemon('pikachu', 'electric');
console.log(pikachu.name);
console.log(pikachu.type);

Output

"pikachu"
"Electric"

JavaScript Tutorial »




Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.