WHEN: December 3rd & 4th 2025 from 4pm to 8pm EST
WHERE: Advanced Technology Department Center ATDC ( Directions )
COST: $1500 per attendee
[CLICK HERE TO REGISTER]

STOP WAITING TO BUILD. START OWNING THE FUTURE.

The cost of waiting is too high. The time to transition from observer to creator is NOW.

The response to the power of Agentic AI systems has been absolutely electrifying. If you are a developer, architect, or innovator alive in the current tech landscape, you understand that agentic AI is the future. This 2-Day Master Class is your crucial follow-through and the definitive answer to your still-unanswered questions on building with Google’s Agent Development Kit.

For a groundbreaking investment of just $1500, you will dramatically elevate your AI development skills and transform yourself into a builder of that future. This is not merely an option—this is non-negotiable!

YOUR INVESTMENT: $1500 (Limited Enrollment)

This is the essential next step to seriously level up your skills. We have extended the renowned intensive workshop format into two full days of hands-on mastery to ensure you bypass the basics and solidify your understanding.

Space is severely limited to ensure a high mentor-to-attendee ratio, guaranteeing the immediate, direct developer support you need to crush code roadblocks. Secure your spot now—this unprecedented opportunity to continue the build will not last.

[CLICK HERE TO REGISTER]

THE 2-DAY AGENT ARCHITECT IMMERSION

We are moving beyond simple demos to focus intensely on actionable, practical skill-building. This Master Class is entirely focused on getting you shipping functional code.

DAY 1: Unpacking the ADK and Defining the Tools

If you attended introductory sessions and left with more questions than answers, Day 1 provides the solutions. You will gain a comprehensive, practical understanding of Google’s Agent Development Kit (ADK) and how it simplifies the creation of complex, multi-step AI workflows.

• Zero Fluff Deep Dive: We bypass the basics to immediately master defining tools and managing state within the ADK.

• The Architecture Mandate: You will master the structure behind reliable, scalable AI agents and learn the patterns needed to build complex, multi-agent systems.

• Gemini Integration: Work side-by-side with experienced developers (Expert Mentorship) to troubleshoot code in real-time.

DAY 2: Deployment and Portfolio Creation

Day 2 focuses entirely on execution, ensuring you move from theory to high-velocity creation.

• The 9-Agent Guarantee: You will architect, code, and deploy your first NINE functional AI agents immediately. This hands-on process solidifies your understanding of agentic systems and tool-use by creating a portfolio of working agents.

• Deployment Mastery: Learn how to deploy agents that actually solve real-world problems.

• Networking & Support: Benefit from a highly focused, collaborative space designed for maximum knowledge transfer and direct peer-to-peer connection. You'll receive direct developer support to ensure you deploy successful agents.

WHY YOU MUST ENROLL TODAY

This is your crucial follow-through to go from observer to creator. This intensive workshop is designed to answer all your technical questions and ensure you leave as a master architect of Agentic AI.

Your $1500 investment covers two full days of expert-led, hands-on instruction (a significantly expanded version of the highly sought-after intensive workshop).

• What's Included:

  • The Very Best Learning Environment designed for maximum knowledge transfer.

  • Expert Mentorship from experienced developers like Lead UI Architect, Ady Ngom, who can troubleshoot your code in real-time.

  • Direct Developer Support throughout the 2 days.

  • Fuel for the Build: Light snacks & refreshments will be provided to keep the code flowing.

Don't miss this opportunity to seize the future of AI!

[CLICK HERE TO REGISTER]

🔥 The Build Continues!

DevFest Atlanta 2025 was just the launchpad—now it’s time for the deep dive!

The response to the Agent Developer Kit (ADK) workshop was electrifying, and we listened! If you attended the introductory session with ADY NGOM and left with more questions than answers, or if you're just ready to seriously level up your skills, this 4-hour intensive, hands-on workshop is your essential next step.

This is the definitive answer to your still-unanswered questions on building with Google's Agent Development Kit.

What You Will Conquer in 4 Hours:

We're moving beyond simple demos to focus on actionable, practical skill-building. Working directly with experienced developers, you will architect, code, and deploy your first NINE functional AI agents.

• 9 Agents, Zero Fluff: Dive into creating a portfolio of working agents, designed to solidify your understanding of agentic systems and tool-use.

• Expert Mentorship: Work side-by-side with experienced developers who can troubleshoot your code in real-time.

• Unpack the ADK: Gain a comprehensive, practical understanding of Google’s Agent Development Kit (ADK) and how it simplifies the creation of complex, multi-step AI workflows. Learn how to define tools, manage state, and deploy agents that actually solve problems.

• Architecture Deep Dive: Master the structure behind reliable, scalable AI agents and learn the patterns needed to build complex, multi-agent systems.

Why You MUST Be There (This is Non-Negotiable!):

If you are a developer, architect, or innovator alive in the current tech landscape, you understand that agentic AI is the future. This workshop transforms you from an observer to a builder of that future.

Forget the theoretical hang-ups; this event is entirely focused on getting you shipping functional code.

What's Included:

• The Very Best Learning Environment: A highly focused, collaborative space designed for maximum knowledge transfer and direct peer-to-peer connection.

• Direct Developer Support: Immediate help to get through the inevitable code roadblocks.

• Light Snacks & Refreshments: Fuel your brain and keep the code flowing.

Space is severely limited to ensure a high mentor-to-attendee ratio. Secure your spot now to guarantee you don't miss this opportunity to continue the build and elevate your AI development skills dramatically.

[👉 Register Now for the ADK Deep Dive!]

Given an array of random numbers, push all the zero’s of a given array to the end of the array.

For example, if the given arrays is {1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0}, it should be changed to {1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0}.

The order of all other elements should be same. Expected time complexity is O(n) and extra space is O(1).

We will cover two ways of solving for this, the first a brute force or a first best guess on a working solution, then we will tackle the recommended way to have a point of comparison.

Video here

Brute Force - First solution

My first intuition could be broken down into the steps below:

1. Get the size of the current array
2. Create a second array the size of the first one and fill with zeroes
3. Filter out all zeroes from the first array which will maintain the order of the non zero items
4. Take the difference of lengths between the first array and the filtered array to get the offset index
5. If the zeroes need to be on the end of the array, fill the holder array from the start to the length of filtered array
6. If the zeroes need to be at the start, replace the items starting from the offset to the end.
7. Return the holder array

Now that we have the steps, let's look it with code and hopefully make it easy to register. Let's start with the function declaration:

const moveZeroes = ( arr, dir = 'end') => {
    // body of function here
}

Our function expects a well formed array of digits and an optional direction parameter that defaults to 'end'. Now on to the steps for the body of the function:

1. Get the size of the current array

   const size = arr.length;
   

2. Create a second array the size of the first one and fill with zeroes

   let holder = Array.from({ length: size}, () => 0);
   

3. Filter out all zeroes from the first array which will maintain the order of the non zero items

   let filtered = arr.filter( v => v !== 0);
   

4. Take the difference of lengths between the first array and the filtered array to get the offset index

   let offset = size - filtered.length;
   

5. If the zeroes need to be on the end of the array, fill the holder array from the start to the length the filtered array

   if( dir === 'end' ) {
    filtered.forEach( (v, i) => holder[i] = v );   
   }
   

6. If the zeroes need to be at the start, replace the items starting from the offset to the end.

   if( dir === 'start' ) {
    filtered.forEach( (v, i) => holder[ i + offset] = v );
   }
   

7. Return the holder array

Au final, we get the code below as our brute force solution:

const moveZeroes = ( arr, dir = 'end') => {
    const size = arr.length;
    let holder = Array.from({ length: size}, () => 0);

    const filtered = arr.filter( v => v !== 0);
    const offset = size - filtered.length;

    if( dir === 'end' ) {
        filtered.forEach( (v, i) => holder[i] = v );
    }

    if ( dir === 'start' ) {
        filtered.forEach( (v, i) => holder[ i + offset] = v )
    }

    return holder;
}

And we can test it with:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('Zeroes to end: ', moveZeroes(arr));
console.log('Zeroes to start: ', moveZeroes(arr, 'start'));

Which outputs

Zeroes to end   :   [1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0]
Zeroes to start :   [0, 0, 0, 0, 1, 9, 8, 4, 2, 7, 6]

This satisfies the expected output of the challenge but, we should run an auto critique and see the many things that make our solution not so optimized:

• First we are creating a second array to hold the the filtered items
• Second we create a third array then fill it with zeroes, each of those steps is an additional computation step and increase the execution time as the array grows in size
• Lastly, we iterate and change the newly created array to place our filtered items and respect the order of the items

So the big question is can we achieve the same with only the one array passed and not to have to create all this new ones and how do we swap the zeroes to an end without affecting the order.

The answer is of course yes and like the first solution we will start with a breakdown of the logic of the solution to hopefully help with understanding

Optimized solution - recommended one

We will operate within only one array and keep track of two indexes: a read index and a write index which both start at the same position.

We will use the readIndex to scan the array from end to end and skip any cell that contains a zero.

When we encounter a non-zero, we update the value at the writeIndex with the non-zero value then we decrement or increment the writeIndex based on which side we need to move the zeroes to.

If your head is spinning from reading the above steps, I have put up a visualization that might help you understand it quickly. This below shows the step by step of moving the zeroes to the left

Let's translate that into code with two separate functions this time starting with the zeroes to the left.

[Optimized] Move Zeroes Left

As always we start with the function declaration

const moveZeroesLeft = function(arr) {

}

Then we declare two local variables to hold a writeIndex and a start position

let writeIndex = arr.length - 1;
let start = writeIndex;

Both indexes start at the end of the array.

You might've guessed from the visualization that we will run two internal loops.

The first loop will scan for non-zeroes with a readIndex and put the value found at the writeIndex. The writeIndex will decrement every time after such an operation

for(let readIndex = start; readIndex >= 0; readIndex-- ) {
    if( arr[readIndex] !== 0) {
        arr[writeIndex] = arr[readIndex];
        writeIndex--;
    }
}

The second loop will start at the beginning now and swap each value with a zero up until it reaches the writeIndex cell which also will get a zero value

for (let j = 0; j <= writeIndex; j++) {
    arr[j] = 0;
}

To finish, we can now simply return the updated array

return arr;

The complete code:

const moveZeroesLeft = function(arr) {
    let writeIndex = arr.length - 1;
    let start = writeIndex;

    for(let readIndex = start; readIndex >= 0; readIndex-- ) {
        if( arr[readIndex] !== 0) {
            arr[writeIndex] = arr[readIndex];
            writeIndex--;
        }
    }

    for (let j = 0; j <= writeIndex; j++) {
        arr[j] = 0;
    }

    return arr;
}

We can verify that this works with the statements and the output below:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('\n------------ Move zeroes left --------\n');
console.log(moveZeroesLeft(arr));
// outputs to console
[0, 0, 0, 0, 1, 9, 8, 4, 2, 7, 6]

[Optimized] Move Zeroes Right

The code to have the zeroes at the right is following the same logic as the previous one.

The main difference is that the readIndex and writeIndex will start at the beginning of the array instead of the end.

No need for a step by step then, here is the finished code:

const moveZeroesRight = function(arr) {
    let writeIndex = 0;
    const size = arr.length;

    for(let readIndex = 0; readIndex < size; readIndex++) {
        if(arr[readIndex] !== 0) {
            arr[writeIndex] = arr[readIndex];
            writeIndex++;
        }
    }

    for(let j = writeIndex; j < size; j++) {
        arr[j] = 0;
    }

    return arr;
}

We can expect and verify the zeroes to be moved to end of the array with the below statements again:

let arr = [1, 9, 8, 4, 0, 0, 2, 7, 0, 6, 0];
console.log('\n------------ Move zeroes right --------\n');
console.log(moveZeroesRight(arr));
// outputs to console
[1, 9, 8, 4, 2, 7, 6, 0, 0, 0, 0]

Conclusion

I tried to be thorough in showing you multiple ways to solve this fun challenge.

I hope you enjoyed the [long] read and more importantly understand both approaches and why one is a better option than the other.

Share in the comments any feedback and alternate solutions and don't forget to stay tuned for more 😃

I personally am falling in love with the React.memo concept, but we can reserve it for another tutorial though.

We are here to talk about Hooks so let's get into it.

First thing first what are hooks??

Fair question. Components are at the heart of the React library and there are essentially two ways to write them. Either as a class base component or a functional component.

Prior to version 16.8 I believe, using the class base syntax was the only way to tap in into the component life cycle methods and also the only way to directly access the very important state object.

The workaround or status-quo was to wrap the functional component inside a class component and have it pass the state as props.

With the addition of hooks, that is no longer necessary since functional components are now literally able to "hook into" the React exposed methods such as useState and useEffect which we are going to look into extensively.

Now that we have that out of the way, let's see it in code

A simple counter

Let's put together our example functional component. The user interface is two buttons in charge of incrementing or decrementing a count value that defaults to 0.

The code below is one of the ways we could go about it

import React, { useState } from "react";
import { render } from "react-dom";
import "./styles.css";

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div id="counter">
      <div id="wrapper"> </div>
      <header id="counter-header">
        <div id="header-wrapper"> </div>
        // The fun stuff
        <button
          className="cbtn" onClick={e => {
            if (count > 0) setCount(count - 1);
          }}
        >
         -
        </button>
        <h1>Simple Counter </h1>
        <button
          className="cbtn" onClick={e => {
            setCount(count + 1);
          }}
        >
        +
        </button>
      </header>
      <p className="count">{count} </p>
      <p className="label">Off the hooks!!! </p>
    </div>
  );
};

render(<Counter />, document.getElementById("root"));

Just like we would've imported Component on the opening line, we are instead adding the useState hook. Then a destructuring like statement is used to set the internal state

const [count, setCount] = useState(0);

The first variable - count, on the construct is the value and the second setCount is the name of the function you will later use to update the value - you can call it whatever you see fit.

Finally, useState on the right of the statement takes what looks like an argument but is actually initial value of the state key.

So in plain English:

Using the state hook, create a variable named count and associate a function named setCount that will be in charge of updating the value of it. In the meantime, set the initial value of count to 0

We then add event listeners on the buttons and for each we make use of the setCount to update the count value accordingly

 <button className="cbtn" onClick = {(e) => { if(count> 0) setCount(count - 1)}}>
-
 </button>

 <h1>Simple Counter </h1>

 <button className="cbtn" onClick = {(e) => { setCount(count + 1)}}>
+
 </button>

There you have it for a simple example :) Now let's look at something more involved that will allow us to take advantage of a few lifecycle methods inside a functional component

A Vending Machine

If you have read some of my articles, you might've come across my JavaScript - 28 relevant questions series.

One of the challenges is to build a "simplified" Vending Machine.

You can read more about and definitely take a stab at it following the link below.

# 6 Vending Machine - Bob runs a successful Vending Machine business. He wants to add an interface ...

One of the solution that I have devised for it uses a function as a module. We will import that inside a React functional component and use it to update various states of the application

The complete code can be found here: React vending machine with hooks but let's quickly go step by step.

Let's first look at our Vending Machine module

export default function VendingMachine(inventory) {
  var drinks = inventory || null;

  if (!drinks) {
    throw new Error("No inventory: Cannot add a new VM");
  }

  const drinksKeys = Object.keys(drinks);

  var sale = function(pid) {
    if (!drinks[pid]) {
      return;
    }

    if (drinks[pid].stock > 0) {
      drinks[pid].stock--;
      return `1 ${drinks[pid].name} - Thank you, come again!!`;
    } else {
      drinks[pid].stock = 0;
      return ` ${drinks[pid].name} is out of stock :( Come back tomorrow`;
    }
  };

  var stock = function() {
    const total = drinksKeys.reduce((c, n) => c + drinks[n].stock, 0);
    return total;
  };

  return Object.freeze({ sale, stock });
}

The Vending Machine exposes two public methods sale and stock. It also needs to be passed an inventory object that looks like this

{
  "1": {
    "name": "Mango Juice",
    "stock": 2
  },
  "2": {
    "name": "Banana Smoothies",
    "stock": 2
  },
  "3": {
    "name": "Guava Mix",
    "stock": 1
  },
  "4": {
    "name": "Citrus Blend",
    "stock": 3
  }
}

Let's assume that this object is coming from an HTTP call. In a class based component scenario, we would have probably use the ComponentDidMount lifecycle method to make the request and update the state. In the case of the functional component we will hook into the useEffect method to do so.

Now let's set a few rules/goals that we want our React component to do:

• The UI should only render when the VM has been properly set with a valid inventory
• The component will need to make an HTTP request call to get that initial inventory
• The UI will show a loading state until it is ready to render the VM
• Once loaded, each drink from the inventory will be represented by a button.
• Clicking on any of the drinks button will trigger the VM sale method call and displaying either a successful sales or an out of stock message
• The UI will display the starting stock and that number will be updated each time a successful sale is made

1. Initial setup

Let's put the initial wrapper for our little app

import React, { Fragment, useState, useEffect } from "react";
import { render } from "react-dom";
import VendingMachine from "./FunModules/VendingMachine";

const LocalVM = () => {
  // functional logic here
  return <Fragment>// view logic here</Fragment>;
};

render(<LocalVM />, document.getElementById("root"));

As we did with the Simple Counter, we are importing useState but also useEffect and Fragment.

My personal like on Fragment is how easy it let us choose if we want add additional tags to the DOM or not - very powerful.

The last import line simply get us our VM module. Whether I work on an Angular or React project, I usually create a folder of utilities with pure Vanilla JS that are easy to reuse in either framework or library.

2. Declaring our State(s)

The state syntax in a class component is a key value object. We could definitely repeat that same pattern here, but what it is very interesting and flexible with the useState hook is that you could set each individual state you want to track.

Let's illustrate that in our functional logic section

// functional logic here
const [vm, setVM] = useState({});
const [loading, isLoading] = useState(true);
const [data, setData] = useState({});
const [message, setMessage] = useState("...");
const [stock, setStock] = useState(0);

I really like how this reads, it is almost self-documenting and probably easy to figure out what each of these does. Let me know if you don't agree :)

To be crystal clear though, this is what each will handle:

1. vm will be the local instance of our Vending Machine and starts as an empty object
2. loading is a boolean that defaults to true and will be false when the VM UI is ready to be rendered
3. data is the inventory object that we will get back from our HTTP request call
4. message is going to be use to display a success or out of stock status
5. and finally stock will display the initial count of the total inventory of drinks and update that number anytime a purchase is made

3. Requesting the inventory

Now comes the fun part where we get to take advantage of useEffect to wrap around our HTTP request.

useEffect(
  () => {
    fetch("https://my-json-server.typicode.com/adyngom/vmapi/db")
      .then(response => response.json())
      .then(data => {
        setData(data);
        setVM(VendingMachine(data));
        isLoading(false);
      });
    // return function statement when component unmounts
  },
  [] // empty array as second argument to ensure the effect runs once
);

The hook wraps our fetch call and once we get a response, setData updates the data state and setVM attaches an instance of the VendingMachine with the new inventory to our vm state.

Please note that we haven't added error handling on our fetch call for brevity.

The code adds two very important comments that touch on lifecycle management. It is extremely important to understand that useEffect is the equivalent of ComponentDidMount, ComponentDidUpdate and ComponentWillUnmount lifecycle methods combined

If we don't pass the empty array as a second argument, the "effect" will run every single time the component gets updated.

That would be great for certain use cases, but in this particular one , we would be telling our component to go fetch and setup a Vending Machine every single time something gets updated in the UI.

The empty array as second argument helps us prevent that by making it a one and done deal.

The commented out return function statement is a placeholder of where you would put your code if you wanted to do operations when the component unmounts.

Think about use cases such as removing event listeners, unsubscribing from an observable etc...

I highly recommend to read more about those on the React documentation page.

4. Rendering the UI at last

Now that most of our logic is taken care of, we can focus on putting the meat of the component on the page. If we have received data from our fetch call, this will mean that the loading state has finished and is now false.

Using the ternary operator, we could compose our view like below

return (
  <Fragment>
    {loading ? (
      <p>loading... </p>
    ) : (
      <div>// loading is done put the VM interface here</div>
    )}
  </Fragment>
);

Let's also add two helpers function just before the useEffect block that will allow for a clean way to call on the sale and stock methods of the VM

const sale = pid => {
  return vm.sale(pid);
};

const getStock = () => {
  return vm.stock();
};

With everything in place, let's add the final piece of the UI inside the falsy section of the ternary statement

return (
  <Fragment>
    {loading ? (
      <p>loading... </p>
    ) : (
      <div>
        <h3>Pick a fresh drink and enjoy </h3>
        <p>{message} </p>
        <br />
        <div>
          {Object.keys(data).map(d => {
            return (
              <button
                key={d}
                id={d}
                onClick={e => {
                  setMessage(sale(e.target.id));
                }}
              >
                {data[d].name}{" "}
              </button>
            );
          })}
          <br /> <br />
          <small>VM current stock: {getStock()} </small>
        </div>
      </div>
    )}
  </Fragment>
);

So if we are going from top to bottom on the last block we are essentially:

• Putting a reactive message string. This gets updated anytime we click on one the buttons which come next
• Using the data object we cycle through the keys and dynamically build our buttons UI.
• Each button gets an event listener attached to it and will pass the purchased id or pid to the local sale function.
• The action is wrapped in a setMessage call that updates our message string with proper success or out of stock string
• Finally getStock will be called initially and anytime the component updates to give the updated value of the stock count

5. Let's see it in action

And if you do have the React Developer Tools extension installed here is a very slick representation of our UI inside the React DOM

Conclusion

I've warned you or at least I've tried in the title to tell you that this was going to be lengthy. If you've made it this far though, I hope that like myself you have learned a thing or two about this fascinating way of composing slick UIs with the React library.

The effect and state hooks, are most likely to be the most prominent ones for many of the use cases in a functional component. But don't cut yourself short by limiting yourself to those two.

I cannot recommend enough this gem of an article by Aayush Jaiswal: 10 React Hooks you Should Have in Your Toolbox

Antonin Januska has also put together a nice Hooks cheat sheet: The Definitive React Hooks Cheatsheet

If you create bits of reusable code, you could definitely take a stab at creating some custom hooks and share with the rest of us. The React docs are surely a great place to start: Building Your Own Hooks

In the end, don't forget to pace yourself. Some are pretty intuitive and straightforward and some might take a few head scratches.

Thanks for reading this far and don't forget to "hook" a few friends up by sharing the article ;)

Unfortunately, reading does not necessarily translate into understanding. I’m here to bet that one the main reasons a codebase or project does not get adoption or gets abandoned is simply because it requires too much brain processing power and put simply is not intuitive.

Many in western cultures are familiar with the 5 second rule when it comes to food, I know some who count a very slow 5 in that predicament :).

When it comes to code though, John Papa rightfully states that:

If you can’t understand the code in 5 seconds, there is probably a smell, there is probably an idea that you should probably refactor. __ John Papa — Readable Code

So to put it in perspective, let me:

• First run you through a practical use case of a code refactor.
• Then we can discuss the added value and benefits it could provide and finally
• Share a few useful resources that have been very helpful in this “clean code” quest

If you are a seasoned clean coder, we hope you can help us further improve by sharing some cool tips and resources on the subject in the comments.

A “simple” user story

Given a list of hotels, please select those that are located in the US and provide the filtered list with a properly formatted phone number. Below is a sample of the list of hotels.

const hotels = [
    {
     name: "Panthers Alley",
     country: "Wakanda",
     address: "123 Best Luck Finding, 3 Rivers, Wakanda",
     phone: "5551790871"
    },
    {
     name: "The Golden Thread",
     country: "USA",
     address: "5 Maple Street, Los Angeles, CA, 90000",
     phone: "2125552345"
    },
    {
     name: "12 Crowns",
     country: "Japan",
     address: "36 Wide Alley Blvd, Tokyo",
     phone: "5558725910"
    },
    {
     name: "Petit Paris",
     country: "usa",
     address: "3669 Elm Street, New York, 30000",
     phone: "7075559087"
    },
    {
     name: "The Empress Lounge",
     country: "USA",
     address: "1 Kings Place, Atlanta, GA, 30000",
     phone: "6785553125"
    }
];

If you are able to read the above and understand without a squint what’s going on in 5 seconds or less, I bow to you 🙂

To be fair though there are a lot of good in the proposed solution such as:

• A very descriptive choice on the naming of the constant USHotels. This implicitly indicates the type of value it will hold which is likely to be a list of hotels in the US.
• The use of map and filter to extract and transform the result to a new set, leaving the original unchanged or in more technical terms help avoid mutating the original object.
• Map and filter also allow for a more declarative coding style rather than the imperative that would’ve been unavoidable with the for or forEach loops.

If you want to learn more about imperative vs declarative, do yourself a favor and read this great piece from Tyler McGinnis: Imperative vs Declarative Programming

In short, declarative is more concerned about the WHAT whereas imperative is explicit on the HOW.

This point us to the first area of what might need revision in our solution — the map block is too verbose and is a deep dive into HOW to transform an unformatted number to the US standard.

In our refactoring effort we will create a set of specialized units — read functions, that will help us ease in reading and understanding at first glance but also will have the side effect of creating reusable code.

I personally call this the “Toolify” step — a cool made up word 😉 Feel free to propose something else. I’m listening.

Let’s abstract and conquer

The map block is lengthy and will be the bulk of our refactor but let’s start with the filter step.

Let’s first create a helper function named propEquals which will only worry about if a property on an object x is equal to a value y.

Feel free to make the name more descriptive if it is not obvious to you. What is important is the name carries an implicit return type.

It’s almost obvious that it will return a boolean.

function propEquals(key, value, matchCase = false) {
 return function(obj) {
   return (!matchCase) ? obj[key] === value 
         : obj[key].toLowerCase() === value.toLowerCase();
   }
}

propEquals is generic enough to look up any key / value pair against any object. For example if we want to know if the first object in the hotels array is Wakanda, we could call it like this:

const IsWakanda = propEquals(‘country’, ‘Wakanda’)(hotels[0]);
console.log(IsWakanda); // will output true

Now let’s add a more specific function that will only target the US countries.

Using the outer function of propEquals, we can “fix” the arguments values to always default to the US. Let’s name this new functionality isUSCountry.

const isUSCountry = propEquals.call(null, ‘country’, ‘USA’, true);

In plain English, we could say that isUSCountry derives from propEquals and set the default values of the parent function to:

• country as key,
• USA as value,
• and want to select either lower or uppercase values of the string USA.

In “simpler” technical terms, isUSCountry is a composition of propEquals.

Putting it to use will give us a very nice and intuitive syntax:

const USHotels = hotels.filter(isUSCountry);
console.table(USHotels);

And below is the output of the filtered array

[
    {
      "name": "The Golden Thread",
      "country": "USA",
      "address": "5 Maple Street, Los Angeles, CA, 90000",
      "phone": "2125552345"
    },
    {
      "name": "Petit Paris",
      "country": "usa",
      "address": "3669 Elm Street, New York, 30000",
      "phone": "7075559087"
    },
    {
      "name": "The Empress Lounge",
      "country": "USA",
      "address": "1 Kings Place, Atlanta, GA, 30000",
      "phone": "6785553125"
    }
  ]

This syntax where USHotels construct is not explicitly specifying any arguments and just the function reference, is called tacit programming or point free composition

The more helpers the merrier

Now that we are done with the filter part, let’s attack the transform part or map with the same approach.

First let’s extract the phone formatting functionality an decouple it from the fact that it is always tied to an object.

We should be able to format a number whether it is part of an object or not.

So below we now have our USPhoneFormat function:

function UPhoneFormat(tel) {
    let area, prefix, line;
    area = tel.substr(0, 3);
    prefix = tel.substr(3, 3);
    line = tel.substr(6, 4);
    const formatted = `(${area}) ${prefix} ${line}`;
    return formatted;
}

Now let’s add our final helper transformProp. It will basically take a key and a transform function and apply the value transformation on a given object.

function transformProp(key, fn) {
   return function(obj) {
     return {…obj, [key]: fn.call(null, obj[key]) };
   }
}

Now following the same logic we did with isUSCountry, we can “compose” a more specific functionality that only handles phone number formatting

const formatPhone = transformProp.call(null, ‘phone’, UPhoneFormat);

The big payoff

Now that we have all of our “tools” in place, we can finally revise our original syntax to just this “above the fold”:

const USHotels = hotels.filter(isUSCountry).map(formatPhone);
//add all the functions below the fold or better yet use imports

Logging USHotels to the console will output the following:

[
 {
 “name”: “The Golden Thread”,
 “country”: “USA”,
 “address”: “5 Maple Street, Los Angeles, CA, 90000”,
 “phone”: “(212) 555 2345”
 },
 {
 “name”: “Petit Paris”,
 “country”: “usa”,
 “address”: “3669 Elm Street, New York, 30000”,
 “phone”: “(707) 555 9087”
 },
 {
 “name”: “The Empress Lounge”,
 “country”: “USA”,
 “address”: “1 Kings Place, Atlanta, GA, 30000”,
 “phone”: “(678) 555 3125”
 }
]

Some might scratch their heads right now thinking “that’s an awful lot of steps to essentially get the same result. What do we gain from this?” I’m glad you asked.

The true gain can be summed up in what I called the S.C.R.E.A.M.S principle. Using it, I try to always ensure that my code is:

• Self-documenting — hopefully this is an obvious one
• Composable — made up word but gives you the idea
• Readable — for human first and minified next for machines
• Eloquent — subjective but you define what is and stick with it
• Abstraction layer — add it wherever it makes sense
• Maintainable — small units are easy to test
• Scalable — separate and generic functions are easy to reuse

In closing

I have honestly started to make that extra “craft” effort in the past few months and I can admit that it was a very, very slow start.

If that is something that might be of interest to you, I suggest to start with small refactors.

Using a combination of map, filter, reduce and bind, call, apply is your Swiss-knife that can carry you a long way and is one of the routes that will help in producing “clean-code” in JavaScript.

If you are convinced, it’s now time to craft some code that S.C.R.E.A.M.S!! 🙂

A few resources

From the master himself — bookmark it!!! Readable Code

An oldie but still a goodie JavaScript Apply, Call and Bind Methods Are Essential for JavaScript Professionals

Can’t thank Cristian Salcescu enough for this great piece How point-free composition will make you a better functional programmer

Hello I’m Ady Ngom. Professionally I carry the fancy title of Solutions Designer / JS Tech Lead. At the core though, I’m just a passionate about all things JavaScript and the Front-end ecosystem. Connect with me on Twitter, LinkedIn and visit my blog adyngom.com

The most important part, in my humble opinion is to get it right first. In your normal coding life you would rarely, if ever, be able to produce "perfect" code without first going through a set of iterations.

The approach during the coding interview should not differ and if played well should help you score invaluable points into demonstrating your problem solving skills.

I'm going to walk you through of what could be an actual conversation between you and an interviewer if you were asked to solve for the [in]famous FizzBuzz challenge.

The challenge

Write a program that prints the numbers from 1 to 100. But for multiples of three print Fizz instead of the number and for the multiples of five print Buzz. For numbers which are multiples of both three and five print FizzBuzz

The context

The FizzBuzz challenge is not specific to JavaScript and has been part of the coding interview process in almost every programing language. It is usually a quick check to assess the candidate basic programing instincts, but can also be turned in an assessment for in depth knowledge if the interviewer decides to do so. It is usually part of a light weight first technical interview done while screen sharing. It is also a favorite from a non JavaScript programmer to ask and quickly gauge your technical knowledge and approach.

In a Javascript context familiarity with some or all the following concepts are expected to be demonstrated:

• Logical operators
• Looping
• Falsy values
• Ternary operator
• Type coercion

The approach

As with any problems that you might encounter, even those that seem familiar, a good read and break down to small pieces is a must. Be clear to the interviewer that you need 3 to 5 minutes to read it calmly and propose a rewrite of your understanding.

If you are comfortable doing that part out loud, that's even better. For example this is how I might go for the rewrite:

• So log to the console numbers from 1 to 100 - I'm going to need a loop
• For multiple of 3 instead of the number output the string 'Fizz'
• Do the same for multiples of 5 with the output being 'Buzz'
• In the case the number is a multiple of both 3 and 5 then output 'FizzBuzz' - how to check if a is a multiple of b??
• If all the above cases fail then just output the number as is

I would probably ask to the interviewer if I should worry about edge cases or bad inputs. It is usually implied that the input will be correct and edge cases might not be necessary. The fact that you ask though, adds a touch of eloquence to your problem-solving approach.

The solution(s)

One thing that is key and is worthy of practice is walking the person through your steps as you are building the solution during the interview. Start with the obvious, you will probably need a function or class as your primary construct. Start there and always think of the K.I.A.S.S.A.P :) principle - Keep It As Stupid Simple As Possible

First step

// comments are me talking out loud
// let's build the function structure
function fizzBuzz( start = 1, end = 100) { // default parameters to set the default range
    // I need a loop - let's go with for
    for( let i = start; i <= end; i++) {
        // probably a variable for what will be outputted
        let output = i;

        // rest of the logic here

        // outputting the result
        console.log(output);
    }
}
// call the function
fizzBuzz(); // this prints out 1 to 100 - fancy ;)

The above satisfies my first goal on my rewritten challenge understanding

Second step

Now if I follow the cadence of the challenge I will solve for two things:

- Choosing the proper operator to find if a number is a multiple of another
- Apply it for the multiple of 3 condition and output 'Fizz'

The remainder operator - %, is the perfect tool here. If number a is a multiple of number b then

( b % a) === 0; // will be true;
// 4 is a multiple of 2
( 4 % 2 ) === 0; // is true

Let's apply this in the body of our function

// rest of the logic here
if( (i % 3) === 0 ) {
    output = 'Fizz';
}
// Knowing that 3,6 and 9 are multiple of 3 let's
// quickly test a small sequence by calling

fizzBuzz(1,10); 
// this should output
// 1, 2, 'Fizz', 4, 5, 'Fizz', 7, 8, 'Fizz', 10

Final step

Since the Fizz condition ran perfect we can now apply the same logic to the rest

// multiple of 5
if( (i % 5) === 0 ) {
    output = 'Buzz';
}

// multiple of 3 and 5
if( (i % 3) === 0  && (i % 5 === 0)) {
    output = 'FizzBuzz';
}

Wowza!! this satisfies all the conditions and gives us this chef d'oeuvre of a solution once assembled and stripped out of all comments

function fizzBuzz( start = 1, end = 100) { // default parameters to set the default range
    for( let i = start; i <= end; i++) {
        let output = i;
        if( (i % 3) === 0 ) {
            output = 'Fizz';
        }
        if( (i % 5) === 0 ) {
            output = 'Buzz';
        }
        if( (i % 3) === 0  && (i % 5) === 0) {
            output = 'FizzBuzz';
        }
        console.log(output);
    }
}
fizzBuzz();

Now at this point, I have a working solution that satisfies the challenge request. What follows is very delicate in an interview situation. Something is bugging me about my code. The last if block that checks for multiples of 3 and 5 seem redundant.

Now should I voice that out loud and propose to refactor it or should I wait for the interviewer to call it out?

Interviews are about managing time and maximizing your pluses over your minuses. If you feel super confident that you have a good shot at coming up with something more solid in a manageable time then go for it. If in doubt, wait to be asked.

This way, the interviewer has decided that the remainder of your time might be worth digging deeper on this question.

If it is decided that it would be interesting to look at a refactor, this might be a way to approach the refactor steps

The refactor

We could, of course, get to a fancy one-liner here for this particular challenge, but I'm not a particular fan of doing stuff for the sake of fancy or pretty.

So let's flip the switch what I'm going to do this time is I will show you my final solution and I will walk you through how did I get to it.

This can turn into a handy skill if you are to read and understand other people's code or if you are to explain it to someone else. Through the years I have provided many solutions for this challenge, but the one below is by far my favorite.

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output =  ( (i % 3) ? '' : 'Fizz' ); // if multiple of 3 is falsy
        output += ( (i % 5) ? '' : 'Buzz') ; // if multiple of 5 is falsy
        console.log(output || i); // output value or i if output is falsy
    }
}
fizzBuzz(1,15);

The solution uses the ternary operator syntax to set the conditions and takes advantage of something that might not very obvious at first for the untrained eye - JavaScript falsy values.

Let's start with falsy values JavaScript, what in the heck are we talking about. A great definition is provided by the Mozilla Developer Network (MDN ):

A falsy value is a value that is considered false when encountered in a Boolean context. JavaScript uses Type Conversion to coerce any value to a Boolean in contexts that require it, such as conditionals and loops.

For our particular context the important keywords are "Boolean context" and "conditionals" since they are relevant to our solution. Before looking at how it applies, here is the list of the most common falsy values in Javascript:

• The boolean false not the same as the string 'false'
• The number 0 - once again this is different from the string '0'
• The null object
• The primitive type undefined assigned to a non-initialized variable
• Any representation of an empty string such as a single quote, double quotes or back-ticks.

The rewrite

Let's focus on one segment of our fizzBuzz function

if( (i % 3) === 0 ) {
output = 'Fizz';
}
// this could be refactored as
if( !(i % 3) ) output = 'Fizz';

Breaking down the refactored line gives us this picture

• if (...) ==> conditional construct outside - boolean context inside
• ! ==> is false
• (i % 3) ==> type coercion - will check if value is falsy or truthy

Replace i by a few numbers to better understand it

if (!( 1 % 3) ...) /*becomes*/ if (!( 3 ) ...) /*3 is not false or falsy so check fails*/
if (!( 2 % 3) ...) /*becomes*/ if (!( 6 ) ...) /*6 is not false or falsy so check fails*/
if (!( 3 % 3) ...) /*becomes*/ if (!( 0 ) ...) /*0 is not false but is falsy so check passes*/

I can rewrite now my entire function using the logic above

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output = i;
        if( !(i % 3) ) output = 'Fizz';
        if( !(i % 5) ) output = 'Buzz';
        if( !(i % 3) && !(i % 5) ) output = 'FizzBuzz';
        console.log(output);
    }
}

I was quite ecstatic when I got to this solution, but it did not too long unfortunately. The last line was still redundant to me and honestly was bugging me. How could I combine the checks of 3 and 5 in one pass.

And then it hit me, what if I could start with an empty string, attach to it the word 'Fizz' if it passes the 3 condition and attach the word 'Buzz' if it passes the 5 condition too. I drew this on a piece of paper

• i = 1 ==> no Fizz '' ==> no Buzz '' ==> output is 1
• i = 3 ==> yes 'Fizz' ==> no Buzz '' ==> output is 'Fizz'
• i = 5 ==> no Fizz '' ==> yes 'Buzz' ==> output is 'Buzz'
• i = 15 => yes 'Fizz' ==> yes 'Buzz' ==> output is 'FizzBuzz'

The ternary operator will allow assigning a value if condition checks and an alternate value if it fails in a very terse manner.

Something else became obvious, we are outputting either a string or a number while we cycling through the values of i and as we saw in a previous section an empty string is a falsy value. So how do we translate all that intelligence into working code?

The essential piece to achieve that was that the value of output was either going to be one of the possible strings 'Fizz', 'Buzz', 'FizzBuzz' or be falsy. In the falsy case i will just be passed as is.

So the final rewrite with more comments

function fizzBuzz( start = 1, end = 100) {
    for( let i = start; i <= end; i++) {
        let output =  ( (i % 3) ? '' : 'Fizz' ); // output is assigned a value or empty
        output += ( (i % 5) ? '' : 'Buzz') ; // output concatenates the next value
        console.log(output || i); // || or operator if output is falsy will show i value
    }
}
fizzBuzz(1,15);

Hopefully, you followed all of that :) This was a very satisfying solution to me since I believe it was easy to read, solved the problem and had a touch of eloquent JavaScript in it.

Final words

The coding exercise covers only one aspect of the many things that happen during the coding interview.

As I mentioned the steps and being able to deliver, regardless of the complexity of the problem, take a solid amount of practice.

Don't hesitate to use mock interviews (we will be offering some in Javascript soon but more on that later) to practice the conversational aspect of it.

I hope this was useful, share and live a comment if you please :)

A quick warning and request

One of my friend told me that he learned a lot from the video even though it was a bit long - 25mn is kinda long. If you speed it up to 1.5x it is still watchable but at 2x I start to sound like a total chipmunk and you might find it entertaining.

I hope you enjoy it and learn something from it if CSS Grid is new to you. I really miss working on the User Interface side, let me know in the comments if you would like to see more posts around UI

The starter coded is added inline or you can copy it from here: Grid starter code

And the template used can be downloaded here: Elton UI Kit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Elton ui Kit</title>
    <style>
        @import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400';

        html {
            background-color: #eee;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            counter-reset: section;
        }
        .wrapper {
            width: 1170px;
            margin: 30px auto;
            box-sizing: border-box;
        }
        .box {
            border-radius: 3px;
            background-color: #ffffff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
        }
        .hero-fashion > .box {
            width: 1170px;
            height: 505px;
            margin-bottom: 30px;
        }
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-auto-rows: 238px;
            grid-gap: 30px;
        }
        .tall-span {
            grid-row: span 2;
        }
        .wide-span {
            grid-column: span 2
        }

    </style>
</head>
<body>
    <div class="wrapper">

        <!-- hero section -->
        <div class="hero-fashion">
            <div class="box"></div>
        </div>

        <!-- grid section -->
        <div class="row">
            <div class="box tall-span"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

Hiring the right candidate in the JS world - which has become a multiverse - is turning into an experimental art form.

I have, like many before and many more to come, been a witness of the impact of a poor screening process and this is my attempt to be a part of the solution.

You can read more about my mission statement in the first article of the series but without further ado here is your next relevant four in descending order for a change.

8. Input autocomplete

Best suited for: Senior | Expert Stage: At home | Round 2 | Onsite

8A. The challenge

The UX team has insisted that the country search input form needed to be more user-friendly.

They have their mind made on a "simple" autocomplete search box. What's not so simple and not obvious to the UX team, is that you have a huge dataset of possible results that would not be feasible to store on the client side.

Your task is to create a program that listens to user input events and fetches a list of possible matches. The UX team is not a big fan of dirty matching and wants the list to only show the country names that start with the search term entered by the user - oh and they want matches to be highlighted by the way on the list results

8B. The context

I have had similar tests provided and with usually a 48 to 72 hours to submit it back. I strongly advise that you use all the time allocated to come up with the most refined solution available.

This has the advantage to mimic to a certain extent what an actual user story might be and you are given time to execute.

And please, please don't just go blindly copy and paste a solution that you do not have a full grasp on.

You will be expected to come on site or online to talk about your solution, your reasoning and more than often a 'feature creep' will happen during evaluation to see how you will handle it.

For this particular problem, the async nature of the search and filter is going to be the first hurdle, but I would not personally start there. I would probably start with a small set of local data and focus on making the autocomplete and highlight as solid as possible.

As an interviewer I would love to see the candidate talk about and integrate all or most of the concepts below:

• Throttle link
• Debounce link
• Caching
• Memoization link
• Error Handling

Take-homes are more challenging than they might seem at first. Usually, enough is given to get you started, but a lot is expected on your delivery.

7 Mini testing library

Best suited for: Junior | Senior | Expert Stage: Round 3 | Onsite

7A. The challenge

The dev team is shyly making its debut to the TDD approach. They don't want to commit yet to a full-fledged library but want to write simple tests directly on the console to test their most important functions. They have dubbed the experiment project dotLog and have provided the initial structure below:

var dotLog = ( function() {
 return {
    describe(desc = 'test description:', testSet = []) {
        console.groupCollapsed(`${desc}: 0 passed - 0 failed`);
            // console out each test
        console.groupEnd();
    }
 }
}());

The describe method takes in a test label string and an array of test objects. The test object uses the following model:

var testOne = { rule: ( 3 < 4), label: " 3 is less than 4" };
var testTwo = { rule: (Math.max.apply(null,[3,4,1,2,0]) === 4), label: " should output 4" };

Now those can be added to a testSet and be passed to the describe method

var testSet = [testOne, testTwo];
dotLog.describe("Basic Math tests:", testSet);
Given the following 'naïve' function
function sum (x, y) {
    return x + y;
}

Fix it and the describe method so the following output is displayed:

sum(): 3 passed - 1 failed
    √ Should return 0 if no arguments
    √ Should add two numbers
    √ Should add up any amount of numbers
    x Should convert any non-digit to 0 and return the right amount

7B. The context

I have had my share of rejections but have also been very successful at landing the job. In all the interviews I have been through, only two companies have ever presented a challenge similar to this one.

The particularity of it was that I was actually seating with the entire development team, where would eventually be my work station and participated in the standup and was given half the day to solve for the problem. At the end of the four hours, I was taken to lunch and bid farewell.

Though I landed both of those, the interesting part was the process. I got to work directly in what would be my daily environment, the challenge was an actual user story in their backlog.

I could not cheat on my soft skills if I wanted to be successful, I had to reach out to my "soon to be" teammates to find out more details, or a quick setup issue. I had to submit my changes via a PR.

Word of advice, commit often and use descriptive messages about your changes.

In summary, I think companies can invest some time in accommodating this type of setup. Another approach might be to give it as an at home exercise with a time limit and have the candidate come and discuss her solution onsite with the team.

6 Vending machine

Best suited for: Junior | Senior | Expert Stage: Round 2 | Round 3 | Onsite

6A. The challenge**

Bob runs a successful Vending Machine business. He wants to add an interface that makes them a bit user-friendly and make it easy to add and track inventory. Below is the typical inventory model for the machines:

const drinks = {
    1: { name: "Mango Juice", stock: 2 },
    2: { name: "Banana Smoothies", stock: 2 },
    3: { name: "Guava Mix", stock: 1 },
    4: { name: "Citrus Blend", stock: 3 }
  };

Write a program that creates an instance of the Vending Machine (VM) with the following specifications:

The VM needs to be passed an inventory object in order to create an instance If the object is not passed, the program should throw a descriptive error:

const vm = new VM(drinks); // instance get created
// but
const emptyVM = new VM(); // throws a no inventory error

VM should assign the newly passed inventory to a private drinks variable that is not modifiable from the instance

vm.drinks; // should output undefined

VM should have a callable sale method that takes the drink id as an input and return a success message if in stock or a failed message if out of stock VM will always deduct one (1) from the product id stock after a successful sale

vm.sale(1);
// output: 1 Mango Juice - Thank you, come again!!
vm.sale(1);
// output: 1 Mango Juice - Thank you, come again!!"
vm.sale(1);
// output: Mango Juice is out of stock :( Come back tomorrow
vm.sale(4);
// output: 1 Citrus Blend - Thank you, come again!!

Finally VM should also have a callable stock method. It does not take any parameters and should display the total count of available drinks.

The drinks object given as an example has a total of 8 drinks. After buying 2 mango juice, the output of the stock method should 6. it should also output 'Out of stock' if empty.

vm.stock(); // should output total of all drinks left or Out of stock

6B. The context

Function with a constructor, new ES6 class, or Object create?? There are so many ways to approach this that I hope that the interviewer should be as prepared as the candidate.

A solid understanding of closures is going to help tremendously. It will be interesting also to see how the candidate approach scope and private variable and see if any design patterns are implicitly or explicitly used.

I think that no matter the level of the candidate, this type of exercise should allow touching on many key concepts of the JS language.

5 Code analysis and possible refactor

Best suited for: Senior | Expert Stage: Round 2 | Round 3 | Onsite

5A. The challenge

The sales team wants to have a small program that helps them remove any duplicates from a batch of tickets. Tickets batches are usually between 1,000 to 10,000 unfiltered items. The following solutions have been submitted by 3 developers in your team.

Developer 1

if( !Array.prototype.uniq ) {
    Array.prototype.uniq = function() {
        let _singles = [];
        const arr = this;
        for ( let i = 0; i < arr.length; i++ ) {
            if(_singles.indexOf(arr[i]) === -1 ) {
                _singles.push( arr[i] );
            }
        }
        return _singles;
    }
}

Developer 2

if(!Array.prototype.uniq) {
    Array.prototype.uniq = function() {
        return this.reduce( (arr, val) => {
            if (!arr.includes(val)) arr.push(val);
            return arr;
        }, [] );
    }
}

Developer 3

if(!Array.prototype.uniq) {
   Array.prototype.uniq = function() {
       return new Set([...this]);
   }
}

Two tests files are provided onekTickets.js and tenkTickets.js.

Only one solution can be pushed to production. Which, if any, would you pick based on readability and performance?

Can any of the proposed solutions be even more optimized to get to a better one? What would be the PR message you will leave for each of the developers regarding their solution and why it was or was not chosen?

5B. The context

In a normal development environment, you will be expected to read, evaluate and eventually critique other people's code.

The PR reviews are a critical step in making sure quality code is being pushed to the main repo.

Now each team or company can have their own take about how to define quality, but cannot walk away from clearly outlining standards, conventions and coding culture.

This type of question is both beneficial to the employer but to the candidate as well. Your main interaction with the team will be through similar exercises on a daily basis.

As an interviewer, my expectation will be for the candidate to reference some benchmarking tools to help determine which block of code is the fastest.

I surely will be impressed if she could eyeball it and clearly explain why, but since we are talking about giving feedback, it will be always easier to show rather than just tell.

console.time and console.timeEnd might kick off the conversation in the right direction, jsperf.com is also one the industry's favorite, but ultimately looking for, suggesting, doing a basic setup and running a quick benchmark would be a clear winner.

Finally, I would like to have an open discussion about readability, and maybe why sometimes it might be beneficial to sacrifice a little speed in spite of it.

In closing

This ends the second batch. Today we have introduced a DOM-related exercise with the input autocomplete. Expect a lot more of those to come in the next installment.

In the meantime don't forget to share, clap or whatnots but most important to add to the discussion in the comments.

Cheers