Say I have an array of functions:
let myArray = [foo, bar, baz];
and i want to convert that to an array of strings with the function names:
let myArrayAsStrings = ['foo', 'bar', 'baz'];
How can I do that?
I have tried doing
myArray.map(fn => fn.name)
however my babel config is i think mangling the function names, so it cannot be guaranteed that the name will be the same.
Wondering if there's some kind of 'convert var name to string' method I don't know about?
It’s unclear if foo, bar, and baz are normal functions (function foo() {}), unnamed functions (var foo = funtion () {}), or arrow functions (which can be only anonymous). fn.name will work only for the first case, the other two won’t have a name.
Theoretically, this could be a workaround:
var myArrayAsStrings = Object.keys({ foo, bar, baz });
This will first store each function as a property and then we can extract properties names from the object as an array of keys. The downside of this solution is that the order either cannot be guaranteed.
However, if there is some sort of uglification then the original names from the code will be lost.
Seems to be working fine, just add toString() at the end and push it into an array
var foo = function() {
console.log("Foo");
};
var bar = function() {
console.log("bar");
};
var baz = function() {
console.log("baz");
};
let myArray = [foo, bar, baz];
let myArrayAsStrings = [];
myArray.map(fn => myArrayAsStrings.push(fn.name.toString()));
console.log(myArrayAsStrings);
EDIT: This answer is assuming there's an array of vars (as the title says), not an array of functions:
A one line solutuion :
myArray.toString().split(",")
Related
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 })
I'm currently running a series of functions where the first argument is a variable defined elsewhere, and the second argument is a string that happens to be identical to the variable name:
assignString(Hello, 'Hello')
assignString(World, 'World')
assignString(Foo, 'Foo')
assignString(Bar, 'Bar')
...
Ideally I would like to simplify this to something like this:
['Hello', 'World', 'Foo', 'Bar'].forEach(() => { assignString... })
or
[Hello, World, Foo, Bar].forEach(() => { assignString... })
Is this actually possible?
const vars = { Hello, World, Foo, Bar };
Object.keys(vars).forEach(key => assignString(vars[key], key));
I think the only way you could dynamically create variables based on a string value is by doing something like this:
var exampleStringValue = 'HELLO';
window[exampleStringValue] = exampleStringValue;
console.log(window.HELLO);
// or, since window is the global context in the browser
console.log(HELLO)
I honestly can't say I can dream up a use-case where that's a good practice, but I don't know your use-case, so no judgement here :)
I'd also like to point out this little library that I've found useful for creating objects where the keys have same value as the name of the key: https://github.com/STRML/keyMirror. I've found that to be used pretty heavily in the React community.
Since the variable name and the string are equivalent, there's no need to pass it in twice. I'd rather pass in the scope of the variable. You could do this so it works in whatever scope you're in:
function assignString(scope, val){
scope[val] = val;
}
Called like
assignString(window, "Hello");
Output of console.log(Hello) ==> "Hello"
Using the new ES6 Map object, we can create name/value pairs in a structure that can then be turned into an Array, so forEach can work:
// Variables that assignString will need:
var Hello = "var1", World = "var2", Foo = "var3", Bar = "var4";
// Map object that contains name of variables and strings that match variable name
var m = new Map([[Hello, "Hello"],[World,"World"],[Foo, "Foo"], [Bar, "Bar"]]);
// Turn Map into Array so forEach will work:
var a = Array.from(m);
// Call forEach which calls assingString and passes key name
// (variable name) and string value
a.forEach((value) => { assignString(value[0], value[1]); });
See this fiddle: https://jsfiddle.net/qnwsajes/34/
You can create an object with your data, iterate over the keys, and pass the key-value-pair to your assignString function.
var data = {
Hello: Hello,
World: World,
Foo: Foo,
Bar: Bar
}
Object.keys(data).forEach(key => assignString(data[key], key));
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 })
I have an object in a variable var o={};
I want to do something like what .push() method doing in array for my object.
JS code:
// Array:
var ar=[];
ar.push('omid');
ar.push('F');
var got=ar[1];
// above code is standard but not what I'm looking for !
/*-------------------------------------*/
// Object:
var obj={};
/* obj.push('key','value'); // I want do something like this
var got2=obj.getVal('key'); // And this
*/
Is this possible at all ?
var obj = {}
// use this if you are hardcoding the key names
obj.key = 'value'
obj.key // => 'value'
// use this if you have strings with the key names in them
obj['key2'] = 'value'
obj['key2'] // => 'value'
// also use the second method if you have keys with odd names
obj.! = 'value' // => SyntaxError
obj['!'] = 'value' // => OK
Since Object-Literals use a Key->Value model, there is no JS method to "push" a value.
You can either use Dot Notation:
var Obj = {};
Obj.foo = "bar";
console.log(Obj);
Or Bracket Notation:
var Obj = {},
foo = "foo";
Obj[foo] = "bar";
Obj["bar"] = "foo";
console.log(Obj);
Consider reading https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects, as arming yourself with this knowledge will be invaluable in the future.
Here is some javascript magic that makes it work.
Take a look.
var obj = {};
Object.defineProperty(obj,'push',{
value:function(x,y){
this[x]=y;
}
});
obj.push('name','whattttt'); <<<this works!!!
obj;
//{name:'whattttt'}
obj.name or obj['name']..
//whattttt
The reason i defined .push function using Object.defineProperty because i didn't want it to show up as a property of object. So if you have 3 items in object this would have always been the 4th one. And mess up the loops always. However, using this method. You can make properties hidden but accessible.
Though i don't know why you would use this method when there is already a easy way to do it.
to assign a value do this
obj.variable = 'value';
if value key is number or weird do this...
obj[1] = 'yes';
to access number or weird name you also do that
obj[1];
and finally to assign random keys or key that has been generated in code, not hard coded, than use this form too.
var person= 'him';
obj[him]='hello';
Say I have this function:
function doSomething(uno, dos, tres) {
// do something
}
and this object:
{
dos: 'foo',
tres: 'bar',
uno: 'baz'
}
How do I call doSomething given this mapping? I tried using apply, but it seems that apply must take a list instead of an object.
You can refer each property in the object as given above using . as given below.
doSomething(obj.uno, obj.dos, obj.tres)
Function.apply can only be used to apply an array-like object1 to a function call. There is no equivalent to Pythons "keyword argument expansion" and this must be done manually:
var opts = {
dos: 'foo',
tres: 'bar',
uno: 'baz'
}
doSomething(opts.uno, opts.dos, opts.tres)
If we started with an array-like object:
var arr = ['baz', 'foo', 'bar']
doSomething.apply(window, arr)
Or putting the two together (so that the composition of to a parameter sequence can be handled earlier):
var arr = [opts.uno, opts.dos, opts.tres]
doSomething.apply(window, arr)
While it may be possible (with non-obfuscated code) to use Function.toString2 to extract the parameter names, do some parsing, and then write some code to "apply" a general object (or construct an array that is then applied), this is not supported directly by the ECMAScript specification.
1 An array-like object is one that has a length and properties named 0..length-1. (Old versions of FF had a bug, but that has been fixed for a long time.)
2 The wording of the specification ("An implementation-dependent representation of the function is returned. This representation has the syntax of a FunctionDeclaration..") makes me believe that a conforming ES5 implementation ought to produce output usable for this purpose - however, this will likely vary by implementation and I have not explored such usage in practice.
You can try using:
function doSomething() {
for (var i = 0, l = arguments.length; i<l; i++) {
//dosomething
console.log(arguments[i]);
}
}
obj=['foo', 'bar', 'baz'];
doSomething.apply(null, obj);
Apply accepts array as second parameter but
if you insist on using object you can easily convert this object to Array and then use it with apply.
function objectToArray(obj) {
var arr = [];
for (field in obj)
arr.push(field);
return arr;
}
You can do something like this:
Function.prototype.applyNamed = function (g, argArr) {
var self = this;
var argNames = self.toString().match(/function\s+\w*\s*\((.*?)\)/)[1].split(/\s*,\s*/);
var applyArgs = [];
for(var i=0; i<argNames.length; i++){
applyArgs.push(argArr[argNames[i]]);
}
self.apply(self, applyArgs);
}
function doSomething(uno, dos, tres) {
console.log('uno = ' + uno);
console.log('dos = ' + dos);
console.log('tres = ' + tres);
}
var namedArgs = {
dos: 'foo',
tres: 'bar',
uno: 'baz'
};
doSomething.applyNamed(this, namedArgs);
Should print:
uno = baz
dos = foo
tres = bar
See the demo; credit.
Well, if you really want to, you actually can call a method using named parameters, but it requires parsing the string representation of the function. Whether or not you should use this technique is debatable, but here is how you would do it:
function doSomething(uno, dos, tres) {
// do something
}
var arguments = {
dos: 'foo',
tres: 'bar',
uno: 'baz'
}
function callFunction(fn, namedArguments) {
var orderedArguments = [];
var parameterRegExp = /\(([\s\w\$,]*)\)/;
parameterRegExp.exec(fn.toString())[1].replace(/\s/g, '').split(',').forEach( function(parameterName) {
orderedArguments.push(namedArguments[parameterName]);
});
return fn.apply(this, orderedArguments);
}
callFunction(doSomething, arguments);