This is part 7 of the tutorial series Learn JavaScript in Construct. This part continues on from part 6. So in case you missed it, see Learn JavaScript in Construct, part 6: More on functions.
In this part we'll continue using a script file in a new Construct project. You can carry on with the same project as before, or create a new project and add a new script file again; either way delete all the code in the script file so you're starting with an empty file. In this part we'll cover another key building block of programming in JavaScript: objects.
Objects
An object is essentially a group of variables, but in the context of objects we use the name property instead of variable. Objects can be created using braces { and }. Each property of the object can be declared with property: value syntax, separated by commas. An example of the syntax for an object with two properties is shown below.
{
firstProp: "Hello world!",
secondProp: 123
}
The properties are similar to variables, in that they have a name, and can be given a value of any type. However they are not declared with let, and they use a colon to separate the name and value. Properties also don't have scope like variables do: properties are part of the object, and so exist as long as the object does.
Objects are another data type in JavaScript. That means you can also assign objects to variables, as shown below. In fact, just like with functions, you can use objects anywhere you can use any other value like a string or a number. The typeof of an object is "object".
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(typeof myObject); // object
Once you have an object assigned to a variable, each of its properties can be accessed through a dot and the name of the property, e.g. myObject.firstProp.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(myObject.firstProp); // Hello world!
JavaScript allows you to read properties that don't exist. This just returns undefined, similar to reading a variable that never had anything assigned to it.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(myObject.thirdProp); // undefined
Adding and removing properties
Being a highly dynamic language, JavaScript also allows you to add and delete properties from objects at any time. Assigning to a property that doesn't exist will create it. The example below demonstrates this, and also logs an entire object to the browser console, which is a convenient way to check what properties and values an object has. Note you might just see Object appear in the console, but there should be a button next to it to expand it and see the content of the object.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
// Adds thirdProp to the object
myObject.thirdProp = 456;
// Log entire object to console
console.log(myObject);
Once you expand the object in the console, you should see it display the three properties of the object, including thirdProp: 456 as that was also added to the object.
You can also use an empty object with no properties, which is just {}. This is useful in case you need to add properties conditionally, such as only adding a property in an 'if' statement.
// Create an empty object
let myObject = {};
// Add a property to it (which could be done conditionally)
myObject.firstProp = "Hello world!";
console.log(myObject);
Properties can be deleted with the special delete keyword.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
// Delete secondProp from the object
delete myObject.secondProp;
// Log entire object to console
console.log(myObject);
The above example will log an object with just firstProp, as the other property was deleted.