Learning JavaScript, Day 23 – Displaying and Constructing Objects

15 Jun, 2026

I am actually procrastinating on my reading with JavaScript. I never thought I'd actually do that, but, hey, it's reading about blockchain or it's learning JavaScript, and... well... yep.

Besides, I have, like, two more things to tackle in Objects, so I might as well get those over with, huh?

Man, though, I gotta remember all the JavaScript I did before. Whoops.

Displaying Objects

So when you create an object and then try to display it, JavaScript goes "Oh, hey, that should be a string," and the object goes "No, I'm an object".

const pokemon = {
	name: "Magikarp",
	type: "Water",
	move: "Splash"
};
let character = pokemon;
document.getElementById("demo").innerHTML = character;

Which means that, because the girls are fighting, you get

[object Object]

There are a few ways to make it behave.

Displaying Object Properties

The easiest is, really, just displaying all the properties.

const pokemon = {
	name: "Magikarp",
	type: "Water",
	move: "Splash"
};
let character = pokemon.name + ", " + pokemon.type + 
", " + pokemon.move;
document.getElementById("demo").innerHTML = character;

Magikarp, Water, Splash

It's a bit fiddly, since you have to remember all the properties you've included in your object, but it definitely displays them all.

Using A `For .. In` Loop

You can also build in a loop and display all the properties that way.

const pokemon = {
	name: "Magikarp",
	type: "Water",
	move: "Splash"
};
let character = "";
for (let x in pokemon) {
	character += pokemon[x] + " ";
};
document.getElementById("demo").innerHTML = character;

Magikarp Water Splash

That's good if you don't remember how many properties are in your object or if you have a bunch of objects with varying amounts of properties.

Like, say, if I did

const pokemon = {
	name: "Magikarp",
	type: "Water",
	move: "Splash"
};
const pokemon2 = {
	name: "Pikachu",
	type: "Electric",
	move: "Thunderbolt",
	move2: "Thunder Shock",
	move3: "Quick Attack"
};

let character = "";
for (let x in pokemon) {
	character += pokemon[x] + " ";
};

let character2 = "";
for (let x in pokemon2) {
	character2 += pokemon2[x] + " ";
};
document.getElementById("demo").innerHTML = character + 
"<br>" + character2;

I get

Magikarp Water Splash
Pikachu Electric Thunderbolt Thunder Shock Quick Attack

And I don't have to remember how many moves I gave Pikachu.

I do have to remember to use object[x] rather than object.x because x is a variable, not a property.

Creating an array with `Object.values()`

I can also apparently create an array from the properties and then put that into a string.

const pokemon = {
	name: "Magikarp",
	type: "Water",
	move: "Splash"
};
const pokeArray = Object.values(pokemon);
let character = pokeArray.toString();
document.getElementById("demo").innerHTML = character;

Magikarp,Water,Splash

But that seems awfully fiddly. But Object.values(objectname) is a way to create an array from an object, so you can do array things with your object.

Creating a loop with `Object.entries()`

Or I can create a loop using Object.entries().

const pokemon = {
	Name: "Magikarp",
	Type: "Water",
	Move: "Splash"
};

let text = "";
for (let [pokedex, creature] of Object.entries(pokemon)) {
	text += pokedex + ": " + creature + "<br>";
}

document.getElementById("demo").innerHTML = text;

Name: Magikarp
Type: Water
Move: Splash

This is nice, I like this. I can have all my Pokémon in this style.

const pokemon = {
	Name: "Magikarp",
	Type: "Water",
	Move: "Splash"
};
const pokemon2 = {
	Name: "Pikachu",
	Type: "Electric",
	Move: "Thunderbolt",
	Move2: "Thunder Shock",
	Move3: "Quick Attack"
};

let text = "";
for (let [pokedex, creature] of Object.entries(pokemon)) {
	text += pokedex + ": " + creature + "<br>";
}
let text2 = "";
for (let [pokedex2, creature2] of Object.entries(pokemon2)) {
	text2 += pokedex2 + ": " + creature2 + "<br>";
}

document.getElementById("demo").innerHTML = text + 
"<br>" + text2;

Name: Magikarp
Type: Water
Move: Splash

Name: Pikachu
Type: Electric
Move: Thunderbolt
Move2: Thunder Shock
Move3: Quick Attack

Okay, it's a bit fiddly, but, hey, check it out, I got my Magikarp and my Pikachu and all their moves.

Using `JSON.stringify()`

I don't know about this one. Like, I see what it's doing, but I don't know near enough about JSON to understand why I would do this.

const pokemon = {
	Name: "Magikarp",
	Type: "Water",
	Move: "Splash"
};
let text = JSON.stringify(pokemon);

document.getElementById("demo").innerHTML = text;

{"Name":"Magikarp","Type":"Water","Move":"Splash"}

I suppose that's something I can figure out later.

Object Constructors

Oh, this is good, this is what I want to do. Create many objects of the same type.

This is where I get my Pokémons in order.

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

document.getElementById("demo").innerHTML = 
"My favourite Pok&eacute;mon is " + magikarp.pokeName + "!";

My favourite Pokémon is Magikarp!

The example on W3Schools threw me for a bit, because it was using age, and it had age as the property name in the function and as the value, so it was like

this.age = age;

Which meant that I thought it'd be magikarp.name. But, no, it's whatever is after this in the function.

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

document.getElementById("demo").innerHTML = 
"My favourite Pok&eacute;mon is " + magikarp.pokeName + 
"! My second favourite is " + slowpoke.pokeName + "!";

My favourite Pokémon is Magikarp! My second favourite is Slowpoke!

So I can go...

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

document.getElementById("demo").innerHTML = 
magikarp.pokeName + " used " + magikarp.pokeMove + 
"!<br>It was not effective!<br>" + pikachu.pokeName + 
" used " + pikachu.pokeMove + "!<br>It was super effective!";

Magikarp used Splash!
It was not effective!
Pikachu used Thunderbolt!
It was super effective!

That should not amuse me as much as it is.

Default Values in a Constructor

You can put in default values as well.

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
	this.pokeOwner = "Kate";
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

document.getElementById("demo").innerHTML = 
"I found a " + magikarp.pokeName + " that was owned by " 
+ magikarp.pokeOwner + ".<br>I also found a " + pikachu.pokeName 
+ " that was owned by " + pikachu.pokeOwner + ".";

I found a Magikarp that was owned by Kate.
I also found a Pikachu that was owned by Kate.

Adding A New Property

And if I ever need to add a new property, I just pop it in.

pikachu.pokeOwner = "Ash";

I found a Magikarp that was owned by Kate.
I also found a Pikachu that was owned by Ash.

But I can't add a new property to the constructor separately. So if I didn't have pokeOwner in there already

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

Pokemon.pokeOwner = "Ash";

document.getElementById("demo").innerHTML = 
"I found a " + magikarp.pokeName + " that was owned by " 
+ magikarp.pokeOwner + ".<br>I also found a " + pikachu.pokeName 
+ " that was owned by " + pikachu.pokeOwner + ".";

I'd get

I found a Magikarp that was owned by undefined.
I also found a Pikachu that was owned by undefined.

You need to put prototype in for it to work.

Pokemon.prototype.pokeOwner = "Kate";

I found a Magikarp that was owned by Kate.
I also found a Pikachu that was owned by Kate.

Yeah, Ketchum, that's my Pikachu now.

Adding methods

So along with properties, I can have methods in my constructors.

function Pokemon(name, type, move) {
	this.pokeName = name;
	this.pokeType = type;
	this.pokeMove = move;
	this.pokeBattle = function() {
		return this.pokeName + " uses " + this.pokeMove;
	}
}

const magikarp = new Pokemon("Magikarp", "Water", "Splash");
const pikachu = new Pokemon("Pikachu", "Electric", "Thunderbolt");
const slowpoke = new Pokemon("Slowpoke", "Water/Psychic", "Confusion");

document.getElementById("demo").innerHTML = 
	magikarp.pokeBattle() + "<br>" + slowpoke.pokeBattle();

Magikarp uses Splash
Slowpoke uses Confusion

(I forgot to add the () at the end of my methods initially. But then I remembered. It's been a while, okay?)

And then it's the same for adding a method to the object and to the constructor as it is for doing it with properties.

Which is nice.

Built-in Constructors

JavaScript has built-in constructors for objects, but they don't show me exactly what I can do with them, just that they're objects.

But I can use

Object()
Array()
Map()
Set()
Date()
RegExp()
Function()

And if I go, like typeof new regExp() I get object, but that doesn't really tell me what goes in that object.

I bet it makes sense down the line.

There are also shorthand bits that can replace the text versions.

So if I wanted new Object(), I can just use {}. If I wanted new Array(), I just use []. If I want new RegExp(), I use /()/.

Again, not 100% sure what I would use these for, but it's good to know.

They call them literals. I will have to remember that.

And that's it for Objects!

Day 23 — Results

You can't display an object just as it is. You need to display the properties or methods within it.
You can display the properties by naming them individually, creating a for .. in loop, creating an array with Object.values(), creating a loop with Object.entries(), or using JSON.stringify().
Object.entries() is pretty neat.
You can make a template for multiple objects. It's called a constructor.
You make a constructor by going function Objectname(property) { this.propertyValue = property;}.
You then make all the objects just by going const object = new Objectname("propertyvalue").
You can put default values into the constructor.
You can also add new properties into the constructor for a particular object just like you would for any object.
If you want to add a new property for the constructor that applies to all the objects, you use Objectname.prototype.propertyvalue = "propertyvalue".
You can also have methods in a constructor, just like you can with all the regular objects.
And you can add new methods into objects.
And use Objectname.prototype.methodValue = function() {method details;} to add to all the objects.
There is a list of built-in constructors.
There are also literal bits that are shorthand for those built-in constructors.

The next section is on Scope. I don't know when exactly I'll get into that — maybe next week. But it felt good to finish off Objects, at least.

Alas, blockchain waits for no one.

Today's Sticker

A cute illustration of Pikachu wearing his detective hat and holding a takeaway cup of coffee. Underneath him it says

It was EM-Con this weekend, which means, of course, more stickers.

This is Detective Pikachu from jennifayrie, or, as she calls him Coffee Addict.

I actually have a lot of her pins, because they're freakin' adorable including Coffee Addict and Baby Blathers. I picked up a bunch of stickers at her table, so expect a lot more to appear.

#kate learns javascript #kate learns web development #programming