![Web Assembly (Wasm)](https://static.frontendmasters.com/assets/courses/2021-04-07-web-assembly/thumb.webp)
Check out a free preview of the full Web Assembly (Wasm) course
The "Memory in Web Assembly" Lesson is part of the full, Web Assembly (Wasm) course featured in this preview video. Here's what you'd learn in this lesson:
Jem explains that memory in Web Assembly is a linear representation of 0's and 1's. JavaScript uses an ArrayBuffer to represent this binary data. A TypedArray will coerce the raw binary data in the ArrayBuffer into something useable by the application.
Transcript from the "Memory in Web Assembly" Lesson
[00:00:00]
>> Okay, I know I lost some of you [LAUGH] a little bit, because that was really tactical, and we're gonna get more tactical now. But [LAUGH] the good news is we're getting to the end, I specifically saved memory for last. I touched on it, we danced around it, but I stayed away from it because this is where, for me as an engineer, when I was learning these things, it got really confusing because I'm just not used to thinking about memory.
[00:00:27]
I'm used to everything happening for me. But the best way to visualize memory in web assembly is it's this long, unbroken chain of 0s and 1s. That's all it is. It's 0s and 1s nonstop to, I don't know, 1,000? No, I can't even think of the cases it's way, way larger than that.
[00:00:55]
But right now it's just those 1s and 0s are gibberish. The computer doesn't know and our program doesn't know where to start and stop. It doesn't know if this section of code here is a 32 bit number or this is a bunch of eight bit numbers. It doesn't know if it's signed or unsigned.
[00:01:12]
It literally means nothing to the computer until we give it a view. And we give it a view using an array, or we convert from array buffer into a typed array buffer. I'll talk about array buffers in second. But dealing with memory, the good thing about web assembly is that it is linear, it doesn't jump around.
[00:01:31]
That means it's very efficient. Memory that is co-located next to each other is going to be faster to access that memory that is spread all over the place. Have you ever all, this is a throwback to the Windows days, but do you remember, it was Windows 95, do you remember defragmenting your hard drive?
[00:01:50]
Yeah, it's satisfying and you're watching the bits. What that is doing is it's actually taking disparate portions of memory on the hard disk and it's putting them together. So it makes it faster to read. Because technically, when you're reading from memory, you can actually read from wherever, that's why it's called RAM.
[00:02:06]
It's called random access memory, memory and can be all over the place. In web assembly, the memory is specific and it's in a specific location and it's all linear, which makes it very, very fast and efficient. But that also means we have to track exactly what we need and what type of data it is, in order to extract it.
[00:02:27]
In other languages, like C, for example, we think of memory in terms of pointers. And a pointer is just an address to a memory location, somewhere in memory, it actually doesn't matter. It's technically in the heap. And a heap is a dynamic nonlinear memory that any program used to save all their operations.
[00:02:48]
JavaScript has a heap. You've probably heard the phrase the JavaScript heap. When you think heap, just think of a pile of stuff, the objects, strings, the execution context, debugging, the call stack, all of that is in a heap. It's a heap of stuff somewhere. That's why it's called the heap.
[00:03:06]
They're not necessarily located next to each other, it's just a space allocated by the operating system to work in. This is different from linear memory, which linear memory is a fixed set of space, and if we go outside of that, we can get a out of band era, we can get a out of memory error because we start reaching out of things that are not accessible to our program.
[00:03:28]
But in JavaScript, it's not low level, we have garbage collection, we have a lot of niceties. But that means when we're dealing with fixed memory spaces and memory directly, we have to use an array buffer. An array buffer is just a representation of raw binary data. It doesn't itself do anything.
[00:03:45]
It doesn't itself mean anything. We have to give it meaning. Again, when you think of an array buffer I want you to visualize this unbroken strings of 1s and 0s. That's the easiest way. And array buffers tend to give people a little bit of hiccup, that's why I'm spending a bit of time on it.
[00:04:02]
But because it's this unbroken string of 1s and 0s, which mean nothing, we have to use what's called a TypedArray. And a TypedArray tells JavaScript, okay, you're actually dealing with a 16-bit unsigned integer. I know how to divide this memory up into 16-bit chunks, and I know that because it's unsigned, the leading bit is not assigned, so it doesn't matter, it's not positive or negative, it just is a number.
[00:04:27]
I know how to read that and now I can create indexes that point from index 0 is 16 bits, the next index 1 is another 16 bits etc.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops