-2

We have list of ids i.e.1,2,3.

There is a function which accepts id and returns if passed id is in this list or not:

function isIdInList(id) {
    return [1,2,3].includes(id); 
}

OR 

function isIdInList(id) {
    return [1,2,3].indexOf(id) > -1;
}

i.e. isIdInList(1) returns true. isIdInList(5) returns false.

What is the best solution to this, 1 of above two or any other? (Considering the list is hardcoded & The solution should be compatible for all browsers.)

Sahil Sharma
  • 3,847
  • 6
  • 48
  • 98

1 Answers1

2

Array.prototype.includes comes from ES2016 specification. It is not supported very well in all web browsers (especially if they are not up-to-date...), so you should probably use the solution with indexOf for full compatibility.

Of course, if you compile your code with Babel or Traceur, you can use includes but it would be wise to add a polyfill like the one suggested in MDN documentation:

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        // c. Increase k by 1. 
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}
Badacadabra
  • 8,043
  • 7
  • 28
  • 49
  • 1
    (1) It's supported very well in browsers other than IE. (2) Merely transpiling will not help you, unless you include a polyfill, which you could do without transpiling. –  Apr 20 '17 at 14:16
  • @torazaburo Hey! Thanks for this interesting comment. :) (1) This supposes that your web browser is up-to-date, which is never the case for everyone on the Web. (2) Transpiling is still part of the workflow for ES6 projects, but you are right, I am going to edit my answer a bit. – Badacadabra Apr 20 '17 at 14:37
  • 1
    I'm well acquainted with the browser support policies of many major software companies, the great majority of which support only the most recent 3-5 versions of browsers such as Chrome and FF. The reason is simply that they don't need to support anything further back than that. These browsers in general will update themselves as long as your computer is on. You actually have to go to great lengths to **stop** the automatic updates. –  Apr 20 '17 at 16:03