Strange results returned from String.slice() method

Question

My case is to separate a string into array of strings and then convert every three characters into a string. ( e.g. "xxxyyy" -> ['xxx','yyy'] )

const translate = function (RNA) {
    var arrRna = Array.from(RNA);
    var arr = [];
    for (var key in arrRna) {
        if ((key % 3) == 0) {
            var temp = RNA.slice( key,  (key+3));
            arr.push(temp);
        }

    }
    return arr;
}

console.log(translate('xxxyyyzzz'));

Expected result : ['xxx','yyy','zzz']

But the result that I want is : [ 'xxx', 'yyyzzz', 'zzz' ]

Also, I noticed that the slice method works as expected in first iteration but after that, the weird result --> 'yyyzzz'. Why??

You shouldn't use for...in loops on arrays, that's generally unreliable given the (unfortunately) common practice of adding enumerable methods to built-in types (and the fact that the keys are strings instead of numbers as pointed out in the answer below). — Patrick Roberts
– Patrick Roberts, Commented Dec 25, 2018 at 19:02

CertainPerformance · Accepted Answer · 2018-12-25 19:20:13Z

6

The issue is that for..in loops over property names, and property names are always strings. So, for example, when key is 3:

var temp = RNA.slice( key,  (key+3));

evaluates to

var temp = RNA.slice('3',  '33');

because + concatenates when strings are involved. You might cast to Number first:

const translate = function(RNA) {
  var arrRna = Array.from(RNA);
  var arr = [];
  for (var key in arrRna) {
    key = Number(key);
    if ((key % 3) == 0) {
      var temp = RNA.slice(key, (key + 3));
      arr.push(temp);
    }

  }
  return arr;
}

console.log(translate('xxxyyyzzz'));

Or, you might chunk the array using a plain for loop, whose logic might be easier to understand at a glance:

const translate = function(RNA) {
  const output = [];
  for (let i = 0; i < RNA.length; i += 3) {
    output.push(RNA.slice(i, i + 3));
  }
  return output;
}

console.log(translate('xxxyyyzzz'));

Another option would be to use a global regular expression .match:

const translate = RNA => RNA.match(/.{1,3}/g);
console.log(translate('xxxyyyzzz'));

edited Dec 25, 2018 at 19:20

answered Dec 25, 2018 at 19:03

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

Sumer Over a year ago

you are god like, the regex solution is interesting

Matthew Ludwig · Accepted Answer · 2018-12-25 19:03:23Z

5

Tada! Rather than converting the string to an array and going through each character waiting for the index to be a multiple of 3, simply count by 3s.

function translate(rna) {
  let arr = [];
  
  for (let i = 0; i < rna.length; i += 3) {
    arr.push(rna.slice(i, i + 3));
  }
  
  return arr;
}

console.log(translate('xxxydyyzzzd'));

answered Dec 25, 2018 at 19:03

Matthew Ludwig

7556 silver badges25 bronze badges

Comments

charlietfl · Accepted Answer · 2018-12-25 19:15:44Z

1

Approach using Array.from() with mapping callback to do whole process

const translate = (RNA) => {
  return Array.from({length: Math.ceil(RNA.length/3)}, (_,i)=> RNA.slice(i*3, i*3+3));       
}

console.log(translate('xxxyyyzzz'));

answered Dec 25, 2018 at 19:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Rishika Mohanta · Accepted Answer · 2018-12-25 19:12:25Z

Hey so I figured out the problem. When you add 3 to the key, it concatenantes the result to give you 0, 03, 3, 33, 6, 63 as key and key+3 giving you the result you see.

const translate = function (RNA) {
    var arrRna = Array.from(RNA);
    var arr = [];
    for (var key in arrRna) {
        if ((key % 3) == 0) {
            console.log(key)
            console.log(key+3)
            var temp = RNA.slice( key,  (key+3));
            arr.push(temp);
        }

    }
    return arr;
}

console.log(translate('xxxyyyzzz'));

The solution is simple. Add a '+' before key. This type casts it to numeric giving you the expected result.

const translate = function (RNA) {
    var arrRna = Array.from(RNA);
    var arr = [];
    for (var key in arrRna) {
        if ((key % 3) == 0) {
            var temp = RNA.slice( +key,  (+key+3));
            arr.push(temp);
        }

    }
    return arr;
}

console.log(translate('xxxyyyzzz'));

Nina Scholz · Accepted Answer · 2018-12-25 19:15:20Z

0

Beside the adding a number to a string, which keys of objects are, you could take a generator for an arbitrary slicing of strings.

function* translate (string, size) {
    var i = 0;
    while (i < string.length) yield string.slice(i, i += size);
}

console.log([...translate('xxxyyyzzz', 3)]);

answered Dec 25, 2018 at 19:15

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Sumer · Accepted Answer · 2018-12-25 20:55:51Z

0

Sharing one more solution independent of no of characters(3)

let spltStr = myStr =>
  [...myStr.toLowerCase()].reduce((acc, char) => {
    let last = acc[acc.length - 1];
    !last || last[last.length - 1] !== char
      ? acc.push(char)
      : (acc[acc.length - 1] += char);
    return acc;
  }, []);

answered Dec 25, 2018 at 20:55

Sumer

2,9251 gold badge26 silver badges25 bronze badges

Collectives™ on Stack Overflow

Strange results returned from String.slice() method

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related