what is log : function() {} in javascript?

Question

I saw this code in a quiz and I am fairly new to javascript. Although I know how the function works, still can anyone explain me the 3rd line of the code. What this log: function() {} means:

var abc = function() {
    return {
      log : function() {
        console.log(this.val);
      }
    };
}

Answer 1

It's an object property whose value is a function. If you do:

var x = abc();

you can then do:

x.log()

to call the function. Here's a full example:

var abc = function() {
    return {
      log : function() {
        console.log(this.val);
      }
    };
}

var x = abc();
x.val = "This is the value";
var y = abc();
y.val = "This is y's value";
x.log();
y.log();

Answer 2

This would return an object as {log: function()}. It is a normal JS object, which looks like {key:value}. Read more about JS objects here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

I am presuming the question is about what this resolves to. You can read about it here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this . Better yet, I can recommend you Kyle Simpson's this & Object prototypes book from the 'You Don't Know JS' series.

Answer 3

It's a key of an object and its value is a function.

Answer 4

log as the only field of the object returned by the outer function (which is assigned to variable abc) is initialized as the function body next to it.

Answer 5

To better help you understand it, I'll structure the code given with pseudo code

OBJECT abc IS A FUNCTION THAT DOES
    RETURN ANONYMOUS OBJECT
        LOG TO CONSOLE this.val

Let's examine the function declaration that you are most familiar with.

function myFunction() {
    //do stuff
}

In the example given, you are being shown anonymous functions. In the example above, the function is declared with a name, which is myFunction. But with anonymous functions, no name has to be given when declaring. So in basis, the function has no name, making it anonymous.

The point of a function is to avoid repetitive code. So giving functions a name allows you to call them from anywhere. With anonymous functions, you cannot call them unless assigning them to a variable.

Anonymous functions are used when usually grouping code. Whether the group of code is for an event listener or for other things.

You can learn more about anonymous functions here.

Also in this example is anonymous objects. You are probably familiar with giving objects names. But what return is returning is an anonymous object. Within the anonymous object is what we're about to look at.

An object structure looks similar to this:

objectName
    key1: value1
    key2: value2

So in this case, the anonymous object that return is returning has a key called log. The value for this key is an anonymous function that logs this.val to a console.

You can learn more about objects here.

Happy Coding,

Farouk

Answer 6

abc() returns a plain object, where properties and values can be set at the object. Within the functions of the object this would reference the object instance. We can set .val of this to a value then call abc() object .log() method

var abc = function() {
    return {
      log : function() {
        console.log(this.val);
      }
    };
}

var def = abc();

def.val = 123;

def.log();

this.val can also be set a value at abc() call by defining default parameters

var abc = function(val = 123) {
    return {
      log : function() {
        console.log(this.val);
      },
      val
    };
}

var def = abc(); // optionally pass parameters to `abc()` call

def.log();