Quiz: Convert into binary numbers, overlay arrays in JavaScript

Question

I have solved the following quiz in JavaScript, and attached the quiz and my solution below. I did not feel right solving the problem because I knew I was missing how to recall functions! Can anyone help me rewrite the code in a simpler way using the method of recalling functions? or any one of the simplest ways is welcome!

QUIZ :

Given three inputs : two arrays with the same length containing decimal numbers and the number of their lengths, convert the numbers in the two arrays into binary numbers, like so:

then, combine the two arrays by overlapping one over the other, making a new array having 1s from each array, (1 overlays 0), like so:

as the last step, convert this array into a format having #s-and spaces under condition of (# = 1, space = 0) at last, you should get this as output >

[ '#####', '# # #', '### #', '#  ##', '#####' ]

MY SOLUTION:

function solution(n, arr1, arr2) {
    var convArr1 = arr1.map(function(numten) {      
        return numten.toString(2);
    })
    var convArr2 = arr2.map(function(numten) {
        return numten.toString(2);
    })
    var newArr1 = convArr1.map(function(binNum) {
        if (binNum.length != n) {
            let zero = '0';
            for (let i = 1; i < n - binNum.length; i++) {
                zero = zero + 0;
            }
            binNum = zero + binNum;
            return binNum;
        } else {
            return binNum;
        }       
    })
    var newArr2 = convArr2.map(function(biNum) {
        if (biNum.length != n) {
            var zero = '0';
            for (let i = 1; i < n - biNum.length; i++) {
                zero = zero + '0';
            }
            biNum = zero + biNum;
            return biNum;
        } else {
            return biNum;
        }       
    })
    // console.log(newArr1, newArr2);
    var answer = ["", "", "", "", ""];
    var element = "";
    function compare(a, b) {
        for (var i = 0; i < a.length; i++) {
            if (a[i] === '1' || b[i] === '1') {
                answer[i] = answer[i] + '#';
            } else {
                answer[i] = answer[i] + ' ';
            }
        }
    }
    var compareArr = [];

    for (var i = 0; i < n; i++) {
        var numInArr1 = newArr1[i];
        var numInArr2 = newArr2[i];
        compare(numInArr1, numInArr2);
    }
    return answer;
}

console.log(solution(5, [9, 20, 28, 18, 11], [30, 1, 21, 17, 28]));

Eladian · Accepted Answer · 2017-09-17 06:57:48Z

1

Here is an easier solution to the problem :)

function solution(num, inputOne, inputTwo) {
  return Array(num).fill(0).map(function(un, index) {
    return (inputOne[index] | inputTwo[index]).toString(2).replace(/0/g, ' ').replace(/1/g, '#');
  });
}

console.log(solution(5, [9, 20, 28, 18, 11], [30, 1, 21, 17, 28]));

edited Sep 17, 2017 at 6:57

answered Sep 17, 2017 at 5:58

Eladian

95812 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Roberts Over a year ago

I upvoted your solution for the simplicity, but I encourage you to make function solution() {...} completely enclosed, meaning you should do the string replace inside the function.

jpuntd · Accepted Answer · 2017-09-17 06:50:06Z

What you call '1 overlays 0' is a binary operator. The | operator (pronounce 'OR') takes the binary representations of 2 decimal numbers and then compares each binary digit (= each bit) to produce a 1 if one of the bits or both of them is equal to 1.

You were asking about a way to 'recall' or reuse the function that was used to convert arr1 to also convert arr2. But both conversions aren't really needed. To use the | operator no conversion of the decimal numbers is necessary because that's what the computer internally uses anyway.

You can try this...

function solution (n, arr1, arr2) {

    result = arr1.map(function (element, index) {
      // take the element and the relative element of the other array 
      // and use the binary OR operator
      return element | arr2[index];
    }).map(function (element) {
      // make a string of the required number of spaces ...
      // and add our binary pattern of replacements for 1's and 0's
      binary = " ".repeat(n) + element.toString(2).replace(/1/g,'#').replace(/0/g,' ');

      // truncate to return only the last n bits
      return binary.slice(-n);

    });
    return result;
}

console.log(solution(5, [9, 20, 28, 18, 11], [30, 1, 21, 17, 28]));

A lot happens to the same arr1 array. That's why I wrote the .mapcalls one right after the other. This is called method chaining. The first map method takes arr1 and then produces a new array. Of course that array also has a .map method we can call. The first map is used to combine arr1 and arr2. The second map call is used to convert the result into an array with our patterns of # and SPACE.

In the first map call our callback function takes an extra parameter:

arr1.map(function (element, index) {
      // take the element and the relative element of the other array 
      // and use the binary OR operator
      return element | arr2[index];
})

We need the index number of each element that is mapped over because we need the same element inside the arr2 array.

Adriano · Accepted Answer · 2017-09-17 05:34:44Z

0

In JavaScript, we can use bit operations on decimal numbers, then parse them back into binary via the .toString(2) function:

function solution(n, arr1, arr2) {
    return Array.from(arr1.keys())
        .map(i => {
            const num = arr1[i] | arr2[i];
            const padded = "0".repeat(n) + num.toString(2);
            const binary = padded.substr(padded.length - n);
            return binary.split("")
                .map(c => c === "0" ? " " : "#")
                .join("");
        });
}
console.log(solution(5, [9, 20, 28, 18, 11], [30, 1, 21, 17, 28]));
// Out:
// ["#####", "# # #", "### #", "#  ##", "#####"]

answered Sep 17, 2017 at 5:34

Adriano

1,7231 gold badge25 silver badges28 bronze badges

Collectives™ on Stack Overflow

Quiz: Convert into binary numbers, overlay arrays in JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related