DEV Community

Cover image for [javascript] Array Partitioning by Length
D\sTro
D\sTro

Posted on • Updated on

 

[javascript] Array Partitioning by Length

Post #8

i am starting a new initiative today as "Building Custom Algorithm in Javascript without using inbuilt method"

i hope you guy will find this interesting. i will be writing a Polyfill/Vanilla of one javascript method everyday. starting today with a custom one

Algorithm : Partitioning array elements by range!
Workaround: [1, 2, 3, 4, 5, 6] should produce ["12", "34", "56"] or ["123", "456"] without using map() reduce() filter()

this is my implementation:
Note: always use arrow method. its not just a trend but it protects you from getting into severe undetectable bugs sometime.

Method 1 : using splice()

 let groupInString = (array, length)=>
    {   
        let newArr = []; init = 0;
        for(let i=0; i <= parseInt(array.length/length); i++){
            newArr.push(
                array.splice(init, length, null).join("")              
            );
            init++;
        }
        return newArr;
    }

// Testing:
groupInString([1, 2, 3, 4, 5, 6], 2); //["12", "34", "56"]
groupInString([1, 2, 3, 4, 5, 6], 3); //["123","456"]

Enter fullscreen mode Exit fullscreen mode

you can also try it on code pen here: Link

Method 2: Replicating same using slice()

let groupInString = (array, length)=>
    {   
        let newArr = []; init = 0;
        let lth = length;
        for(let i=0; i < parseInt(array.length/length); i++){
            newArr.push(
                array.slice(init, lth).join("")              
            );
            init = lth; lth += length;
        }
        return newArr;
    }
Enter fullscreen mode Exit fullscreen mode

thanks for catching the point @avalander

i will keep posting new scripts everyday and in case you have some algo you want it scripted(vanilla) then you can just comment it and i will post!

thanks for reading!

Top comments (4)

Collapse
 
avalander profile image
Avalander

Are you aware that your function is both returning a new instance of an array and mutating the array provided as an input? That's bound to be confusing to anyone using that function, maybe it should just do one or the other.

Collapse
 
slimdestro profile image
D\sTro

yeah you're right. its returning new array to keep things clear. like on demand you can say which means its total new instead tempering oute properties. this one you asked right :

array.forEach(function(x, y) {
// partition
}, array);

// this would not yield new instance but i didnt infroce use of map/reduce/filter etc. its like a plain pure javascript touch

Collapse
 
avalander profile image
Avalander

I don't really understand how forEach is supposed to help here, the thing is that you are using Array.prototype.splice, which mutates the original array.

If you run this code:

const a = [ 1, 2, 3, 4 ]
groupInString(a, 2)
console.log(a)
Enter fullscreen mode Exit fullscreen mode

You'll see that your function, besides returning the array [ '12', '34' ] mutated a into [ null, null ] as a side effect, which is inconvenient if somebody intended to use that array in several operations.

It is a lot better if functions return new values without modifying the input values. Without making big changes, you can fix your function not to modify the input array by using slice instead of splice.

const groupInString = (array, length) => {   
    const newArr = []
    for(let i = 0; i < array.length; i+= length) {
        newArr.push(
            array.slice(i, i + length).join('')              
        )
    }
    return newArr
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
slimdestro profile image
D\sTro

i got your point now. i have added both thru splice() as well as slice(). thanks for pointing out this friction. appreciate it

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.