Exploring the Syntax of JavaScript Objects

<!DOCTYPE html>
<html>
    <body>

        <p>Creating a JavaScript Object.</p>

        <p id="demo"></p>

        <script>
            var person = {
                firstName : "John",
                "lastName"  : "Doe",
                age       : 50,
                "eyeColor"  : "blue"
            };

            document.getElementById("demo").innerHTML =
                person.firstName + " " + person.lastName + " is " + person.age + " years old.";
        </script>
    </body>
</html>

output will be ---> John Doe is 50 years old. even though the use of quotes for property names in JavaScript objects is not mandatory, it can affect interoperability especially when dealing with JSON. In JSON, property names must be enclosed in double quotes to be considered valid syntax. Therefore, consistent use of quotes for property names helps ensure compatibility with different data formats and standards.

Answer №1

When creating a Javascript object, the key names can be either enclosed in quotes or without quotes. This becomes more important when the key name includes special characters like - or white space.

For example:

var person = {
   first Name : "John", // This will not work
  "last Name"  : "Doe", // This will work
  age       : 50,
  "eyeColor"  : "blue"
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I programmatically control the scrollbar of an iframe displaying a PDF using JavaScript?

As I explore ways to display PDF documents on a Smart TV, I have decided to implement invisible buttons for scrolling up and down the document. This functionality needs to be integrated into a web environment, so this is what I have attempted: Here is the ...

`Is it common to use defined variables from `.env` files in Next.js applications?`

Next.js allows us to utilize environment variable files such as .env.development and .env.production for configuring the application. These files can be filled with necessary environment variables like: NEXT_PUBLIC_API_ENDPOINT="https://some.api.url/a ...

Advancement in the processing time of a HTTP response that is significantly prolonged

I am seeking a way to return an array of JSON objects (requested by an AJAX call in an AngularJS web application) that represent specific files on the server implemented with node.js. Typically, the result is quickly accessed from a database. However, if ...

AngularJS ng-include nested form configuration

My application utilizes nested ng-includes. The outer include is a login screen for one application while the inner ng-include includes two templates. The login screen is designed in two steps where the email is checked first and then the password entered. ...

Oops! Remember to always `await server.start()` first before using `server.createHandler()` in next.js

An error is popping up when I attempt to check the functionality of Apollo GraphQL. Error: You must await server.start() before calling server.createHandler() Note: Although there is a similar question regarding this issue, it is specific to Express. Error ...

Trouble with fetching value from function in Angular 2

I have successfully implemented musale/angular2-stripe. Everything is functioning well, but I am encountering an issue extracting a value from the component. openCheckout() { this.disabled = true; var handler = (<any>window).StripeCheckou ...

PHP code using the json_encode function to encode an array of 3 elements does

I'm facing an issue with a mysqli query that is supposed to return a multidimensional array. The problem arises when I attempt to encode the PHP array: array(3) { [0]=> array(8) { ["cod_evento"]=> string(1) "3" ["titulo"]=> ...

Conceal the Vue router on a webpage

How can I hide the vue-router from my login page? I want to remove the menu on the Login page. Is it possible and how would I achieve that? Here is the code for the Login page: Login <template> <div> <h1>Login</h1> ...

Host app is failing to render shared components in SSR

Encountering an issue while implementing SSR with module federation? Check out my code example Steps to Begin: Run yarn install:all command Execute yarn shell:server:build task Start the server using yarn shell:server:start Initiate remote services with y ...

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

Strategies to troubleshoot and fix issues in Three.js

My Three.js page needs to be updated from version r42 to r55, and a lot of the API has changed since then. While most of the changes were easy to implement, I am currently facing some difficulty with the JSONLoader. The format has transitioned from JavaSc ...

Utilizing ng-repeat, filter, and the uib-popup-datepicker to refine and display specific data within a table column

I'm currently facing a common scenario in my Angular application where I need to filter items from an ng-repeat using an HTML5 input of type 'date' or Angular-UI-Bootstrap's 'uib-popup-datepicker'. Despite extensive research, ...

Clicking on a Single Item in a List

After implementing support, I have managed to create a list of arrays filled with JSON data. When a user clicks on an item from this list, they are supposed to be taken to an activity page that displays more details about it. However, my current implementa ...

Building/Deleting the Vue Component using text search

In my App.vue file, I have the following setup: <template> <div id="app"> <input type="text" v-model="term"> <hello-world text="Button 1" v-if="term === ''"></hello-world> <hello-world ...

Utilize JavaScript to assign an identifier to an element created with createElement()

As a beginner in JavaScript, I am trying to set an id into some created tags but it doesn't seem to be working. var d1=document.createElement("div"); d1.setAttribute("class","container"); var b3= document.createElement("button"); b3.setAttri ...

Issues with jqGrid's grid grouping feature not functioning as expected

Is there a way to group my data by the name element and hide the grouping column as shown in this example ()? Even though all 3 columns are present on the page, I specifically want to hide the group column (name). Additionally, it seems that the main col ...

Using jQuery, check if a click event triggers a div containing a specific class. If so, modify the value of another class

I am working on a code for an application that allows you to select an icon and see the corresponding CSS line displayed. This makes it easy to copy and paste the code for use in another project. The issue I am facing is with the $(this) selector. Even tho ...

Using optional chaining along with the methods toLowerCase and indexOf while iterating through an array using the map

I have implemented an autocomplete input that searches for project properties while typing. I am looking to enhance the existing code for better performance. filterProjects(value: string) { return this.projects.filter( project => project.key ...

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

I need to enable users to edit information in a table. One cell in the table contains text. Here is an excerpt from the table: <table class="table table-striped table-hover" id="table_id"> <thead> <tr> <th>Event</th& ...

Issue with fitVids() function causing multiple videos to open on a single iframe within a collapsed bootstrap div

Isn't it curious that such a well-known plugin would have this issue? I spent hours trying to figure it out, and eventually succeeded. I believe this post will be very helpful for others who encounter the same problem. Imagine if you have Bootstrap ( ...