constructor with named parameters?

Question

So I was looking around when I found out that I could make named parameters like this:

function boo({first = "one", second = "two"} = {}) {
  console.log(first + second);
}

// and then calling it

boo({first = "two", second = "five"}); // logs "twofive"
boo({first = "two"}); // logs "twotwo"
boo({second = "five"}); // logs "onefive"
boo(); // logs "onetwo"

but what about constructors, like this one?

function foo({x, y = "y", z = "z"} = {}) {
    this.x = x;
    this.y = y;
    this.z = z;
}

var bar = new foo("x");

console.log(bar);

// up until now, it works!

var rows = ["a","b","c","d","e","f","g","h","i"];
var cols = ["a","b","c","d","e","f","g","h","i"];

var foos = {};

for(let i = 0; i < rows.length; i++) { // make rows
    for(let j = 0; j < cols.length; j++) {
        let counter = rows[i] + cols[j];
        foos[counter] = new foo({x: counter});
    }
}

// this doesn't work for some reason?

Actually, the second section of the code gives me the following error in chrome 49: Uncaught TypeError: foo is not a constructor.

I mean, evidently foo is a constructor, why cant I just make 81 properties with different name of foos, all being objects containing an x, y, and z?

EDIT

The code above seems to work allright, but when I try to apply it to bigger code like the following, it just doesn't want to listen:

$(function() {

  function cell({
    coords, building = "none", terrain = "soft", temperature = "25°C", humidity = "none", population = "0", money = "$0", income = "$0", production_amount = "0", production_type = "none", corruption_level = "0%", owner = "none"
  } = {}) {
    this.coords = coords;
    this.building = building;
    this.terrain = terrain;
    this.temperature = temperature;
    this.humidity = humidity;
    this.population = population;
    this.money = money;
    this.income = income;
    this.production_amount = production_amount;
    this.production_type = production_type;
    this.corruption_level = corruption_level;
    this.owner = owner;
  }

  // var cella = new cell("aa");
  //
  // console.log(cella);

  var rows = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
  var cols = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];

  var cells = {};

  for (let i = 0; i < rows.length; i++) { // make rows
    for (let j = 0; j < cols.length; j++) {
      let coords = rows[i] + cols[j];
      let cell = "<div class=\"cell\" id=\"" + coords + "\"></div>";
      $("main").append(cell);
      cells[coords] = new cell({
        coords: coords
      });
    }
  }

  $("div.cell").click(function() {
    console.log(this.id);
  });

});

body {
  margin: 0;
}
main {
  width: 100vw;
  height: 100vh;
}
main div.cell {
  width: calc(100vw / 9);
  height: calc(100vh / 9);
  background-color: #9E1023;
  /*border: solid 1px black;*/
  float: left;
}
main div.cell:hover {
  background-color: #740B20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Evalitia</title>
</head>

<body>
  <main></main>
</body>

</html>

I don't think bar is what you expected it to be. Maybe you wanted new foo({x: "x"})? — Bergi
– Bergi, Commented Apr 14, 2016 at 1:18
Are you sure you have the calls correct in the first block of code? I get a syntax error, I have to write boo({first : "two", second : "five"}); — Barmar
– Barmar, Commented Apr 14, 2016 at 1:18
What are you getting for console.log(typeof foo, foo, foo.toString())? — Bergi
– Bergi, Commented Apr 14, 2016 at 1:28

Barmar · Accepted Answer · 2016-04-14 01:24:06Z

1

You have to call the constructor the same way you call the regular function, with an object as the argument.

var bar = new foo({ x: "x" });

So the for loop should be:

function foo({ x, y = "y", z = "z" } = {}) {
  this.x = x;
  this.y = y;
  this.z = z;
}
var rows = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
var cols = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];

var foos = {};

for (let i = 0; i < rows.length; i++) { // make rows
  for (let j = 0; j < cols.length; j++) {
    let counter = rows[i] + cols[j];
    foos[counter] = new foo({
      x: counter
    });
  }
}

document.getElementById('result').innerHTML = JSON.stringify(foos, null, 1);

<div id="result"></div>

edited Apr 14, 2016 at 1:24

answered Apr 14, 2016 at 1:19

Barmar

789k57 gold badges554 silver badges668 bronze badges

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

8 Comments

Julian Avar Over a year ago

Have you tried it? I just did and I get the same error

Barmar Over a year ago

Yes, I tried it and got no error. Click Run code snippet and see.

Julian Avar Over a year ago

sorry for the inconvenience, the dummy code that I wrote works, but when I try to apply it to a bigger concept(just more variables), it doesn't work anymore

Oki E. Rinaldi Over a year ago

missing : here y = "y" (at =)

Barmar Over a year ago

@OkiErieRinaldi Are you sure your implementation is ES6? I don't get an error there.

|

Collectives™ on Stack Overflow

constructor with named parameters?

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related