Last Updated: February 25, 2016
·
1.41K
· davidcollingwood

Do you even code? [JavaScript Arrays]

Update: @sbruchmann informed me that some of these functions are actually already built-in to JavaScript, unless of course you want to support IE8. Then I would recommend using modernizr as a work around.


I would like to take this opportunity to share some incredibly useful functions I have created to enhance my JavaScript Arrays. I have a feeling that there are frameworks out there that may accomplish similar results to what I'm about to show you, but I reckon that this is something you would want to include in any JavaScript project you start, no matter how small or large.

The point of all of this is to make JavaScript more semantic and Object-Oriented, because everybody loves a good OOPL (Object-Oriented Programming Language). And for those of you who don't, God still loves you.

You can check out the code here: http://github.com/davidcollingwood/do-you-even-code/

Example Array

var example = new Array(1, 2, 3, 4, 5);

Get the first value of an Array

// Before
var result = example[0];

// After
var result = example.first();

Get the last value of an Array

// Before
var result = example[example.length - 1];

// After
var result = example.last();

Empty an Array

// Before
example.length = 0;

// After
example.empty();

Looping through an Array

// Before
var i, len;
for (i = 0, len = example.length; i < len; i++) {
    document.write(example[i]);
}

// After
example.loop(function(val) {
    document.write(val);
});

Filtering an Array

// Before
var i, len, result = new Array();
for (i = 0, len = example.length; i < len; i++) {
    if (example[i] > 3)
        result.push(example[i]);
}

// After
var result = example.find(function(val) {
    return val > 3;
});

Extending an Array

var example2 = new Array(6, 7, 8, 9, 10);

// Before
var i, len;
for (i = 0, len = example2.length; i < len; i++) {
    example.push(example2[i]);
}

// After
example.extend(example2);

Checking an Array

// Before
var i, len, result = false;
for (i = 0, len = example.length; i < len; i++) {
    if (example[i] == 3) {
        result = true;
        break;
    }
}

// After
var result = example.has(function(val) {
    return val == 3;
});

// Before
var i, len, result = true;
for (i = 0, len = example.length; i < len; i++) {
    if (example[i] == 3) {
        result = false;
        break;
    }
}

// After
var result = example.not(function(val) {
    return val == 3;
});

Putting it all together!

var example2 = new Array(6, 7, 8, 9, 10);

// Before
var i, len;
for (i = 0, len = example2.length; i < len; i++) {
    example.push(example2[i]);
}
var filteredArray = new Array();
for (i = 0, len = example.length; i < len; i++) {
    if (example[i] % 2)
        filteredArray.push(example[i]);
}
var result = false;
for (i = 0, len = filteredArray.length; i < len; i++) {
    if (filteredArray[i] == 10) {
        result = true;
        break;
    }
}

// After
var result = example.extend(example2).find(function(val) {
    return val % 2;
}).has(function(val) {
    return val == 10;
});

3 Responses
Add your response

Well done. But ya, that's in just about every js library. Although handy if working with vanilla javascript.

over 1 year ago ·

So, why using functions instead of built in syntax? Why using a library for native methods? (loop = Array#forEach, find = Array#filter, etc.)

over 1 year ago ·

Wow, I didn't realise that some of these functions were built-in! I just had a quick look and support seems really good except IE 8, but using modernizr would make it pretty easy to work around that.

over 1 year ago ·