Advanced Array Methods

Array includes()

Check if array contains a value - simple and powerful!

Find videos you like?

Save to resource drawer for future reference!

What is Array includes()?

Think of includes() as asking "Is this in the list?"It returns true if the array contains the value,false if not. Super simple! And unlike indexOf(), it can properly detect NaN!

Why Use includes()?

Much cleaner than indexOf() !== -1! Returns a boolean, reads like English, and handles NaN correctly unlike indexOf.

🔍includes() vs indexOf() vs find()

Method	Returns	Use When
`includes()`	`true/false`	Just checking if value exists
`indexOf()`	`index or -1`	Need the position/index
`find()`	`element or undefined`	Need the actual element (objects)

✅

includes() Advantages

✅ Returns boolean (cleaner)
✅ Finds NaN correctly
✅ Reads like English
✅ No need to check -1

📍

indexOf() Advantages

✅ Returns position/index
✅ Can use for multiple operations
✅ Older browser support
✅ Can start from specific index

Syntax

arr.includes(searchElement, fromIndex?)

• searchElement: Value to search for

• fromIndex: Optional starting index (default: 0)

Example 1: Basic Usage & Comparison

See includes() in action vs other methods

javascript

code

DarkEditable

const fruits = ['apple', 'banana', 'orange', 'mango'];

// 1. Check if value exists
console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false

// Much cleaner than indexOf!
console.log(fruits.indexOf('banana') !== -1);  // true (old way)
console.log(fruits.includes('banana'));        // true (clean!)

// 2. Case-sensitive
console.log(fruits.includes('Apple'));   // false (different case)
console.log(fruits.includes('apple'));   // true

// 3. Works with different types
const mixed = [1, 'two', true, null, undefined];

console.log(mixed.includes(1));         // true
console.log(mixed.includes('two'));     // true
console.log(mixed.includes(true));      // true
console.log(mixed.includes(null));      // true
console.log(mixed.includes(undefined)); // true

// 4. The NaN advantage!
const numbers = [1, 2, NaN, 4];

console.log(numbers.indexOf(NaN));      // -1 (can't find NaN!)
console.log(numbers.includes(NaN));     // true (finds NaN!)

// 5. Starting from index
const arr = ['a', 'b', 'c', 'b', 'd'];

console.log(arr.includes('b'));      // true
console.log(arr.includes('b', 2));   // true (starts from index 2)
console.log(arr.includes('a', 1));   // false (starts from index 1, misses 'a')

// 6. Negative index (from end)
console.log(arr.includes('d', -1));  // true (last element)
console.log(arr.includes('c', -2));  // false (starts 2 from end)

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for includes()

javascript

code

DarkEditable

// 1. Validation - Check allowed values
function setTheme(theme) {
  const validThemes = ['light', 'dark', 'auto'];
  
  if (!validThemes.includes(theme)) {
    console.error('Invalid theme!');
    return;
  }
  
  console.log(`Theme set to: ${theme}`);
}

setTheme('dark');    // "Theme set to: dark"
setTheme('blue');    // "Invalid theme!"

// 2. Feature flags
const enabledFeatures = ['darkMode', 'notifications', 'analytics'];

function isFeatureEnabled(feature) {
  return enabledFeatures.includes(feature);
}

if (isFeatureEnabled('darkMode')) {
  console.log('Dark mode is enabled');
}

// 3. Filter based on whitelist
const allowedUsers = ['admin', 'user1', 'user2'];
const currentUser = 'user1';

if (allowedUsers.includes(currentUser)) {
  console.log('Access granted');
} else {
  console.log('Access denied');
}

// 4. Form validation
function validateEmail(email) {
  const bannedDomains = ['spam.com', 'fake.net', 'test.org'];
  const domain = email.split('@')[1];
  
  if (bannedDomains.includes(domain)) {
    return 'Email domain is not allowed';
  }
  
  return 'Email is valid';
}

console.log(validateEmail('user@gmail.com'));   // "Email is valid"
console.log(validateEmail('user@spam.com'));    // "Email domain is not allowed"

// 5. Check permissions
const userRoles = ['read', 'write', 'delete'];

function canDelete() {
  return userRoles.includes('delete');
}

function canWrite() {
  return userRoles.includes('write');
}

console.log(canDelete());  // true
console.log(canWrite());   // true

// 6. Filter array based on another array
const availableColors = ['red', 'blue', 'green'];
const selectedColors = ['red', 'yellow', 'blue'];

const validSelections = selectedColors.filter(color => 
  availableColors.includes(color)
);

console.log(validSelections);
// ['red', 'blue']  (filtered out 'yellow')

Console Output

Click "Run Code" to see output here...

💡Common Patterns

✅

Validation

if (!validOptions.includes(input)) return;

🔒

Access Control

if (allowedUsers.includes(user)) { /* grant access */ }

🎯

Filter by Whitelist

arr.filter(item => whitelist.includes(item))

🔍

Conditional Logic

if (['admin', 'moderator'].includes(role)) { /* ... */ }

Key Takeaways

✅

Boolean Return

Returns true/false - perfect for conditionals

🔍

NaN Support

Can find NaN unlike indexOf()

📖

Readable

Reads like English - very intuitive

🎯

Use Cases

Validation, filtering, access control, permissions

Previous Topic

Array fill

Filling arrays with static values.

Next Topic

Typed Arrays

Int8Array, Uint8Array, Float32Array for binary data.

Ask a Question

Have a question about Array includes? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.