JavaScript DataView.getFloat32() Method

The DataView.getFloat32 function in JavaScript is a native method within the DataView object. This method retrieves a signed 32-bit floating-point number from a designated position. A 32-bit floating-point number is found at a particular byte offset relative to the beginning of the data view, and it can represent values ranging from -3.4E+38 to +3.4E+38.

Syntax

dataview.getFloat32(byteOffset, littleEndian)

Description:

• ✅ dataView: The dataView is an instance of the DataView object . It provides us with methods to read and write raw binary data from an ArrayBuffer .
• ✅ getFloat32: The getFloat32 is a method that is utilized for retrieving a 32-bit floating-point number.
• ✅ byteoffset : The offset, in a byte, from the start of the view where to read the data.
• ✅ littleEndian: An optional parameter , which is utilized to denote the format of data. It represents whether the data is kept in little-endian format or big-endian format. If the little-endian value is false or undefined, then a big-endian value is read.

Return value

This method returns a signed 32-bit float number.

Example 1: Example of Utilizing DataView.getFloat32 to Read Float Values from an ArrayBuffer in JavaScript

Example

//JavaScript to illustrate dataview.getFloat32() method  

// creating an ArrayBuffer   

var pyVisualizer = new ArrayBuffer(8);  

// creating a view  

var arr = new DataView(pyVisualizer);  

// put the value 3.1 at offset 1  

arr.setFloat32(1,3.1);  

console.log("If we give a Float value, then output will be");  

console.log(arr.getFloat32(1));  

//expected output: 3.0999999046325684

Output:

If we give a Float value, then the output will be

3.0999999046325684

Explanation:

In the preceding example, a variable called pyVisualizer was established using the var keyword, and it was assigned a new ArrayBuffer(8). This action results in the creation of a basic binary buffer that is 8 bytes in size. Additionally, we defined another variable named arr, also using the var keyword, and assigned it a new DataView(pyVisualizer). This particular object is designed to facilitate the reading and writing of numbers in various formats, including Int8, Uint16, Float32, and others, within the buffer.

The statement arr.setFloat32(1, 3.1) is employed to insert the value 3.1 into the buffer in a 32-bit floating-point representation, beginning at a byte offset of 1. Conversely, the statement arr.getFloat32(1) is used to retrieve 4 bytes from the buffer starting at offset 1 and interprets these bytes as a Float32. This operation returns the value that was previously written.

Note: The output is 3.0999999046325684, not 3.1, because JavaScript and most programming languages utilize the IEEE-754 floating-point standard. Therefore, some decimal numbers like 3.1 cannot be represented exactly in binary. They are stored as the nearest possible binary fraction.

Example 2: Example of Handling Missing Data with DataView.getFloat32 and Returning NaN in JavaScript

Example

//JavaScript to illustrate dataview.getFloat32() method  

// if there is no data to be stored, then it returns Nan  

// creating an ArrayBuffer   

var pyVisualizer = new ArrayBuffer(8);  

// creating a view  

var arr = new DataView(pyVisualizer);  

// No Data  

arr.setFloat32(1);  

console.log("If we call setFloat32 without a value, the stored result will be")  

console.log(arr.getFloat32(1));  

//expected output: NaN

Output:

If we call setFloat32 without a value, the stored result will be

NaN

Explanation:

In the previous illustration, we initialized an 8-byte ArrayBuffer and constructed a DataView on top of it. By invoking setFloat32 without specifying a value, we subsequently retrieved the Float32, which resulted in printing NaN. A variable referred to as pyVisualizer was declared using the var keyword, and a new ArrayBuffer(8) was employed to generate a raw buffer encompassing 8 bytes, with the initial byte values being 0x00.

We establish a new variable referred to as arr using the var keyword and assign it a new DataView(pyVisualizer). This DataView allows us to read or write numeric values at any byte offset within the buffer while providing control over endianness. By default, if no value is set, the buffer is initialized with zeros, and invoking getFloat32 will yield 0. In this scenario, arr.setFloat32(1) is called, which invokes setFloat32 with only the byteOffset argument and omits the value parameter. Consequently, JavaScript interprets this as undefined, and writing undefined as a Float32 results in NaN.

Example 3: Example of Utilizing DataView.getFloat32 with Math.PI in JavaScript

Example

//JavaScript to illustrate dataview.getFloat32() method  

// creating an ArrayBuffer   

var pyVisualizer = new ArrayBuffer(10);  

// creating a view  

var arr = new DataView(pyVisualizer);  

//We can also use math functions like Math.PI  

console.log("PI value will be");  

arr.setFloat32(1,Math.PI);  

console.log(arr.getFloat32(1));  

//expected output: 3.1415927410125732

Output:

PI value will be

3.1415927410125732

Explanation:

In the preceding illustration, we established a variable called pyVisualizer by using the var keyword and assigned it a new ArrayBuffer(10), which represents a fixed-size block of raw binary data. Additionally, we created another variable referred to as arr, also employing the var keyword, and assigned it a new DataView(pyVisualizer). This DataView provides functionalities to read and write various numeric types such as Int8, Uint16, Float32, among others, within the buffer. The line arr.setFloat32(1, Math.PI) places a 32-bit floating-point number at the specified position within the buffer. Meanwhile, arr.getFloat32(1) retrieves 4 bytes starting from the given offset and interprets them as a 32-bit float. The output in this case is 3.1415927410125732, which differs slightly from 3.141592653589793 because Float32 has a restricted precision compared to the default number representation in JavaScript.

Browser Support

Conclusion:

The method DataView.getFloat32 in JavaScript serves the purpose of extracting a 32-bit floating-point number from an ArrayBuffer at a designated byte offset. The underlying binary data is represented in accordance with the IEEE 754 standard. If there is no valid data found at the specified offset, the method returns NaN. This functionality is particularly useful for managing raw binary data, allowing for meticulous control over the storage and retrieval of numerical values, which is essential in contexts such as files, network streams, or low-level memory structures. This article will explore DataView.getFloat32 through various examples.

Frequently Asked Questions (FAQs):

1. What does DataView.getFloat32 do in JavaScript?

The DataView.getFloat32 function in JavaScript is employed to extract 4 bytes from a DataView at a designated byte offset, interpreting these bytes as a 32-bit floating-point number in accordance with the IEEE 754 standard.

1. What does DataView.getFloat32 return?

The DataView.getFloat32 method provides a 32-bit floating-point number.

1. What is the spectrum of values that a 32-bit float can signify?

The range for 32-bit floating-point values is roughly between -3.4E+38 and +3.4E+38.

1. What distinguishes DataView.getFloat64 from DataView.getFloat32?

A 64-bit (8-byte) floating-point value is retrieved using the DataView.getFloat64 method, while a 32-bit (4-byte) floating-point value is obtained via DataView.getFloat32.

1. What will happen if the byteOffset exceeds the bounds?

A RangeError will be raised if either byteOffset or byteOffset + 3 exceeds the limits of the DataView.