How to set global array

Question

I have a JavaScript function, similar to

function ColorListPicker(listLength) {
    var colorCodeArray = ["#046c93", "#4caf50", "#8bc34a", "#cddc39", "#00bcd4", "#009688", "#e91e63", "#673ab7", "#ff9800", "#9e9e9e", "#f3f3f3"];
    var colorList = "[";
    for (var i = 0; i < listLength; i++) {
        colorList = colorList + '"' + colorCodeArray[i] + '",';
    }
    var colorListData = colorList.substr(0, colorList.length – 1);
    colorListData = colorListData + "]";
    return colorListData;
}

If I call this function normally, like var colorList = ColorListPicker(5);, then the colorList variable is set to the return value, as though I had done colorList=["#046c93", "#4caf50", "#8bc34a", "#cddc39", "#00bcd4"].

But I want to declare colorCodeArray to be a global and use it from my ColorListPicker function.

How can I make ColorListPicker set a global variable, instead of returning a value?

If you want it to be global, just declare it as global. Move it outside of any functions and you're good. — Mike Cluck, May 04 '16 at 18:32
are you sure it's returning an array? It seems you're building a string — Pere, May 04 '16 at 18:46
@ArifulHaque, what are you actually trying to build? Your code doesn't make much sense, it's just a complicated way to `return JSON.stringify(colorCodeArray.slice(0, listLength))`. Do you really want a JSON-string? In this case, the function-name should reflect that in some way. — Thomas, May 04 '16 at 19:18

score 2 · Answer 1 · edited May 23 '17 at 12:16

But now i want to declare colorCodeArray variable global and use it from my ColorListPicker function.

Just extract the array into a global variable and use it within the function:

var colorCodeArray = ["#046c93", "#4caf50", "#8bc34a", "#cddc39", "#00bcd4", "#009688", "#e91e63", "#673ab7", "#ff9800", "#9e9e9e", "#f3f3f3"];  

function ColorListPicker(listLength) {

  // use colorCodeArray within the function

}

Related question: What is the scope of variables in JS

Check out the answer by Rion Williams for other useful suggestions on improving your function

Rion Williams · Answer 2 · 2016-05-04T18:45:14.570

Determining the Proper Scope

Just consider declaring your colorCodeArray variable outside the scope of your ColorListPicker() function, which would make it function as a global variable :

// Now colorCodeArray should be accessible from anywhere you need it
var colorCodeArray = ["#046c93", "#4caf50", "#8bc34a", "#cddc39", "#00bcd4", "#009688", "#e91e63", "#673ab7", "#ff9800", "#9e9e9e", "#f3f3f3"];  

// Define your function here
function ColorListPicker(listLength){
    // Your code here
}

Consider Using slice() Instead Of A Loop

Additionally, it looks like you are attempting to retrieve the first N elements of your array. If that is the case, you could consider using the slice() function which does just that :

function ColorListPicker(listLength){
     // This would return the first N elements from your global array
     return colorCodeArray.slice(0,listLength);
}

Or use join() if you want to build a string...

or if you wanted to explicitly wrap the result in square braces, you could use the join() function to merge the elements of an array into a string using a specific delimiter :

function ColorListPickerAsString(listLength){
    // This would return "['#046c93','#4caf50','#8bc34a','#cddc39','#00bcd4']"
    return '[\'' + colorCodeArray.slice(0,listLength).join('\',\'') + '\']';
}

Example

You can see an example of both of these options here and demonstrated below :

How to set global array

2 Answers2