Meta tags:
description=Working with binary data in JavaScript;

Headings (most frequently used words):

to, arraybuffer, blob, dataview, typedarray, buffer, readablestream, from, string, number, data, file, system, uint8array, binary, documentation, index, on, this, page, and, views, streams, conversion, get, started, core, runtime, module, http, server, networking, storage, concurrency, process, interop, tooling, utilities, standards, compatibility, contributing, bunfile,

Text of the page (most frequently used words):
the (80), new (68), arraybuffer (67), blob (49), #buffer (48), buf (46), and (44), bun (39), from (39), arr (39), uint8array (38), const (37), #readablestream (32), array (32), bytes (32), dataview (32), with (31), stream (30), for (28), controller (28), file (28), view (26), typedarray (25), data (23), byte (21), are (21), that (18), binary (18), response (17), string (17), typed (17), await (17), number (17), range (16), create (15), this (14), enqueue (14), type (12), you (12), html (12), every (12), interpreted (12), text (11), slice (11), can (10), bytelength (10), hello (10), node (10), methods (10), bit (10), chunks (9), close (9), chunksize (9), start (9), byteoffset (9), console (9), documentation (8), streams (8), function (8), each (8), length (8), underlying (8), like (8), log (8), 108 (8), 255 (8), class (8), 0b00000000 (8), page (7), into (7), two (7), chunk (7), utf (7), implements (7), one (7), uint32array (7), subclass (7), following (7), javascript (7), arrays (7), converting (6), world (6), read (6), contents (6), size (6), has (6), value (6), classes (6), numbers (6), 256 (6), integer (6), its (5), readablestreamtoarraybuffer (5), let (5), decode (5), textdecoder (5), only (5), same (5), not (5), they (5), more (5), all (5), files (5), bunfile (5), represents (5), 111 (5), api (5), unsigned (5), four (5), write (5), offset (5), getuint8 (5), split (4), int8array (4), but (4), common (4), chunking (4), plain (4), tostring (4), uint16array (4), over (4), another (4), see (4), web (4), apis (4), used (4), writing (4), index (4), input (4), browser (4), element (4), name (4), body (4), 104 (4), directly (4), representing (4), which (4), most (4), available (4), first (4), views (4), values (4), bigint (4), signed (4), interface (4), copy (4), provides (3), adds (3), various (3), formats (3), other (3), individually (3), hex (3), base64 (3), entire (3), property (3), use (3), instance (3), module (3), memory (3), commonly (3), reading (3), lastmodified (3), loaded (3), unlike (3), 101 (3), parts (3), instances (3), working (3), between (3), provide (3), arr1 (3), elements (3), initialized (3), zero (3), particular (3), requires (3), error (3), table (3), eight (3), though (3), floating (3), point (3), family (3), setuint16 (3), 513 (3), types (3), storage (3), system (3), runtime (3), next (2), archive (2), utility (2), may (2), convenience (2), multiple (2), creates (2), since (2), format (2), instead (2), section (2), reference (2), conversion (2), readable (2), also (2), including (2), complete (2), refer (2), docs (2), mdn (2), txt (2), lazily (2), disk (2), require (2), copies (2), usually (2), support (2), ascii (2), 119 (2), 114 (2), 100 (2), pre (2), wide (2), several (2), decoder (2), encode (2), encoder (2), textencoder (2), 254 (2), 253 (2), 252 (2), 251 (2), fffefdfcfb (2), aqidbau (2), their (2), sequence (2), true (2), includes (2), acc (2), 128 (2), supports (2), because (2), arr2 (2), need (2), _______ (2), uint32 (2), long (2), there (2), way (2), rangeerror (2), throws (2), defined (2), biguint64array (2), 00000010 (2), 00000001 (2), how (2), capable (2), larger (2), 7e308 (2), 4e38 (2), description (2), interprets (2), out (2), bounds (2), interacting (2), lets (2), setuint8 (2), getuint16 (2), setfloat64 (2), 0b00000011 (2), manipulate (2), isn (2), store (2), building (2), get (2), utilities (2), contributing (2), compatibility (2), toml (2), cookies (2), fetch (2), server (2), install (2), typescript (2), search (2), built, hosted, mintlify, developer, platform, powered, youtube, discord, github, previous, raise, issue, suggest, edits, yes, was, helpful, tee, consumed, independently, readablestreamtoarray, resolving, readablestreamtotext, readablestreamtobytes, approach, verbose, unnecessary, overhead, optimized, functions, intermediate, etc, works, bytes_per_element, backing, sizes, differ, 1024, snippet, enqueues, single, stores, underlies, structures, snippets, using, duplex, writable, writablestream, work, without, loading, once, sending, receiving, network, requests, processing, large, amounts, getelementbyid, document, represent, uploaded, implement, does, asynchronously, these, concatenated, order, given, rarely, come, external, source, library, said, originated, browsers, part, itself, too, writeuint8, dates, introduction, spec, been, implemented, return, translate, strings, encodings, notably, fromhex, tohex, frombase64, tobase64, representations, classic, integers, properties, indexof, find, foreach, reduce, map, filter, regular, few, exceptions, example, would, resizing, pop, push, instantiated, don, pass, constructor, fix, holds, bits, cleanly, divide, minus, instantiating, 506097522914230528n, 117835012, 50462976, 1798, 1284, 770, 00000111, 00000110, 00000101, 00000100, 00000011, 00000000, shows, different, automatically, clamps, when, assigning, uint8clampedarray, 18446744073709551615, 9223372036854775808, 9223372036854775807, bigint64array, float64array, float32array, 104e5, 55e4, float16array, 2147483648, 2147483647, int32array, 32768, 32767, int16array, 127, 4294967295, 65535, assign, collectively, shared, superclass, global, scope, think, abstract, internal, whereas, varying, fixed, setuint32, getuint32, setint8, getint8, setint32, getint32, setint16, getint16, getfloat64, setfloat32, getfloat32, setbiguint64, getbiguint64, setbigint64, getbigint64, setters, getters, access, 1415, needs, space, than, writes, float64, three, now, have, even, second, third, were, written, still, component, 0b00000010, 0b00000001, uint16, sets, lower, level, manipulating, wraps, returns, despite, none, operators, might, expect, check, slices, had, language, native, until, ecmascript, 2009, introduced, mechanisms, fundamental, block, structure, created, path, timestamp, v20, experimental, readonly, mime, some, often, protocols, set, others, cheat, sheet, doubles, click, left, column, jump, standard, specific, noted, such, license, bindgen, windows, benchmarking, roadmap, globals, standards, utils, color, semver, glob, hashing, image, htmlrewriter, jsonl, json5, markdown, yaml, secrets, csrf, protection, transpiler, compiler, ffi, interop, tooling, cron, webview, spawn, shell, environment, variables, process, workers, concurrency, redis, sqlite, sql, dns, udp, tcp, websockets, networking, metrics, handling, tls, routing, http, router, plugins, auto, jsx, resolution, bunfig, repl, debugging, watch, mode, core, init, quickstart, installation, welcome, started, feedback, blog, guides, test, runner, bundler, package, manager, navigation, home, skip, main, content, discover, pages, before, exploring, further, llms,

Text of the page (random words):
r to string to number to readablestream from readablestream to arraybuffer to uint8array to typedarray to dataview to buffer to string to number to blob to readablestream data storage binary data copy page copy page working with binary data in javascript copy page copy page bun implements several data types and utilities for working with binary data in javascript most of which are web standard bun specific apis are noted as such this cheat sheet doubles as a table of contents click a class in the left column to jump to its section class description typedarray a family of classes that provide an array like interface for interacting with binary data includes uint8array uint16array int8array and more buffer a subclass of uint8array that implements a wide range of convenience methods unlike the others in this table it s a node js api which bun implements it isn t available in the browser dataview a class that provides a get set api for writing some number of bytes to an arraybuffer at a particular byte offset often used for reading or writing binary protocols blob a readonly blob of binary data usually representing a file has a mime type a size and methods for converting to arraybuffer readablestream and string file a subclass of blob that represents a file has a name and lastmodified timestamp node js v20 has experimental support bunfile bun only a subclass of blob that represents a lazily loaded file on disk created with bun file path arraybuffer and views javascript had no language native way to store and manipulate binary data until ecmascript v5 2009 introduced a range of mechanisms for it the most fundamental building block is arraybuffer a data structure that represents a sequence of bytes in memory this buffer can store 8 bytes const buf new arraybuffer 8 despite the name it isn t an array and supports none of the array methods and operators you might expect you can t read or write values from an arraybuffer directly all you can do is check its size and create slices from it const buf new arraybuffer 8 buf bytelength 8 const slice buf slice 0 4 returns new arraybuffer slice bytelength 4 to read or write the data you need a view a class that wraps an arraybuffer instance and lets you read and manipulate the underlying data there are two types of views typed arrays and dataview dataview the dataview class is a lower level interface for reading and manipulating the data in an arraybuffer the following creates a dataview and sets the first byte to 3 const buf new arraybuffer 4 0b00000000 0b00000000 0b00000000 0b00000000 const dv new dataview buf dv setuint8 0 3 write value 3 at byte offset 0 dv getuint8 0 3 0b00000011 0b00000000 0b00000000 0b00000000 next write a uint16 at byte offset 1 this requires two bytes the value 513 is 2 256 1 in bytes that s 00000010 00000001 dv setuint16 1 513 0b00000011 0b00000010 0b00000001 0b00000000 console log dv getuint16 1 513 the first three bytes of the underlying arraybuffer now have values even though the second and third bytes were written with setuint16 you can still read each component byte with getuint8 console log dv getuint8 1 2 console log dv getuint8 2 1 writing a value that needs more space than the underlying arraybuffer has throws an error the following writes a float64 which requires 8 bytes at byte offset 0 but the buffer is only four bytes long dv setfloat64 0 3 1415 rangeerror out of bounds access the following methods are available on dataview getters setters getbigint64 setbigint64 getbiguint64 setbiguint64 getfloat32 setfloat32 getfloat64 setfloat64 getint16 setint16 getint32 setint32 getint8 setint8 getuint16 setuint16 getuint32 setuint32 getuint8 setuint8 typedarray typed arrays are a family of classes that provide an array like interface for interacting with data in an arraybuffer whereas a dataview lets you write numbers of varying size at a particular offset a typedarray interprets the underlying bytes as an array of numbers each of a fixed size it s common to refer to this family of classes collectively by their shared superclass typedarray this class is internal to javascript you can t directly create instances of it and typedarray is not defined in the global scope think of it as an interface or an abstract class const buffer new arraybuffer 3 const arr new uint8array buffer contents are initialized to zero console log arr uint8array 3 0 0 0 assign values like an array arr 0 0 arr 1 10 arr 2 255 arr 3 255 no op out of bounds the typed array classes and how each interprets the bytes in an arraybuffer class description uint8array every one 1 byte is interpreted as an unsigned 8 bit integer range 0 to 255 uint16array every two 2 bytes are interpreted as an unsigned 16 bit integer range 0 to 65535 uint32array every four 4 bytes are interpreted as an unsigned 32 bit integer range 0 to 4294967295 int8array every one 1 byte is interpreted as a signed 8 bit integer range 128 to 127 int16array every two 2 bytes are interpreted as a signed 16 bit integer range 32768 to 32767 int32array every four 4 bytes are interpreted as a signed 32 bit integer range 2147483648 to 2147483647 float16array every two 2 bytes are interpreted as a 16 bit floating point number range 6 104e5 to 6 55e4 float32array every four 4 bytes are interpreted as a 32 bit floating point number range 3 4e38 to 3 4e38 float64array every eight 8 bytes are interpreted as a 64 bit floating point number range 1 7e308 to 1 7e308 bigint64array every eight 8 bytes are interpreted as a signed bigint range 9223372036854775808 to 9223372036854775807 though bigint is capable of representing larger numbers biguint64array every eight 8 bytes are interpreted as an unsigned bigint range 0 to 18446744073709551615 though bigint is capable of representing larger numbers uint8clampedarray same as uint8array but automatically clamps to the range 0 255 when assigning a value to an element the following table shows how the same bytes in an arraybuffer are interpreted by different typed array classes byte 0 byte 1 byte 2 byte 3 byte 4 byte 5 byte 6 byte 7 arraybuffer 00000000 00000001 00000010 00000011 00000100 00000101 00000110 00000111 uint8array 0 1 2 3 4 5 6 7 uint16array 256 1 256 0 770 3 256 2 1284 5 256 4 1798 7 256 6 uint32array 50462976 117835012 biguint64array 506097522914230528n to create a typed array from a pre defined arraybuffer create typed array from arraybuffer const buf new arraybuffer 10 const arr new uint8array buf arr 0 30 arr 1 60 all elements are initialized to zero console log arr uint8array 10 30 60 0 0 0 0 0 0 0 0 instantiating a uint32array from this same arraybuffer throws an error const buf new arraybuffer 10 const arr new uint32array buf rangeerror arraybuffer length minus the byteoffset is not a multiple of the element size a uint32 value requires four bytes 32 bits because the arraybuffer is 10 bytes long there s no way to cleanly divide its contents into 4 byte chunks to fix this create a typed array over a particular slice of the arraybuffer the following uint32array only views the first 8 bytes of the underlying arraybuffer a byteoffset of 0 and a length of 2 the number of uint32 values the array holds create typed array from arraybuffer slice const buf new arraybuffer 10 const arr new uint32array buf 0 2 buf _ _ _ _ _ _ _ _ _ _ 10 bytes arr _______ _______ 2 4 byte elements arr byteoffset 0 arr length 2 you don t need to create an arraybuffer instance first pass a length to the typed array constructor instead const arr2 new uint8array 5 all elements are initialized to zero uint8array 5 0 0 0 0 0 typed arrays can also be instantiated directly from an array of numbers or another typed array from an array of numbers const arr1 new uint8array 0 1 2 3 4 5 6 7 arr1 0 0 arr1 7 7 from another typed array const arr2 new uint8array arr typed arrays provide the same methods as regular arrays with a few exceptions for example push and pop are not available because they would require resizing the underlying arraybuffer const arr new uint8array 0 1 2 3 4 5 6 7 supports common array methods arr filter n n 128 uint8array 1 255 arr map n n 2 uint8array 8 0 2 4 6 8 10 12 14 arr reduce acc n acc n 0 28 arr foreach n console log n 0 1 2 3 4 5 6 7 arr every n n 10 true arr find n n 5 6 arr includes 5 true arr indexof 5 5 see the mdn documentation for more on typed array properties and methods uint8array uint8array is the most common typed array in javascript it represents a classic byte array a sequence of 8 bit unsigned integers between 0 and 255 in bun it has methods for converting between byte arrays and their base64 or hex string representations new uint8array 1 2 3 4 5 tobase64 aqidbau uint8array frombase64 aqidbau uint8array 5 1 2 3 4 5 new uint8array 255 254 253 252 251 tohex fffefdfcfb uint8array fromhex fffefdfcfb uint8array 5 255 254 253 252 251 it is the return value of textencoder encode and the input type of textdecoder decode two utility classes that translate between strings and various binary encodings most notably utf 8 const encoder new textencoder const bytes encoder encode hello world uint8array 11 104 101 108 108 111 32 119 111 114 108 100 const decoder new textdecoder const text decoder decode bytes hello world buffer bun implements buffer a node js api for working with binary data that pre dates the introduction of typed arrays in the javascript spec it has since been re implemented as a subclass of uint8array it provides a wide range of methods including several array like and dataview like methods const buf buffer from hello world buffer 11 104 101 108 108 111 32 119 111 114 108 100 buf length 11 buf 0 104 ascii for h buf writeuint8 72 0 ascii for h console log buf tostring hello world see the node js documentation blob blob is a web api commonly used for representing files it originated in browsers unlike arraybuffer which is part of javascript itself but node js and bun support it too you rarely create blob instances directly they usually come from an external source like an input type file element in the browser or a library that said you can create a blob from one or more string or binary blob parts const blob new blob html hello html type text html blob type text html blob size 18 these parts can be string arraybuffer typedarray dataview or other blob instances the parts are concatenated in the order they re given const blob new blob html new blob body new uint8array 104 101 108 108 111 hello in binary body html read the contents of a blob asynchronously in various formats await blob text html body hello body html await blob bytes uint8array copies contents await blob arraybuffer arraybuffer copies contents blob stream readablestream bunfile bunfile is a subclass of blob that represents a lazily loaded file on disk like file it adds a name and lastmodified property unlike file it does not require the file to be loaded into memory const file bun file index txt bunfile file file is a subclass of blob that adds a name and lastmodified property it s commonly used in the browser to represent files uploaded with an input type file element node js and bun implement file on browser input type file id file const files document getelementbyid file files file const file new file html hello html index html type text html see the mdn documentation streams streams let you work with binary data without loading it all into memory at once they re commonly used for reading and writing files sending and receiving network requests and processing large amounts of data bun implements the web apis readablestream and writablestream bun also implements the node stream module including readable writable and duplex for complete documentation refer to the node js docs to create a readable stream const stream new readablestream start controller controller enqueue hello controller enqueue world controller close read the stream chunk by chunk with for await for await const chunk of stream console log chunk hello world for more on streams in bun see streams conversion use this section as a reference for converting one binary format to another from arraybuffer since arraybuffer stores the data that underlies other binary structures like typedarray the following snippets are not converting from arraybuffer to another format instead they create a new instance using the underlying data to typedarray new uint8array buf to dataview new dataview buf to buffer create buffer over entire arraybuffer buffer from buf create buffer over a slice of the arraybuffer buffer from buf 0 10 to string as utf 8 new textdecoder decode buf to number array from new uint8array buf to blob new blob buf type text plain to readablestream the following snippet creates a readablestream and enqueues the entire arraybuffer as a single chunk new readablestream start controller controller enqueue buf controller close with chunking to stream the arraybuffer in chunks use a uint8array view and enqueue each chunk const view new uint8array buf const chunksize 1024 new readablestream start controller for let i 0 i view length i chunksize controller enqueue view slice i i chunksize controller close from typedarray to arraybuffer the buffer property is the underlying arraybuffer a typedarray can be a view of a slice of that buffer so the sizes may differ arr buffer to dataview to create a dataview over the same byte range as the typedarray new dataview arr buffer arr byteoffset arr bytelength to buffer buffer from arr to string as utf 8 new textdecoder decode arr to number array from arr to blob only if arr is a view of its entire backing typedarray new blob arr buffer type text plain to readablestream new readablestream start controller controller enqueue arr controller close with chunking to stream the arraybuffer in chunks split the typedarray into chunks and enqueue each one individually new readablestream start controller for let i 0 i arr length i chunksize controller enqueue arr slice i i chunksize controller close from dataview to arraybuffer view buffer to typedarray only works if the bytelength of the dataview is a multiple of the bytes_per_element of the typedarray subclass new uint8array view buffer view byteoffset view bytelength new uint16array view buffer view byteoffset view bytelength 2 new uint32array view buffer view byteoffset view bytelength 4 etc to buffer buffer from view buffer view byteoffset view bytelength to string as utf 8 new textdecoder decode view to number array from view to blob new blob view buffer type text plain to readablestream new readablestream start controller controller enqueue view buffer controller close with chunking to stream the arraybuffer in chunks split the dataview into chunks and enqueue each one individually new readablestream start controller for let i 0 i view bytelength i chunksize controller enqueue view buffer slice i i chunksize controller close from buffer to arraybuffer buf buffer to typedarray new uint8array buf to dataview new dataview buf buffer buf byteoffset buf bytelength to s...