Warm greetings! This lesson introduces data streams, which are essentially continuous datasets. Think of a weather station or a gaming application gathering data per second — both generate data streams! We will master handling these data streams using JavaScript, learning to access elements, slice segments, and even convert these streams into strings for easier handling.

In JavaScript, data streams are commonly mirrored as arrays. JavaScript also facilitates additional data structures like objects and sets.

Consider a straightforward JavaScript class named DataStream. This class encapsulates operations related to data streams in our program:

JavaScript
Copy to clipboard
1class DataStream {
2    constructor(data) {
3        this.data = data;
4    }
5}

To use it, we create a sample data stream as an instance of our DataStream class, where each element is an object:

JavaScript
Copy to clipboard
1const stream = new DataStream([
2    { id: 1, value: 100 },
3    { id: 2, value: 200 },
4    { id: 3, value: 300 },
5    { id: 4, value: 400 }
6]);

To look into individual elements of a data stream, we use indexing. The get() method we introduce below fetches the i-th element from the data stream:

JavaScript
Copy to clipboard
1class DataStream {
2    constructor(data) {
3        this.data = data;
4    }
5
6    get(i) {
7        return this.data[i];
8    }
9}

Here, we can see the get() method in action:

JavaScript
Copy to clipboard
1const stream = new DataStream([
2    { id: 1, value: 100 },
3    { id: 2, value: 200 },
4    { id: 3, value: 300 },
5    { id: 4, value: 400 }
6]);
7
8console.log(stream.get(2));  // It prints: { id: 3, value: 300 }
9console.log(stream.get(-1)); // It prints: undefined

In essence, stream.get(2) fetched us { id: 3, value: 300 } — the third element (since indexing starts from 0). Please note that JavaScript does not support indexing with negative indexes, so stream.get(-1) returns undefined.

Fetching a range of elements rather than a single one is facilitated by slicing. A slice data.slice(i, j) crafts a new array containing elements from position i (inclusive) to j (exclusive) in the data stream. We introduce a slice() method to support slicing:

JavaScript
Copy to clipboard
1class DataStream {
2    constructor(data) {
3        this.data = data;
4    }
5
6    get(i) {
7        return this.data[i];
8    }
9
10    slice(i, j) {
11        return this.data.slice(i, j);
12    }
13}

Here's a quick usage example:

JavaScript
Copy to clipboard
1const stream = new DataStream([
2    { id: 1, value: 100 },
3    { id: 2, value: 200 },
4    { id: 3, value: 300 },
5    { id: 4, value: 400 }
6]);
7
8console.log(stream.slice(1, 3));  // It prints: [{ id: 2, value: 200 }, { id: 3, value: 300 }]

For better readability, we may wish to convert our data streams into strings. To ensure the conversion works consistently, we will create a custom string representation for our data elements. Have a look at the toString() method in action:

JavaScript
Copy to clipboard
1class DataStream {
2    constructor(data) {
3        this.data = data;
4    }
5
6    get(i) {
7        return this.data[i];
8    }
9
10    slice(i, j) {
11        return this.data.slice(i, j);
12    }
13
14    toString() {
15        return '[' + this.data.map(item => JSON.stringify(item)).join(', ') + ']';
16    }
17}

To see it in action:

JavaScript
Copy to clipboard
1const stream = new DataStream([
2    { id: 1, value: 100 },
3    { id: 2, value: 200 },
4    { id: 3, value: 300 },
5    { id: 4, value: 400 }
6]);
7
8console.log(stream.toString());  // It prints: [{ "id": 1, "value": 100 }, { "id": 2, "value": 200 }, { "id": 3, "value": 300 }, { "id": 4, "value": 400 }]

In later lessons, we'll expand data stream functionality to include more complex data stream handling capabilities.

In this lesson, we've explored data streams, discovered how to represent and manipulate them using native JavaScript data structures, especially arrays, and encapsulated operations on data streams with JavaScript classes.

Now it's time to apply your newfound knowledge in the practice exercises that follow!