JavaScript: function returning an object

Question

I'm taking some JavaScript/jQuery lessons at codecademy.com. Normally the lessons provide answers or hints, but for this one it doesn't give any help and I'm a little confused by the instructions.

It says to make the function makeGamePlayer return an object with three keys.

//First, the object creator
function makeGamePlayer(name,totalScore,gamesPlayed) {
    //should return an object with three keys:
    // name
    // totalScore
    // gamesPlayed
}

I'm not sure if i should be doing this

//First, the object creator
function makeGamePlayer(name,totalScore,gamesPlayed) {
    //should return an object with three keys:
    // name
    // totalScore
    // gamesPlayed

         this.name =  name;
         this.totalScore = totalScore;
         this.gamesPlayed = gamesPlayed;
}

or something like this

 //First, the object creator
    function makeGamePlayer(name,totalScore,gamesPlayed) {
        //should return an object with three keys:
        // name
        // totalScore
        // gamesPlayed

         var obj = {
             this.name =  name;
             this.totalScore = totalScore;
             this.gamesPlayed = gamesPlayed;
          }
    }

I have to be able to modify the properties of the object after its created.

Oriol · Accepted Answer · 2016-04-25 23:00:56Z

174

In JavaScript, most functions are both callable and instantiable: they have both a [[Call]] and [[Construct]] internal methods.

As callable objects, you can use parentheses to call them, optionally passing some arguments. As a result of the call, the function can return a value.

var player = makeGamePlayer("John Smith", 15, 3);

The code above calls function makeGamePlayer and stores the returned value in the variable player. In this case, you may want to define the function like this:

function makeGamePlayer(name, totalScore, gamesPlayed) {
  // Define desired object
  var obj = {
    name:  name,
    totalScore: totalScore,
    gamesPlayed: gamesPlayed
  };
  // Return it
  return obj;
}

Additionally, when you call a function you are also passing an additional argument under the hood, which determines the value of this inside the function. In the case above, since makeGamePlayer is not called as a method, the this value will be the global object in sloppy mode, or undefined in strict mode.

As constructors, you can use the new operator to instantiate them. This operator uses the [[Construct]] internal method (only available in constructors), which does something like this:

Creates a new object which inherits from the .prototype of the constructor
Calls the constructor passing this object as the this value
It returns the value returned by the constructor if it's an object, or the object created at step 1 otherwise.

var player = new GamePlayer("John Smith", 15, 3);

The code above creates an instance of GamePlayer and stores the returned value in the variable player. In this case, you may want to define the function like this:

function GamePlayer(name,totalScore,gamesPlayed) {
  // `this` is the instance which is currently being created
  this.name =  name;
  this.totalScore = totalScore;
  this.gamesPlayed = gamesPlayed;
  // No need to return, but you can use `return this;` if you want
}

By convention, constructor names begin with an uppercase letter.

The advantage of using constructors is that the instances inherit from GamePlayer.prototype. Then, you can define properties there and make them available in all instances

edited Apr 25, 2016 at 23:00

answered Sep 4, 2012 at 22:34

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

3 Comments

PeeHaa Over a year ago

@OP also note that when you are going to invoke it with the new keyword I would suggest starting the name with a capital: MakeGamePlayer.

Matt Zeunert Over a year ago

@PeeHaa Good advice, also the more typical naming convention when using the constructor would be new GamePlayer().

Oriol Over a year ago

@RobG Thanks, that's what happens when I copy-paste code without looking at it deeply.

PeeHaa · Accepted Answer · 2012-09-04 22:33:10Z

55

You can simply do it like this with an object literal:

function makeGamePlayer(name,totalScore,gamesPlayed) {
    return {
        name: name,
        totalscore: totalScore,
        gamesPlayed: gamesPlayed
    };
}

answered Sep 4, 2012 at 22:33

PeeHaa

73.1k60 gold badges195 silver badges264 bronze badges

3 Comments

zEn feeLo Over a year ago

hello, how can you access the return properties , When I use makeGamePlayer.name it doesnt work

mrturtle Over a year ago

var player1 = makeGamePlayer("Bobby Fischer", 15, 5); player1.name;

Embedded_Mugs Over a year ago

Does this return a copy of the object or a reference to the object?

Rob · Accepted Answer · 2018-12-10 09:13:34Z

12

The latest way to do this with ES2016 JavaScript

let makeGamePlayer = (name, totalScore, gamesPlayed) => ({
    name,
    totalScore,
    gamesPlayed
})

answered Dec 10, 2018 at 9:13

Rob

7,1885 gold badges48 silver badges53 bronze badges

Comments

Jeremy J Starcher · Accepted Answer · 2012-09-04 22:44:07Z

7

Both styles, with a touch of tweaking, would work.

The first method uses a Javascript Constructor, which like most things has pros and cons.

 // By convention, constructors start with an upper case letter
function MakePerson(name,age) {
  // The magic variable 'this' is set by the Javascript engine and points to a newly created object that is ours.
  this.name = name;
  this.age = age;
  this.occupation = "Hobo";
}
var jeremy = new MakePerson("Jeremy", 800);

On the other hand, your other method is called the 'Revealing Closure Pattern' if I recall correctly.

function makePerson(name2, age2) {
  var name = name2;
  var age = age2;

  return {
    name: name,
    age: age
  };
}

edited Sep 4, 2012 at 22:44

answered Sep 4, 2012 at 22:36

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

1 Comment

Felipe Quirós Over a year ago

Is called "revealing module pattern" But it is usually wrapped into private closure (function(){return{}})()

scrappedcola · Accepted Answer · 2016-06-29 16:14:15Z

3

I would take those directions to mean:

  function makeGamePlayer(name,totalScore,gamesPlayed) {
        //should return an object with three keys:
        // name
        // totalScore
        // gamesPlayed

         var obj = {  //note you don't use = in an object definition
             "name": name,
             "totalScore": totalScore,
             "gamesPlayed": gamesPlayed
          }
         return obj;
    }

edited Jun 29, 2016 at 16:14

answered Sep 4, 2012 at 22:34

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

2 Comments

scorpio1441 Over a year ago

Why do you have semicolons inside of object?

scrappedcola Over a year ago

@AlexG nice catch, can't believe no one else did in the 4 years since I first posted this answer. It was undoubtedly a bad cut-n-paste job of the OP's original object that I and it looks like a few others made.

Collectives™ on Stack Overflow

JavaScript: function returning an object

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related