Tips from open-source: Generator function in Javascript.
Tags: javascript, nextjs, opensource, react
Published: 2024-05-09 21:52:13

As I was reading the [Next.js source code](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/web/spec-extension/adapters/headers.ts#L211), I saw a function name prefixed with "\*"_. My first thought was “Is this a ponter in Javascript?”. After some research on Google, I found that these functions prefixed with "\*"_ are called generator functions. I do not know about generator functions in Javascript until now.

[Next.js source code](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/web/spec-extension/adapters/headers.ts#L211) has these generator functions defined in a class as shown below:

![source code](https://media.licdn.com/dms/image/D4E12AQHF1y7vy4Aw0Q/article-inline_image-shrink_1000_1488/0/1715285685559?e=1720656000&v=beta&t=W43FaRzAOXrfZnwTnWFC00NdCkVgiUqYQyZaVYT3KJo)

[![tthroo](https://media.licdn.com/dms/image/D4E12AQH3fvWMCKVOow/article-inline_image-shrink_1500_2232/0/1715285854806?e=1720656000&v=beta&t=FXHnrF-DbA3FGxMc8IQstj3al302M6VitcUhB8j9efU)
](https://tthroo.com)

Keep in mind that normally when you define these generator functions outside a class, they have the following syntax:

```
// source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\*
function\* generator(i) {
  yield i;
  yield i + 10;
  yield i + 20;
}

const gen = generator(10);

console.log(gen.next().value);
// Expected output: 10
console.log(gen.next().value);
// Expected output: 20
console.log(gen.next().value);
```

> _Note: You can declare a generator like this — function \*generator() or function \* generator(). \* can be separated with a white space or a line terminator._

Keys() as a generator function
------------------------------
```
public \*keys(): IterableIterator<string> {
    for (const key of Object.keys(this.headers)) {
      const name = key.toLowerCase()
      yield name
    }
  }
```

This code snippet is from [header.ts](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/web/spec-extension/adapters/headers.ts#L211) in Next.js source code. I asked myself a question “Why a keys() function is a generator function?”

I pasted this code in the ChatGPT and it introduced me to a term “Memory efficiency”. Hang on a minute, how?

Copy the below and paste in your browser

```
const exampleObject = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// Implementing keys() method using a generator function
exampleObject.keys = function\* () {
  for (const key in this) {
    yield key;
  }
};

// Now, you can iterate over the keys of exampleObject using a for...of loop
for (const key of exampleObject.keys()) {
  console.log(key);
}

// output:
firstName
VM247:16 lastName
VM247:16 age
VM247:16 keys
```

But if you try to log the keys(), the following are the results:

![results](https://media.licdn.com/dms/image/D4E12AQGrqIN7tOkLzQ/article-inline_image-shrink_1000_1488/0/1715285684146?e=1720656000&v=beta&t=HXCtIpUrc6U-zlxDkG_9R19bGV9CWyB5OlDVGC9jbG4)

Instead of generating all keys at once and storing them in an array, a generator function produces keys on-the-fly as they are requested.

Further reading links:
----------------------

1.  [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
2.  [https://stackoverflow.com/questions/47027191/do-suspended-generator-functions-have-performance-costs](https://stackoverflow.com/questions/47027191/do-suspended-generator-functions-have-performance-costs)

Conclusion:
-----------

function\* keys(), turns out is a generator function, not a pointer in anyway. You want to use this when you want to generate keys, entries, values on the fly.

Generator functions do not consume execution time and they [reside in memory until used.](https://stackoverflow.com/questions/47027191/do-suspended-generator-functions-have-performance-costs)