Professional JS: Features You Need to Know

Typed Arrays & Generators

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Professional JS: Features You Need to Know

Check out a free preview of the full Professional JS: Features You Need to Know course

The "Typed Arrays & Generators" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano explains how to retrieve keys and values from an array, as well as how to use methods like copyWithin and fill to manipulate array elements. He also briefly mentions typed arrays, iterators, and generators, providing examples and explanations for each concept.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Typed Arrays & Generators" Lesson

[00:00:00]
>> Maximiliano Firtman: Okay, so on recaps on arrays, remember that we have values and entries on objects. Now we have something similar on arrays. For example, I can take an array. By the way, let's go and see here. This is my array, a, b, c, I can get keys. So keys will give you 0, 1, 2.

[00:00:21]
I can get all the values. And this is giving me, actually, an iterator that I can use in a for. We'll get into iterator in a second. So I can get all the keys that actually, in a normal array, it's just numbers, the values, or entries that will give you an array of index value.

[00:00:44]
Does it make sense? So you have an array, and now you get another array, which in each position, you have an array. One with the index, one with the value. CopyWithin will copy elements or part of the array into another array. Actually, not into another array, it's into the same array in a different position.

[00:01:09]
So I can take the first two elements and put it at the end, okay? I'm just moving elements within the array. Fill, we shall fill the array with one element. Okay, so for example, in this case, we'll fill with 0 from index 2 to index 4, exclusive. So it's not including 4.

[00:01:35]
So that's why we have two zeros here.
>> Maximiliano Firtman: A small utility available in array, okay? Nothing that is so important. Typed arrays, we are not going to cover them. Typed arrays is a way that we have to typically work with WebGL, with binary data on the network, with web sockets and binary web sockets.

[00:02:00]
If you wanna deal with WebAssembly, and we wanna work directly with binary data. Typically, it's array of bytes, array of integers, array of floats. So now we can create, we have, for example, in this case, it's int 16 bits, so 2 bytes per integer, is an array of int 16 r unsigned int 8.

[00:02:25]
This is like a byte for an integer from 0 to 255, and so on. Again, if you are getting into that, type erase. Iterators, so in this case, I have a countdown, which is just a for of, but I'm using a for of of an object that I have just created.

[00:02:47]
It's not an array, that's the new part. You can create iterators. An iterator, if any object of any kind, it can be an object literal, or it can be an instance of a class, that contains one particular property with this particular key, symbol.iterator. And remember, we we have this new syntax of square brackets.

[00:03:16]
So it's an iterator where that iterator should return an object, is kind of weird, it returns an object that should have a next function inside. With this, you can make any, any class that you are creating, something that you can iterate with the for of. Typically, it is a collection behind the scenes, okay?

[00:03:44]
But it's not necessarily a connection, it can be anything. Any questions? For all of the iterators, this is a recap, so it's not really new. It's from ES6. And the last weird part from ES6 is generators. I'm not sure if you have seen generators before, but it's like when you have a function with a star, with an asterisk, that function will not return data, it will yield data.

[00:04:12]
So when you execute the function, for example here, I have a question for the class, how do we call the generator? Like, generate. So, should I create something like this? Well, actually, no. Or actually, if I execute this, this is a generator. Okay, so it's not really 1 or 2.

[00:04:39]
So then you need to talk with the generator, and you execute the generator many times. And every time you execute, for example, you will execute this. If I run this, it will execute your code until the first yield. So when it reaches the first yield, it will stop.

[00:05:02]
So it's like, this is not there. And it will remember the position. Next time you execute the generator, it will continue until the next year, and so on, okay? Again, it's more complicated than that, and you can mix generators with iterators. Here, to make the previous example even better or simpler, where I'm also doing a countdown, but with a generator, which is better than before.

[00:05:35]
So it's a for starting from a variable, this k5, and then going on to 0. And every time I'm yielding the values, I'm yielding the values that you see here, 5, then 4, then 3, then 2, then 1, then 0. If you don't get into generators, it's fine.

[00:05:56]
You cannot go into using the lot actually, for web apps, at least, but just have in mind they are there.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now