es6 code broken in es5

Question

I have been trying to translate my code from es6 to es5 because of some framework restrictions at my work... Although I have been quite struggling to locate what the problem is. For some reason the code does not work quite the same, and there is no errors either ...

Can someone tell me If I have translated properly ?

This is the ES6 code :

function filterFunction(items, filters, stringFields = ['Title', 'Description'], angular = false) {
    // Filter by the keys of the filters parameter
    const filterKeys = Object.keys(filters);

    // Set up a mutable filtered object with items
    let filtered;

    // Angular doesn't like deep clones... *sigh*
    if (angular) {
        filtered = items;
    } else {
        filtered = _.cloneDeep(items);
    }

    // For each key in the supplied filters
    for (let key of filterKeys) {
        if (key !== 'TextInput') {
            filtered = filtered.filter(item => {

                // Make sure we have something to filter by...
                if (filters[key].length !== 0) {
                    return _.intersection(filters[key], item[key]).length >= 1;
                }

                return true;
            });
        }

        // If we're at TextInput, handle things differently
        else if (key === 'TextInput') {
            filtered = filtered.filter(item => {
                let searchString = "";

                // For each field specified in the strings array, build a string to search through
                for (let field of stringFields) {
                    // Handle arrays differently
                    if (!Array.isArray(item[field])) {
                        searchString += `${item[field]} `.toLowerCase();
                    } else {
                        searchString += item[field].join(' ').toLowerCase();
                    }
                }

                // Return the item if the string matches our input
                return searchString.indexOf(filters[key].toLowerCase()) !== -1;
            });
        }
    }
    return filtered;
}

And this is the code I translated that partially 99% work ..

function filterFunction(items, filters, stringFields, angular) {
    // Filter by the keys of the filters parameter
    var filterKeys = Object.keys(filters);

    // Set up a mutable filtered object with items
    var filtered;

    // Angular doesn't like deep clones... *sigh*
    if (angular) {
        filtered = items;
    } else {
        filtered = _.cloneDeep(items);
    }

    // For each key in the supplied filters
    for (var key = 0 ;  key < filterKeys.length ; key ++) {

        if (filterKeys[key] !== 'TextInput') {
            filtered = filtered.filter( function(item) {

                // Make sure we have something to filter by...
                if (filters[filterKeys[key]].length !== 0) {
                    return _.intersection(filters[filterKeys[key]], item[filterKeys[key]]).length >= 1;
                }

                return true;
            });
        }

        // If we're at TextInput, handle things differently
        else if (filterKeys[key] === 'TextInput') {
            filtered = filtered.filter(function(item) {
                var searchString = "";

                // For each field specified in the strings array, build a string to search through
                for (var field = 0; field < stringFields.length; field ++) {
                    // Handle arrays differently
                    console.log(field);
                    if (!Array.isArray(item[stringFields[field]])) {
                        searchString += item[stringFields[field]] + ' '.toLowerCase();
                    } else {
                        searchString += item[stringFields[field]].join(' ').toLowerCase();
                    }
                }

                // Return the item if the string matches our input
                return searchString.indexOf(filters[filterKeys[key]].toLowerCase()) !== -1;
            });
        }
    }
    return filtered;
}

Answer 1

Here is a translated code from babeljs itself, as commented above.

'use strict';

function filterFunction(items, filters) {
    var stringFields = arguments.length <= 2 || arguments[2] === undefined ? ['Title', 'Description'] : arguments[2];
    var angular = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];

    // Filter by the keys of the filters parameter
    var filterKeys = Object.keys(filters);

    // Set up a mutable filtered object with items
    var filtered = void 0;

    // Angular doesn't like deep clones... *sigh*
    if (angular) {
        filtered = items;
    } else {
        filtered = _.cloneDeep(items);
    }

    // For each key in the supplied filters
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
        var _loop = function _loop() {
            var key = _step.value;

            if (key !== 'TextInput') {
                filtered = filtered.filter(function (item) {

                    // Make sure we have something to filter by...
                    if (filters[key].length !== 0) {
                        return _.intersection(filters[key], item[key]).length >= 1;
                    }

                    return true;
                });
            }

            // If we're at TextInput, handle things differently
            else if (key === 'TextInput') {
                    filtered = filtered.filter(function (item) {
                        var searchString = "";

                        // For each field specified in the strings array, build a string to search through
                        var _iteratorNormalCompletion2 = true;
                        var _didIteratorError2 = false;
                        var _iteratorError2 = undefined;

                        try {
                            for (var _iterator2 = stringFields[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                                var field = _step2.value;

                                // Handle arrays differently
                                if (!Array.isArray(item[field])) {
                                    searchString += (item[field] + ' ').toLowerCase();
                                } else {
                                    searchString += item[field].join(' ').toLowerCase();
                                }
                            }

                            // Return the item if the string matches our input
                        } catch (err) {
                            _didIteratorError2 = true;
                            _iteratorError2 = err;
                        } finally {
                            try {
                                if (!_iteratorNormalCompletion2 && _iterator2.return) {
                                    _iterator2.return();
                                }
                            } finally {
                                if (_didIteratorError2) {
                                    throw _iteratorError2;
                                }
                            }
                        }

                        return searchString.indexOf(filters[key].toLowerCase()) !== -1;
                    });
                }
        };

        for (var _iterator = filterKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            _loop();
        }
    } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError;
            }
        }
    }

    return filtered;
}

p.s. Or there is a better way to use babeljs directly without manually converting it.

Answer 2

These two lines

searchString += `${item[field]} `.toLowerCase();
searchString += item[stringFields[field]] + ' '.toLowerCase();

are not equivalent indeed. To apply the toLowerCase method on all parts of the string, you'll need to wrap the ES5 concatenation in parenthesis:

searchString += (item[stringFields[field]] + ' ').toLowerCase();

or, as blanks cannot be lowercased anyway, just use

searchString += item[stringFields[field]].toLowerCase() + ' ';