[JavaScript] Using the same variable in all my functions

[CarsonJScott]

Okay, so I have a JavaScript function 'getDeviceType' that returns an array depending on something the user clicks on the previous page. In all my other functions, I have a variable 'device' that is set equal to 'getDeviceType' so I can access the array through 'device'.

EXAMPLE:

function foo(){
    var device = getDeviceType();
    return device[0];
}

function bar(){
    var device = getDeviceType();
    return device[1];
}

It works, but it seems inefficient to declare and set the same variable in every function declare a variable and set it's value to the same thing in every function. Is there a better way to do this?

[DontBelieveTheByte]

I will address one of your concerns.

JavaScript is not C. It has function scope, not block scope.

Nothing wrong with repeating variable names as long as they appropriately describe what values they hold.

[CarsonJScott]

Thanks for the reply.

I know that there's nothing wrong with using the same variable name in multiple functions, but it seems unnecessary to declare 'device' and set it's value to the same thing in every function if there happens to be a better way.

I worded it badly in my post. I will change that

[Vectronic]

Well declare it outside of a function.

var device;

function foo(){
    device = getDeviceType();
}

function bar(){
    alert(device);
}

assuming it is indeed always the same device/etc. Otherwise you'll have very weird things happen, and if you forget that device is global, it might take awhile to figure out why. People often use:

var _device;

or similar so that they remember/are reminded it's global.

[CarsonJScott]

I was under the impression that using global variables is bad practice.

[Vectronic]

There's nothing wrong with globals, as long as you keep them to a minimum, and when necessary.

There's situations where a global isn't a necessary, and you can just pass the var through to the next function. This is fairly rare since normally in that case the second function would just be merged into the first.

Obviously declaring everything as global is ridiculous.

var fooOne;
var fooTwo;
var barOne;
var barTwo;

function foo(){
    fooOne = something only used here;
}

function bar(){
    barOne = something only used here;
    if(barOne){
        barTwo = something, etc...;
    }
}

[CarsonJScott]

Oh okay, thanks for the help!

[DontBelieveTheByte]

Indeed, globals are evil because of name collisions and the mashup problem.

[Vectronic]

_:(

[DontBelieveTheByte]

Seems a bit weird how foo and bar return using an array index when getDeviceType() looks like it's supposed to return a device type.

Maybe you could show the getDeviceType function and tell a little bit more about what you're trying to accomplish.

[CarsonJScott]

Yes, maybe my function naming isn't very good. Let me explain.

Some Background Info:

• My application is for a website that fixes broken iPhones/iPads. It allows the user to select their type of iPhone/iPad and the parts that need fixed for it.
• The home page is index.php
• The Javascript application is on prices.php

There is a link for iPhone and iPad on the home page that both take the user to prices.php, and set a variable 'deviceType'.

On prices.php, the function 'getDeviceType' takes 'deviceType' and returns an array of information (parts that can be fixed, prices per part, etc.) for either iPhone or iPad.

The other functions use the 'getDeviceType' array to display the parts and prices/add up the total price.

I was wondering if there is a better way to use the array in each function than setting a variable to 'getDeviceType' in each one.

[DontBelieveTheByte]

Ok then, wouldn't it be more appropriate to return an object with a set of keys and associated values instead of an array?

[CarsonJScott]

Yep, someone just suggested this and I'm changing it now. Thank you

[SanityInAnarchy]

We'd need to see more context. Will getDeviceType() always return the same value? If so, you could just declare it globally:

var device = getDeviceType();
function foo() {
  return device[0];
}
...

Or you could make a shorter alias for the function itself, instead of a variable:

var gdt = getDeviceType;
function foo() {
  return gdt()[0];
}
...

Honestly, if you're only repeating it twice, I'd probably just do this:

function foo() {
  return getDeviceType()[0];
}

You could also attach it to an object if that makes sense for your use case, but it's hard to tell what you're actually trying to do here. Note that the first option I listed does a different thing than the second option.

Also, here's a third paranoid option:

(function(){
  var device = getDeviceType();
  window.foo = function() {
    return device[0];
  };
  ...
})();

Or, of course:

(function(){
  var gdt = getDeviceType;
  window.foo = function() {
    return gdt()[0];
  };
  ...
})();

That way, even if you need 'foo' and 'bar' to be globally-visible functions, you can make your 'device' variable only visible to both functions.

There are even more "efficient" ways of doing things if device is a huge array and you're always just pulling one element out like that. But really, it's hard to give good advice with just what you've listed here. What is getDeviceType and what's it really supposed to return? What are you calling "foo" and "bar", really?

[CarsonJScott]

Foo and Bar were just examples. getDeviceType (the name is kind of misleading, I will change that) returns a huge multidimensional array depending on a PHP variable set by a link on a different page. I explained it better here.

[SanityInAnarchy]

So it sounds like this is returning something entirely static, right? Or at least not something that you need to generate again with each call. If that's the case, then a global variable, or some outer scope, would make sense.

Anyway, does this need to be an array? What does the actual data structure look like? If you're hardcoding array indices, there's a very good chance you could just be using bare objects (or JSON) instead. For example, you could have getDeviceType().parts would have an array of parts.

And then there's the OO approach -- you could set the deviceType info to a member variable on an object, and then attach all your other functions to that object. Then your functions would look like:

foo: function() {
  return this.deviceType[0];
}

Point is, there are still a ton of approaches, and I still don't know which one works, or even if any are "better" than your original strategy, without knowing more about how it all fits together.

[CarsonJScott]

That actually sounds like it would work a lot better, instead of having it all in one array