por Objects in JavaScript are elements that, like objects in real life, They have a series of characteristics or properties that define them. Within this category of object are practically all JavaScript elements, however, there is an instance of the class object which is created with a special syntax. This instance is known as object literals in JavaScript. and, in this post, we explain exactly what these objects are and how to write these objects in JS.
What are object literals in JavaScript?
We have already learned in our post about objects in JavaScript that Virtually all elements in this programming language are an object, since they behave as such. By this we mean that every element has hidden properties and methods that make it belong to the object category of objects in JS.
However, Object literals in JavaScript are particular objects, because they declare their properties explicitly. Although all objects have a series of properties, such as their length and index, literal objects group property information textually.
If you have any programming experience, Thinking of object literals as JavaScript «dictionaries» is very useful. They are also very similar to arrays with key and value that we can assemble in the PHP programming language.
There are two ways to write object literals in JavaScript, also known as object initiators. Below, we introduce you to each of these and explain why you should choose one way over another for the object literal.
How do you write object literals in JavaScript?
There are several ways to write an object literal or object literal of objects in JS, which we will list below:
Object literals introduced by curly braces
A short, fast and efficient way to create object literals in JavaScript is using the braces symbol { } to assign values to a variable. You may have seen this symbol in many of our JavaScript articles and in thousands of lines of code, as it is very common. These keys They allow us to insert properties and functions to the variable through the sequence key – value.
Below, we give you an example of this type of writing to create a JavaScript object.
const goat = {
name: ‘Michael Jordan’,
team: ‘Chicago Bulls’,
number: 23,
shoot: function ( ) {
return 3
}
}
As you can see in the example above, the curly braces of the object literal they allow us to assign the properties name, team and number with their respective values, be it string either number. These properties must be separated by a comma.
The function shoot It is also defined with the sequence key-value. This function means that, if we write the command goat.shoot ( ), The program will return the value 3 as a response. If you have questions about why this happens, we recommend reading our post on how to access object properties in JavaScript.
Object literals assigned to Object
There is another way to write object literals in JavaScript. This way requires us to declare a new element of the class object or object literal and assign different properties to it with the template variable.property = worth.
Next, we show you how to write the same thing as in the previous example with this way of writing to create a JavaScript object:
const goat = new Object
goat.name = ‘Michael Jordan’;
goat.team = ‘Chicago Bulls’;
goat.number = 23;
goat.shoot = function ( ) {
return 3;
}
You will notice that, in the previous example, We do not open the object literal with the curly braces, but with the assignment as an element of the class object.
Nowadays, It is much more common to see object literals created in JavaScript with the use of curly braces. This happens not only because the assignment to the class object takes more characters and is more complex, but also because The braces method has a number of advantages with the new JavaScript standards. Therefore, we recommend using curly braces when you start creating your own object literals in JavaScript.
Do you dare to continue learning?
Now that you know what object literals are in JavaScript and how to write them, We invite you to continue learning with us about the different elements of this programming language in our Full Stack Web Development Bootcamp.
In this training, you will not only learn to master writing JavaScript, but you will also receive in-depth training in other programming languages and, After a few months, you will be an expert in web development. So, do you dare to continue learning with us? Don’t hesitate and sign up now to succeed in the IT sector!