Calling functions like properties in JavaScript?

Question

I came across this snippet of code on the MDN(Mozilla Developer Network) tutorial for JavaScript(by the way, a wonderful read). MDN JavaScript Re-introduction

   function personFullName() {
    return this.first + ' ' + this.last;
}
function personFullNameReversed() {
    return this.last + ', ' + this.first;
}
function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName;
    this.fullNameReversed = personFullNameReversed;
}

What intrigued me is the way the functions are called. The typical (); is not used to make the function call in the Person function. Within the Person function, we see that :

this.fullName = personFullName;

is used instead of

this.fullName = personFullName();

Here, the 'personFullName' is used like a variable or a property rather than, what it truly is, a function. Could someone shed a light on why this is so?

Because functions aren't called there. Put alert('foo') in any function and see that it doesn't appear — zerkms
– zerkms, Commented Feb 10, 2014 at 0:57
It's used like a variable because it is a variable. It's a variable that references a function object. Functions are objects that can be assigned to variables and properties just like any other object. — cookie monster
– cookie monster, Commented Feb 10, 2014 at 0:59

Domenic · Accepted Answer · 2014-02-10 01:13:02Z

1

The functions are not called when running the function Person, only a reference is passed around.

JavaScript has functions as first class citizens that means that functions are a object like everything else: They can have properties, they can be saved in a variable, they can be passed as a parameter etc.

This allows for some really expressive code, look at this:

function isEven(item) {
 return item % 2 == 0;
}

alert([1, 2, 3, 4, 5, 6].filter(isEven));

Demo

First a function is created and saved in the variable called isEven, afterwards we pass the function to Array.filter, which in case will pass every element into that array and return an array containing only the elements that isEven returned true for.

edited Feb 10, 2014 at 1:13

Domenic

113k42 gold badges227 silver badges275 bronze badges

answered Feb 10, 2014 at 1:08

TimWolla

32.9k8 gold badges67 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Satwik Nadkarny Over a year ago

I got this. For anyone still having a doubt, please look at the following JSFiddle to understand the differences. Thanks!!

Bergi · Accepted Answer · 2014-02-10 01:11:58Z

JavaScript is a functional language, and functions are first-class values. They're just objects, and can hold custom properties like any other object. And references to them can be passed around freely, which allows lots of cool stuff (as you probably will learn later).

So what happens here is that the functions are indeed not called, they are referenced via the variables holding them and are assigned as properties to the instance (this).

Like in the first example where an object is used (makePerson), they now can be called as methods on each instance:

var s = new Person("Simon", "Willison");
s.fullName(); // Simon Willison

The accompanying text explains that as well:

Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?

[Now the code you cited is] better: we are creating the method functions only once, and assigning references to them inside the constructor.

Collectives™ on Stack Overflow

Calling functions like properties in JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related