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);
 }
 };
}

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

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();

• pragya.go: Thank you, I have a follow up question on it. How is the above function different from the following: var abc = function(){ return{ log : () => { console.log(this.val); } }; }
• Barmar: @peggy.go See stackoverflow.com/questions/34361379/…

Answer 2

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

Answer 3

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 4

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 5

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();

Answer 6

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

• RobG: Your "anonymous function" is actually a function declaration without a name, which is a syntax error (function declarations must have a name). An anonymous function is formed by a function expression where the optional name is omitted. Regarding "Usually with anonymous functions, you cannot call them", that would make them pretty useless. They are typically either called immediately (an immediately invoked function expression or IIFE) or assigned to a variable, parameter, property, etc. so that they can be called later.