Learn JavaScript in Construct, part 7: Objects

27

Index

Tagged

Features on these Courses

Stats

8,795 visits, 22,529 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 29 Oct, 2021. Last updated 16 Dec, 2021

String properties

Object properties can also use a string for their name. This is not possible with variables, so is a special capability for properties. Here's an example using a string for a property name.

let myObject = {
	// Use a string for a property name
	"myProperty": 5
};

// This is equivalent to:
let myObject = {
	myProperty: 5
};

Normally property names have similar naming rules to variables: no spaces, no special characters, and so on. However using a string lets you use any name. For example you cannot use a space or exclamation mark in a property name unless you use a string for the property name.

// String properties allow spaces and special characters
let myObject = {
	"my property!": 5
};

// Normal properties don't allow this
myObject = {
	// SyntaxError
	my property!: 5
};

You also need to use a string when assigning or retrieving a property with a name like this, as the normal dot syntax also can't be used for the same reason - it wouldn't be valid syntax for JavaScript code. To access a string property, square brackets [ and ] are used instead of a dot, with the string in between.

let myObject = {
	"my property!": 5
};

// Assign to a string property
myObject["my property!"] = 7;

// Read a string property
console.log(myObject["my property!"]); // 7

As with before, you can also add and remove properties using this syntax - it's just another way to write a property access, and in principle works the same as using a dot.

Providing the property has a valid name, you can access it both ways: with a dot or with a string.

let myObject = {
	myProperty: 5
};

// Read with dot property
console.log(myObject.myProperty); // 5

// Read with string property
console.log(myObject["myProperty"]); // 5

One reason to use string properties is you can use a string variable, or in fact any expression returning a string, to access a property name. This is not possible when using a dot to access properties, since you can only use a fixed name.

let myObject = {
	myProperty: 5
};

// Access a property via a string variable
let propName = "myProperty";
console.log(myObject[propName]); // 5

This can be useful to change which properties are accessed depending on conditions. For example you could have an 'if' statement that changes the property name to be accessed.

Testing for properties

We previously saw how accessing a missing property returns undefined. However it's also possible to store undefined on a property. This means you can't use undefined to tell whether a property exists on an object or not, as you can't tell apart "missing" from "exists but has value undefined".

let myObject = {
	myProperty: undefined
};

// Reading a missing property returns undefined
console.log(myObject.otherProperty);	// undefined

// But reading myProperty also returns undefined
console.log(myObject.myProperty);		// undefined

So to tell if a property really exists on an object, JavaScript provides the in operator. Due to the syntax used, the property name must be a string though. So using "propertyName" in myObject will return a boolean with true if the property name exists on the given object, or false if it does not exist. Remember that since string and normal names are interchangeable, this still works for normal properties too.

let myObject = {
	myProperty: undefined
};

console.log("otherProperty" in myObject);	// false
console.log("myProperty" in myObject);		// true

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!