Is it possible to insert external variable inside javascript function variable?
I have two javascript methods ( imports , and namespace ) imports take a string argument( eg. imports(«com.x.y.MyClass») ) and based on string it create a relative path and append it to head tag as script ( type = text/javascript ). using imports I can attach any javascript file of my project main page. namespace can take 2 to 3 paramaters ( eg. namespace(«com.x.y», «MyClass», «google.maps.Marker») or namespace(«com.x.y», «MyClass» ) ) if we call var clssObj = new com.x.y.MyClass( param1, param2 ) then it searches for function MyClass and calls it if it exists.
imports("com.x.y.HelperClass1"); imports("com.x.y.HelperClass2"); imports("com.x.z.OtherClass"); namespace("com.x.y","MyClass","MyBaseClass").Class = function() < var . .. .; function privateFunc()< this.baseclassFunction(); \\ since Myclass is a prototype of MyBaseClass var otherClass = com.x.z.OtherClass(); >this.publicFun = function()< privateFunc(); >; this.MyClass = function( param1, param2 )< this.base();// calling base class costructor var helperObj1 = com.x.y.HelperClass1(); var helperObj2 = com.x.y.HelperClass2(); >; >; Is it possible to add all imported class as MyClass private variable? as in Java instead of using com.x.y.HelperClass2 we use HelperClass2 only.
1 Answer 1
Disclaimer: I have no idea what all this «imports» and «namespace» business is about. Neither of these are JavaScript native concepts, so they must be provided by some library not named in the problem statement.
Having said that, you can easily make local variables that point to properties of objects, and in so doing, create a shorthand notation for yourself. Ex:
Another option (in the interest of listing all that I can think of) is to use with :
But with is generally considered bad practice in JavaScript. I’m mostly listing it here to make you aware of it and to encourage you to avoid using it.
«Variable» variables in JavaScript
arrays are not variables, if you use an array as a function argument , the JS interpreter will use a pointer to your array. In programming the use of certain terms is precise, and what you ask for has only very little meaning
9 Answers 9
There is no single solution for this. It is possible to access some global variables dynamically via window , but that doesn’t work for variables local to a function. Global variables that do not become a property of window are variables defined with let and const , and class es.
There is almost always a better solution than using variable variables! Instead you should be looking at data structures and choose the right one for your problem.
If you have a fixed set of names, such as
// BAD - DON'T DO THIS. var foo = 42; var bar = 21; var key = 'foo'; console.log(eval(key));store those names/values as properties of an object and use bracket notation to look them up dynamically:
// GOOD var obj = < foo: 42, bar: 21, >; var key = 'foo'; console.log(objJavascript variable inside variable);In ES2015+ it’s even easier to do this for existing variables using concise property notation:
// GOOD var foo = 42; var bar = 21; var obj = ; var key = 'foo'; console.log(objJavascript variable inside variable);If you have «consecutively» numbered variables, such as
// BAD - DON'T DO THIS. var foo1 = 'foo'; var foo2 = 'bar'; var foo3 = 'baz'; var index = 1; console.log(eval('foo' + index));then you should be using an array instead and simply use the index to access the corresponding value:
// GOOD var foos = ['foo', 'bar', 'baz']; var index = 1; console.log(foos[index - 1]);In 2021 eval has become useless in this regard; at least in real world applications. Even if your CSP allows eval , I don’t know any production code that ain’t run through some minifier which will mess up your variable names.
eval is not just useless, but it has been disabled when running in strict mode . Many frameworks have the strict mode enabled by default, so I hope that we will see it disappearing 🙂
If you are desperate to do this you can either try using eval():
var data = "testVariable"; eval("var temp_" + data + "=123;"); alert(temp_testVariable); Or using the window object:
var data = "testVariable"; window["temp_" + data] = 123; alert(window["temp_" + data]); eval can’t create local variables in strict mode. An indirect call can create global variables, though.
To reference a variable in JavaScript with only a string, you can use
You can set and reference variables, and objects in variables too.
Almost always, better to namespace it into an object than attach all your variables globally on the window. Why? Scoping helps contain bugs, avoids name clashes and makes code easier to understand.
Unlike PHP, JavaScript doesn’t offer access to the globals array (which contains references to all the variable names currently declared). As such, JavaScript does not offer native support for variable variables. You can, however, emulate this feature as long as you define all your variables as part of an array or an object. This will in turn create a globals array for you. For example, instead of declaring the variable hello in the global scope like this:
Let’s encapsulate it inside an object. We’ll call that object vv (variable variables):
var vv = < 'hello': 'Hello, World! ', //Other variable variables come here. >, referToHello = 'hello'; Now we can refer to the variable by its index, and since array indexes can be provided using a variable, we are de facto making use of a variable variable:
console.log(vv[referToHello]); //Output: Hello, World! The Answer To Your Question
Let’s apply this to the code you supplied in the original question:
var vv = < 'x': 'variable', 'variable': 'Hello, World!' >; console.log(vv[vv['x']]); // Displays "Hello, World!" A Practical Use
While the previous code might appear ridiculously cumbersome and impractical, there are practical uses for variable variables in JavaScript using this type of encapsulation. In the example below we use the same concept to get the ID of an undefined number of HTML elements.
var elementIds = [], elements = ['message','fillOrStroke','sizePicker','colorPicker']; //The items in this array could be defined automatically via an input, database query, event, etc. elements.forEach( (element) => < elementIds[element] = document.getElementById(element); >); This example declares variable variables (keys in elementIds ) based on the ID of each element, and will assign the node of said element as the value of each variable. And since using global variables in JavaScript is generally discouraged giving your variable variables a unique scope (in this instance, declaring them inside the elementIds array) is not only neat, but also more responsible.
How to insert variables in JavaScript strings?
In Java, String s are immutable and doing something like the above would unnecessarily create and throw away String s. Ruby is similar and has a nice way of doing the above:
Strings are immutable in JavaScript as well. The plus (concatenation) operator makes a new string from pieces of an old one.
4 Answers 4
Introduced in ES6 as «template strings»
const name = "Nick" const greeting = `Hello $` // "Hello Nick" Template strings were part of ES6 and that standard came around, and was implemented by browsers, well after 2013 when I posted this question. Nevertheless, you’re correct and I will award you the check 🙂
No, You need to use backticks. It is how echmascript (javascript) knows how to inject variables into $<> locations. A single tick would just signify a normal string and would be interpreted as such.
That’s fine in JavaScript. There is no good built-in equivalent of an sprintf or String.format , however, you can build your own.
Don’t worry about the «unnecessary» string objects. That’s definitely micro-optimization. Address it if and when you need that extra tiny bit of performance or memory optimization, but in distributed software, you probably don’t.
Plus, if it is really common performance problem I would expect JS implementations to have it optimized. I know Java compiler does such optimization.
I created this function to do exactly this, it will allow you to pass in a string, and an object with keys that will replace placeholder values in the string with their values like below:
var str = stringInject("My username is on ", < username: "tjcafferkey", platform: "GitHub" >); // My username is tjcafferkey on Github Pretty sure you accidentally transposed the variables. The way you have it written, I would expect it to set str to be «My username is Github on tjcafferkey»
If for some reason you are doing this many times per second and referencing the strings many times per call, you can always store the strings themselves as variables.
var preX = 'x: ' , preY = 'y: ' , coords ; coords = preX + x + preY + y; This of course should be supported by benchmarking/profiling, but creating many strings per frame is often a source of unnecessary garbage which can result in jank down the line.
Is there really a JS interpreter that won’t inline all of the raw strings? I feel like this might be slower on some browsers, since now the engines have to examine the preX (etc.) variables which could have changed, whereas it is impossible to change a string literal.
Agreed, I’d expect it to be slower. However, my case was specific to referring to the same string literal hundreds of times per frame (say in a visualization with many dynamically labeled points). The speed hit of optimized lookup (which will just be indexing into a given offset) will likely not outweigh string creation time for each literal. I imagine you are correct that the literals are optimized to some degree, but that varies browser by browser, making code that relies on that behavior implementation dependent.
Variable inside a String inside a String
I’m running into a little problem when I try to put a variable inside a string that’s already inside a string. Basically, I’m trying to change the color of a specific word with a color variable (a string, e.g. «#FF0»). That’s what the replace function looks like:
$('#textWithTheWord').replaceWith($(' ').append($('#textWithTheWord').clone()).html().replace(word, '' + word + '')); if I understand correctly, #textWithTheWord is an element that contains a span with has an inline style attribute that sets the color . You then want to modify the color value for that span element. Is that right? If that’s the case, is there any reason you want to do this by manipulating strings?
@plalx Yes, so far, you’re correct. I tried to change the color of a specific word and the only solution I found for that was here: link.
It surely helped making my code look a little «smarter»! 🙂 But I still have the color-variable, that’s able to change, and I’m wodering, how to change the color.
@felixfritz, I’m glad I could help! It’s good that you took time to understand how things are done, this way you can craft a solution specific for your needs. Cheers! 😉
2 Answers 2
An easy solution would be to simply replace the innerHTML property of your element by a new html string that would have wrapped the words in a span . However, it’s not a very flexible solution, since by replacing the innerHTML property, all the elements would be renewed and that might give unexpected results, unless you target elements that only holds text nodes.
Lets suppose the body contains this text:
this is some text and I want to replace the word cool var $body = $(document.body); $body.html($body.html().replace(/\b(cool)\b/g, '$1')); Here the /\b(cool)\b/g regex will match every cool words and create a capturing group on them, allowing us to reference it in the replacement expression as $1 .
However, a most advanced solution could probably be implemented like:
- Loop over text nodes not contained within a span that has a data-styled-text attribute. (you could check the textNode.parentNode property)
- Sourround the words that you want by a tag. Have a look at https://developer.mozilla.org/fr/docs/DOM/Text.splitText
- Query all the elements and do whatever manipulation you want with them.
I have toyed around with that concept and I have create a fiddle for you that shows how you could manipulate text in any ways you want using a regex to target specific text. I have created 2 main functions wrapText and styleText that will allow you to do whatever you want with text on the page. It could be further optimzed, but you will get the idea.
The following function allows you to wrap any text in a text node.
function wrapText(textNode, textRx, wrapFn) < var global = textRx.global, wrapEl, result, rightTextNode, matchedText, index; while (result = textRx.exec(textNode.nodeValue)) < rightTextNode = textNode.splitText(index = result.index); rightTextNode.nodeValue = rightTextNode.nodeValue.substring((matchedText = result[0]).length); wrapEl = wrapFn(matchedText, index); wrapEl.appendChild(document.createTextNode(matchedText)); rightTextNode.parentNode.insertBefore(wrapEl, rightTextNode); if (!global) < break; >textNode = rightTextNode; textRx.lastIndex = 0; > > The following function allow you to style any text contained within an element.
function styleText(el, textRx, styleFn) < var wrapEl = document.createElement('span'), slice = [].slice; wrapEl.setAttribute('data-styled-text', 'true'); styleText = function(el, textRx, styleFn) < var childNodes = slice.call(el.childNodes, 0), i = 0, len = childNodes.length, node; for (; i < len; i++) < node = childNodes[i]; switch (node.nodeType) < case 3: if (!node.parentNode.getAttribute('data-styled-text')) < wrapText(node, textRx, function (text, index) < var el = wrapEl.cloneNode(); styleFn(el, text, index); return el; >); continue; > styleFn(node.parentNode); break; case 1: styleText(node, textRx, styleFn); break; > > >; styleText(el, textRx, styleFn); >