Learn Basic JavaScript by Building a Role Playing Game Question Step 69

[Kaijyuu]

Hello, first, here we are creating a RPG, they make us create a variable using “locations” with 2 objects inside it as follows:

const locations = [
    {
        name: "town square",
        "button text": ["Go to store", "Go to cave", "Fight dragon"],
        "button functions": [goStore, goCave, fightDragon],
        text: "You are in the town square. You see a sign that says \"Store\"."
    },
    {
        name: "store",
        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
        "button functions": [buyHealth, buyWeapon, goTown],
        text: "You enter the store."
    },
];

As you can see we also create a function to update said locations, as follows:

function update(location) {
  button1.innerText = location["button text"][0];
  button2.innerText = location["button text"][1];
  button3.innerText = location["button text"][2];
  button1.onclick = location["button functions"][0];
  button2.onclick = location["button functions"][1];
  button3.onclick = location["button functions"][2];
  text.innerText = location.text;
}

and this works fine. BUT my question is, WHY does the function use parameter “location”, as in "function update(location)", instead of the variable we created that is “locationS” as in “const locations”. I don’t understand this because what is telling the function to get the info from the objects we have in the variable “locations” if we’re telling the function to look for them in something called “location”, shouldn’t they be the same? as in: “const locations” and “function update(locations)”?

obviusly for some reason not, because as soon as I change it the code stops working I just started JS today and I just want to make sure I understand what I’m doing before I move on.

[sanity]

This is making function more reusable and robust. Instead of relying on the global object from outside of the function scope (locations), used will be object that’s passed in as argument when update function is called (location).

[Kaijyuu]

Thanks for the reply, but what is telling the function to get the data from the locations variable if we’re using location, which is different from locations. How does the function get the data from the variable if we don’t seem to reference it anywere inside the function?

[sanity]

That’s the thing, locations is not directly referenced. Only the function parameter - location is used.

function update(location) {

When update is called, the specific single location is passed as argument.

update(locations[0]);

And later within the function that’s the location that can be accessed with location variable.

[pkwandera1]

Usually a function is called or executed, it go without an argument or with argument depending on the design.

Those function without arguments look like this

function functionName() {

// code to be executed

}

those with arguments make the code more flexible, because the argument is used with the code that is executed and generally look like this

function functionName(argument) {

// code to be executed (with the argument in any way or manner according to the design)

}

here is an example

function addNumbers(a, b) {

return a + b;

}

// Calling or executing the function

let result = addNumbers(5, 3);

console.log(result); // Outputs 8

Thus, in the question you have, the word location is not necessarily need to be referenced outside of the function. It is not a variable but it is an argument to be used within the function. In fact it can take any name, but for clarity and code readability, the word location is used to show that the argument is being picked from the variable locations.
It must however be inside the function, as you have seen;

function update(location) {
  button1.innerText = location["button text"][0];
  button2.innerText = location["button text"][1];
  button3.innerText = location["button text"][2];
  ...

The term location is started off as an argument update(location), then inside the function, it is placed where it is to be used, button2.innerText = location[“button text”][1];.
I hope this helps.