JavaScript is an object oriented language. Objects hold data. Curly braces are used to contain the data as a unit of information, and objects are that container. If a variable's value includes curly braces, that means it's an object.
var object =
This part of code, the unit between the curly brackets, is a list of object properties that are being assigned to the object. Again, we'll talk more about properties when we talk about objects. So, the point is, curly brackets can be used to define objects.
The object variable needs a declaration keyword, such as let or const, but the properties don't. They are assigned to their values using a colon instead of an equal sign, which makes it easier to tell that they belong to an object.
This part of code declares the unit between the curly brackets to be an object. We'll get more into that later when we talk about objects.
// this is an empty object
let x = {};
An object declaration is a statement. Notice that the curly brackets are located within the statement itself, and closes before the semicolon. That's a good indication that this is an object.
Also, notice how the variable's value is enclosed in curly brackets. They are within the statement (before the semicolon,) and are being assigned to the variable.
Objects hold lists of variables unique to the object, called properties, and their values. Object properites are declared as they are assigned, and belong to the object, so the object variable needs a declaration keyword, but the properties don't. They are assigned to their values using a colon instead of an equal sign, which makes it easier to tell that they belong to an object.
// this is basic object syntax
{
propertyname
:
value
}
// more than one property
{
property1
:
value,
property2
:
value
}
This statement is an object declaration and assignment.
// not an object - syntax error: the three is considered a property id, but is missing a
:
let x = {3};
// not an object - syntax error: expecting a value
let x = {3:};
// not an object - syntax error: expecting a property name
let x = {:3};
// this is an object, property name is 3, value is 3
let x = {3:3};
// multiple properties
// property name: name, value is "three"
// property name: number, value is 3
let x = {name:"three", number:3};
Notice that when a property follows another, a comma is used to separate them.
var object = { property1, property2, property3 };
Objects will work in code this way, but everything blends together, and it's kind of hard to read. This is not practical.
var object = { property1 : value, property2 : value, property3 : value };
For example you could create an object that represents a car, and list within that object the make, model, year, type, color, etc (properties) along with the associated information (values).
let car = {make:"Honda",model:"Accord",year:"2019",type:"Sedan",color:"White"};
Also, if there's a lot of data, it would go beyond the screen. Now, what if there's a mistake and you have to change something?
That's why objects are often written spaced out over multiple lines, like this...
let car = {
make: "Honda",
model: "Accord",
year: "2019",
type: "Sedan",
color: "White"
};
This way it's much easier to see each property and it's corresponding value. When curly braces enclose code that spans multiple lines, it's called a code block.
JavaScript's language term "document" is an object that represents the html page currently in the window. To access a property of an object, you can use a period, called a "dot" (as in "dot com"). So if you were to type " document.all " in the browser console, and hit enter, the console would list all the properties of the object "document". This means of accessing properties of objects is called "dot notation".
There is another way of accessing properties of objects. This is by using brackets, or "bracket notation". The name of the property goes in brackets surrounded by quotation marks and immediately follows the object without spaces. Either double quotes or single quotes will work. Such as " document['all'] " or " document["all"] " (without the additional quotes of course).