DEV Community

A beginner's guide to Objects in JavaScript

Adeola Ajiboso on May 10, 2023

Introduction JavaScript is a popular programming language that is commonly used in web development. As a newbie in JavaScript, you may h...

Read full post

deji adesoga • May 10 '23

Awesome article. Welcome done! Keep up the good work.

Adeola Ajiboso • May 10 '23

Thank you😊

deji adesoga • May 10 '23

You're welcome.

Eckehard • May 11 '23 • Edited

There is one thing about objects in Javascript, that might cause confusion.

As mentioned, a group of key:value-pairs is called an object:

    const person = {
      firstName: "Adeola",
      lastName: "Comfort"
    };

"objects" may have a nested structure like this:

    const human = {
      person: {
        firstName: "Adeola",
        lastName: "Comfort"
      },
      age: 23
    };
   console.log(typeof(human))  --> "object"

So, "object" is oviously a structured datatype.

So, where do "classes" come from?

Initially, Javascript had no classes, it featured a so called "prototype based" inheritance.
Classes have been introduced in languages like C++ or Object Pascal more than 30 years ago, and they used the name "object" already, but with a different meaning. A class gives you only a "blueprint" of an object. To get a working element, you need to build an "instance" of this class. This was called an object. You may have many objects of the same type (=class). To avoid any conflicts, each object has it´s own set of private variables that is usually well protected. They can only be accessed from the outside, if you explicitely define them as "public". This "encapsulation" is very important to keep object oriented code running.

Over the last years, Javascript was heavily influenced by this concept, so a "class based inheritance" was introduced in ES5:

    class humanClass {
      firstName = "Adeola"
      lastName = "Comfort"
    }
    let human = new humanClass
    console.log(typeof (human)) --> "object"

Ok, we still have an "object", but wait: the syntax is quite different! Above, we defined key:value pairs, here we define a variable, just without using let or var.

The designers of javascript tried to make things as consistent as possible, but on the same time follow the rules of class bases inheritance. Finally, they did a good job, but it might also seem, that "objects" and "objects" do not have much in common.

One bad thing about javascript objects is, that they are not encapsulated. As class based objects behave the same like standard objects, all variables can be mutated from functions outside the scope of an object. Private methods and filed are introduced lately with ES2021, but they are still not implemented in all browsers,

John Odhiambo • May 15 '23

A great piece of information. Thanks for sharing with us the newbies

Adeola Ajiboso • May 15 '23

You welcome

abdulrahmonbb • May 10 '23

Great piece Adeola. Nice work!

Adeola Ajiboso • May 10 '23

Thank you😊

Eckehard • May 11 '23 • Edited

Object-oriented programming is a programming paradigm centered around objects rather than functions.

Newcomers: don´t be afraid: Classes and objects are just a way to organize your code, which still is made of functions and variables. So, We should better say: With OOP you get another level of code organization ontop of your functions. Classes will help you to isolate parts of your code in better protected and resusable units.

Even if you use OOP, you are not forced to build anything as an object. It is just an option you can use where appropriate. Often, it is more work work to write OOP code, so you should use classes only where it pays back. This is often the case if you are able to reuse working code from other projects or external sources.