⬅ Back

OBJECTS IN JAVASCRIPT

This note explains objects in simple language.

Objects are one of the most important parts of JavaScript because they help us describe real things: a user, a book, a product, a car, a message, a company, or a shopping cart item.

An object lets us store many related values together in one structure.

1. What is an object?

An object is a structure that stores data in the form of:

key: value

You can think of an object like a small dictionary: the key is the word, and the value is the meaning or information connected to that word.

Example

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

This object describes one book.

Diagram 1. Basic object idea

book
│
├─ title  → "The Last Kingdom"
├─ author → "Bernard Cornwell"
└─ rating → 8.38

Explanation

An object groups related information together.

Instead of storing book title, author, and rating in separate unrelated variables, we keep them inside one object.

2. Creating an object

Objects are created using curly braces:

{}

This is called an object literal.

Example

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  public: true,
  rating: 8.38,
};

Diagram 2. Object literal structure

{
  key1: value1,
  key2: value2,
  key3: value3
}

Explanation

Every property in an object has two parts: a key and a value. Properties are separated by commas.

3. Key-value pairs

Every object property looks like this:

key: value

Example

title: "The Last Kingdom"

Diagram 3. One property inside an object

title: "The Last Kingdom"

key   → title
value → "The Last Kingdom"

Explanation

This is the basic building block of every object.

4. Keys are usually strings

A key is usually treated like a string name for the property.

Examples of keys are title, author, rating, and isPublic.

const user = {
  name: "Nikita",
  age: 25,
};

Diagram 4. Keys as labels

Object = container
Keys   = labels
Values = data under those labels

Explanation

A key is like a label on a drawer. The value is what is stored inside that drawer.

5. Property values can be different types

Object values can be almost any type: strings, numbers, Booleans, arrays, other objects, functions, and more.

const book = {
  title: "The Last Kingdom",           // string
  rating: 8.38,                        // number
  isPublic: true,                      // Boolean
  genres: ["history", "adventure"],    // array
};

Diagram 5. One object, many data types

book
│
├─ title    → string
├─ rating   → number
├─ isPublic → Boolean
└─ genres   → array

Explanation

An object is flexible because different properties can store different kinds of data.

6. Why objects are useful

Objects are useful when values belong together.

For example, a book has a title, an author, a rating, and genres. These values describe one thing, so an object is a good fit.

Diagram 6. Why objects are better than many separate variables

Without object:
title
author
rating
genres

With object:
book.title
book.author
book.rating
book.genres

Explanation

Objects keep related information together and make code easier to understand.

7. Nested properties

A property value can also be another object. This is called nesting.

const user = {
  name: "Jacques Gluke",
  tag: "jgluke",
  location: {
    country: "Jamaica",
    city: "Ocho Rios",
  },
  stats: {
    followers: 5603,
    views: 4827,
    likes: 1308,
  },
};

Diagram 7. Nested object structure

user
│
├─ name → "Jacques Gluke"
├─ tag  → "jgluke"
├─ location
│  ├─ country → "Jamaica"
│  └─ city    → "Ocho Rios"
└─ stats
   ├─ followers → 5603
   ├─ views     → 4827
   └─ likes     → 1308

Explanation

A nested object is just an object inside another object. This helps group related data more clearly.

8. Why nested objects are useful

Nested objects help organize data into categories.

Diagram 8. Why grouping helps

user
│
├─ location → place data together
└─ stats    → social data together

Explanation

This makes data easier to read and easier to use later.

9. Accessing properties with dot notation

The most common way to access an object property is dot notation.

Syntax

objectName.key

Example

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

console.log(book.title);  // "The Last Kingdom"
console.log(book.genres); // ["historical prose", "adventure"]

Diagram 9. Dot notation

book.title
│    └─ key
└─ object

Explanation

Dot notation means: first go to the object, then ask for the property after the dot.

10. Getting a missing property

If the object does not have that property, JavaScript returns:

undefined
const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

console.log(book.price); // undefined

Diagram 10. Missing property result

book.price
↓
property does not exist
↓
undefined

Explanation

This is normal behavior. JavaScript does not crash just because a property is missing.

11. Saving a property value in a variable

You can store the value of a property in another variable.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

const bookTitle = book.title;
console.log(bookTitle); // "The Last Kingdom"

Diagram 11. Taking a value out of an object

book.title
   ↓
"The Last Kingdom"
   ↓
bookTitle = "The Last Kingdom"

Explanation

This is useful when you want to use one property value later in your code.

12. Accessing nested properties with dot notation

To access nested properties, use more dots.

const user = {
  name: "Jacques Gluke",
  location: {
    country: "Jamaica",
    city: "Ocho Rios",
  },
};

console.log(user.location.country); // "Jamaica"

Diagram 12. Nested dot path

user.location.country

1. user
2. location
3. country

Explanation

Each dot goes one level deeper into the object structure.

13. Accessing the whole nested object

You can also access the whole nested object itself.

const user = {
  name: "Jacques Gluke",
  location: {
    country: "Jamaica",
    city: "Ocho Rios",
  },
};

const location = user.location;
console.log(location); // { country: "Jamaica", city: "Ocho Rios" }

Diagram 13. Taking the nested object

user.location
   ↓
{ country: "Jamaica", city: "Ocho Rios" }

Explanation

Sometimes you want the whole inner object, not just one field inside it.

14. When a property value is an array

A property can also contain an array.

const user = {
  name: "Jacques Gluke",
  hobbies: ["swimming", "music", "sci-fi"],
};

console.log(user.hobbies); // ["swimming", "music", "sci-fi"]

Diagram 14. Object with array property

user
│
├─ name    → "Jacques Gluke"
└─ hobbies → ["swimming", "music", "sci-fi"]

Explanation

Objects and arrays often work together.

15. Accessing an array element inside an object

If an object property contains an array, you can use array indexing.

const user = {
  hobbies: ["swimming", "music", "sci-fi"],
};

console.log(user.hobbies[0]); // "swimming"

Diagram 15. Object → array → index

user.hobbies[0]

1. user
2. hobbies array
3. element at index 0

Explanation

This is a combined access pattern: first object property, then array index.

16. Using array properties on object array values

Since user.hobbies is an array, you can use array properties and methods on it.

const user = {
  hobbies: ["swimming", "music", "sci-fi"],
};

console.log(user.hobbies.length); // 3

Diagram 16. Object property with array behavior

user.hobbies
   ↓
array
   ↓
.length works

Explanation

Once you get the array from the object, you can work with it like a normal array.

17. Accessing properties with square brackets

The second way to access properties is square bracket notation.

Syntax

objectName["key"]

Example

const book = {
  title: "The Last Kingdom",
  genres: ["historical prose", "adventure"],
};

console.log(book["title"]);  // "The Last Kingdom"
console.log(book["genres"]); // ["historical prose", "adventure"]

Diagram 17. Square bracket notation

book["title"]

object → book
key    → "title"

Explanation

Inside the brackets, you use a string with the property name.

18. Dot notation vs square brackets

These two lines can mean the same thing:

console.log(book.title);
console.log(book["title"]);

Both access the same property.

Diagram 18. Two ways to access the same value

book.title
book["title"]

Both mean:
get the "title" property from book

Explanation

Dot notation is more common, but square brackets are very useful in special cases.

19. When square brackets are really useful

Square brackets are useful when the property name is stored in a variable.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

const propKey = "author";

console.log(book.propKey);   // undefined
console.log(book[propKey]);  // "Bernard Cornwell"

Diagram 19. Why variable keys need brackets

propKey = "author"

book.propKey
↓
looks for key literally named "propKey"
↓
undefined

book[propKey]
↓
uses value of propKey = "author"
↓
book["author"]
↓
"Bernard Cornwell"

Explanation

This is one of the most important rules in object access.

20. Very important rule

Dot notation

book.propKey

means:

book["propKey"]

Not:

book["author"]

Bracket notation

book[propKey]

uses the variable value.

Diagram 20. Literal name vs variable value

book.propKey
→ use the literal key "propKey"

book[propKey]
→ use the value inside propKey

Explanation

This is one of the most common beginner mistakes with objects.

21. Changing property values

After an object is created, you can change the value of its properties.

const book = {
  title: "The Last Kingdom",
  rating: 8.38,
  isPublic: true,
  genres: ["historical prose", "adventure"],
};

book.rating = 9;
book.isPublic = false;
book.genres.push("drama");

console.log(book.rating);   // 9
console.log(book.isPublic); // false
console.log(book.genres);   // ["historical prose", "adventure", "drama"]

Diagram 21. Changing object values

Before:
rating   → 8.38
isPublic → true
genres   → ["historical prose", "adventure"]

After:
rating   → 9
isPublic → false
genres   → ["historical prose", "adventure", "drama"]

Explanation

You are not replacing the whole object. You are updating some values inside it.

22. Adding new properties

If you assign a value to a property that does not exist yet, JavaScript creates that property.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

book.pageCount = 836;
book.originalLanguage = "en";
book.translations = ["ua", "ru"];
book.price = {
  hardcover: 39,
  softcover: 29,
};

console.log(book.pageCount);         // 836
console.log(book.originalLanguage);  // "en"
console.log(book.translations);      // ["ua", "ru"]

Diagram 22. Adding properties after creation

Start:
book
│
├─ title
└─ author

After adding:
book
│
├─ title
├─ author
├─ pageCount
├─ originalLanguage
├─ translations
└─ price

Explanation

Objects can grow after creation.

23. Adding nested data later

A new property can also be an array or another object.

const product = {
  name: "Laptop",
};

product.tags = ["tech", "office"];
product.specs = {
  ram: "16GB",
  storage: "512GB",
};

console.log(product);

Diagram 23. New nested properties

product
│
├─ name  → "Laptop"
├─ tags  → ["tech", "office"]
└─ specs
   ├─ ram     → "16GB"
   └─ storage → "512GB"

Explanation

Objects are flexible enough to grow into more complex structures.

24. Shorthand properties

Sometimes you already have variables whose names are the same as the property names you want.

Without shorthand

const name = "Henry Sibola";
const age = 25;

const user = {
  name: name,
  age: age,
};

With shorthand

const name = "Henry Sibola";
const age = 25;

const user = {
  name,
  age,
};

Diagram 24. Shorthand property idea

Long form:
name: name
age: age

Short form:
name
age

Explanation

If variable name and property name are the same, shorthand makes the code shorter and cleaner.

25. How shorthand properties work

const name = "Henry Sibola";
const age = 25;

const user = {
  name,
  age,
};

console.log(user.name); // "Henry Sibola"
console.log(user.age);  // 25

Diagram 25. Variable to property automatically

Variable:
name = "Henry Sibola"

Object:
{name}

Becomes:
{name: "Henry Sibola"}

Explanation

JavaScript understands that the property name should match the variable name.

26. Why shorthand properties are useful

They are useful when building objects from variables, function parameters, form data, or API data.

Diagram 26. Shorthand makes object creation cleaner

Without shorthand:
longer and repetitive

With shorthand:
shorter and easier to read

Explanation

This is common in real projects, especially when building data objects.

27. Computed properties

Sometimes the property name is not known directly when writing the object. Maybe it comes from a variable, a function result, or user input.

In that case, we use computed properties.

const propName = "name";

const user = {
  age: 25,
  [propName]: "Henry Sibola",
};

console.log(user.name); // "Henry Sibola"

Diagram 27. Computed property syntax

{
  [expression]: value
}

Explanation

The expression inside [] is calculated first, and its result becomes the property name.

28. Old style without computed properties

Without computed properties, you often had to create the object first and then add the property later.

const propName = "name";
const user = {
  age: 25,
};

user[propName] = "Henry Sibola";

Diagram 28. Old way vs computed property way

Old way:
1. create object
2. add property later

Computed property:
1. create property directly during object creation

Explanation

Computed properties let you do everything in one place.

29. How computed properties work step by step

const propName = "name";

const user = {
  age: 25,
  [propName]: "Henry Sibola",
};

Diagram 29. Step-by-step computed property

propName = "name"

[propName]
↓
["name"]
↓
property key becomes "name"

Final object:
{
  age: 25,
  name: "Henry Sibola"
}

Explanation

The brackets mean: “use the result of this expression as the key”.

30. Objects can contain arrays and objects together

Real objects often combine primitive values, arrays, and nested objects.

const user = {
  name: "Nikita",
  age: 25,
  hobbies: ["coding", "music"],
  location: {
    country: "Germany",
    city: "Berlin",
  },
};

Diagram 30. Mixed object structure

user
│
├─ name     → "Nikita"
├─ age      → 25
├─ hobbies  → ["coding", "music"]
└─ location
   ├─ country → "Germany"
   └─ city    → "Berlin"

Explanation

This is very close to real application data.

31. Accessing deeply nested data

You can combine everything you learned.

const user = {
  name: "Nikita",
  hobbies: ["coding", "music"],
  location: {
    country: "Germany",
    city: "Berlin",
  },
};

console.log(user.location.city);   // "Berlin"
console.log(user.hobbies[0]);      // "coding"
console.log(user.hobbies.length);  // 2

Diagram 31. Combined access examples

user.location.city
→ nested object property

user.hobbies[0]
→ array element inside object

user.hobbies.length
→ array property inside object

Explanation

Objects, arrays, and their access patterns often work together.

32. Common beginner mistakes

Mistake 1. Confusing dot notation and bracket notation

Wrong idea:

const key = "name";
console.log(user.key);

This looks for a property literally named "key".

Correct:

console.log(user[key]);

Mistake 2. Forgetting quotes in square brackets when using a direct key

Correct:

user["name"]

Not:

user[name]

unless name is a variable.

Mistake 3. Expecting missing properties to cause an error immediately

console.log(book.price); // undefined

This is normal.

Mistake 4. Forgetting that nested data needs deeper access

Wrong:

console.log(user.country);

If country is inside location, correct access is:

console.log(user.location.country);

Mistake 5. Forgetting shorthand works only when names match

const age = 25;
const user = { age };

This works because variable name and property name are the same.

Diagram 32. Common object mistakes

1. user.key ≠ user[key]
2. missing property → undefined
3. nested data needs nested access
4. arrays inside objects still use indexes
5. shorthand works when names match

Explanation

These are very common object mistakes, so they are worth remembering early.

33. Practical examples

Example 1. Book object

const book = {
  title: "Dune",
  author: "Frank Herbert",
  rating: 9,
};

console.log(book.title); // "Dune"

Example 2. Product object with new property

const product = {
  name: "Phone",
  price: 500,
};

product.brand = "Samsung";
console.log(product.brand); // "Samsung"

Example 3. User object with nested location

const user = {
  name: "Sarah",
  location: {
    country: "Poland",
    city: "Warsaw",
  },
};

console.log(user.location.city); // "Warsaw"

Example 4. Object with array property

const user = {
  hobbies: ["reading", "travel", "music"],
};

console.log(user.hobbies[1]); // "travel"

Example 5. Variable key with brackets

const propName = "email";

const contact = {
  [propName]: "exemple@nikitagoluban.eu",
};

console.log(contact.email); // "exemple@nikitagoluban.eu"

Diagram 33. Common real object patterns

Need one real-world thing?
→ use object

Need grouped sub-data?
→ use nested object

Need list inside object?
→ use array property

Need dynamic key?
→ use computed property

Explanation

These patterns appear all the time in real JavaScript applications.

34. Quick summary

Object

A structure made of key-value pairs.

Object literal

An object created with {}.

Property

One key: value pair inside an object.

Dot notation

object.key

Bracket notation

object["key"] or object[variable]

Nested object

An object inside another object.

Array property

An array stored as an object value.

Shorthand property

Short syntax when variable name and property name are the same.

Computed property

Dynamic property name created with [expression].

Diagram 34. Final map of objects

Objects
│
├─ creation
├─ key-value pairs
├─ dot notation
├─ bracket notation
├─ nested objects
├─ arrays inside objects
├─ changing values
├─ adding properties
├─ shorthand properties
└─ computed properties

Explanation

This is the full beginner picture of objects in JavaScript.

35. Revision block

1. Objects store data as key-value pairs
2. Objects are created with curly braces {}
3. A property has a key and a value
4. Dot notation is object.key
5. Bracket notation is object["key"] or object[variable]
6. Missing properties return undefined
7. Objects can contain nested objects
8. Objects can contain arrays
9. Property values can be changed after creation
10. New properties can be added after creation
11. Shorthand properties use variable names directly
12. Computed properties use expressions inside []

36. Final conclusion

Objects are one of the foundations of JavaScript.

If you understand how to create objects, what key-value pairs are, how to access properties, how nested objects work, how arrays inside objects work, how to change and add properties, how shorthand properties work, and how computed properties work, then you already have a strong base for working with real structured data.

Objects are used everywhere in full stack development: user profiles, products, API responses, settings, messages, forms, and database records.

⬅ Back