Objects

We've already seen some special objects built into JavaScript, such as the Wrapper objects (Number, String, Boolean), Math, and BigInt objects. There are also Date and RegExp, and others. Although these objects look like objects in Java/C++, the true nature of objects in JavaScript is far from objects in Object-Oriented programming! Instead, JavaScript objects are more similar to Dictionaries in Python (or HashMap in Java, Hash Tables in C++).

JavaScript objects are, in a nutshell, a collection of key-value pairs. 

const user = { name: "John", age: 21 };
console.log(typeof user);
console.log(user);

Each key-value pair is called a "property."

Syntax
  • Key must be a string; you can drop the single/double quotes when key is a valid identifier.
  • Value could be anything, any primitives or objects.
  • A key-value is paired by a colon.
  • Commas separate properties. It is okay to have a trailing comma! 
const user = {
    name: {
        first: "John",
        last: "Smith"
    },
    age: 21,
    "Job Title": "Teacher",
};

You can access property value with dot notation or square bracket notation:

const user = { name: "John", age: 21 };
console.log(user.name);
console.log(user["age"]);

You can modify property value the same way:

const user = { name: "John", age: 21 };
user["name"] = "Jane";
user.age = 30;
console.log(user.name, user.age);

You can even add new properties the same way:

const user = { name: "John", age: 21 };
user.lastname = "Smith";
user["member since"] = 2007;
console.log(user);

And, you can remove properties:

const user = { name: "John", age: 21 };
delete user.age;
console.log(user.age);

Accessing a nonexistent property yields undefined.

You can create an empty object and then add properties to it:

const user = {};
user.name = "John";
console.log(user);
Object constructor syntax

You can make an empty object using object constructor syntax:

const obj = new Object();

But it is more common to use the object literal syntax instead:

const obj = {};

We can use square brackets in an object literal when creating an object. That's called computed properties.

const key = "age";
const value = 21;
const user = { [key]: value };
console.log(user);

A common pattern you will see:

const age = 21;
const user = { name: "John", age };
console.log(user);
Explanation

If a variable is used as above, a key-value pair is created where the key is the variable's name, and the value is the variable's value.

It is same as:

const age = 21;
const user = { name: "John", age: age };

Destructuring Objects

Convenient syntax for fetching multiple elements:

const user = { name: "John", age: 21 };
let { name, age } = user;
console.log(name, age);

You can rename the properties

const user = { name: "John", age: 21 };
let { name: userName, age: userAge } = user;
console.log(userName, userAge);

You can even do this:

const user = { firstname: "John", lastname: "Smith", age: 21 };
let { age, ...rest } = user;
console.log(age, rest);

JSON

JSON (JavaScript object notation) is a standard text-based format for representing structured data based on JavaScript object syntax. It was popularized by Douglas Crockford. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client so that it can be displayed on a web page, or vice versa).

JSON closely resembles JavaScript object literal syntax except:

  • Property names (keys) must be enclosed in double-quotes.
  • Property values are numbers, strings, true, false, null, arrays, and objects.
  • Trailing commas, skipped elements (inside arrays), or undefined values not allowed.

There is a special built-in JSON object that contains methods for parsing JSON and converting values to JSON. For a reference, visit the documentation on MDN website.