Javascript referencing variable name by string within object

Question

I am making a Music composition program in JavaScript and recently I have been hitting a block where I need to iterate through my data as fast as possible. I have a bit JSON object called song and it's setted up like this

song = {"track0":"data...", "track1":"data...", ...};

I was wondering if I sick a few functions into the song JSON object. How do I iterate through from track0 to trackn? I know I can do something like song["track" + n] but that's what I'm doing right now and my goal is to move my functions into the song JSON object so I can iterate faster... Or is there no performance gain to be had at all if I just moved my functions into the object?

A JSON object cannot have functions. So i assume you are adding functions to JSON after its being retrieved from the server. Why can't you create another object and have all your functions there? — aarjithn, Oct 25 '15 at 19:59
actually the JSON isn't gotten from the server or anything. the JSON is hard coded into the JS file and gets mutated by the functions at run time to add or remove stuff. That's why I was thinking of putting stuff into it. Also how do I declare objects other than JSON? I'm kind of self taught... hehe xP — Muggy Ate, Oct 25 '15 at 20:03
JSON is typically used to exchange data back/forth server. If its just used in JS, it would just be an object. (JSON is a subset of object) creating object is as simple as var utils = {}; now you can have utils.function1 = function() { }; utils.function2 = function() { }; utils.function3 = function() { }; and so on. — aarjithn, Oct 25 '15 at 20:07
*JSON* (*JavaScript Object Notation*) is a lightweight data-interchange format. JSON stands for a string that represents a JavaScript Object serialized. _Ref: [json.org](http://json.org/)_. I wrote this for the sake of good use of terminology. — jherax, Oct 25 '15 at 20:08
I've kind of been using JSON wrong for a while. I've mostly been using JSON as a javascirpt equivalent of associative arrays in PHP. But right now the problem isn't really sticking things into the JSON or anything but the root of the problem is to get the program to run faster and I'm not sure what the best course of action to go is. — Muggy Ate, Oct 25 '15 at 20:12
This is a *JavaScript Object*
`var myObj = { key: 'value', prop: 'value' }`
And this is a JSON `var json = '{ "key": "value", "prop": "value" }'`
(I enclosed the string in a single quote, to avoid escape the standard double quotes)_ — jherax, Oct 25 '15 at 20:13
@jherax seems like JSON and JavaScript Object are pretty much the same thing except one is a string and the other isn't? am i getting this right? — Muggy Ate, Oct 25 '15 at 20:19

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

JSON, by definition, can't contain functions - only data.

If you are able to modify the data structure, consider using an array of tracks, rather than as you have. For example:

song = {"tracks":["data...", "data...", ...], ...};

edited May 23 '17 at 11:52

Community

1
1

answered Oct 25 '15 at 19:50

ziesemer

27,712
8
86
94

Shouldn't this be song = {"tracks": ... }; – aarjithn Oct 25 '15 at 19:52
@aarjithn - Probably. Was keeping the original syntax from the OP. Could also be `song: {"tracks": ...}`, if it is part of a larger JSON literal. – ziesemer Oct 25 '15 at 19:54
1

ah, yes. good catch. In that case it would be `"song" : {"tracks"..}` though. :) – aarjithn Oct 25 '15 at 19:57
1

@MuggyAte [ {"track": "data1"}, {"track": "data2"}. {"track": "data3"} ] is another option, if you'd want to enhance it later (say include artist name). Here the array would be songs collection, and each object inside represent a song. – aarjithn Oct 25 '15 at 20:04
@aarjithn actually the full JSON object has much more than just that. I have a metadata variable for storing a bunch of other information like length artist and so on – Muggy Ate Oct 25 '15 at 20:07

score 0 · Answer 2 · answered Oct 25 '15 at 20:12

0

So you want an object to store your functions. Say you want to create some utility functions.

var utils = {};

now you can have

utils.function1 = function() {
    //function1 body here 
};

utils.function2 = function() {
    //function2 body here 
};

utils.function3 = function() {
    //function3 body here 
};

This is nicer for a code organisation perspective, but I don't believe this would be the bottleneck as far as performance is concerned.

bottom line : There wouldn't be any performance gain by moving your functions to an object.

answered Oct 25 '15 at 20:12

aarjithn

1,151
8
20

oh i see. I think I will go give that a try. I have kind of a pretty crummy setup for my code right now and everything is floating in the global namespace. here's where my code lives https://mmc.mugdev.com/JS/MMC2.js would putting things into objects affect performance? – Muggy Ate Oct 25 '15 at 20:15
The performance gain/loss by moving into and out of objects would not be even noticeable, as the real bottle necks would be DOM updates. Having said that, it would be better to re-structure code to make it much more readable and organised. Say `app.models, app.utils` etc – aarjithn Oct 25 '15 at 20:34
actually, interacting with DOM is not that bad as most of the intensive stuff is done through CSS. On the flip side the biggest bottleneck is when I play a preview of the song where I would click Play and the program would attempt to play the song. If there's too many tracks the audio generation would not match up with the timing of the song and stuff would sound bad (like a lagging video game track) – Muggy Ate Oct 25 '15 at 20:41

jherax · Accepted Answer · 2015-10-25T21:15:03.593

@Muggy Ate

How do I iterate through from track0 to trackn? I know I can do something like song["track" + n] but that's what I'm doing right now and my goal is to move my functions into the song JSON object so I can iterate faster... Or is there no performance gain to be had at all if I just moved my functions into the object?

There are a lot of ways to achieve this. I will just propose one way. You can have only one function that performs what you need, a only function that can run in the context of the object you need. Also by injecting the context, you can create references to that function inside other objects, e.g:

function iterator (criteria) {
    var obj = this,
        prop;
    for (prop in obj) {
        //TODO: Add what you need to do in each iteration
        if (obj[prop] == criteria) { return prop; }
    }
}

//mockups
var song1 = { "track0": "data0", "track1": "data1" },
    song2 = { "track0": "data0", "track1": "data1" };

//iterates over song1 object,
//for this case, we look for the property that has the value "data0"
var something = iterator.call(song1, 'data0');
//something = "track0"

Another advantage is that you can also create objects using prototypal inheritance.

If you want to extend your objects by adding the methods, you can do it, as we saw in the previous example, we used this inside the iterator function, and that give us the advantage working with different objects

//extends obj by attaching new methods
//and binding the execution context of the methods
function addMethods(obj) {
    obj.iterator = iterator.bind(obj);
}

addMethods(song1);
addMethods(song2);

//we use the "iterator" method extended inside song2
something = song2.iterator('data1');
//something = "track1"

ooww that's intresting. I kind of want the other way around but you definitely helped a bunch for (prop in obj) {... was kind of what I was looking for haha xD thanks!! — Muggy Ate, Oct 25 '15 at 21:01
I added a new example by extending the object using the *[bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)* method — jherax, Oct 25 '15 at 21:16

Javascript referencing variable name by string within object

3 Answers3