How to access Javascript variable values outside of the function

Question

I've been banging my head off a brick wall with this one and another all nighter with no success. What I would like to do is have access to the values set in an array within a function but outside of that function. How could this be done? For example:

function profileloader()
{
    profile = [];
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
}

I would then further down the page within a paragraph tag have something like:

document.write("Firstname is: " + profile[0]);

Obviously that would be contained with in the script tag but all i'm getting is an error on the console stating: "profile[0] is not defined".

Anyone got any ideas where I'm going wrong? I just can't seem to figure it out and none of the other solutions I've seen when passing values from either function to function or outside of a function, have worked so far.

Thank you to anyone who can help me with this, its probably something simple I've missed!

mplungjan · Accepted Answer · 2024-11-15 09:59:30Z

9

Since you do NOT have a var in front of the profile=[];, it is stored in the global window scope.

What I suspect is that you forgot to call the profileloader() before using it.

It is good practice is to declare your global variables in an obvious manner, as shown in other answers on this page

It is not considered good practice to rely on side effects.

It is also not good practise to use document.write - it will, for example, wipe the page if executed after load.

Commented code to show what is going on, NOTE not recommended method:

This should work. And it does work:

function profileloader() {
  profile = []; // no "var" makes this global in scope
  profile[0] = "Joe";
  profile[1] = "Bloggs";
  profile[2] = "images/joeb/pic.jpg";
  profile[3] = "Web Site Manager";
}
profileloader(); // mandatory
document.write("Firstname is: " + profile[0]);

Preferred:

document.addEventListener('DOMContentLoaded', () => { // when the page loads
  let profiles = []; // now in scope of the load event handler

  const profileLoader = () => {
    // Simulate an Ajax call and populate the profiles array
    profiles.push({
      "First name": "Joe",
      "Last name": "Bloggs",
      "Job title": "Web Site Manager",
      "img": "images/joeb/pic.jpg"
    });
    profiles.push({
      "First name": "Jane",
      "Last name": "Bloggs",
      "Job title": "CIO",
      "img": "images/janeb/pic.jpg"
    });
  };

  profileLoader(); // mandatory

  const profilesContainer = document.getElementById('profiles'); // Assuming <div id="profiles"></div> exists

  profiles.forEach(profile => {
    // Create a div for each profile
    const div = document.createElement('div');
    div.classList.add('profile');
    // Loop through profile keys and dynamically create elements
    Object.entries(profile).forEach(([key, value]) => {
      const isImage = key === 'img';
      const elem = document.createElement(isImage ? 'img' : 'span');
      if (isImage) elem.src = value;
      else elem.textContent = `${key}: ${value}`;
      elem.classList.add(key.replace(/\s+/g,''));
      div.appendChild(elem); 
      if (!isImage) div.appendChild(document.createElement('br')); // Add line breaks for non-image fields
    });
    
    // Append the profile div to the container
    profilesContainer.appendChild(div);
  });
});

.profile { border-bottom: 1px solid black; }

<div id="profiles">
</div>

edited Nov 15, 2024 at 9:59

answered May 23, 2012 at 5:49

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RobG Over a year ago

Please don't recommend undeclared variables, far better to declare them in the scope they are to be used in and then assign to them.

mplungjan Over a year ago

Where am I recommending undeclared vars?

RobG Over a year ago

Well, you didn't recommend declaring them, ipso facto you recommended not declaring them. :-)

mplungjan Over a year ago

I now moved my recommendation to where it is more clear I believe

GeordieDave1980 Over a year ago

Thanks for the advice and help here guys, its all sorted thanks to your great input! :-)

|

Joseph · Accepted Answer · 2012-05-23 05:40:23Z

6

declare it outside the function so the outside scope can see it (be careful of globals though)

var profile = [];
function profileloader(){
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
}

or have the function return it:

function profileloader(){
    var profile = [];
    profile[0] = "Joe";
    profile[1] = "Bloggs";
    profile[2] = "images/joeb/pic.jpg";
    profile[3] = "Web Site Manager";
    return profile;
}

var myprofile = profileloader(); //myprofile === profile

answered May 23, 2012 at 5:40

Joseph

120k31 gold badges186 silver badges238 bronze badges

3 Comments

mplungjan Over a year ago

Good assumption, but not correct. The lack of the var makes it a global variable.

RobG Over a year ago

@mplungjan—there's nothing "incorrect" about it. It's much better to explicitly declare it as a global so it's obvious that the scope is intended to be global, rather than accidental, to someone else who may be maintaining the code.

mplungjan Over a year ago

I meant, the assumption that the OP's problem is due to undeclared vars is incorrect. Sorry if that was not clear. If re-read my answer which is NOT suggesting to USE locally declared global vars, you will see what I mean.

Collectives™ on Stack Overflow

How to access Javascript variable values outside of the function

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related