Forem: Kasra Khosravi

Create an NFT Collection on Your Site Without Writing Any Code

Kasra Khosravi — Thu, 16 Jun 2022 17:13:58 +0000

Learn how to use the Flair dashboard to reduce dependency on web3 development.

In this blog post, I am going to show you how to release an NFT collection on your site without knowing all the complexity and best practices of smart contract and Web3 development; while having full ownership and visibility into the code that you are deploying. To get all these features and benefits, we are going to use Flair dashboard.

Create a new collection

The first step in our journey is to create an NFT collection in Flair dashboard.

You can consider the collection as a specific entity on the blockchain that has its own unique address and properties. With this NFT collection, you will be able to issue digital assets in an immutable way. E.x if you issue 5K gaming assets as NFTs for your next gaming project, those 5K NFTs will remain untouchable on the blockchain and everyone can verify their authenticity.

Also, another important aspect of creating and deploying an NFT collection for developers is to make sure they fully own the NFT contract, which is the case for Flair’s smart contracts.

After clicking on the “Create new collection”, you can choose which type of collection you like to create. For now we are going to choose the “Full Featured Collection”. Please note that with this collection, you are going to deploy an ERC721 smart contract, which means all the NFTs in this collection will be unique.

This is a collection that gives us all the necessary building blocks we need to release our NFTs. Some of these building blocks are Pre-Sale and Public Sale features which we are going to talk about later. Also, you get an estimate for how much gas you are going to spend when deploying this contract. Since we are on the Rinkeby testnet in this example, we get the estimate of ~10.89USD for the gas fee of this deployment. If you are just testing things, make sure to choose a testnet in dashboard’s top corner, so you don’t have to actually pay for gas.

Upon choosing this option, there are few sections that we need to fill for our NFT collection.

Your collection

Here, we are trying to define the general information about our NFT collection that will appear in marketplaces like OpenSea. Here is an example:

Tokens

This is the section which you define the Symbol of your NFT collection which will appear in Etherscan. Also, the max supply will define an immutable number of NFTs that can ever exist in your collection.

Pre-reveal placeholder

It is usually the case where you need to have a pre-reveal placeholder for your NFT collection before actually revealing the NFT assets. Via this section, you can define the name, image and description of NFTs that you want to be shown in different marketplaces before your NFTs are revealed. Let’s see an example for this:

Sales and Royalty

Now, we can set some basic sales information about our NFT collection. For example, we can add pre-sale and public-sale prices for the NFTs, while having control over how many NFTs users can mint in the pre-sale per wallet while defining how many mints are allowed per transaction in the public-sale.

Additionally, you can set royalty percentage over secondary sales and also who should be the recipient of those royalty earnings.

Inspect the code

After you are done with this stage, you can click on “Preview” to go to the next step to be able to deploy your contract; while you also have the option to click on the “Inspect the code”. This option gives you full transparency over the code that you are going to deploy. You even have the option to manually deploy the contract yourself, but Flair just make it easier through the dashboard.

Saving the collection

After clicking on the “Preview” section, you are welcomed by this page, you can see the overview of your collection on the left, while on the right side of the page you can see the status of your collection and pre-reveal metadata being uploaded to IPFS to make it persistent and immutable. When all the check-marks are green, you can click on “Save now” to go to the next step.

Deploy

One more step before we have our contract up and running on the blockchain; and that is deploying the contract. In this page you can see that the status of the contract is still set to “Not deployed yet”. After hitting the deploy, you can see the status changed to “Successfully deployed”. Also, the Deploy Transaction and Contract Address are visible and can be examined further on Etherscan.

Congratulations :) You now have successfully have deployed an ERC721 smart contract. But what comes after this?

With Flair’s dashboard, you can easily manage your Pre-Sale, Public-Sale, Metadata Management and Royalty Settings (a feature coming soon); but we are going to cover those use-cases in future posts and focus on embedding the minting widget for our collection in our site and allow our community members to easily mint their NFTs.

Minting

When you click on the “Minting” section, you will have access to the “Minting Widget” section. You can either use the “Public Minting Wage” which offers you a basic URL, or alternatively you can use the “Public Minting Widget” and easily embed the minting widget into your website as an iframe. And that’s it.

https://www.youtube.com/watch?v=AnIv73eD1y8

The Love-Hate Relationship between React Router and React Components

Kasra Khosravi — Sun, 17 May 2020 09:19:20 +0000

As React developers, a majority of us enjoy working with React Router and how well it fits our React application.

Why we ❤️ React Router:

Works perfectly with React and follows the same principles
The navigational aspect of the Router is really easy to understand
Component composition, declarative UI, state management and how closely it follows React’s main flow (event => state change => re-render)
Reliable browsing history feature that allows users to navigate throughout the app while keeping track of the view state

Tip: I completely understand that software interviews can be a bit scary, so my hope is to give you clear ideas about the interview process and offer you practical advice on how to do well at each step.

This course can be very helpful for you to get an overview of all the common interview steps that companies go through to hire a developer. Sign up for SkillShare, Get two months of free trial and Join me on this journey

However, you will face some roadblocks while using React Router if your application-specific needs become a little more complicated than the regular usage you see on every tutorial on the web.

The good news is that even in those scenarios, React Router still allows us to solve problems in a clean way; but the solution might not be as obvious in the first glance. I had this experience in my project, when we were changing the query params in the route path and expected a Component re-render, but that was not the case.

Before we dive into this specific issue and how we solved it, Lets us talk about few aspects of the great relationship between React Router and React Components.

Love Relationship

React Router and React Components have a great relationship together. This mostly falls into the pattern that both of them follow the same event loop that was mentioned above (event => state change => re-render). Now by having this flow in mind, we are gonna fix a common issue in navigating through the application; scrolling to the top of the page when the route changes.

Imagine you have a set of components named Home, About and Search

<Router history={History}>
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route exact path="/about" component={About}/>
    <Route exact path="/search" component={Search}/>
    <Route exact component={NoMatch}/>
  </Switch>
</Router>

Now imagine that when you go to /search, you need to do a lot of scrolling to see your favorite item in the SearchPage.

Next, you enter a link in the header to go to the /about and then suddenly you are seeing the bottom of the About Us page instead of the top which can be annoying. There are many ways to solve this issue but React Router gives you all of the necessary tools to do this task clean and proper. Let’s see this in action.

/* globals window */

/* Global Dependencies */
const React = require('react');
const { Component } = require('react');
const PropTypes = require('prop-types');
const { Route, withRouter } = require('react-router-dom');

class ScrollToTopRoute extends Component {

    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            window.scrollTo(0, 0);
        }
    }

    render() {
        const { component: Component, ...rest } = this.props;

        return <Route {...rest} render={props => (<Component {...props} />)} />;
    }
}

ScrollToTopRoute.propTypes = {
    path: PropTypes.string,
    location: PropTypes.shape({
        pathname: PropTypes.string,
    }),
    component: PropTypes.instanceOf(Component),
};

module.exports = withRouter(ScrollToTopRoute);

// Usage in App.jsx
<Router history={History}>
  <Switch>
    <ScrollToTopRoute exact path="/" component={Home}/>
    <ScrollToTopRoute exact path="/about" component={About}/>
    <ScrollToTopRoute exact path="/search" component={Search}/>
    <ScrollToTopRoute exact component={NoMatch}/>
  </Switch>
</Router>

Hate Relationship

But as for any relationship, things do not go well in every situation. That is the same case for React Router and React Components. To better understand this, let's walk through a possible scenario in your application.

Imagine that you navigate from /search to /about, and when you get to the About Us, the page obviously re-renders as you would expect. Same goes for navigating from /about to /search.

Now imagine that your SearchPage is attaching search query parameters to the URL and you would expect a re-render when navigating from /search?tags=Dresses to /search?tags=Bags. Here we are changing the search query on the ReactRouter path location.path = /search which is recognized by ReactRouter as a property on the same location object location.search = ?tags=Dresses or ?tags=Bags

Neither React Router nor your component realizes that they need to re-render the page because technically we are on the same page. React Component disagrees with you on the terms that navigating between two routes that are on the same path but have different search queries qualifies for a re-render.

Our Route and Component seem a little detached at the moment. How sad :(

So, how can we fix this issue? Well, it turns out that each one of them has a piece of the puzzle that would fix the issue. React Router can tell us if the search query params in the URL has changed and more importantly do this in accordance with React’s correct life cycles. After that, it would be Component’s responsibility to decide what to do with that information.

In this case, if the component needed the re-render (is specified by a boolean prop called RouteKey) it will pass a unique key to the component which would be a combination of location.pathname and location.search. (This passes the general rule of thumb for Keys that should be unique, stable and predictable). In this scenario, the component receives a new key every time the Route is requested; and even you are staying on the same page, it will re-render the page for you without any bad side effects. Shall we take a look and see how it works in practice!

/* globals window */

/** Global Dependencies */
const React = require('react');
const { Component } = require('react');
const PropTypes = require('prop-types');
const { Route, withRouter } = require('react-router-dom');

class ScrollToTopRoute extends Component {

    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            window.scrollTo(0, 0);
        }
    }

    render() {
        const { component: Component, RouteKey, location, ...rest } = this.props;

        /**
         * Sometimes we need to force a React Route to re-render when the
         * search params (query) in the url changes. React Router does not
         * do this automatically if you are on the same page when the query
         * changes. By passing the `RouteKey`ro the `ScrollToTopRoute` and
         * setting it to true, we are passing the combination of pathname and
         * search params as a unique key to the component and that is a enough
         * and clear trigger for the component to re-render without side effects
         */
        const Key = RouteKey ? location.pathname + location.search : null;

        return <Route {...rest} render={props => (<Component {...props} key={Key} />)} />;
    }
}

ScrollToTopRoute.propTypes = {
    path: PropTypes.string,
    location: PropTypes.shape({
        pathname: PropTypes.string,
    }),
    component: PropTypes.instanceOf(Component),
    RouteKey: PropTypes.boolean,
};

module.exports = withRouter(ScrollToTopRoute);

// Usage in App.jsx
<Router history={History}>
  <Switch>
    <ScrollToTopRoute exact path="/" component={Home}/>
    <ScrollToTopRoute exact path="/about" component={About}/>
    <ScrollToTopRoute exact path="/search" component={Search} RouteKey={true} />
    <ScrollToTopRoute exact component={NoMatch}/>
  </Switch>
</Router>

Conclusion

We covered examples where React Router and Component work perfectly together and scenarios when they are a little bit detached. But the main thing to remember is that for the most parts, React Router follows the same principles and design patterns that React does and taking the time to get familiar with those principles and their relative execution contexts would help immensely when bug fixing in React Router.

How to Delete an Item in a Nested Object in Redux State

Kasra Khosravi — Sun, 17 May 2020 09:00:01 +0000

Your Redux state can get complex, here’s how to remove nested data

Photo by Lysander Yuen on Unsplash

One of the key features of Redux is its store; it holds the logic of your application as a state object.

In essence, you get a limited number of methods that can be triggered in the store. For example, use getState as a mechanism for reading the current state tree.

You might ask: “What about writing to state?”

Well, that’s where dispatch(action) comes in. This is the only way in Redux to trigger state change. Dispatching actions are tied closely with the reducer concept. The reducer receives both action and state and returns a new application state.

The golden rule is that we do not return a mutated state, but rather a new state. Depending on the type of your action, you might need to update your state tree in various forms when it hits the reducer.

You might need to add a new item to one of the state properties.
There might be a need to update or re-assign a state property.
Or you can have a scenario where you need to remove an item from a state property.

This brings us to the concept of Redux’s immutable update (or data modification) patterns. Immutability is key because we never want to directly change a value in the state tree, but rather always make a copy and return a new value based on the old value.

State properties can have many different types. But when we talk about the challenges of data modification patterns, Array and Object can be considered the ones with more edge cases.

In this article, we are going to focus on a specific Redux data modification pattern that concerns deleting an item in a nested object on a state tree.

Use Case: Deleting an Item in a Nested Object in Redux State

Let’s imagine we have a fashion e-commerce application with the following initial state.

The state tree is simple and includes a few object keys like outfits or filters.

In our application, we have a filtering mechanism that filters outfits based on attributes like brand** **or colour. For instance, if the user is interested in seeing outfits of Bally brand with Black colour and does the filtering; that will result in the following state tree.

If we want to have a more user-friendly application, we might be interested in displaying the filters that the user has selected; right below the filtering system.

In this way, the user has the option to see all of the filters they have chosen and can remove the filters they are no longer interested in.

For achieving this goal, we need to have a removeFilter** actionCreator **that takes the field type (for example, brand) and index (for instance, the first element) in the displayed filters and removes that particular filter value from the corresponding element in the state tree.

The below code shows the rendering part. The buttons are rendered by iterating over a filtered list which renders Buttons and provides the index and the field to them.

Repo

If you’re interested, here’s a repo that better shows the use case we covered in this article.

Build Your Own Filter

Kasra Khosravi — Sat, 16 May 2020 20:00:49 +0000

Filtering is a common programming pattern in which we iterate over a set of elements and only return a new set of elements that pass the condition provided by a filter function. Unlike mapping, we cannot reverse the process of applying the filter function to get to the original dataset; however, this is possible to achieve in mapping via applying the reverse of mapping function on the transformed set to get to the original one.

Applying filtering in the context of functional programming will help us achieve readability in a much better sense. All we have to do is provide the original array as well as the filtering function. With this declarative approach, the steps of filtering items from a set of data (array, in the case of this article) is hidden, and we have a focus on the end result we want to achieve.

For example in the picture above, we do provide the initial array of [🍕, 🍔, 🥗, 🍏] and the filtering function isHealthy. The filter iterates over each of these tasty foods and, based on the filtering function it has, decides which is healthy and which is not. Only the healthy ones will be preserved in the new array and, in the end, returned[🥗, 🍏].

Similar to mapping, we have a few options of filtering elements in an array, with both declarative and imperative approaches.

Tip: I completely understand that software interviews can be a bit scary, so my hope is to give you clear ideas about the interview process and offer you practical advice on how to do well at each step.

For Loop

Using for loop for a filter is an imperative approach of iterating over elements and pushing the ones to an array that pass a condition nested in the for loop.

let items = [1, 2, 3, 4, 5];
let isEven = item => item % 2 === 0;
const result = [];

for (let i = 0; i < items.length; i++) {
  if (isEven(items[i])) {
    result.push(items[i]);
  }
}

console.log(result);
// Result: [2, 4]

As you can see, we need to keep track of item indexes, define an initial array, and nest conditional statements inside the for loop. Even though this way of filtering can be performant, it is not very readable.

forEach

Another option we have is to use forEach, which, like a for loop, iterates over an array of elements. But the good thing about using it is we don't have to worry about index tracking. Let's see it with an example:

let items = [1, 2, 3, 4, 5];
let isOdd = item => item % 2 !== 0;
const result = [];

items.forEach(item => {
  if (isOdd(item)) {
    result.push(item);
  }
});

console.log(result);
// Result: [1, 3, 5]

This seems like an improvement to the previous alternative in terms of readability, but mutating the result array outside the context of our iterator is not ideal. It would have been better if we had a filtering method that always returns a new array.

In fact, we have access to a better alternative, called native JavaScript filter.

Native JavaScript Filter

Native JavaScript filter takes a declarative approach in filtering array elements. Since it is a method defined on Array.prototype, it iterates on a provided array and invokes a callback on it. This callback, which acts as our filtering function, takes three parameters:

element - the current item in the array being iterated over
index - the index or location of the current element in the array that is being iterated over
array - the original array that the filter method was applied on

Let's use this filter method in an example. Note that the filter can be applied on any sort of array. In this example, we are going to filter an array of objects based on an object property.

// Please do not hate me for bashing on pizza and burgers.
// and FYI, I totally made up the healthMetric param :)
let foods = [
  { type: "pizza", healthMetric: 25 },
  { type: "burger", healthMetric: 10 },
  { type: "salad", healthMetric: 60 },
  { type: "apple", healthMetric: 82 }
];

let isHealthy = food => food.healthMetric >= 50;

const result = foods.filter(isHealthy);

console.log(result.map(food => food.type));
// Result: ['salad', 'apple']

With just one line of code, we were able to filter an array of items. That is pretty awesome. Also, as you can see in line 12, chaining mapping and filtering methods can be really useful for working with different types of datasets.

So far, we have learned some basic stuff about filtering and different ways of handling it in JavaScript. Although our main focus was on readability, we should never forget performance when it comes to applying a method on our dataset.

Build a Filtering Function

We now turn our attention to building our own filtering functions. Building a production-ready filtering method that scales with larger datasets and considers different edge cases is not straightforward, as we can see in the polyfill made for JavaScript's native filter. However, in our example, we're going to focus on the core of filtering an array.

Own filter function (for loop version)

Abstracting the filtering process with for loop is very straightforward. We provide the filtering function and original array and let the FilterLoop handle the filtering process for us.

let candidates = [
  { name: "batman", isSuperHero: true },
  { name: "jon snow", isSuperHero: false },
  { name: "wonder woman", isSuperHero: true },
  { name: "sheldon cooper", isSuperHero: false }
];
let isSuperHero = candidate => candidate.isSuperHero;

// Loop Version of Filter
let FilterLoop = (validFn, arr) => {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    validFn(arr[i]) ? filteredArr.push(arr[i]) : null;
  }
  return filteredArr;
};

const result = FilterLoop(isSuperHero, candidates);
console.log(result.map(candidate => candidate.name));
["batman", "wonder woman"]

Own filter function (recursive version)

Now we are going to create a recursive version of the filtering function. Make sure to check building a recursive version of a mapping function first.

Like the for loop version, we need to pass both an array as well as a filtering function. However, as you can see in line 2, we are destructuring the array parameter and breaking it apart into two new variables called head and tail.

This approach allows us to decide at each step if we need to return the head element if it passes the validFn validation (shown on line 9). If not, we simply ignore the head element for that iteration and continue recursively calling the FilterRecursive function (shown on line 13).

After each iteration, the length of the original array shrinks down until we reach an empty array in the end. It is at that point that head will be set as undefined, since we will be trying to destructure an empty array. Then we start returning array elements that passed the validator.


let candidates = [
  { name: "batman", isSuperHero: true },
  { name: "jon snow", isSuperHero: false },
  { name: "wonder woman", isSuperHero: true },
  { name: "sheldon cooper", isSuperHero: false }
];
let isSuperHero = candidate => candidate.isSuperHero;

// Recursive Version of Filter
let FilterRecursive = (validFn, [head, ...tail]) => {

  // bailout
  if (head === undefined) {
    return [];
  }

  if (validFn(head)) {
    return[head, ...FilterRecursive(validFn, tail)];
  }

  return[...FilterRecursive(validFn, tail)];
};

const result = FilterRecursive(isSuperHero, candidates);
console.log(result.map(candidate => candidate.name));
["batman", "wonder woman"]

Own filter function (generator version)

This is a very rudimentary example of a filtering function built with generator functions. As you can see in the logs below the code, the generator function returns an iterator object each time it's called. With passing our validator function, we are only returning values in the iterator object that pass its validation.


let items = [1, 2, 3, 4, 5];
let isEven = item => item % 2 === 0;

// Generator version of Filter
let FilterGenerator = function*(fn, arr) {
  for (let x of arr) {
    if (fn(x)) {
      yield x;
    }
  }
};

const result = FilterGenerator(isEven, items);

console.log(result.next());
// Object {value: 2, done: false}
console.log(result.next());
// Object {value: 4, done: false}
console.log(result.next());
// Object {value: undefined, done: true}

Resources

https://www.freecodecamp.org/news/implement-array-map-with-recursion-35976d0325b2/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Technical (Whiteboard) Interview

Kasra Khosravi — Sat, 16 May 2020 18:35:52 +0000

The technical or whiteboard interview is a common step in all software developer interviews. Just keep in mind that this meeting can happen sooner or later in the interview process.

What is the purpose of this meeting?

There is no doubt this meeting is a bit more stressful than others. A lot of people believe that a developer needs to have the ability to discuss a problem and a possible solution at a higher level.

That is where whiteboard or even a pice of paper comes in, by only drawing and mapping your thoughts using figures, diagrams and shapes. You might not necessarily need to go into little details of implementation, but rather discuss the steps you would take to solve a particular problem. It is common to ask two types of questions in this interview:

Design or Architectural Based Questions

No matter how skilled you are, it is always a good sign if developers have the ability to imagine a bigger picture design of the system they are working on.

In dev teams, it is usually the job of more senior developers to help design the architecture of the application and general processes and pipelines. However, it is expected for everyone on the team to have an impact on those decisions. The more you educate yourself in the years towards becoming a senior developer, the clearer your answer will be to these types of questions.

So in a nutshell, they want to see you try to think about them. You can get your knowledge for these types of questions from all your previous projects (even small), or by reading best practices and architectural based articles from more experienced developers. Example questions for this type can be:

How would you display a list of items by relying on an external source like API?
How would you describe a database design for two tables that should reference each other?
If you wanted to build an e-commerce site, how would you go about designing its architecture?

Your answer can be not 100% correct or optimal, but they want to see you try, they want to see you are reading or thinking about these types of questions; and they might be looking for keywords in your answers to see a bigger picture.

For example, you might not be completely familiar with how to setup different parts of an e-commerce platform, but if you mention that you would consider "separation of concerns" and build different layers of functionality for better maintainability and testability, that would be a very good sign for them.

Algorithmic Based Questions

The second type of questions they might ask you are algorithmic based questions. These questions are narrower and more concrete and have the aim of testing your general computer science knowledge as well as your problem solving skills. The typical questions for this type can be:

How would you reverse a string
How would you count the number of words in a text
How would you find the highest or lowest number in an array of numbers

and similar types of questions.

Things to remember

First, Remember that staying calm, actively thinking about both the problem and hints of solution you might have in your mind are key for passing this test. Before quickly trying to answer the question, take a moment to think about the problem and then start writing problem keywords as bullet points on the white-board.

Second, Read the problem out-loud and do not be afraid to ask, if any parts of the problem does not make sense to you. They can try to explain it better which gives you more time to think or get more clues. Asking questions in this meeting is usually never the wrong thing to do.

For example, know that these questions can be simpler if their criteria are clarified. If you do not know the type of input data you are getting, ask them for clarification. For example, they might tell you that your provided data only comes in Array form. That makes things easier.

Third, start drawing and using texts to show them your way of thinking. Do not feel the rush to write code on the white-board or on your computer at this point. It is much more valuable for a developer to get a clear idea about a problem, before jumping into solution implementation. That is what we are practicing here.

It is not wrong at all to ask for periods of thinking time, so you can mull it over. But if you feel stuck, it is best to communicate that and ask them for hints. They are always happy to give it to you without taking it negatively. But remember to use their hints; otherwise it might seems like you are not a good listener, when asking for advice.

Finally, after drawing some diagrams and shapes for defining the problem, we come to writing some code. Your code can be in pseudocode which is a simplified programming language for describing code design. If you can write a solution for the problem using a programming language you prefer like Javascript or Python, this will be a very good sign.

It can be a bit harder to write those types of algorithmic based codes, since we use utility functions to achieve them in our day-to-day work (like a string parser library instead of writing our own); but practicing and knowing these shows you have a firm grasp on the basic concepts of coding. So my advice for this part: practice the the fundamentals like conditional programming, async data fetches or for loop and data mapping regularly.

Conclusion

I am gonna be honest with you. I have never had a technical interview which I felt I have done 100% perfect but most of the time I got a callback for the next interview by following the rules we discussed in this post. There are a lot of unknowns and the recruiters are even aware of the complexity of some problems, but just want to test your problem solving skills and see how calm and focused you can be in those situations. So a big part of your success in this meeting will be dependent on your mindset and stress management skills.

Build Your Own Map

Kasra Khosravi — Thu, 14 May 2020 08:26:41 +0000

Mapping is the process of converting an array of elements into a new one using a mapper function. It forms a many-to-many association and you are expected to get the same length of data that you provided in the first place.

Look at below illustration. It uses a mapping process with a declarative approach. We are not dictating how to do the mapping but what to do with it. We just provide the array of [🥔, 🌽, 🥚] and the mapper function cook and let the map handle iterating over them and applying the mapper function on each one. In the end, it will return the new array [🍟, 🍿, 🍳].

When it comes to mapping, we have a few options (both with declarative and imperative approaches).

For Loop

We can use a simple for loop to iterate over array elements:

let items = [1, 2, 3, 4, 5];
let double = (item) => item * 2;
const result = [];

for (let i = 0; i < items.length; i++) {
 result.push(double(items[i]));
}


console.log(result);
// Result: [2, 4, 6, 8, 10]

As you can see, the job of index tracking, initializing, and pushing the results to an array is on us. This is a clear example of imperative programming, which tells the computer how we want to achieve something using a step-by-step process.

forEach

Another option is forEach, which iterates over each element in the array:

let items = [1, 2, 3, 4, 5];
let double = item => item * 2;
const result = [];

items.forEach(item => {
    const doubledItem = double(item);
    result.push(doubledItem);
});


console.log(result);
// Result: [2, 4, 6, 8, 10]

This feels a bit better, right? We no longer have to keep track of element indexes. But we can agree that mutating an item outside the scope of the function, in this case result, is not ideal. It would be great if we could abstract this even further.
The native JavaScript map is a better alternative.

Native JS Map

Let's use JavaScript's native map method. All we need is an array of data and a mapper function. map will get an array and iterate over each element in it while applying a mapper function on them. In the end, this will return a converted array with the same length.

let items = [1, 2, 3, 4, 5];
let double = (item) => item * 2;

const result = items.map(double);

console.log(result);
// Result: [2, 4, 6, 8, 10]

This is much better compared to the alternatives like forEach or for loop in terms of readability. However, performance is a very critical component in making a decision about which option to choose.

Building a Mapping Function

But now to the fun part. Did you know that building a mapping function is not that difficult? Let's see this in action.

Own map function (for loop version)

In this example, we are abstracting away index tracking and initializing a starting array. All we need to pass is a mapper function and an array of items, and we are good to go.

let items = [1, 2, 3, 4, 5];
let double = (item) => item * 2;

// Loop Version of Map
let MapLoop = (fn, arr) => {
    const mappedArr = [];
    for (let i = 0; i < arr.length; i++) {
        let mapped = fn(arr[i]);
        mappedArr.push(mapped);
    }
    return mappedArr;
};

console.log(MapLoop(double, items));
// Result: [2, 4, 6, 8, 10]

Own map function (recursive version)

Building a recursive version of a map function is an interesting one. But how does it work?

We still pass both the mapper function and array to the function, but we use ES6 destructuring assignment to break the array into two params called head and tail.

With this approach, we want to take a step-by-step approach and perform the mapper function on each of the array elements recursively. In the process, we use spread syntax to concatenate the result of each MapRecursive call with the result of mapped fn(head).

This continues until head becomes undefined, meaning there are no more elements in the array. That is when we bail from the recursive function shown on line 8 and then start returning the new transformed array.

let items = [1, 2, 3, 4, 5];
let double = (item) => item * 2;

// Recursive Version of Map
let MapRecursive = (fn, [head, ...tail]) => {
    // bailout
    if (head === undefined) {
       return [];
    }
    return[fn(head), ...MapRecursive(fn, tail)];
};

console.log(MapRecursive(double, items));
// Step 1: head: 1, tail: [2,3,4,5], newArray: [2, ...MapRecursive(double, [2,3,4,5])]
// Step 2: head: 2, tail: [3,4,5], newArray: [2,4, ...MapRecursive(double, [3,4,5])]
// Step 3: head: 3, tail: [4,5], newArray: [2,4,6, ...MapRecursive(double, [4,5])]
// Step 4: head: 4, tail: [5], newArray: [2,4,6,8 ...MapRecursive(double, [5])]
// Step 5: head: 5, tail: [], newArray: [2,4,6,8,10 ...MapRecursive(double, [])]
// Step 6: head: undefined -> return newArray: [2,4,6,8,10]

Own map function (generator version)

You can also build a map function using a generator function. This is not the ideal way for handling mapping and does not give you the same result as the previous examples since generator functions return an iterator object. It is merely educational and to see how a similar concept can be applied in generator functions as well.

You can see in the comments section below what the end result of calling MapGenerator looks like:

let items = [1, 2, 3, 4, 5];
let double = (item) => item * 2;

// Generator version of Map
let MapGenerator = function * (fn, arr) {
    for (let x of arr) {
        yield fn(x);
    }
};

const result = MapGenerator(double, items);

console.log(result.next());
// Object {value: 2, done: false}
console.log(result.next());
// Object {value: 4, done: false}
console.log(result.next());
// Object {value: 6, done: false}
console.log(result.next());
// Object {value: 8, done: false}
console.log(result.next());
// Object {value: 10, done: false}
console.log(result.next());
// Object {value: undefined, done: true}

References
https://www.freecodecamp.org/news/implement-array-map-with-recursion-35976d0325b2/
https://www.digitalocean.com/community/tutorials/list-processing-with-map-filter-and-reduce