What are Javascript Objects? Containers for Reusable Properties and Behaviors

Javascript is a versatile programming language; you can create short scripts of only a few lines or complex modules that contain many. Developers handling many web pages often need to reuse their Javascript code; copying and pasting scripts between pages is a tedious and error-prone process.

The Javascript standard provides the ability to create reusable code in the form of Javascript objects. Javascript objects provide complex functionality with minimal code, making new scripts easy to maintain and fast to load.

Object-oriented Javascript Programming Explained

Javascript objects follow a strategy called object-oriented programming. This strategy is common in many modern programming languages, including Java and Python.

An object is a self-contained entity in code that both holds data and performs actions. Each piece of object data is called a “property,” and each object action is called a “method.”

A Javascript object contains key-value pairs that uniquely identify its properties and methods. Properties can be any valid Javascript data type; methods must be syntactically correct Javascript functions.

// An object containing a property and a method
let example1 = {
    color: "purple",
    smile: function() { console.log("Hi " + color); }
};

Object properties and methods must start with letters, underscores, or dollar signs. They can include numbers after the first character and may not contain dashes or hyphens. Property names may include spaces; method names may not.

Javascript functions defined as part of an object have a scope isolated from the rest of the object. If a function must access information stored in other object properties or call other object functions, use the reserved word this to access the object.

let example2 = {
    a: "myproperty",
    b: function() { console.log("Hello!"); }
    c: function() {
           this.a = "a string";  // Set the object property "a"
           this.b();             // Call the object method "b"
       }
};

The dot operator (.) accesses properties and methods inside an object. Since a dot has this special meaning, a property or method name cannot contain a dot. Multiple dots are only valid while accessing properties if they refer to objects nested inside each other.

// An object with two properties; one property has a nested object
let example3 = {
    a: "myproperty",
    b:
        {
            hi: "inside",
            there: 2
        }
};

let example4a = example2.a;       // Outer object, string property
let example4b = example2.b;       // Outer object, object property
let example4c = example2.b.hi;    // Inner object property, 2 dots
let example4d = example2.b.there; // Inner object property, 2 dots

Javascript Object Data Encapsulation

Unlike objects in many other programming languages, like Java, the properties and methods of a Javascript object are always public. This means that as long as a programmer knows that the properties and methods exist, they can freely access them in code.

Sometimes programmers want to hide certain properties or methods from other developers so those other developers can’t change how the object works. Javascript properties and methods don’t have a built-in method to do this, so programmers use conventions like prefixing their names with underscores.

In this example, which uses the underscore convention, a programmer indicates that other developers shouldn’t access property “b” and method “d.” This is a stylistic convention only: if a developer does access them, the Javascript code is valid and a program will not prevent the developer from changing them.

let example5 = {
    a: 1,
    _b: 2,
    c: function() { return 3; },
    _d: function() { return 4; }
};

// Valid access of a property a program expects to access
let example5a = example5.a;

// Valid access of a property that should be left alone!
let example5b = example5._b;

// Valid access of a method a program expects to access
let example5c = example5.c();

// Valid access of a method that should be left alone!
let example5d = example5._d();

The practice of hiding data that other developers shouldn’t access is called “encapsulation.” It prevents developers from making changes to core components of their code unintentionally and breaking things that rely on those components.

If a developer knows the internal structure of a Javascript object, there is no way to guarantee data will always be hidden. This remains a programming privacy concern even with the newest version of the Javascript standard.

Best Practices in Javascript Object Usage

It’s important to define and access Javascript object properties in a consistent way. Javascript object best practices help you keep your objects well-organized and understandable, no matter what they contain.

Minimize Use of Spaces

Although using spaces in object property names is valid Javascript, the standard dot operator access can’t interpret spaces. To access an object property containing spaces, use another style of object access: bracket notation.

example6a["my property with spaces"];

Bracket notation requires more keystrokes than the dot operator because you must define property names as strings, and other programmers can mistake the brackets for array accesses. If you must create a property that contains multiple words or would usually be written with spaces, try using camel case or joining words with underscores instead of spaces.

example6b.myLongPropertyWithoutSpaces; // Camel case
example6c.property_with_underscores;   // Joining with underscores

Use Descriptive Property Names

Many of the property and method names in this article’s examples are purposely short for illustrative purposes, but they wouldn’t be good identifiers in a real program. The names of properties and methods inside an object should be as descriptive as possible so their purposes are always clear.

let example7a = {
    employeeName: "John",
    employeeSurname: "Doe",
    companyName: "Acme",
    companyProduct: "rock"
};

Nested objects can sometimes have shorter names, but still be descriptive thanks to the context their parent objects provide. This also means that objects may have properties with the same names, but you can still identify those properties clearly by their context.

let example7b = {
    employee:
        {
            name: "John",
            surname: "Doe"
        },
    company:
        {
            name: "Acme",
            product: "rock"
        }
};

// Property "name," but clearly refers to an employee
example7b.employee.name;

// Property "name," but clearly refers to the company
example7b.company.name;

Conclusion

Javascript objects are a basic Javascript concept that make code organization and reuse easy. Although Javascript doesn’t have the same ability for object data privacy as some other programming languages, its flexibility in creating objects and properties provides options not found in those other programming languages.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript objects and other programming concepts.

Start Learning