function adding space to array item

Question

I have a function to filter CSS classes for duplicates and empty spaces, but my function exports arrays with empty spaces anyway...

var classes = function (className, current) {
    var classNames = [className], uniques = {};
    if(current) classNames = classNames.concat(current.split(' '));
    return classNames.filter(function (className,i) {
        if(className == "") return;
        className = className.match(/\S+/)[0];
       if (!uniques[className]) return uniques[className] = className;
    });
};

When I run classes(' foo') I get [" foo"] with a empty space anyway, although console.log(' foo'.match(/\S+/)[0]; returns 'foo' with no space.

What am I missing?

Fiddle

What exactly are you trying to achieve? Please provide more context. — Ram
– Ram, Commented Jan 26, 2014 at 6:39
@BlackSheep, thanks for looking at this. I want to pass ' foo' into this function and get back a clean ['foo'] with no spaces. And I think I did everything correct but somewhere a empty space is being added and I can't find where... — Rikard
– Rikard, Commented Jan 26, 2014 at 6:42

mu is too short · Accepted Answer · 2014-01-26 06:52:32Z

4

You misunderstand how filter works. From the fine manual:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The return value from the callback tells filter which elements of classNames should be passed through, the return value is merely tested for truthiness. The return value of the callback isn't returned by filter, the original untouched values in classNames are. So the problem isn't that an extra space is being added, the problem is that nothing is removing the spaces.

If you want to test and modify at the same time then reduce will serve you better:

return classNames.reduce(function(a, className) {
    if(!className)
        return a;
    className = className.match(/\S+/)[0];
    if(!uniques[className]) {
        a.push(className);
        uniques[className] = className;
    }
    return a;
}, []);

Note all the return a; statements and the lack of return;s.

Demo: http://jsfiddle.net/ambiguous/bw3JS/

You could also use map to clean up the spaces and then filter to clean up the undefineds with something like this:

return classNames.map(function(className) {
    if(!className)
        return;
    className = className.match(/\S+/)[0];
    if(!uniques[className])
        return uniques[className] = className;
}).filter(function(className) {
    return typeof className !== 'undefined';
});

Demo: http://jsfiddle.net/ambiguous/8j5Bb/

edited Jan 26, 2014 at 6:52

answered Jan 26, 2014 at 6:43

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

3 Comments

Rikard Over a year ago

Aha... got the point... I'm changing the value of that iteration inside .filter() which is poinless. Good catch and thanks for a alternative solution!

Rikard Over a year ago

I supose .map() also be a solution here. (?)

mu is too short Over a year ago

You could use map but each return value from the map callback ends up in the final array. map would leave you with undefined values or empty strings or some other value that you'd need a separate filter pass to clean up: jsfiddle.net/ambiguous/8j5Bb

Collectives™ on Stack Overflow

function adding space to array item

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related