Merging object property values ​​returns NaN (Javascript)

Question

I have an object with several properties, each property has a value, which is a string. When I try to concatenate the values ​​of each property, it returns NaN.

var urlProps = { searchTerm: "searchSTUFF", baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", tailURL: "&rawcontinue=&callback=?", finalURL: this.baseURL + this.searchTerm + this.tailURL } console.log(urlProps.finalURL); //NaN 

What am I doing wrong here, or how to do it?

Answer 1

The moment you try to combine the values, the object has not yet been created.
Also, this will not represent an object in any way. You would use this in the constructor or method of the object.
To get the result you need, you have to do it.

 var urlProps = { searchTerm: "searchSTUFF", baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", tailURL: "&rawcontinue=&callback=?", finalURL: this.baseURL + this.searchTerm + this.tailURL } urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

Answer 2

I would suggest using a function

 var urlProps = { searchTerm: "searchSTUFF", baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", tailURL: "&rawcontinue=&callback=?", finalURL: function() { return this.baseURL + this.searchTerm + this.tailURL; } } console.log(urlProps.finalURL()); //https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&e…=&titles=%20&generator=search&gsrsearch=searchSTUFF&rawcontinue=&callback=? 

Answer 3

The JS engine cannot find this.baseUrl or this.searchTerm or this.tailUrl when trying to build finalUrl because the object you are building does not exist for reference purposes until it completes the construction of it (on } ).

To do this, you must ensure that the object was created before trying to access it:

 var urlProps = { searchTerm: "searchSTUFF", baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", tailURL: "&rawcontinue=&callback=?" } // here it can find it... urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

Answer 4

this.baseURL , this.searchTerm and this.tailURL are all undefined at this point in the object literal. You must create the final URL in a separate statement:

 var urlProps = { searchTerm: "searchSTUFF", baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", tailURL: "&rawcontinue=&callback=?" }; urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

An object exists only after the operator with the object literal and inside the this object literal points to the window object (or regardless of context), and not to the object that will be created.