DEV Community

Samantha Diaz
Samantha Diaz

Posted on

1

JavaScript's Object Overview

This is an overview on how to create a basic object class in JavaScript.

JS Objects

JavaScript is not an object-oriented programming language. However, you can create 'objects' in JavaScript that behave similar to other OO languages.

Per the MDN Document, an object is a collection of properties.

JavaScript uses objects as a data type that provides a framework for how a particular item should behave. An instance method is used to define a specific instance's characteristics.

Syntax

    class Dog {
        constructor(name, breed, age, owner){
            this.name = name;
            this.breed = breed;
            this.age = age;
            this.owner = owner;
        }
    }
Enter fullscreen mode Exit fullscreen mode

The Constructor Method

Every class uses the constructor method to instantiate a new instance of the object. In my example above, we pass in a name, breed, age, and owner when we create a new Dog object. We set this instance of Dog to be equal to the variables passed in. The keyword this refers to that particular instance of Dog.

Note that the above is just the method for creation; no instance of Dog has yet been created.

To better understand the object's properties versus the arguments given, you could alternatively set up your constructor per the below. Note that dogName, dogBreed, ... are the arguments passed in, and .name, breed are the properties each Dog instance will obtain.

    class Dog {
        constructor(dogName, dogBreed, dogAge, dogOwner){
            this.name = dogName;
            this.breed = dogBreed;
            this.age = dogAge;
            this.owner = dogOwner;
        }
    }
Enter fullscreen mode Exit fullscreen mode

Create an Object

Create a new object with the new keyword, followed by the class name. I prefer to store a new object in a variable so we can use it later to modify.

dog1 = new Dog("Fluffy", "Golden Retriever", "4", "Jane Smith") 
// Dog {name: 'Fluffy', breed: 'Golden Retriever', age: '4', owner: 'Jane Smith'}
Enter fullscreen mode Exit fullscreen mode

Retrieve an Object's Data

With our variable, dog1, we can access that variable's data by calling their properties.

dog1.name
// 'Fluffy'

dog1.breed
// 'Golden Retriever'

dog1.age
// '4'
Enter fullscreen mode Exit fullscreen mode

Give an Object Behavior with Instance Methods

An instance method takes action on that particular Dog instance it is called on.

In the example below, the method named bark gives each instance of Dog the ability to "woof" when called. Similarly, the ageUp method increases that specific dog's age by 1 and returns its new age.

    class Dog {
        constructor(name, breed, age, owner){
          ...
        }

       bark(){
           return `${this.name} the dog says woof!`;
       }
       ageUp(){
           this.age += 1;
           return this.age;
       }
    }

dog1.bark()
// "Fluffy the dog says woof!"

dog1.ageUp()
// 5
Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay