Learning JavaScript, Day 22 – Object Properties, Methods, and this

04 Jun, 2026

Oh my god, JavaScript, I missed you. I never thought I would be saying that, but I also never thought I'd have to read a sentence like

Ostensive and performative aspects are mutually constitutive since ostensive aspects are the social structure that enables and constrains human actions, while the performance of a routine produces and reproduces the ostensive aspects through recurrent enactments.

From Wolf, Bartelheimer, & Beverungen's paper "Digitalization of Work Systems — An Organizatioanl Routines' Perspective".

More on that tomorrow, but right now, god, I need good clear easy to cope with W3Schools to make everything better.

Object Properties

So as we learned last time, when you create an object, you put in all the properties, which are values for that object.

Last time I used a ball of yarn, which worked out really well, so this time, I'm using a different ball of yarn.

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
}

Two skeins of yarn on a weathered wooden surface. The one in the back is a large skein of sock wool in blue, teal, purple, and pink colours. The one in the front is a much smaller skein, mostly in gold.

The blue one in this photo, from Buttoned Up and Pinned Down. It was the last of it in stock, so it's not for sale any more, alas.

Object properties can be in three forms:

Dot notation
Bracket notation
Expression

Dot notation is when you call the properties from an object by using

objectName.propertyName

So if I wanted to know what weight my yarn is, it would be

yarn.weight

You can call the properties by also using brackets.

objectName["propertyName"]

So if I wanted to know the colour of the yarn, it'd be

yarn["colour"]

While dot notation is easier to read and preferred, sometimes you have to use brackets if the property name is stored in a variable, like

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
};
let y1 = "amount";
let y2 = "weight";
let yarnType = yarn[y1] + " " + yarn[y2];
document.getElementById("demo").innerHTML = yarnType;

Which returns

100g Sock

Like it should.

But if I were to turn yarnType into dot notation

let yarnType = yarn.y1 + " " + yarn.y2;

I get

undefined undefined

Changing Properties

You can change the value of a property after you've added it into the object.

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
};
yarn.amount = "200g";
document.getElementById("demo").innerHTML = 
yarn.amount + " " + yarn.weight;

And magically, I have 200g of sock yarn. (Which I kinda wish I did, because then I could make a giant shawl.)

I can also add new properties after the fact.

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
};
yarn.brand = "Buttoned Down and Pinned Up";
document.getElementById("demo").innerHTML = 
yarn.brand + " " + yarn.colour;

And now the person that's made the yarn is in the object.

And I can delete properties.

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
};
delete yarn.colour;
document.getElementById("demo").innerHTML = 
yarn.amount + " " + yarn.weight + " in " + yarn.colour;

And now the colour is undefined. Which, alas, is true, because Mermaids Tail is sold out.

Checking Properties

If I want to check whether or not I've put in all the necessary properties into my object, I can.

const yarn = {
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon"
};
let result = ("weight" in yarn);
let noresult = ("brand" in yarn);
document.getElementById("demo").innerHTML = 
result + " " + noresult;

I have weight in there, so that gets a true, but I left off brand, so that gets a false.

Nested Objects

Properties can be objects themselves.

const yarnMerchant = {
	name: "Buttoned Up and Pinned Down",
	storefront: "Etsy",
	location: "UK",
	yarnPurchased: {
		amount:"100g",
		colour:"Mermaids Tail",
		weight: "Sock",
		type:"Superwash Merino and Nylon"
	}
}
document.getElementById("demo").innerHTML = 
yarnMerchant.name + " " + yarnMerchant.yarnPurchased.colour;

I suppose this would make more sense being a database, but now if I wanted to create an entire "Catalogue of all the yarn I purchased" JavaScript file, I could.

It also shows how you can use variables and bracket notation to do the same thing as dot notation.

const yarnMerchant = {
	name: "Buttoned Up and Pinned Down",
	storefront: "Etsy",
	location: "UK",
	yarnPurchased: {
		amount:"100g",
		colour:"Mermaids Tail",
		weight: "Sock",
		type:"Superwash Merino and Nylon"
	}
}
let y1 = "yarnPurchased";
let y2 = "colour"
document.getElementById("demo").innerHTML = 
yarnMerchant.name + " " + yarnMerchant[y1][y2];

But I'm not 100% sure why you would do that. I'd have to see it in action.

Object Methods

And as we learned last time, if you want to put a function into an object, it's called a method.

const yarn = {
	brand: "Buttoned Up and Pinned Down",
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon",
	fullYarn: function() {
		return this.brand + " " + this.amount + 
		" " + this.weight + " " + this.type + 
		" in " + this.colour;
	}
};
document.getElementById("demo").innerHTML = yarn.fullYarn();

It took me a couple of minutes to remember that if you don't put in the () when you're calling the method, it just returns the actual function. It's been a couple of weeks, okay?

And when I use this, it refers to the object the function is in. So when I do this.property, that's the property of the object I'm currently in.

So I can do

const yarn = {
	brand: "Buttoned Up and Pinned Down",
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon",
	fullYarn: function() {
		return this.brand + " " + this.amount + 
		" " + this.weight + " " + this.type + 
		" in " + this.colour;
	}
};
let listing = yarn.fullYarn();
document.getElementById("demo").innerHTML = listing;

But I can't do

let listing = this.fullYarn();

Because I'm not in the object any more.

W3Schools then reminds me that I have to include the () when I call the method. Where were you five minutes ago, huh? Huh?

Changing Methods

You can add a method to an object after the fact.

const yarn = {
	brand: "Buttoned Up and Pinned Down",
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon",
	};
yarn.fullYarn = function() {
	return this.brand + " " + this.amount + 
	" " + this.weight + " " + this.type + 
	" in " + this.colour;
	}
document.getElementById("demo").innerHTML = yarn.fullYarn();

You can use this here even if you're not in the object, because you're adding to the object.

You can also add standard JavaScript methods to an object. So, if, like, I wanted to make sure the amount and weight were in caps...

const yarn = {
	brand: "Buttoned Up and Pinned Down",
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon",
	};
yarn.fullYarn = function() {
	return this.brand + " " + this.amount.toUpperCase() + 
	" " + this.weight.toUpperCase() + " " + 
	this.type + " in " + this.colour;
	}
document.getElementById("demo").innerHTML = yarn.fullYarn();

Object `this`

You can use this with multiple objects, provided you're still in (or referencing) the object.

const yarn = {
	brand: "Buttoned Up and Pinned Down",
	amount:"100g",
	colour:"Mermaids Tail",
	weight: "Sock",
	type:"Superwash Merino and Nylon",
	fullYarn: function() {
		return this.brand + " " + this.amount + 
		" " + this.weight + " " + this.type + 
		" in " + this.colour;
	}
};
const yarn2 = {
	brand: "King Cole",
	amount:"100g",
	colour:"Loen",
	weight:"DK",
	type:"Acrylic",
	fullYarn: function() {
		return this.brand + " " + this.amount + 
		" " + this.weight + " " + this.type + 
		" in " + this.colour;
	}
};
let listings = 
yarn.fullYarn() + "<br>" + yarn2.fullYarn();
document.getElementById("demo").innerHTML = listings;

And, see, it doesn't matter if I use this or call the properties and methods the same things, because they're in different objects.

I get what I should

Buttoned Up and Pinned Down 100g Sock Superwash Merino 
and Nylon in Mermaids Tail
King Cole 100g DK Acrylic in Loen

If I used this by itself, it would refer to the global object — the thing that the JavaScript is in. When you're using it in a browser, that means the window it's in, so you get [object Window] if you did x = this.

The same would go if I did

function thisFunction() {
	return this;
}

Day 22 — Results

Academic writing makes my head hurt.
Properties are the values for an object.
You can call properties from an object using dot notation (objectName.propertyName) or brackets (objectName["propertyName"]).
Brackets are good when you want to store the property name in a variable.
You can change values of properties after you've added them into objects by just including objectName.propertyName = newValue in your script.
You can add new properties to objects as well doing the same thing.
You can delete properties from an object by going delete objectName.propertyName.
If you want to see if a property exists, it's ("propertyName in objectName").
You can put objects into an object by nesting the properties, like const objectName = { propertyName: { propertyName2: value, propertyName3: value}, propertyName4: value}.
Methods are the functions for an object.
Don't forget your darn ().
You can add methods to an object after closing the object.
You can also add standard JavaScript methods to an object, like toUpperCase() and the like.
this refers to the object you're in or are referencing.
You can use this in all your objects, and it'll know what this you're referring to.
If you used this by itself, it'd return [object Window] in the browser, because it's referring to the global object.

As much as I'd like to keep going with the JavaScript, I do have my seminar coming up, and I should focus on that. So how to display objects and construct objects will wait until next time.

Today's Sticker

Eldritch Rach does sticker sheets for her Patreon users, and these lovely Mothman stickers are from the Stationery sheet. These cuties are based on Pingu angrily making a card.

Three images together arranged to show actions. In the first, Pingu (the little claymation penguin) is angrily shaking red glitter onto a card. In the second, he is angrily holding up a cardboard heart. In the third, he has attached the cardboard heart to the card and is angrily holding up the card. He will do these crafts, but by god, he's mad about it.

Both Mothman and Pingu are me with my coursework.

#kate learns javascript #kate learns web development #programming