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. 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. 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. 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.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".