We Keep Coding

2 Objects (created via new keyword for String) on addition NOT giving [Object][Object] (JavaScript)

This question is based on previous question:
Difference in these 2 Strings (JavaScript)
The people replied that there is a difference by creating string via 2 separate ways:
String Literal creates string (var a = "abc")
new keyword creates string-object, I assume it is a kind of object (var b = new String("def"))
Now, typeof in 1st case will return string. In 2nd case it will return Object. I am okay, there might be certain way of working, of JS engine, by the people who developed it.
But, then, in the following example why the hell I am getting the answer in last line as abcdef. Now, that too should have consoled [object][object], as the line above. Now I am really confused, new String is either creating a string, or object or what? It is just NOT consistent!
Can someone help me explain?
var obj1 = new Object({name: "Peter"});
var obj2 = new Object({age: 29});
var str1 = new String("abc");
var str2 = new String("def");
console.log(obj1);
console.log(obj2);
console.log(str1);
console.log(str2);
console.log(obj1 + obj2);
console.log(str1 + str2);

new String creates a String object, which inherits from Object, but has its own .toString and .valueOf methods, so it will print the string content.
var o = new Object();
var s = new String("foo");
console.log(o.toString === s.toString); // false
console.log(o.valueOf === s.valueOf); // false
You can override them with your own to see that they're invoked. Just be sure to invoke the originals too.
var s = new String("foo");
s.valueOf = function() {
console.log("custom valueOf");
return String.prototype.valueOf.call(this);
}
s.toString = function() {
console.log("custom toString");
return String.prototype.toString.call(this);
}
console.log(s + s);
[""].join(s);

But, then, in the following example why the hell I am getting the answer in last line as abcdef. Now, that too should have consoled [object][object], as the line above.
The difference is a String object has a default valueOf method that returns the string value contained within the object.
The Object object has a more generic valueOf method which simply returns a string of [object Object]
See -
const one =
{ valueOf: _ => 1 }
const two =
{ valueOf: _ => 2 }
console.log(one + two)
// 3
You can define valueOf to be anything -
const foo =
{ valueOf: _ => "foo" }
const bar =
{ valueOf: _ => "bar" }
console.log(foo + bar)
// "foobar"

Is there any difference in creating string object [duplicate]

This question already has answers here:
What is the difference between string primitives and String objects in JavaScript?
(12 answers)
Closed 9 years ago.
What is the difference between creating a string object like this
var txt = new String("Hello World");
and this
var txt = "Heloo World";

First of all let's bust some myths. String literal is not a syntactic sugar.
> var txt = new String("Hello World");
> typeof x
"string"
> var txt2 = "Hello World";
> typeof txt2
"object"
As you can see these two things are of different type. Even more: one of them is object and the second is not. This has a practical consequence, like:
> new String("Hello World") == new String("Hello World")
false
> "Hello World" == "Hello World"
true
Another difference is that primitives are passed by value while objects by reference. This might save some memory if you are passing around lots of big strings. However both objects and literals are immutable so it really isn't a big deal (why would you pass lots of big strings if you're not going to modify them?).
Also you can add attributes to objects while you can't add them to primitive types. But that's not 100% true. You can add an attribute to the prototype of a primitive. Note that both literals and objects have the same prototype:
> String.prototype.test = 11;
> var x = new String("x");
> x.test;
11
> var y = "x":
> y.test;
11

There's very little practical use for String objects as created by new String("foo"). The only advantage a String object has over a primitive string value is that as an object it can store properties:
var str = "foo";
str.prop = "bar";
alert(str.prop); // undefined
var str = new String("foo");
str.prop = "bar";
alert(str.prop); // "bar"
Hope this helps..

The String constructor function returns an object of type String. Usually, you want a literal string value, because strictly comparing an object to a literal will always return false.

One is a string primitive and the other is a String object.
The advantage of String object over string primitive is that it can store properties
var x = "foobar"
x.y = "hello"
console.log(x.hello) /* Undefinded*/
var z = new String("foobar")
z.y = "hello"
console.log(z.y) /* hello*/
typeof x = "string"
typeof z = object.
also
x==z //true
x===z // false

Nothing much but beware of this,
var s = new String('A');
var s1 = String('A');
var s2 = 'A';
console.log(s === 'A');//fasle -- since type is Object
console.log(s1 === 'A');//true
console.log(s2 === 'A');//true

var txt = "Heloo World";
here 'txt' is a primitive data type. It has no methods, it is nothing more than a pointer to a raw data memory reference, which explains the much faster random access speed.
var txt = new String("Hello World");
If you use new, you're explicitly stating that you want to create an instance of an Object. Therefore, new String is producing an Object wrapping the String primitive, which means any action on it involves an extra layer of work.

The first returns a String object, the second returns a string.
typeof txt; //object
typeof txt2; //string
While they may act similar, txt !== txt2

The primitive data types are:
String
Number
Boolean
If you using:
var txt = "Heloo World";
this is primitive type data type alert(typeof txt); will give you string type.
In JavaScript all variable can be of object type, for each primitive their is a Object type.
var txt = new String("Heloo World");
here typeof will give you object.
For difference see jsfiddle
var str="text";
alert(typeof str); //string
var str2="text";
alert(str === str2); //true
str = new String("text changed");
alert(typeof str); //object
var str2 = new String("text changed");
alert(str === str2); //false

Nothing, really. In the first example you call the constructor of class String and put as a parameter the body of the string, where as in the second example it is done automatically at the interpretation phase.
So basically the second is syntactic sugar, where as the first isn't.
There is no difference in the functionality.

Manipulating the JS prototype

I want to add a $error element to all my objects including "primitive" objects such as string and number.
I have the following codepen which just adds this value (via a function) to the Object class.
http://codepen.io/anon/pen/nglbL
For convenience, here is the code:-
Object.prototype.setError = function (str) {
this.$error = str;
this.$errorObj = { };
console.log("value of object is " + this.toString());
console.log("Setting error to " + this.$error);
};
Object.prototype.getError = function() {
console.log("error is " + this.$error);
console.log("error object is " + this.$errorObj);
return this.$error;
}
var obj = {
"str" : "string me!",
"bool" : true,
"int" : 1
}
obj.str.setError("error");
console.log("Retriving error and it is " + obj.str.getError());
Clearly, I don't understand how the prototypical inheritance works.
Thanks.

In JavaScript primitives are wrapped in background by its Object counterparts, these objects are called "Wrapper Objects", every time you treat a primitive as an object, a new wrapper object is created. This process occurs transparently, and a variable holding a string primitive doesn't hold a reference to an object, but the literal string value.
Wrapper objects won't survive for multiple uses! So, just don't try to define properties for strings, booleans and numbers, this simply doesn't work.
var a = {}; //this is a common object
a.test = "abc";
console.log(a.test);//will print "abc"
var b = "zzzz"; //declaring a string primitive
b.test = "abc"; //trying to add a property to this string, we're treating our primitive as an object
console.log(b.test);//will print undefined

Javascript String Object V.S. just string

OK, first, i'm not going to seek a method to convert the Object to String.
but i'm facing a problem like this:
String.prototype.foo = function() {
return this;
};
var rawString = "abcde";
var fooString = "abcde".foo();
console.log(typeof(rawString) + ': ', rawString);
console.log(typeof(fooString) + ': ', fooString);
or jsfiddle you preferred.
also, a screenshot is attached:
as you can see, i did almost nothing in the prototype method foo, i just return this.
but the result of typeof are totally different
Why is this? how can i just return abcde rather thant {0: "a"...} ?
Thanks!

The this references the String Object, so you need to return it like
return this.toString();
which in turn, creates the primitive string version and returns it.

Determine original name of variable after its passed to a function

I've got a feeling this might not be possible, but I would like to determine the original variable name of a variable which has been passed to a function in javascript. I don't know how to explain it any better than that, so see if this example makes sense.
function getVariableName(unknownVariable){
return unknownVariable.originalName;
}
getVariableName(foo); //returns string "foo";
getVariableName(bar); //returns string "bar";
This is for a jquery plugin i'm working on, and i would like to be able to display the name of the variable which is passed to a "debug" function.

You're right, this is very much impossible in any sane way, since only the value gets passed into the function.

This is now somehow possible thanks to ES6:
function getVariableName(unknownVariableInAHash){
return Object.keys(unknownVariableInAHash)[0]
}
const foo = 42
const bar = 'baz'
console.log(getVariableName({foo})) //returns string "foo"
console.log(getVariableName({bar})) //returns string "bar"
The only (small) catch is that you have to wrap your unknown variable between {}, which is no big deal.

As you want debugging (show name of var and value of var),
I've been looking for it too, and just want to share my finding.
It is not by retrieving the name of the var from the var but the other way around : retrieve the value of the var from the name (as string) of the var.
It is possible to do it without eval, and with very simple code, at the condition you pass your var into the function with quotes around it, and you declare the variable globally :
foo = 'bar';
debug('foo');
function debug(Variable) {
var Value = this[Variable]; // in that occurrence, it is equivalent to
// this['foo'] which is the syntax to call the global variable foo
console.log(Variable + " is " + Value); // print "foo is bar"
}

Well, all the global variables are properties of global object (this or window), aren't they?
So when I wanted to find out the name of my variables, I made following function:
var getName = function(variable) {
for (var prop in window) {
if (variable === window[prop]) {
return prop;
}
}
}
var helloWorld = "Hello World!";
console.log(getName(helloWorld)); // "helloWorld"
Sometimes doesn't work, for example, if 2 strings are created without new operator and have the same value.

Global w/string method
Here is a technique that you can use to keep the name and the value of the variable.
// Set up a global variable called g
var g = {};
// All other variables should be defined as properties of this global object
g.foo = 'hello';
g.bar = 'world';
// Setup function
function doStuff(str) {
if (str in g) {
var name = str;
var value = g[str];
// Do stuff with the variable name and the variable value here
// For this example, simply print to console
console.log(name, value);
} else {
console.error('Oh snap! That variable does not exist!');
}
}
// Call the function
doStuff('foo'); // log: foo hello
doStuff('bar'); // log: bar world
doStuff('fakeVariable'); // error: Oh snap! That variable does not exist!
This is effectively creating a dictionary that maps variable names to their value. This probably won't work for your existing code without refactoring every variable. But using this style, you can achieve a solution for this type of problem.
ES6 object method
In ES6/ES2015, you are able to initialize an object with name and value which can almost achieve what you are trying to do.
function getVariableName(unknownVariable) {
return Object.keys(unknownVariable)[0];
}
var foo = 'hello';
var output = getVariableName({ foo }); // Note the curly brackets
console.log(output);
This works because you created a new object with key foo and value the same as the variable foo, in this case hello. Then our helper method gets the first key as a string.
Credit goes to this tweet.

Converting a set of unique variable into one JSON object for which I wrote this function
function makeJSON(){ //Pass the variable names as string parameters [not by reference]
ret={};
for(i=0; i<arguments.length; i++){
eval("ret."+arguments[i]+"="+arguments[i]);
}
return ret;
}
Example:
a=b=c=3;
console.log(makeJSON('a','b','c'));
Perhaps this is the reason for this query

I think you can use
getVariableName({foo});

Use a 2D reference array with .filter()
Note: I now feel that #Offermo's answer above is the best one to use. Leaving up my answer for reference, though I mostly wouldn't recommend using it.
Here is what I came up with independently, which requires explicit declaration of variable names and only works with unique values. (But will work if those two conditions are met.)
// Initialize some variables
let var1 = "stick"
let var2 = "goo"
let var3 = "hello"
let var4 = "asdf"
// Create a 2D array of variable names
const varNames = [
[var1, "var1"],
[var2, "var2"],
[var3, "var3"]
]
// Return either name of variable or `undefined` if no match
const getName = v => varNames.filter(name => name[0] === v).length
? varNames.filter(name => name[0] === v)[0][1]
: undefined
// Use `getName` with OP's original function
function getVariableName(unknownVariable){
return getName(unknownVariable)
}

This is my take for logging the name of an input and its value at the same time:
function logVariableAndName(unknownVariable) {
const variableName = Object.keys(unknownVariable)[0];
const value = unknownVariable[variableName];
console.log(variableName);
console.log(value);
}
Then you can use it like logVariableAndName({ someVariable })