JavaScript DataView – Learn the concepts like a pro!

Free Web development courses with real-time projects Start Now!!

In this tutorial, we will discuss about JavaScript Dataview, which is an important concept while working with data. We will work on understanding how JavaScript deals with all the data. We will learn about buffers and ArrayBuffer, then implement them in DataView function in JavaScript.

Data Buffers

In programming, a data buffer (or simply buffer) is a storage area in physical memory that stores temporary data for the time it moves from one place to another. You may wonder sometimes how the interpreter receives the JavaScript file, processes it, and returns the output. Well, the interpreter reads the lines with the help of a memory buffer that stores a string of binary data. A running file is present in the primary memory. If the interpreter had to go back to the file to read each bit, the execution process will consume a lot of time. To prevent this, JavaScript uses the data buffer, which stores some of the bits together and then sends them all together to the interpreter. This way, the JavaScript interpreter doesn’t need to worry about retrieving the files from the file data. This method saves execution time and speeds up the application. The diagram below makes the concept transparent.

Data Buffer - JavaScript DataView

Various buffer classes perform efficient binary operations on the data, including File, Blob, ArrayBuffer, and Array. The method selected decides the internal structure of the buffer in memory.

What is JavaScript ArrayBuffer?

These are a fixed-length reference of bytes to a contiguous memory area. These are similar to the Array objects since their size cannot be changed. It takes the same memory area as its size, whether the buffer is empty or not. Also, to access individual bytes, we use TypedArray or DataView, rather than directly accessing it with the help of the index. These objects represent the buffer in a specific format and help to read and write the contents of the buffer. The syntax to create an ArrayBuffer is as follows:

new ArrayBuffer(length)

The length parameter specifies the size of the array buffer. The statement returns an ArrayBuffer object of the specified size, with the contents initialized by 0. If the value of the length is more than Number.MAX_SAFE_INTEGER (>= 2 ** 53) or negative, it throws a RangeError.

ArrayBuffer has no idea what the data stored inside it means. For the buffer, it’s just a sequence of bytes. A view object gives the interpretation of bytes stored in a buffer. The following are some instances of how it all works:

  • Uint8Array treats each byte as a separate value, containing values between 0 and 255. These values are called “8-bit unsigned integer”.
  • Uint16Array treats every two bytes as an integer, with values between 0 and 65535, called a “16-bit unsigned integer”.
  • Uint32Array treats every four bytes as an integer value, with values between 0 and 4294967295, called a “32-bit unsigned integer”.
  • Float64Array treats every eight bytes as an integer value, with values between 5.0×10-324 and 1.8×10308.

Wait! Have you checked – JavaScript Array Tutorial

This tells us that an ArrayBuffer of 16 bytes may be interpreted as 16 smaller numbers, 8 small numbers (2 bytes each), 4 bigger numbers (4 bytes each), or 2 floating-point values with high precision (8 bytes each). I hope the last statements in the code below make the definitions crystal clear.

New array buffer chart - JavaScript DataView

Let’s create an ArrayBuffer object and determine the size of the defined buffer with the help of a few statements in the console.

Code:

var buffer = new ArrayBuffer(64) // creating an ArrayBuffer of size 5 bytes
buffer.byteLength // get size of buffer
// 64
new Uint8Array(buffer).length
// 64
new Uint16Array(buffer).length
// 32
new Uint32Array(buffer).length
// 16
new Float64Array(buffer).length
// 8

Output:

array buffer - JavaScript DataView

TypedArray

The above views are commonly termed as a TypedArray, which share the same set of methods and properties. A TypedArray constructor varies its behavior based on the argument type. There are 5 different ways to create the constructor.

For an ArrayBuffer argument (we used this syntax in the above example to create a view.)

new TypedArray(buffer [, byteOffset [, length]])

For an Array or an array-like object, it creates a typed array with the same length and then copies its content.

new TypedArray(object)

For a TypedArray, it creates a typed array and copies its content. If needed, it converts the values to the new type.

new TypedArray(TypedArray)

For a numeric argument, it creates the typed array to contain that many elements.

new TypedArray(length)

For zero arguments, it creates a typed array of zero length.

new TypedArray()

Since a view can never exist without an elemental ArrayBuffer, it is created automatically in all the cases above.

What is JavaScript DataView?

This view provides a low-level interface to read and write multiple number types in ArrayBuffer. We don’t have to worry about how computers organize the bytes that make the number. This byte order is known as “endianness”. This means that we can read and store data at any offset without alignment constraints. The syntax to create DataView looks as follows:

new DataView(buffer [, byteOffset [, byteLength]])

DataView accessors provide explicit control of how we access the data, regardless of executing computer’s endianness.

DataView Properties

These values, fixed at construction time, may not be changed during the program execution.

  • buffer: We reference the ArrayBuffer with this view.
  • byteLength: From the start of its ArrayBuffer, the length of this view.
  • byteOffset: The offset of the view from the start of its ArrayBuffer.

Methods of DataView in JavaScript

The methods available in a DataView to read values are as follows:

Method

Description
getInt8()It gets an 8-bit signed integer (byte) at the specified offset from the start of the view.
getUint8()

It gets an 8-bit unsigned integer (unsigned byte) at the specified offset from the start of the view.

getInt16()

It gets a 16-bit signed integer (short) at the specified offset from the start of the view.

getUint16()

It gets a 16-bit unsigned integer (unsigned short) at the specified offset from the start of the view.

getInt32()

It gets a 32-bit signed integer (long) at the specified offset from the start of the view.

getUint32()

It gets a 32-bit unsigned integer (unsigned long) at the specified offset from the start of the view.

getFloat32()

It gets a 32-bit signed float (float) at the specified offset from the start of the view.

getFloat64()

It gets a 64-bit signed float (double) at the specified offset from the start of the view.

getBigInt64()

It gets a 64-bit signed integer (long long) at the specified offset from the start of the view.

getBigUint64()

It gets a 64-bit unsigned integer (unsigned long long) at the specified offset from the start of the view.

The methods available in a DataView for writing values are as follows:

Method

Description

setInt8()It sets an 8-bit signed integer (byte) at the specified offset from the start of the view.
setUint8()

It sets an 8-bit unsigned integer (unsigned byte) at the specified offset from the start of the view.

setInt16()

It sets a 16-bit signed integer (short) at the specified offset from the start of the view.

setUint16()

It sets a 16-bit unsigned integer (unsigned short) at the specified offset from the start of the view.

setInt32()

It sets a 32-bit signed integer (long) at the specified offset from the start of the view.

setUint32()

It sets a 32-bit unsigned integer (unsigned long) at the specified offset from the start of the view.

setFloat32()

It sets a 32-bit signed float (float) at the specified offset from the start of the view.

setFloat64()

It sets a 64-bit signed float (double) at the specified offset from the start of the view.

setBigInt64()

It sets a 64-bit signed integer (long long) at the specified offset from the start of the view.

setBigUint64()

It sets a 64-bit unsigned integer (unsigned long long) at the specified offset from the start of the view.

A JavaScript program creating a DataView is as follows:

Code:

<html>
  <body>

    <script>
      //create an ArrayBuffer
      var buffer = new ArrayBuffer(32);
      //create a view
      var dataview = new DataView(buffer, 0);
      //using methods
      dataview.setInt16(1, 56);
      dataview.getInt16(1); // 42
    </script>

  </body>
</html>

Screenshot:

dataview methods - JavaScript DataView

Output:

dataview methods output - JavaScript DataView

Summary

In this tutorial, we learned all the core aspects of JavaScript DataView. We learned what data buffers are and their working. We also touched base with ArrayBuffer and TypedArrays and discussed various properties and methods of DataView.

Time to check out the next tutorial – JavaScript Styles

Are you clear with the concept of JavaScript DataView? Any queries, share them in the comment section.

Did you know we work 24x7 to provide you best tutorials
Please encourage us - write a review on Google

follow dataflair on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *