---
title: "Introduction to observables and observable arrays"
description: "Introduction to observables and observable arrays"
author: "ICSM Computer"
published: 2025-04-23
updated: 2025-04-23
canonical: https://www.mindstick.com/interview/34045/introduction-to-observables-and-observable-arrays
category: "knockcout js"
tags: ["knockout.js", "knockout observables"]
reading_time: 3 minutes
---
# Introduction to observables and observable arrays
Absolutely! Let's dive into the **core concepts of Knockout.js**: `observables` and `observableArrays`. These are what give Knockout its **reactive binding magic** 🪄.
## What is an `observable` in Knockout.js?
An `observable` is a special JavaScript object that **tracks changes** to a value. When the value changes, any UI elements or computed functions bound to it **automatically update**.
### Basic Syntax:
```javascript
let myObservable = ko.observable("Hello");
```
1. To **get the value**: `myObservable()`
2. To **set a new value**: `myObservable("World")`
### Example:
```javascript
let name = ko.observable("Alice");
console.log(name()); // Outputs: Alice
name("Bob");
console.log(name()); // Outputs: Bob
```
## What is an `observableArray`?
An `observableArray` is just like a regular array, but **Knockout tracks additions/removals** and updates the UI accordingly.
### ✅ Syntax:
```javascript
let items = ko.observableArray(["Apple", "Banana"]);
```
### Useful Methods:
1. `push(item)`
2. `remove(item)`
3. `pop()`, `shift()`, `unshift()`
4. `replace(oldItem, newItem)`
### Example:
```javascript
let fruits = ko.observableArray(["Apple", "Banana"]);
fruits.push("Cherry"); // ["Apple", "Banana", "Cherry"]
fruits.remove("Banana"); // ["Apple", "Cherry"]
```
## Example in HTML (Binding with UI)
```html
First Name:
Hello, !
```
```javascript
function ViewModel() {
this.firstName = ko.observable("John");
this.fruits = ko.observableArray(["Apple", "Banana"]);
}
ko.applyBindings(new ViewModel());
```
## Recap:
| Concept | Type | Use Case |
| --- | --- | --- |
| `ko.observable()` | Single value | Text fields, numbers, booleans |
| `ko.observableArray()` | Arrays | Lists, tables, multi-selections |
## Answers
### Answer by ICSM Computer
Absolutely! Let's dive into the **core concepts of Knockout.js**: `observables` and `observableArrays`. These are what give Knockout its **reactive binding magic** 🪄.
## What is an `observable` in Knockout.js?
An `observable` is a special JavaScript object that **tracks changes** to a value. When the value changes, any UI elements or computed functions bound to it **automatically update**.
### Basic Syntax:
```javascript
let myObservable = ko.observable("Hello");
```
1. To **get the value**: `myObservable()`
2. To **set a new value**: `myObservable("World")`
### Example:
```javascript
let name = ko.observable("Alice");
console.log(name()); // Outputs: Alice
name("Bob");
console.log(name()); // Outputs: Bob
```
## What is an `observableArray`?
An `observableArray` is just like a regular array, but **Knockout tracks additions/removals** and updates the UI accordingly.
### ✅ Syntax:
```javascript
let items = ko.observableArray(["Apple", "Banana"]);
```
### Useful Methods:
1. `push(item)`
2. `remove(item)`
3. `pop()`, `shift()`, `unshift()`
4. `replace(oldItem, newItem)`
### Example:
```javascript
let fruits = ko.observableArray(["Apple", "Banana"]);
fruits.push("Cherry"); // ["Apple", "Banana", "Cherry"]
fruits.remove("Banana"); // ["Apple", "Cherry"]
```
## Example in HTML (Binding with UI)
```html