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); // object
console.log(user); // {"name":"John","age":21}Each key-value pair is called a “property.”
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); // John
console.log(user["age"]); // 21You 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); // Jane 30You can even add new properties the same way:
const user = { name: "John", age: 21 };
user.lastname = "Smith";
user["member since"] = 2007;
console.log(user); // {"name":"John","age":21,"lastname":"Smith","member since":2007}And, you can remove properties:
const user = { name: "John", age: 21 };
delete user.age;
console.log(user.age); // undefinedAccessing 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); // {"name":"John"}Note that you can make an empty object using object constructor syntax as follows:
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); // {"age":21}A common pattern you might encounter is using a variable to automatically create a key-value pair as in the example below:
const age = 21;
const user = { name: "John", age };
console.log(user);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 };Convenient syntax for fetching multiple elements:
const user = { name: "John", age: 21 };
let { name, age } = user;
console.log(name, age); // John 21You can rename the properties
const user = { name: "John", age: 21 };
let { name: userName, age: userAge } = user;
console.log(userName, userAge); // John 21You can even do this:
const user = { firstname: "John", lastname: "Smith", age: 21 };
let { age, ...rest } = user;
console.log(age, rest); // 21 {"firstname":"John","lastname":"Smith"}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:
true, false, null, arrays, and objects.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.