Global scope variable call

Question

I'm trying to give the array projects a global scope and call the array and use the array in the function.

var projects = [{ //GLOBAL SCOPE
    label: "Appels",
    icon: "./Appels".png",
    href: "./Appels".html"
  }, {
    label: "Pears",
    icon: "./Pears.png",
    href: "./Pears.html"
  }];

$(function() {

   var projects = [{ //LOCAL SCOPE
    label: "Appels",
    icon: "./Appels".png",
    href: "./Appels".html"
  }, {
    label: "Pears",
    icon: "./Pears.png",
    href: "./Pears.html"
  }];

  });

How can I make a projects array a global var and assign it in the function?

EDIT: I tried to remove the var from var projects inside the function. When I tried calling it from another page. (When creating 2 array's like the code above it works fine without an error.)

With:

  var randomItem1 = projects[Math.floor(Math.random()*projects.length)];

I'm getting this error:

Uncaught ReferenceError: projects is not defined

When creating 2 array's like the first piece code it works fine without an error. I want 1 array of projects, so it is easier to edit.

remove the `var` keyword before the `project` in your function — The Reason, Jul 09 '18 at 17:46
When you use `var`, you declare new variable. If you want to reassign the variable one level upper, you should just remove `var` inside the function. — P.S., Jul 09 '18 at 17:46
The second `var projects` initializes a local variable called `projects` which supersedes the global variable. Simply remove the declaration of the secondary variable and instead assign to the global variable by using `projects = [{` in your function. — zfrisch, Jul 09 '18 at 17:47
If it's already a global variable, you don't need to redefine it inside the function; it'll be usable as is. (It is not a good idea to use the same name for different variables on different scopes -- i.e. don't mask your global `projects` variable with a different `projects` variable inside a function -- because that's a maintenance nightmare.) — Daniel Beck, Jul 09 '18 at 17:48
@TheReason Thanks you for the input, I already tried doing that but it gave me an error. I have edited my post. — Reginald1234, Jul 09 '18 at 18:19
Possible duplicate of [Calling array in function from external file](https://stackoverflow.com/questions/51235861/calling-array-in-function-from-external-file) — Heretic Monkey, Jul 09 '18 at 18:34
@Reginald1234 Please don't edit your question to add the word SOLVED in it. If you have an answer below that helped you, mark it as "accepted" using the checkmark. See [this part of the help center](https://stackoverflow.com/help/someone-answers). — Heretic Monkey, Jul 09 '18 at 19:56

score 1 · Answer 1 · answered Jul 09 '18 at 17:47

1

You are re-declaring the projects variable in the local scope because you're prefixing it with var.

The most local scope will always take priority so by re-declaring the variable in the local scope you've essentially overwritten the variable.

To use the globally scoped variable in the local scope, simply refer to it the way you would any other variables; That means getting rid of the var in your local scope.

answered Jul 09 '18 at 17:47

Soviut

88,194
49
192
260

Thank you for your answer, I already tried doing that but I got an error. Could you take a look at it. I have edited my post – Reginald1234 Jul 09 '18 at 18:12

Polynomial Proton · Answer 2 · 2018-07-09T19:47:18.187

You already have projects declared in global scope and then you re-declare it again in function.

Here's a cleaner way to do it, so you do not have conflicting variable names.(obviously dont use same name, but there are cases this happens) One of the example this is really useful is when you have multiple pop up windows on a single page and you have conflicting variable names on global level.

Using below approach you always have your global variable for a particular page in that page object. Basically creating a global page object which stores all the required variables or functions.

var pageName = {
    projects : [{ //GLOBAL SCOPE
    label: "Appels",
    icon: "./Appels.png",
    href: "./Appels.html"
  }, {
    label: "Pears",
    icon: "./Pears.png",
    href: "./Pears.html"
  }]
};

$(function() {

//add to global variable
pageName.projects.push({label: "orange",
    icon: "./orange.png",
    href: "./orange.html"});
    
  console.log("Global:" + JSON.stringify(pageName.projects)); //GLOBAL SCOPE
   
   //this is a local variable
   var projects = [{ //LOCAL SCOPE
    label: "Appels",
    icon: "./Appels.png",
    href: "./Appels.html"
  }, {
    label: "Pears",
    icon: "./Pears.png",
    href: "./Pears.html"
  }];

console.log("local:" + JSON.stringify(projects)); //FUNCTION SCOPE
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Shirshendu Bhowmick · Accepted Answer · 2018-07-09T17:51:04.567

-1

In your function just don't use the var keyword, while you use var keyword it implies that you are declaring a new variable. As JavaScript var has global and function level scope, inside your function whenever you are using var it is creating a new projects variable.

If you don't use the var keyword inside your function, JavaScript will first check if there is any projects variable available inside your function's scope, in this case it will not find any variable named projects. Next it will try looking in the global scope. There it will find the projects variable and use it for all reference and assignment purpose in future.

$(function() {

    projects = [{ //LOCAL SCOPE
    label: "Appels",
    icon: "./Appels".png",
    href: "./Appels".html"
  }, {
    label: "Pears",
    icon: "./Pears.png",
    href: "./Pears.html"
  }];

  });

edited Jul 09 '18 at 17:51

answered Jul 09 '18 at 17:47

Shirshendu Bhowmick

433
4
13

1

You should explain why. – zfrisch Jul 09 '18 at 17:47
Thank you for your answer, I already tried doing that but I got an error. Could you take a look at it. I have edited my post – Reginald1234 Jul 09 '18 at 18:12
Checked you edit, but i am sorry i am not able to clearly understand the problem you are facing. I guess that its due to the 2nd file didn't get loaded in correct order but not sure. Is it possible to share the entire code ? You can use https://jsfiddle.net/ and share the link here. – Shirshendu Bhowmick Jul 09 '18 at 18:27
@ShirshenduBhowmick check the snippet. It's not working – lealceldeiro Jul 09 '18 at 20:04

Global scope variable call

3 Answers3