DEV Community: Sergei

JavaScript ES6 one-liners: merge two sorted lists

Sergei — Thu, 17 Oct 2019 07:37:17 +0000

One of the steps in the merge-sort algorithm is merging two sorted lists together. In the spirit of doing everything on a single line (see my other posts), here is an admittedly hokey one-liner for merging two lists together (it creates a new merged list and clobbers the second of the two original sorted lists):

const orderedList1 = [1,3,5,7,9];
const orderedList2 = [0,2,5,8,11];

console.log([...orderedList1.reduce((a, e) => 
  [...orderedList2.some(r => 
    e > r? a.push(orderedList2.shift()): false)?a:a, e], []), 
  ...orderedList2]);
// [ 0, 1, 2, 3, 5, 5, 7, 8, 9, 11 ]

A bit of an explanation for this monstrosity:

The outer "reduce" starts with an empty list, goes through each element of the first list, extracts all the elements of the second list that are ahead of the current element of the first list and inserts them into the merged list, and then inserts the current element. Finally, the remainder of the second list, if any, is appended at the end of the merged list. The fake ternary operator smuggles in the "some" call inside the spread operator collecting the merged list in progress. Not sure if this can be done more neatly.

JavaScript ES6 one-liners: rotate an array

Sergei — Wed, 16 Oct 2019 06:50:38 +0000

const arr = [1,2,3,4,5];
const shift = 2;

// rotate left by n < array length:
console.log(`rotated: ${[...arr.slice(shift), ...arr.slice(0,shift)]}`);
// rotated: 3,4,5,1,2

Removing duplicates from a string in one planet-size JavaScript statement

Sergei — Sun, 22 Sep 2019 23:32:04 +0000

JavaScript array functions are one feature borrowed from functional programming that are relatively easy to wrap your head around. I wrote before about doing FizzBuzz in one planet-size JavaScript statement, and this post is about solving another basic coding interview question in one statement: removing duplicates from a string.

A standard approach to removing duplicates is to create a set of seen characters as we go through the string and only retain those that have not been seen. But that's not the only way to do it. Note that we can easily sort an array, so all the duplicates are bunched together, and then reduce repeated sequences to the first element only. Note the word reduce, because that's the array function we will use to do it!

It may seem expensive and wasteful to use sort() to accomplish what we need, but remember that comparison sorting is O(n log(n)), not far off O(n) that is the lowest order possible for string operations.

So, here is what we intend to do:

sort the given string so that the duplicates are all together
replace all substrings of repeated characters with the character that is repeated
restore the original order.

We can do all of those in a single JavaScript statement, though it gets a bit long. Here is an annotated example that you can copy and paste into the debug console:

'4366447654434567876'.split('')             // string to array
    .map((e,i)=>({val:e,pos:i}))            // remember the original position of each character
    .sort((a,b)=>a.val.localeCompare(b.val))// sort by value
    .reduce((acc,e)=>acc.length == 0 
        || acc[acc.length-1].val!=e.val?    // keep if not a duplicate 
        acc.concat([e]):acc, 
        [])                                 // empty array as a seed        
    .sort((a,b)=>a.pos-b.pos)               // restore the original order
    .map(e=>e.val)                          // select original values
    .join('')                               // back to string!
;

And the answer is, as expected

"436758"

Most of the above should be self-explanatory, but it is worth explaining what we did in the reduce() function:

start with an empty accumulator array []
insert the first element unconditionally (hence the check for acc.length == 0)
for each subsequent element, if it is not a duplicate, add it to the accumulator array
otherwise leave the accumulator unchanged.

Now, this is definitely more wasteful than using an intermediate set of seen characters, so don't offer it during a coding interview as your first choice! But it is neat to know that we can do it all in one (veeeery long) line. Or, if you are an interviewer who is bored out of their mind with asking the same questions over and over, you might want to mix it up by challenging the poor interviewee to answer a question like that in one line.

Another note. It is not very hard to do the "set of seen" algorithm as a one-liner as well, can you do it?

Fun with Array.reduce(): get a nested object by name

Sergei — Fri, 20 Sep 2019 07:06:46 +0000

Say you have an object in the global scope such as

var level0 = {level1:{level2:{level3:'holy grail'}}};

that you want to access the last level of, and you are given its name as a string:

var nestedName = 'level0.level1.level2.level3';

There are, of course, many ways to get the value of the level3, and one way is to use Array.reduce():


var getNestedValueByName = name=>name.split('.').reduce((acc, next)=>acc[next], window);

console.log(getNestedValueByName(nestedName));
// holy grail

Also works for arrays, only have to use indices instead of names:

var a = [['first', 'second'],['third', 'fourth']];

console.log(getNestedValueByName('a.1.0'));
// third

FizzBuzz in one planet-size JavaScript statement

Sergei — Wed, 18 Sep 2019 02:28:25 +0000

JavaScript has many tempting features and it is easy to get carried away. And so I have. Here is a FizzBuzz one-liner that uses a whole whack of ES5 and ES6 features:

Array.from()
Array-like objects
Array.assign()
map
forEach
ternary operator
truthy and falsy values
IIFE
and, of course, fat arrow functions

(n=>Array.from({length:n}, (_,i)=>i+1)
.map(e=>({text:e+' ', value: e}))
.map(e=> e.value%3? e: Object.assign(e, {text:e.text+'Fizz'}))
.map(e=> e.value%5? e: {value:e.value, text:e.text+'Buzz'})
.forEach(e=>console.log(e.text)))(100)

Compare this to a purely procedural C-like version:

for (var i = 1; i <= 100; i++) 
  console.log(i+' '+(i%15==0?"FizzBuzz":i%3==0?"Fizz":i%5==0?"Buzz":""));

It takes way less resources and probably runs ten times faster.

The lesson? Sometimes it's best to avoid the frills and stick to the basics.