Object Syntax in JavaScript

Key Points

• Understanding JavaScript objects are essential for successful development in the language, as many built-in data types are represented as objects. An object is a composite data type built from primitives and other objects, and its properties describe aspects of an object.
• Objects can be created and accessed in JavaScript in a variety of ways. Object literal notation (in braces) allows for quick creation of objects with key/value pairs. Object properties can be accessed through dot notation or square bracket notation, which provides greater flexibility for variable attribute names or attribute names containing special characters.
• Functions used as objects' properties are called methods and can be called using point notation and square bracket notation. Attributes and methods can be added to an existing object through assignment statements, and properties of nested objects can be accessed by linking dots and/or bracket references together.

JavaScript objects are the cornerstone of the language. Many built-in data types (such as errors, regular expressions, and functions) are represented as objects in JavaScript. To be a successful JavaScript developer, you must have a firm grasp of how objects work. This article will teach you the basics of JavaScript object creation and manipulation. Objects are composite data types, built from primitives and other objects. An object's building block is often referred to as its field or attribute . Attributes are used to describe certain aspects of an object. For example, attributes can describe the length of the list, the color of the dog, or the date of birth of a person.

Create an object

Creating objects in JavaScript is easy. The language provides a syntax called object literal notation for quickly creating objects. The object text is represented in braces. The following example creates an empty object without attributes.

<code class="language-javascript">var object = {};</code>

In braces, the attribute and its values ​​are specified as a list of key/value pairs. The key can be a string or an identifier, while the value can be any valid expression. The list of key/value pairs is separated by commas, and each key and value is separated by a colon. The following example uses literal notation to create an object with three attributes. The first attribute foo stores the number 1. The second attribute bar is specified using a string and also stores the string value. The third property baz stores an empty object.

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

Please pay attention to the use of spaces in the previous example. Each attribute is written on a separate line and indented. The entire object can be written on a single line, but the code written in this format is easier to read. This is especially true for objects with many properties or nested objects.

Access attributes

JavaScript provides two notations of accessing object properties. The first and most common one is called point notation. In dot notation, the property is accessed by giving the name of the host object, followed by a period (or dot), and then the property name. The following example shows how to read and write properties using point notation. If the initial stored value of object.foo is 1, its value will become 2 after executing this statement. Note that if object.foo does not have a value yet, it will be undefined.

<code class="language-javascript">var object = {};</code>

Another syntax for accessing object properties is called square bracket notation . In square bracket notation, the object name is followed by a set of square brackets. In square brackets, the property name is specified as a string. The example of the previous point notation has been rewritten below to use square bracket notation. While the code may look different, it is functionally equivalent to the previous example.

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

Square bracket notation is more expressive than dot notation because it allows variables to specify all or part of the attribute name. This is possible because the JavaScript interpreter automatically converts expressions in square brackets into strings and then retrieves the corresponding properties. The following example shows how to dynamically create attribute names using square bracket notation. In this example, the attribute name foo is created by concatenating the contents of the variable f with the string "oo".

<code class="language-javascript">object.foo = object.foo + 1;</code>

Square bracket notation also allows attribute names to contain prohibited characters in dot notation. For example, the following statement is completely legal in square bracket notation. However, if you try to create the same property name in the dot notation, you will encounter a syntax error.

<code class="language-javascript">object["foo"] = object["foo"] + 1;</code>

Access nested properties

The properties of nested objects can be accessed by linking dots and/or square bracket references together. For example, the following object contains a nested object named baz, which contains another object named foo, which has a property named bar that stores the value 5.

<code class="language-javascript">var f = "f";

object[f + "oo"] = "bar";</code>

The following expression accesses nested property bar. The first expression uses dot notation, while the second expression uses square bracket notation. The third expression combines two notations to achieve the same result.

<code class="language-javascript">object["!@#$%^&*()."] = true;</code>

Expressions like those shown in the previous examples may cause performance degradation if used incorrectly. It takes time to evaluate each point or square bracket expression. If you use the same property multiple times, it is best to access the property only once and then store the value in a local variable for use in all future purposes. The following example uses bar multiple times in a loop. However, instead of wasting time calculating the same value over and over, store bar in a local variable.

<code class="language-javascript">var object = {
  baz: {
    foo: {
      bar: 5
    }
  }
};</code>

Function as method

When a function is used as an object property, it is called the method. Like properties, methods can also be specified in object literal notation. The following example shows how to achieve this.

<code class="language-javascript">object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];</code>

Methods can also be called using dot notation and square bracket notation. The following example uses these two notations to call the sum() method in the previous example.

<code class="language-javascript">var object = {};</code>

Add attributes and methods

Object literal notation is useful for creating new objects, but it cannot add properties or methods to existing objects. Fortunately, adding new data to an object is as simple as creating an assignment statement. The following example creates an empty object. Then use the assignment statement to add two attributes foo and bar and a method baz. Note that this example uses dot notation, but square bracket notation is equally effective.

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

Conclusion

This article introduces the basic knowledge of JavaScript object syntax. It is crucial to master these contents because it forms the basis for the rest of the language. They say you have to learn to walk before you can run. Then, in the world of JavaScript, you must first understand objects to understand object-oriented programming.

Frequently Asked Questions about JavaScript Object Syntax (FAQ)

What is the difference between midpoint notation and square bracket notation in JavaScript object syntax?

In JavaScript, objects are collections of key-value pairs. You can access these values ​​using dot notation or square bracket notation. The dot representation is more direct and easier to read. Use it when you know the property name. For example, if you have an object named "person" that has a property named "name", you can access it like this: person.name.

On the other hand, square brackets are more flexible. It allows you to access properties using variables or attribute names that may not be valid identifiers. For example, if the property name contains spaces or special characters, or it is a number, you can access it like this: person['property name'].

How to add properties to existing JavaScript objects?

You can add properties to an existing JavaScript object using dot notation or square bracket notation. For point notation you just need to use the syntax object.property = value. For square bracket notation, the syntax is object['property'] = value. In both cases, if the property does not exist in the object, it is added.

How to delete attributes from JavaScript objects?

You can use the "delete" operator to delete properties from JavaScript objects. The syntax of the “delete” operator is delete object.property for point notation and delete object['property'] for square bracket notation. This will remove the attribute and its value from the object.

What are the methods in JavaScript objects?

The

method is a function stored as an object property. They are used to perform operations that utilize object data. You can define methods in an object using function syntax as follows: object.methodName = function() { / code / }.

How to iterate over properties of JavaScript objects?

You can use the "for...in" loop to iterate over properties of JavaScript objects. This loop will iterate over the object's so enumerable properties, including properties inherited from the prototype chain. The syntax is as follows: for (var property in object) { / code / }.

What is the "this" keyword in a JavaScript object?

The "this" keyword in a JavaScript object refers to the object to which it belongs. Inside the method, "this" refers to the owner object. In the constructor, "this" refers to the newly created object.

What is the constructor in JavaScript?

Constructors in JavaScript are special functions used to create objects of the same type. They are named in capital letters to distinguish them from ordinary functions. The "new" keyword is used to call the constructor and create a new object.

What is the object prototype in JavaScript?

Each JavaScript object has a prototype. A prototype is also an object, and all objects inherit properties and methods from its prototype. This is a powerful feature of JavaScript because it allows you to add new properties or methods to instances of object types.

How to check if there are properties in JavaScript objects?

You can use the "in" operator or the "hasOwnProperty" method to check whether properties exist in a JavaScript object. The "in" operator returns true if the property exists in an object or its prototype chain. The "hasOwnProperty" method returns true only if the property exists in the object itself.

What is object destruction in JavaScript?

Object destruction in JavaScript is a function that allows you to extract properties from objects and bind them to variables. This can make your code more concise and easy to read. The syntax is as follows: var { property1, property2 } = object.

The above is the detailed content of Object Syntax in JavaScript. For more information, please follow other related articles on the PHP Chinese website!