Construct JavaScript Objects with Functions

Construct JavaScript Objects with Functions
0.0 0

#1

These two programs do the exact same thing, right?
var MotorBike = function() {
this.wheels = 3;
this.engines = 1;
this.seats = 1;
};
and,
var motorBike = {
“wheels”: 2, “engines”: 1, “seats”: 2
};

Your code so far

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};

// Only change code below this line.

var MotorBike = function() {
  this.wheels = 3;
  this.engines = 1;
  this.seats = 1;
};


Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0.

Link to the challenge:


#2

Nope :confused:
The first ‘program’ you wrote is a ‘constructor’, the second is a custom object;
As stated in the challenge:
In a constructor the this variable refers to the new object being created by the constructor.

You will use it as follows:

let test = New motorbike();
console.log( test.wheels) // result 3

`

The second one is an object: you use it to store and manage data.

Here’s a useful link: MDN - Workng with object

Hope it helps,
-LyR-


#3

Is the reason one uses the constructor function instead of the custom object is so one can add more objects?


#4

That is one of the effect if i understand what you mean.
The constructor is something like a ‘mould’: you use it to produce ‘istances’ ( the objects you ‘produce’ with that mould) ; a simple object is something ‘handcrafted’.
The differences between these two ways to create an object are the same of the factories counterpart : you will go for an handcrafted item when you want something full customizable and not to be ‘rebuilded’, a constructor is preferred to be defined when you need to produce more than one item ( or if you plan to do so, or if you want to implement a structure ‘potentially’ reusable etc…)

This is my opinion, if i said something wrong please correct me; if someone would add something it would be good since there are a LOT of stuff behind that ( constructors could be considered as one of the main components of the classes, which are the bases of the OOP approach).


#5

Are these just two ways to create objects? I can either create an object with ‘objects as variables’.
example:
Before:

var car = {
  "wheels":4,
  "engines":1,
  "seats":5
};

After:

var car = {
  "wheels":4,
  "engines":1,
  "seats":5,
  "mirrors":3
};

Or I can create an object with constructor functions.
example:
Before:

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};

After:

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};
var myCar = new Car();
myCar.mirrors = 3;

#6

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#7

The above object literal is a single use object. Where the constructor function can create multiple instances of the object.

For example:

var car = {
  "wheels":4,
  "engines":1,
  "seats":5
};
var myCar = car;
console.log(myCar); // { wheels: 4, engines: 1, seats: 5 }
var yourCar = car;
console.log(yourCar); // { wheels: 4, engines: 1, seats: 5 }
myCar.mirrors = 3;
console.log(yourCar); // { wheels: 4, engines: 1, seats: 5, mirrors: 3 }
console.log(yourCar); // { wheels: 4, engines: 1, seats: 5, mirrors: 3 }

Because myCar and yourCar reference the same object (car), adding/deleting/modifying properties on one affects the original object car reference and any references to it.

Using the constructor function, myCar and yourCar can be different objects.

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};
var myCar = new Car();
console.log(myCar); // { wheels: 4, engines: 1, seats: 5 }
var yourCar = new Car();
console.log(yourCar); // { wheels: 4, engines: 1, seats: 5 }
myCar.mirrors = 3;
yourCar.mirrors = 10;

console.log(myCar); // { wheels: 4, engines: 1, seats: 5, mirrors: 3 }
console.log(yourCar); // { wheels: 4, engines: 1, seats: 5, mirrors: 10 }