Understanding 'this' placement in JavaScript when creating an object

Question

I am trying to understand why the function Fruit works when making an object:

function Fruit(name, color, shape){
    this.name = name;
    this.color = color;
    this.shape = shape;
}

var apples = new Fruit('apple', 'red', 'round');

Why is it not the following:

function Fruit(name, color, shape){
   name = this.name;
   color = this.color;
   shape = this.shape;
}

if, for example, the name after the equals sign is what is pointing to 'apple' and this points to the parameters in the var apples wouldn't it make more sense to put this after?

Sorry in advance if I didn't phrase the question properly.

To clarify why I don't understand it let's change the names so that they aren't the same:

 function Fruit(name, color, shape){
     this.thename = name;
     this.thecolor = color;
     this.theshape = shape;
 }

var apples = new Fruit('apple', 'red', 'round');

And that would still work because the object apples would be {thename: 'apple', thecolor: 'red', theshape: 'round'}

so then isn't it thename = 'apple' if you had thename = this.name in the function?

From MDN: "The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand" — Robby Cornelissen
– Robby Cornelissen, Commented Oct 24, 2018 at 4:33
@user64350 I have edited my answer to match your current edits, take a look at it — Karan Shishoo
– Karan Shishoo, Commented Oct 24, 2018 at 4:53

Karan Shishoo · Accepted Answer · 2018-10-24 04:53:13Z

2

To clarify what you are suggesting (edited to match your edits), if we had a function like:

function Fruit(name, color, shape){
    thename = this.name;
    thecolor = this.color;
    theshape = this.shape;
}

then calling

var apples = new Fruit('apple', 'red', 'round');

would mean that:

thename = this.name
thecolor = this.color
theshape = this.shape

Now you are trying to store attributes which do not exist into variables which will not be accessed after the function is called and will probably be garbage collected at the end. In this case the result will have no attributes and will save none of the data that was passed to it.

Your misunderstanding is that the name parameter of the function is accessed using this.name instead of name, here is a clarification:

parameters of functions are accessed using whatever name was assigned to them during the functions initial definition
attributes are accessed by calling this.attribute

This distinction is made so that it is clear if you are using an attribute or if you are using a parameter.

edited Oct 24, 2018 at 4:53

answered Oct 24, 2018 at 4:36

Karan Shishoo

2,8562 gold badges20 silver badges38 bronze badges

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

5 Comments

user64350 Over a year ago

I don't this I can format my comment so I'll add it to the question! Thanks for elaborating.

Karan Shishoo Over a year ago

@user64350 You seem to have a slight misunderstanding of what function parameters are and what object attributes are, if you define a parameter of a function using name whenever you want access that parameter you use name, the moment you use this.name you are trying to access an attribute called name

user64350 Over a year ago

Thanks for elaborating on both misunderstandings. I think it helped a lot!

Karan Shishoo Over a year ago

@user64350 your welcome, if you found the answer helpful can you upvote/accept it ?

user64350 Over a year ago

I'm one point away from being able to upvote on StackOverflow! Still very new to all of this :)

Jack Bashford · Accepted Answer · 2018-10-24 04:35:24Z

0

The reason it's only the first way is because the assignment operator = assigns the right hand side to the left hand side, rather than a reference.

answered Oct 24, 2018 at 4:35

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Collectives™ on Stack Overflow

Understanding 'this' placement in JavaScript when creating an object

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related