JS course on freeCodeCamp, using Objects

Hi, Im doing the JS course on freeCodeCamp and there is something I cant quite understand.
In the course you make a simple text based rpg game, one of the things you do is create an object for the locations and a update function which takes locations as an argument. What I dont understand is that both loaction and locations can be used even though the is no variable, function or object calles location. Does the program just assume that they are the same? Here is the code. if you look into the update function you see location being used for all of it, even tho location “doesnt exist”.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = [“stick”];

const button1 = document.querySelector(‘#button1’);
const button2 = document.querySelector(“#button2”);
const button3 = document.querySelector(“#button3”);
const text = document.querySelector(“#text”);
const xpText = document.querySelector(“#xpText”);
const healthText = document.querySelector(“#healthText”);
const goldText = document.querySelector(“#goldText”);
const monsterStats = document.querySelector(“#monsterStats”);
const monsterName = document.querySelector(“#monsterName”);
const monsterHealthText = document.querySelector(“#monsterHealth”);
const weapons = [
{ name: ‘stick’, power: 5 },
{ name: ‘dagger’, power: 30 },
{ name: ‘claw hammer’, power: 50 },
{ name: ‘sword’, power: 100 }
];
const monsters = [
{
name: “slime”,
level: 2,
health: 15
},
{
name: “fanged beast”,
level: 8,
health: 60
},
{
name: “dragon”,
level: 20,
health: 300
}
]
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.”
},
{
name: “cave”,
“button text”: [“Fight slime”, “Fight fanged beast”, “Go to town square”],
“button functions”: [fightSlime, fightBeast, goTown],
text: “You enter the cave. You see some monsters.”
},
{
name: “fight”,
“button text”: [“Attack”, “Dodge”, “Run”],
“button functions”: [attack, dodge, goTown],
text: “You are fighting a monster.”
},
{
name: “kill monster”,
“button text”: [“Go to town square”, “Go to town square”, “Go to town square”],
“button functions”: [goTown, goTown, goTown],
text: ‘The monster screams “Arg!” as it dies. You gain experience points and find gold.’
},
];

// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;

function update(location) {
monsterStats.style.display = “none”;
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;
}

function goTown() {
update(locations[0]);
}

function goStore() {
update(locations[1]);
}

function goCave() {
update(locations[2]);
}

function buyHealth() {
if (gold >= 10) {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
} else {
text.innerText = “You do not have enough gold to buy health.”;
}
}

function buyWeapon() {
if (currentWeapon < weapons.length - 1) {
if (gold >= 30) {
gold -= 30;
currentWeapon++;
goldText.innerText = gold;
let newWeapon = weapons[currentWeapon].name;
text.innerText = "You now have a " + newWeapon + “.”;
inventory.push(newWeapon);
text.innerText += " In your inventory you have: " + inventory;
} else {
text.innerText = “You do not have enough gold to buy a weapon.”;
}
} else {
text.innerText = “You already have the most powerful weapon!”;
button2.innerText = “Sell weapon for 15 gold”;
button2.onclick = sellWeapon;
}
}

function sellWeapon() {
if (inventory.length > 1) {
gold += 15;
goldText.innerText = gold;
let currentWeapon = inventory.shift();
text.innerText = "You sold a " + currentWeapon + “.”;
text.innerText += " In your inventory you have: " + inventory;
} else {
text.innerText = “Don’t sell your only weapon!”;
}
}

function fightSlime() {
fighting = 0;
goFight();
}

function fightBeast() {
fighting = 1;
goFight();
}

function fightDragon() {
fighting = 2;
goFight();
}

function goFight() {
update(locations[3]);
monsterHealth = monsters[fighting].health;
monsterStats.style.display = “block”;
monsterName.innerText = monsters[fighting].name;
monsterHealthText.innerText = monsterHealth;
}

function attack() {
text.innerText = “The " + monsters[fighting].name + " attacks.”;
text.innerText += " You attack it with your " + weapons[currentWeapon].name + “.”;
health -= monsters[fighting].level;
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
defeatMonster();
}
}

function dodge() {
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
}

function defeatMonster() {
gold += Math.floor(monsters[fighting].level * 6.7);
xp += monsters[fighting].level;
goldText.innerText = gold;
xpText.innerText = xp;
update(locations[4]);
}

function lose() {
update(locations[5]);
}

Hello, Good question as I`ve wonderd about how or why a given word automatically changes to the plural form, this might explain better :grinning:

Yes, “location” is a keyword in

JavaScript

. It is a read-only property of the window object that represents the current URL. It can be used to access the href, protocol, host,

hostname

, port, pathname, search, and hash of the current page.

Here are some examples of how to use the location keyword:

// Get the current URL
const url = window.location.href;

// Get the protocol
const protocol = window.location.protocol;

// Get the host
const host = window.location.host;

// Get the hostname
const hostname = window.location.hostname;

// Get the port
const port = window.location.port;

// Get the pathname
const pathname = window.location.pathname;

// Get the search
const search = window.location.search;

// Get the hash
const hash = window.location.hash;

Use code with caution.

Learn more

It is important to note that the location keyword is a reserved word in JavaScript, which means that it cannot be used as a variable name or function name. If you try to use the location keyword as a variable name or function name, you will get a

syntax

error.

@2000achmed

Hey there,

In javascript there are 3 types of scopes:

  1. Global scope
  2. Function scope
  3. Block scope

Let’s confine our discussion with only Function scope for now, as it is enough to clear your doubt.

Function scope says that, a variable created inside a function, can only be accessed/re-assigned inside that function(i.e. between the curly braces of the function definition).

Now, when you create a function with a parameter to recieve an argument that will be passed during function calling, the parameter is implicitly declared/created and is/can be used only inside that function, meaning that it attains function scope.

So when we declare a function called update as shown below, an argument will be passed everytime the function update is called, for example update(locations[0]). This argument locations[0] will be recieved by the parameter location. The variable location will be created at the instant when the function starts executing and will be disposed once the function finished executing, because it has function scope

function update(location) {
monsterStats.style.display = “none”;
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;
}

The parameter can be named according to your wish. For example you can name the parameter as, let’s say place, and start using the variable place instead of location inside the function update.

I hope I cleared your doubt. If it still seems confusing or if you need any further clarification please feel free to ask.

Happy Coding :keyboard: !

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.