Javascript · Objects
Creating Objects (key-value pairs)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Describing One Codémon
An array is great for a list of similar things. But how do you describe one Codémon, with its name, its type and its level? Separate variables get messy fast:
let aquachuName = "Aquachu";
let aquachuType = "water";
let aquachuLevel = 5;
console.log(aquachuName + " is a " + aquachuType + " type");
An object groups these values under one variable, each with a label called a key. You read a value with a dot followed by its key:
const aquachu = {
name: "Aquachu",
type: "water",
level: 5
};
console.log(aquachu.name + " is a " + aquachu.type + " type");
Exercise 2 — Anatomy of an Object
const name = {
key1: value1,
key2: value2
};
1. Curly braces `{` and `}` open and close the object
2. Each property is a `key: value` pair, with a colon in between
3. Properties are separated by commas
Values can be of any type: strings, numbers, booleans, even arrays.
const zap = {
name: "Zap",
level: 3,
shiny: true,
moves: ["Spark", "Thunder"]
};
console.log(zap.level);
console.log(zap.shiny);
console.log(zap.moves[0]);
Like arrays, `typeof` says `"object"`. And the same `const` rule applies: the variable can't be reassigned, but the content can change.
Exercise 3 — Spot the Object
Which line creates an object describing Pyrochu?
Options
• ```const pyrochu = { name: "Pyrochu", level: 7 };```
• ```const pyrochu = [ name: "Pyrochu", level: 7 ];```
• ```const pyrochu = { name = "Pyrochu", level = 7 };```
• ```const pyrochu = ( name: "Pyrochu", level: 7 );```
Hint : Check both the brackets and the sign between each key and its value.
Exercise 4 — Build Pyrochu
Complete the object so it has a `name` and a `level`.
const pyrochu = ____
name____ "Pyrochu",
level: 7
____;
console.log(pyrochu.name);
Options: { : } [ ] =
Hint : Objects have their own pair of brackets, and their own separator between key and value.
Exercise 5 — About Keys
Keys are names, written without quotes when they look like variable names. If a key contains a space or a special character, wrap it in quotes:
const rockachu = {
name: "Rockachu",
"max hp": 80,
level: 9
};
console.log(rockachu.level);
Reading `"max hp"` with a dot won't work: you'll learn the other way to access it in the next chapter. Simple keys in camelCase avoid the problem entirely: `maxHp` instead of `"max hp"`.
Order doesn't matter
Unlike arrays, an object's properties have no position. `{ a: 1, b: 2 }` and `{ b: 2, a: 1 }` describe the same thing.
Exercise 6 — Quiz: What Type?
What does this code print?
const bag = { potions: 3, gold: 120 };
console.log(typeof bag);
Options
• ```"object"```
• ```"array"```
• ```"bag"```
• ```"number"```
Hint : Arrays and objects share the same family.
Exercise 7 — Empty Objects
Like an empty array `[]`, an object can start empty: `{}`. Useful when you'll fill it later, as you'll see in a few chapters.
const stats = {};
console.log(typeof stats);
console.log(stats.hp);
Asking an empty object for `hp` gives `undefined`: no error, just "there's nothing here". Same behaviour as an index that doesn't exist in an array.
Exercise 8 — Objects at a Glance
Match each element with its description.
Items to match
• {}
• level: 5
• typeof {}
• ,
Definitions
• An empty object
• A property: key and value
• "object"
• Separates two properties
Exercise 9 — Zap's Moves
Add a `moves` property holding the two attacks, and finish the `level` property.
const zap = {
name: "Zap",
____: ["Spark", "Thunder"],
level____ 3
};
console.log(zap.moves[1]);
console.log(zap.level);
Options: moves : = ; attacks
Hint : The key must match what is read below the object, and every property uses the same separator.
Exercise 10 — Quiz: Array or Object?
You want to store the name, type, HP and level of a single Codémon. What fits best?
Options
• An object: each value has a meaningful key
• An array: values are accessed by position
• Four separate arrays
• A single string
Hint : Ask yourself whether the values are a list of similar things or a set of different traits.
Exercise 11 — Florachu's Card
Create Florachu's card.
1. Create a constant `florachu` with the properties `name` (`"Florachu"`), `type` (`"plant"`), `level` (4) and `moves` (an array with `"Vine"` and `"Leaf Storm"`)
2. Print `"Florachu is a plant type, level 4"` using the object's properties
3. Print `"First move: Vine"` using the object too
Starter code
// Write your code here