Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

JavaScript Array Contains

Javascript objects are really nice, but sometimes they are missing some useful little functions/methods. The example above is with Arrays. It's really nice to know whether or not an item is contained within your array. Well you can write a function that takes the array and the item you're checking for, but it's much cleaner to add the contains( item ) method to the Array object.

Extending JavaScript Arrays

/**
 * Array.prototype.[method name] allows you to define/overwrite an objects method
 * needle is the item you are searching for
 * this is a special variable that refers to "this" instance of an Array.
 * returns true if needle is in the array, and false otherwise
 */
Array.prototype.contains = function ( needle ) {
   for (i in this) {
       if (this[i] == needle) return true;
   }
   return false;
}

Usage

// Now you can do things like:
var x = Array();
if (x.contains('foo')) {
   // do something special
}

Comments

  1. V1
    Permalink to comment#

    I suggest making it more strict,

    if (this[i] == needle) return true;

    to:

    if (this[i] === needle) return true;

    for example, 1 is the same as true. Unless you do ===

  2. Alex
    Permalink to comment#

    Thank you V1, you’re absolutely right. That should definitely be a ===.

  3. James
    Permalink to comment#

    “i” should be declared locally (by using a var statement). Currently you’re setting it as a global variable. Also, you shouldn’t be using the “for(i in something)” construct for arrays. Instead use a traditional for or while loop; they’re much quicker.

  4. Jhuni
    Permalink to comment#

    Here is how I would write it, coming in at a mere 83 kb minified:

    var contains = function( arr, value ) {
    
    	var i = 0, len = arr.length;
    
    	while( i < len && arr[i] != value ) {
    
    		i++;
    
    	}
    
    	return i != len;
    
    };
  5. einstein
    Permalink to comment#

    Thank you, It really worked.

  6. David Chambers
    Permalink to comment#

    Nicer still would be to write it like this:

    function contains(arr, value) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === value) return true;
        }
        return false;
    }
  7. John Doe
    Permalink to comment#

    /**
    * is_array
    *
    * @param mixed input
    * @return bol
    */

    function is_array(obj) {
    if (obj.constructor.toString().indexOf(‘Array’) == -1) {
    return false;
    }
    return true;
    }

    /**
    * contains
    *
    * @param mixed input
    * @param string value
    * @return bol
    */

    function contains(input, value) {
    if (!is_array(input)) {
    if (input.indexOf(value) != -1) {
    return true;
    }
    }
    else {
    var i = input.length;
    while (i–) {
    if (input[i] === value) {
    return true;
    }
    }
    }
    return false;
    }

  8. watermelonbunny

    I rather to follow the lines of the String’s indexOf method.
    this functionality already exists in most browsers, so with a simple feature detection you can add it to non supporting browsers:

    if(!Array.indexOf){
     Array.prototype.indexOf = function(obj){
      for(var i=0;i<this.length;i++){
       if(this[i]==obj)
        return i;
      }
      return -1;
     }
    }
    

    obviously this does not return a boolean (if…!=-1) but you may want to know the first location of an object in an array so this comes in more handy, if you’re already there, you know..
    You can modify it to go backwards on the array, on large arrays going backwards is usually quicker (for some reason), but then you’ll get the last place an object will appear in the array

    var i = this.length;
    while(i--){
    ...
    }
    
  9. black
    Permalink to comment#

    why not using the native indexOf()-method?

    function contains(arr, v) {
      return arr.indexOf(v) > -1;
    }
    
  10. roxxypoxxy
    Permalink to comment#

    +1 for @black.
    arr.indexOf(v) > -1
    looks short and sweet.

  11. Tim
    Permalink to comment#

    indexOf() is IE9+, boys.

    • MarkG

      The thing is, anyone using anything that does not support HTML5 is an out of date browser (and yes I am aware that Mozilla are dragging its knuckles on this one) and in real terms, while it is nice to support these old browsers, the actual usage of them is declining to levels where support in terms of cost, benefits, time and effort in maintaining that code outweighs the perceived benefits for a very small browser user group.

      I would settle for this as a method covering most bases, simply stringify then test.

      Array.prototype.inArray = function( needle ){
          return Array(this).join(",").indexOf(needle) >-1;
      }
      

      … and likely drawing criticism with the usual, yes it has no checks, you can’t nanny people, if people misuse a function or code, thats their look out…

      If you want to make it more robust, try going along this path… :D

      Array.prototype.inArray = function( needle ){
          try{
              return Array(this).join(",").indexOf(needle) >-1;
          }catch(e){
              // Oooo, an error!
              if( window.console) console.log("Error : "+e)
          }
      }
      

      Adding a try & catch means that you will control errors, therefore some level of checking is happening although what it does in control is up to you!

      Use,

      var x = haystack.inArray(needle,3);
      var x = ["Cheese","Onion","Pickle","Ham"].inArray("Bread");
      

      As you would expect, false is the result, “Bread” does not appear in the list, therefore the logical response is false.

  12. Cristian
    Permalink to comment#

    So usefull!! really thanks bro! nice tip

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```