Interview challenge : getMovieTitles

Myriad Systems.

To solve this challenge, write an HTTP GET method to retrieve information from a particular movie database.

function getMovieTitlesData(title, page = 1) {
   const url = '' + title + '&page=' + page;
   const titles = [];
   return new Promise((resolve, reject) => {
      fetch(url, {
        method: 'get',
      }).then((response) => {
        return response.json();
      }).then((jsondata) => {
        for (let i = 0; i <; i++) {
      var total_pages = Number(jsondata.total_pages); 
      var curpage = Number(; 
         titles : titles,
         page : page,
         total_pages : total_pages
    }).catch((error) => {
      console.log("Failure", error);


function getMovieTitles(substr) {
   const promises = [];
   const titles = []; 
   getMovieTitlesData(substr).then(result => {
     for (let i = + 1; i <=result.total_pages; i++) {
        promises.push(getMovieTitlesData(substr, i));
     Promise.all(promises).then(datas => {
       datas.forEach(data => {





ES6 / ES2015 Additions

Arrow functions (or fat functions)?Arrow functions (or fat functions)

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

The key difference, despite being shorter to write, is that arrow functions do not create their own value for ‘this’.

If the function body contains just a single statement, you can omit the brackets and write all on a single line:

const myFunction = () => doSomething()

(parameters) => { statements }

Arrow functions and Lexical this

Template Strings / Template Literals

Object Destructuring

Adding to Array

[…oldArray, itemToAdd]

A simple todo app in javascript

Asked in Box onsite interview. With a node.js server on backend.

$().ready(function() {
   $('#add').on('click', addTask);
   $('#tasks').on('click', markComplete);
   // Alternative way
   // var tasksElement = document.getElementById('tasks');
   // tasksElement.addEventListener('click', markComplete);
   //document.getElementById('task-input').onkeydown = function(e){
   $('#task-input').on('keydown', function(e) {
       if(e && e.keyCode == 13){

   function renderTask(result) {
        var checkboxContainerId = 'check' +;
        var taskTextId = 'tasktext-' +;
        if (result.done == '1') {
            checkedState = ' checked ';
        } else {
            checkedState = '';
        taskHtml = '
  • '; taskHtml += ''; taskHtml += '' + + '
  • '; $('#tasks').append(taskHtml); } function taskAdded(result) { renderTask(result); $('#task-input').val(''); } function renderResults(results) { results.forEach(renderTask); } function addTask(e) { url = 'http://localhost:9898/todo/tasks/create'; inputData = $('#task-input').val(); if (!inputData) { return; } $.ajax({ url: url, type: "POST", data: {data: inputData} , success: taskAdded, }); } function markComplete(e) { var done; if ( &&"input.task-checkbox")) { var taskId = $('task-id'); if ($(":checked")) { done = "1"; } else { done = "-1"; } var editUrl = 'http://localhost:9898/todo/tasks/' + taskId + '/edit'; $.ajax({ url: editUrl, type: "POST", data: {done: done}, success: function(result) { } }); } } var getTasksUrl = 'http://localhost:9898/todo/tasks'; $.ajax({ url: getTasksUrl, type: "GET", success: renderResults, }); } );

    Debounce and Throttle in Javascript

    Throttle: the original function be called at most once per specified period.
    Example: while window resizing

    Debounce: the original function be called after the caller stops calling the decorated function after a specified period.
    Example: Validating contents of a text field after using has stopped typing.

    Throttling will delay executing a function. It will reduce the notifications of an event that fires multiple times.

    Debouncing will bunch a series of sequential calls to a function into a single call to that function. It ensures that one notification is made for an event that fires multiple times.

    If you have a function that gets called a lot – for example when a resize or mouse move event occurs, it can be called a lot of times. If you don’t want this behaviour, you can Throttle it so that the function is called at regular intervals. Debouncing will mean it is called at the end (or start) of a bunch of events.

    A far-fetched metaphor, but maybe could also help.

    You have a friend named Chatty who likes to talk with you via IM. Assuming when she talks she sends a new message every 5 seconds, while your IM application icon is bouncing up and down, you can take the…

    Naive approach: check every message as long as it arrives. When your app icon bounces, check. It’s not the most effective way, but you are always up-to-date.
    Throttle approach: you check once every 5 minutes (when there are new ones). When new message arrives, if you have checked anytime in the last 5 minutes, ignore it. You save your time with this approach, while still in the loop.
    Debounce approach: you know Chatty, she breaks down a whole story into pieces, sends them in one message after another. You wait until Chatty finishes the whole story: if she stops sending messages for 5 minutes, you would assume she has finished, now you check all.