---
title: "What are computed observables in Knockout.js?"  
description: "What are computed observables in Knockout.js?"  
author: "Ashutosh Patel"  
published: 2024-06-27  
updated: 2024-06-27  
canonical: https://www.mindstick.com/interview/33929/what-are-computed-observables-in-knockout-js  
category: "knockcout js"  
tags: ["javascript", "knockout.js", "knockout observables"]  
reading_time: 3 minutes  

---

# What are computed observables in Knockout.js?

#### Knockout.js Computed Observable

The objects calculated in Knockout.js are unique view objects that update themselves whenever any of the clients changes. It is used to get or calculate values ​​based on other visible or explicit JavaScript attributes in your visualization. Here is a detailed explanation:

## Definition

Computed observables (`ko.computed()`) in Knockout.js are functions that compute a value based on other observables or simple JavaScript properties. They are automatically updated every time a care is due based on changes.

## Example-

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Computed observable Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js Computed observable</h2>
        <p>First Name: <span data-bind="text: firstName"></span></p>
        <p>Last Name: <span data-bind="text: lastName"></span></p>
        <p>Full Name: <span data-bind="text: fullName"></span></p>

    </div>

    <script>

        function AppViewModel() {
            this.firstName = ko.observable('John');
            this.lastName = ko.observable('Doe');
            // knockout.js computed observable
            this.fullName = ko.computed(function() {
                 return this.firstName() + ' ' + this.lastName();
            }, this);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel());

    </script>
</body>
</html>
```

**In this example**,

`fullName` is a numeric observable based on `firstName` and `lastName`. Whenever **firstName** or **lastName** changes, `fullName` automatically computed its value (`this.firstName() + ' ' + this.lastName();`).

## Output-

![What are computed observables in Knockout.js?](https://www.mindstick.com/interviewquestion/b1e9e051-247c-4edd-890e-7dc4b8b8be0f/images/ec586222-4cde-44f0-84cb-1b257aaf1521.jpg)

**Also, Read:** [Explain the role of observables and computed observables in Knockout.js?](https://www.mindstick.com/forum/160790/explain-the-role-of-observables-and-computed-observables-in-knockout-js)

## Answers

### Answer by Ashutosh Patel

#### Knockout.js Computed Observable

The objects calculated in Knockout.js are unique view objects that update themselves whenever any of the clients changes. It is used to get or calculate values ​​based on other visible or explicit JavaScript attributes in your visualization. Here is a detailed explanation:

## Definition

Computed observables (`ko.computed()`) in Knockout.js are functions that compute a value based on other observables or simple JavaScript properties. They are automatically updated every time a care is due based on changes.

## Example-

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Computed observable Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js Computed observable</h2>
        <p>First Name: <span data-bind="text: firstName"></span></p>
        <p>Last Name: <span data-bind="text: lastName"></span></p>
        <p>Full Name: <span data-bind="text: fullName"></span></p>

    </div>

    <script>

        function AppViewModel() {
            this.firstName = ko.observable('John');
            this.lastName = ko.observable('Doe');
            // knockout.js computed observable
            this.fullName = ko.computed(function() {
                 return this.firstName() + ' ' + this.lastName();
            }, this);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel());

    </script>
</body>
</html>
```

**In this example**,

`fullName` is a numeric observable based on `firstName` and `lastName`. Whenever **firstName** or **lastName** changes, `fullName` automatically computed its value (`this.firstName() + ' ' + this.lastName();`).

## Output-

![What are computed observables in Knockout.js?](https://www.mindstick.com/interviewquestion/b1e9e051-247c-4edd-890e-7dc4b8b8be0f/images/ec586222-4cde-44f0-84cb-1b257aaf1521.jpg)

**Also, Read:** [Explain the role of observables and computed observables in Knockout.js?](https://www.mindstick.com/forum/160790/explain-the-role-of-observables-and-computed-observables-in-knockout-js)


---

Original Source: https://www.mindstick.com/interview/33929/what-are-computed-observables-in-knockout-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
