2b:null 2c:["$","title",null,{"children":"Typed Arrays and ArrayBuffers | Jules Blom | Observable"}] 31:T787,types = md`### The 11 types of typed arrays Typed arrays have self-descriptive names. The name *typed array* is a bit misleading though, as they are really views and not actual \`Array\`s, they merely reference the underlying \`ArrayBuffer\`. | Type | Bytes | Range (exp) | Range (human) | ------ | ---- | --------- | | \`Int8Array\` | 1 | ${tex`-2^7`} to ${tex`2^7-1`} | -128 to 127 | | \`Uint8Array\` | 1 | 0 to ${tex`2^8-1`} | 0 to 255 | | \`Uint8ClampedArray\`| 1 | 0 to ${tex`2^8 - 1`} | 0 to 255 (clamped) | | \`Int16Array\` | 2 | ${tex`-2^{15}`} to ${tex`2^{15}-1`} | -32 768 to 32 767 | | \`Uint16Array\` | 2 | 0 to ${tex`2^{16}-1`} | 0 to 65 535 | | \`Int32Array\` | 4 | ${tex`-2^{31}`} to ${tex`2^{31}-1`} | | | \`Uint32Array\` | 4 | 0 to ${tex`2^{32}-1`} | | | \`BigInt64Array\` | 8 | ${tex`-2^{63}`} to ${tex`2^{63}-1`} | | | \`BigUint64Array\` | 8 | 0 to ${tex`2^{64} -1`} | | | \`Float32Array\` | 4 | ${tex`1.2 \times 10^{-38}`} to ${tex`3.4\times 10^{38}`}| | | \`Float64Array\` | 8 | ${tex`5.0 \times 10^{-324}`} to ${tex`1.8 \times 10^{308}`} | |

Glossary

\`U\`: Unsigned, no negative sign allowed, all values are positive
\`Int\`: Integers, all values are whole numbers; 0, 1, 2, 3...
\`Float\`: Floating point
[\`BigInt\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt): A built-in object that provides a way to represent whole numbers larger than ${tex`2^{53} - 1`}
\`8\`: Only 8 bits of information, which means the max value is ${tex`2^8-1=255`}
\`16\`: Only 16 bits of information, which means the max value is ${tex`2^{16}-1`}
\`32\`: Only 32 bits of information, which means the max value is ${tex`2^{32}-1`}
\`64\`: Only 64 bits of information, which means the max value is ${tex`2^{64}-1`}

`32:T46a,There's also the `.subarray()` and `.set()` methods which are specific to typed arrays. > The `subarray()` method returns a new TypedArray on the same ArrayBuffer store and with the same element types as for this TypedArray object. The begin offset is inclusive and the end offset is exclusive. TypedArray is one of the typed array types. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray) > `TypedArray.prototype.set(arrayOrTypedArray, offset=0)` `.set()` copies all elements of `arrayOrTypedArray` to this Typed Array. The element at index 0 of `arrayOrTypedArray` is written to index offset of this Typed Array (etc.). > If `arrayOrTypedArray` is a normal Array, its elements are converted to numbers who are then converted to the element type T of this Typed Array. > If `arrayOrTypedArray` is a Typed Array then each of its elements is converted directly to the appropriate type for this Typed Array. If both Typed Arrays have the same element type then faster, byte-wise copying is used. [Exploring ES6 by Axel Rauschmayer](https://leanpub.com/exploring-es6)33:T4cb,visualizeTypedArray = (typedArray) => { const bufferLength = typedArray.buffer.byteLength; const bytesPerElement = typedArray.BYTES_PER_ELEMENT; const { length } = typedArray; const typedArraySquareWidth = squareWidth * bytesPerElement; const typedArrayBlocks = svg` `; return typedArrayBlocks; }34:[] 2f:{"id":"f3b0296445773e86","slug":"typed-arrays-and-arraybuffers-too","title":"Typed Arrays and ArrayBuffers","thumbnail":"76ff45573059a43c05dcaff19b2c3fdd91450db5b71f52c5b73f6336c0e95bc6","access_level":"public","create_time":"$D2020-10-16T18:40:35.932Z","update_time":"$D2026-07-02T09:49:07.133Z","view_time":null,"first_public_time":"$D2020-10-27T12:59:50.816Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":2809,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"fa14e079751b19fe","slug":"javascript-explainable","title":"JavaScript explainable","owner":{"id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom"}},"type":"notebook","body":{"title":"Typed Arrays and ArrayBuffers","cells":[{"id":1162,"value":"# Typed Arrays and ArrayBuffers\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2786,"value":"

This is my notebook to learn what typed arrays are, how they work and when to use 'm. Instead of my usual notetaking approach (several disorganized markdown files with code blocks and a load of links) I've made this 'explainable' notebook so others can learn from it too. It still needs some polish though, so I'm happy to receive feedback.

\n\n## What are they?\n\n**Typed arrays** are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. But before we dive into typed arrays, we have to get into \\`ArrayBuffer\\`s.\n\nAn \\`ArrayBuffer\\` is an object representing a chunk of **fixed-length binary data**; it has no format to speak of and offers no mechanism for accessing its contents, it's just an array of bytes. Create an \\`ArrayBuffer\\` by passing its number of bytes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"viewof arrayBufferSize = slider({\n min: 4, \n max: 64, \n step: 1, \n value: 32, \n title: \"arrayBuffer size (bytes)\", \n description: \"Limited here to 64 for presentation purposes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"buffer = new ArrayBuffer(arrayBufferSize);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"md`\\`buffer\\` is a binary buffer that is ${arrayBufferSize}-bytes long (${arrayBufferSize * 8}-bits), that's initialized to all 0s.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2704,"value":"md`An \\`ArrayBuffer\\`s length can be checked with the \\`.byteLength\\` property.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"buffer.byteLength // Checking byteLength is pretty much the only thing you can do on an ArrayBuffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":985,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`### Views\n\nYou cannot directly manipulate the contents of an \\`ArrayBuffer\\` and its length can't be modified; instead you need to use a **view** to access its memory. A view provides a context — that is, a data type, starting offset, and the number of elements — that turns the data into a typed array. Two kinds of views are used to access the data:\n\n1. Instances of \\`DataView\\` let you access data as elements of several types (Uint8, Int16, Float32, etc.), at any byte offset inside an ArrayBuffer.\n2. **Typed Arrays** interpret the \\`ArrayBuffer\\` as an indexed sequence of elements of a **single type**. These are mappings of whether the bits should be viewed as an array of 8-bit signed integers, 16-bit signed integers, and so on (see the [types of typed arrays section](#types) for more details on this).\n\nA single \\`arrayBuffer\\` can have multiple views attached to it\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1369,"value":"dataview = {\n const dataview = new DataView(buffer);\n dataview.setInt16(1, 42); // set type Int16 with value 42 in 1st byte\n dataview.setInt8(3, 4); // set type Int8 with value 1 in 3rd byte\n \n return dataview\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2517,"value":"dataview.getInt16(1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2526,"value":"dataview.getInt8(3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"md`The truth is you'll almost never need a \\`DataView\\`, so let us not go to deep into it. Let's look at all types of typed arrays instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1538,"value":"md`We can view our \\`buffer\\` from before as 8-bit signed integers by using the \\`Int8Array\\` constructer and passing it the buffer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1387,"value":"uint8 = new Uint8Array(buffer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1362,"value":"md`Now \\`int8\\` is a typed array of 8-bit (signed) integers mapped over the ${arrayBufferSize}-byte buffer, meaning it's ${texTypedArrayLength(arrayBufferSize, 8)} elements long, 1 byte per element. Here's a diagram of it along with its associated \\`arrayBuffer\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1587,"value":"visualizeTypedArray(uint8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2726,"value":"We can also check how many bytes go into each element using the `BYTES_PER_ELEMENT` property of typed arrays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2323,"value":"uint8.BYTES_PER_ELEMENT ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1398,"value":"uint16 = new Uint16Array(buffer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1396,"value":"md`If we interpret the buffer as 16-bit integers instead, we'll get a typed array ${texTypedArrayLength(arrayBufferSize, 16)} elements long instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1490,"value":"visualizeTypedArray(uint16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2327,"value":"uint16.BYTES_PER_ELEMENT","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2160,"value":"md`You may have noticed that there are values in both \\`uint8\\` and \\`uint16\\`. This is because we set values in \\`dataview\\` above, which is attached to the same \\`ArrayBuffer\\` as \\`uint8\\` and \\`uint16\\`.\n\nThe associated \\`ArrayBuffer\\` can retrieved be using the \\`.buffer\\` property. We can check if two typed arrays are associated with the same \\`ArrayBuffer\\` using \\`Object.is()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2598,"value":"Object.is(dataview.buffer, uint8.buffer) // ✅ dataview and uint8 are associated with the same ArrayBuffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2596,"value":"Object.is(uint16.buffer, uint8.buffer) // ✅ uint8 and uint16 are associated with the same ArrayBuffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1531,"value":"md`Now you can probably tell how long the typed array will be if buffer is interpreted as 32-bit integer? ${texTypedArrayLength(arrayBufferSize, 32)} elements (Int32's) long.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1481,"value":"uint32 = new Uint32Array(buffer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1525,"value":"visualizeTypedArray(uint32)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2329,"value":"uint32.BYTES_PER_ELEMENT","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2222,"value":"float64a = new Float64Array(buffer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2387,"value":"visualizeTypedArray(float64a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2232,"value":"md`${texTypedArrayLength(arrayBufferSize, 64)} elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2333,"value":"float64a.BYTES_PER_ELEMENT","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1145,"value":"md`### Summary\n\nSo a small recap\n1. An \\`ArrayBuffer\\` is the actual storage for the bytes \n2. A \\`DataView\\` is a wrapper around an \\`ArrayBuffer\\` to access its memory in units of various sizes.\n3. A typed array is same as a \\`DataView\\` except that it accesses all elements as the same type in a fixed-sized unit, just a preconfigured \\`DataView\\` if you will`\n// An \\`ArrayBuffer\\` is basically actual memory. An ArrayBuffer is the actual storage for the bytes but is rarely used directly - in fact, you don't have access to read content of ArrayBuffer directly and can only pass a reference for it","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1728,"value":"md`## Directly creating typed arrays\nYou'll probably rarely create an \\`ArrayBuffer\\` directly, but still it's good to know how it works behind the scenes. Instead you'll create instances of typed arrays directly, which automatically create an associated \\`ArrayBuffer\\` in memory, which is where the elements are actually stored.\n\nTyped arrays can be constructed in a number of ways. Let's go over them in order of ease.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1844,"value":"md`### 1. From a length`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`First off, ll the typed arrays are constructors that require the use of the \\`new\\` operator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"Int8Array(16) // 🌶 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2771,"value":"Create a typed array by passing it the desired length. Unlike normal arrays, typed arrays can't have holes. Therefore typed arrays are initialized with all 0s.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"int8 = new Int8Array(10) // ✅ ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1829,"value":"If you don't know what is meant by *holes* in an array, look at the following cell, otherwise nevermind.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":776,"value":"arrayWithHoles = {\n const regulararray = new Array(10); // Creates a regular Array without any elements, it initially only has empty 'holes'\n\n // fill the these indices with values\n regulararray[4] = 12;\n regulararray[7] = 10;\n regulararray[10] = 5;\n\n return regulararray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1812,"value":"Access the automatically created `ArrayBuffer` of this typed array with the `.buffer` property.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":720,"value":"int8.buffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"md`### 2. From a regular array\n\nConvert a regular array to a typed array by passing it as a constructor argument to a Typed Array `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"new Uint16Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) // Create a Uint16 typed array from a regular array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2268,"value":"md`Or use the static \\`.from()\\` method which creates a new typed array from an array-like or iterable object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2245,"value":"Uint32Array.from([1, \"12\", 12, ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"md`### 3. From another typed array `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"uint32b = new Uint32Array(uint16) // Create a typed array from another typed array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2738,"value":"Object.is(uint16.buffer, uint32b.buffer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"md`### 4. From an iterable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1892,"value":"iterable = (function* () {\n yield* [1, 2, 3];\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1900,"value":"new Int8Array(iterable)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1878,"value":"md`### 5. From an \\`ArrayBuffer\\`\n\nWe've already seen this one at the beginning\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1880,"value":"newBuffer = new ArrayBuffer(8);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1883,"value":"new Int8Array(buffer, 2, 4);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1925,"value":"md`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1999,"value":"float64 = new Float64Array(10) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"{\n float64[0] = \"Can't add strings!\"; // 🌶 String is not a number — NaN\n float64[1] = { text: \"Can't add objects!\" }; // 🌶 Object is not a number — NaN\n float64[2] = [\"Can't add arrays neither!\"]; //🌶 Arrays are just objects, so will also return NaN\n float64[3] = () => \"Nor functions\"; // 🌶 Functions are also objects — NaN\n float64[4] = 28289; // ✅ Numbers only, thank you\n float64[5] = -213; // ✅ Negative numbers for float64? Sure\n float64[6] = \"53\"; // ✅ Strings are coerced to numbers if possible\n\n return float64;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"But remember that `NaN` is still of type `number`. If you're checking for `NaN`s, use `Number.isNan()` instead","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":847,"value":"typeof float64[0] // 🌶 typeof NaN = \"number\" so not a good way to check if values are NaN","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"Number.isNaN(float64[0]) // ✅","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"md`### Under & overflow\n\nBe aware that the elements in typed arrays really are constrained to the declared bit sizes. If you have a \\`Uint8Array\\` and try to assign something larger than an 8-bit value into one of its elements, the value wraps around so as to stay within the bit length.\n\nNormally, when a value is out of the range of the element type, modulo arithmetic is used to convert it to a value within range. For integers (signed and unsigned) that means that:\n\n* The highest value plus one is converted to the lowest value (0 for unsigned integers).\n* The lowest value minus one is converted to the highest value.\n* Modulo conversion for unsigned 8-bit integers:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2641,"value":"md`#### Uint8 typed array values\n\nLet's look at what these rules actually mean in practice for an **unsigned** 8-bit integer typed array. Remember, unsigned means only positive values so its range is [0, 255].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"{\n uint8[0] = 255; // ✅ Highest value within range\n uint8[1] = 256; //🌶 Overflow: value exceeds 255, so it wraps around\n uint8[2] = 300; //🌶 Overflow: 300%256 = 44\n uint8[3] = -10; //🌶 Underflow: subtract 10 from the max+1: 256 - 10 = 246\n uint8[4] = -255; //🌶 Underflow: subtract 255 from the max+1: 256 - 255 = 1\n uint8[5] = 9.2; // ⚠️ If you specify a non-integer in an Int typed array, the decimal will be ignored\n uint8[6] = 9.9; // ⚠️ So it does NOT round up, it's like Math.floor(number)\n uint8[7] = \"ayyy\"; // 🌶 Ignored as value is not a number!\n\n return uint8;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2651,"value":"md`#### Int8 typed array values\n\nAn \\`Int8\\` typed array does allow negative values, so the its range is [-128, 127].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2639,"value":"{\n int8[0] = 127; // ✅ Highest value within range\n int8[1] = 128; //🌶 Overflow: value exceeds 127!\n int8[2] = 300; //🌶 Overflow: 300 % 256 = 44\n int8[3] = -128; // ✅ Lowest value withing range\n int8[4] = -130; //🌶 Underflow, so it wraps around\n int8[5] = -200; //🌶 Underflow, so it wraps around\n int8[6] = 9.2; // ⚠️ If you specify a non-integer in an Integer typed array, the decimal will be ignored\n int8[7] = 9.9; // ⚠️ So it does NOT round up, it's like Math.floor(number)\n\n return int8;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2397,"value":"md`#### Uint8ClampedArray\n\n\\`Uint8ClampedArray\\` is a special, it does not over- or underflow. Instead it **clamps** the values between 0 and 255. So if you specify a value that is out of the range of [0,255], 0 or 255 will be set. Also – unlike the usual integer typed arrays – if you specify a non-integer, the **nearest integer** will be set.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2417,"value":"uint8clamped = new Uint8ClampedArray(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2419,"value":"{\n uint8clamped[0] = 9.8 // ⚠️ The NEAREST integer is set, here it's rounded UP\n uint8clamped[1] = 5.2 // ⚠️ The NEAREST integer is set, here it's rounded DOWN\n uint8clamped[2] = 300 // 🌶 300 is out of range, 255 is set instead\n uint8clamped[3] = -10 // 🌶 -10 is out of range, 0 is set instead\n \n return uint8clamped\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2680,"value":"md` ## Typed arrays are not \\`Array\\`s\n\nWhile typed arrays are very similar to arrays there are some important differences. Just like regular arrays, typed array have a length, elements can be accessed via the bracket operator \\`[ ]\\`.\nSome differences are that typed arrays are of **fixed length** and the values all being of the **same type**.\n\n### Typed array values\n\nTyped arrays (well actually the ArrayBuffers) only store numbers.\nAdding anything that is not a number to TypedArray will return [\\`NaN\\` (Not a Number)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"md`To check wether if it's a normal array use \\`Array.isArray()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"Array.isArray(uint8) // 🌶","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":694,"value":"md`Or check with \\`typedarray instanceof Array\\` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"uint8 instanceof Array //🌶 Remember: a typed array is not an Array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"uint8 instanceof Uint8Array // ✅","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"### Most of the usual `Array` methods work\n\nAs typed arrays are of fixed length, array mutating methods like `.splice()`, `.concat()`, `.push()` and `.unshift()` are not methods of typed arrays.\n\nTyped arrays are flat by definition, so `.flat()` and `.flatMap()` are not methods of either.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":149,"value":"md`\\`.slice()\\` works fine as it returns a copy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"uint8.slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"uint8.slice(-5, -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"md`\\`.splice()\\` would mutate the array length, therefore it's not a method of typed arrays. Neither \\`.unshift()\\` nor \\`.shift()\\` will work, for the same reason`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"uint8.splice(0, 10) // can't change its length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2758,"value":"#### TypedArray specific methods\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":164,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":158,"value":"subuint8 = uint8.subarray(0, 5) // from 0 to 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":784,"value":"### Typed Arrays are Iterable\n\nWhich means you can easily convert it to a regular Array using the spread operator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":788,"value":"[...uint8] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"md`\\`Array.from()\\` also works for the same reason`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"Array.from(uint8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"md`## Use cases\n\nGreat, now we have learned a lot about typed arrays, but can't we do all of this with regular \\`Arrays\\`, what's the point? The main case for typed arrays is **performance**.\n\nRegular \\`Array\\` objects in JavaScript grow and shrink dynamically and can have any value. Modern JavaScript engines can perform clever optimizations so that these arrays are fast. However, for certain purposes such as video, audio or doing calculations on (very) large arrays it's better for JavaScript to be able to quickly and easily manipulate raw binary data. In those cases, typed arrays come in handy.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1550,"value":"largeArrays = md`### Large flat arrays\n\nSee [Manipulating Flat Arrays](https://observablehq.com/@mbostock/manipulating-flat-arrays) by Mike Bostock for more on handling *parallel* flat arrays.\n\n> Analyzing data in JavaScript often involves arrays of objects. Unfortunately, objects also tend to be slow. Arrays of objects are convenient: they’re similar to rows of a database table and work well with Array methods and libraries such as lodash and d3-array. They incur significant overhead compared to column-oriented (“flat”) typed arrays. Modern JavaScript engines are surprisingly clever at optimizing object usage, but with larger data, you’ll probably want to switch to flat arrays. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":743,"value":"webAPIs = md`\n\n### Web APIs using typed arrays\n\n* [\\`FileReader.prototype.readAsArrayBuffer()\\`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer) method starts reading the contents of the specified Blob or File a FileReader as a typed array.\n* [\\`XMLHttpRequest.prototype.send()\\`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send) method supports typed arrays and ArrayBuffer objects as argument.\n* [\\`ImageData.data\\`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 inclusive.\n* [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1552,"value":"md`\n### When to use which type of typed array?\n\nThat I do not know yet exactly.\n\n\\`Uint8ClampedArray\\`: You need to represent a one-dimensional array containing the data in the RGBA order. This is useful for data processing for the Canvas. \n\n> *Just to be super-clear (and I was around when it was born), Uint8ClampedArray is totally a historical artifact (of the HTML5 canvas element). Avoid unless you really are doing canvas-y things.* - Brendan Eich\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"md`## Sources\n* [MDN Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)\n* [MDN DataView](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView)\n* [MDN BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)\n* [MDN Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)\n* [Exploring JS: Intro to typed arrays](https://exploringjs.com/es6/ch_typed-arrays.html)\n* [You Don't Know JS: Chapter 5](https://github.com/getify/You-Dont-Know-JS/blob/1st-\ned/es6%20%26%20beyond/ch5.md)\n* [Stack Overflow: Where to use ArrayBuffer vs typed array in JavaScript?](https://stackoverflow.com/questions/42416783/where-to-use-arraybuffer-vs-typed-array-in-javascript)\n* [Jim's Computer Science Topics Area](https://www.cs.utah.edu/~germain/PPS/Topics/unsigned_integer.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## Further reading\n\n* [Typed Array performance](https://ryanmcdermott.me/typed-arrays/)\n* [Binary Input](https://observablehq.com/@rreusser/binary-input)\n* [Float Toy](https://evanw.github.io/float-toy/)\n* [Integers in Single-Precision Floating-Point](https://observablehq.com/@rreusser/integers-in-single-precision-floating-point)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2564,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":999,"value":"squareWidth = width/arrayBufferSize - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1486,"value":"intBlockMaker = (size, int) => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2278,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2482,"value":"arrayBufferColor = \"#e4e4e4\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"texTypedArrayLength = (size, int, type) => tex`\\frac{ ${size} \\times 8 \\ \\text{bytes}}{${int}} = ${size*8/int} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2553,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"