Find and some methods in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to find the first number greater than 10 in the array.

Javascript

const numbers = [4, 9, 15, 7];
const result = numbers.[1](num => num > 10);

Drag options to blanks, or click blank then click option'

Afilter

Bfind

Cmap

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter returns an array, not a single element.

Using map transforms all elements, not find one.

The find method returns the first element that satisfies the condition.

2fill in blank

medium

Complete the code to check if some numbers in the array are even.

Javascript

const numbers = [1, 3, 5, 6];
const hasEven = numbers.[1](num => num % 2 === 0);

Drag options to blanks, or click blank then click option'

Aevery

Bfind

Cfilter

Dsome

Attempts:

3 left

💡 Hint

Common Mistakes

Using every checks all elements, not some.

Using find returns the element, not a boolean.

The some method returns true if at least one element meets the condition.

3fill in blank

hard

Fix the error in the code to find the first string longer than 3 characters.

Javascript

const words = ['cat', 'dog', 'bird'];
const longWord = words.[1](word => word.length > 3);

Drag options to blanks, or click blank then click option'

Afind

Bsome

Cfilter

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using some returns a boolean, not the element.

Using filter returns an array of all matches.

find returns the first element matching the condition, which is what we want here.

4fill in blank

hard

Fill both blanks to create an array of words longer than 4 characters using filter and check if some words start with 'a'.

Javascript

const words = ['apple', 'bat', 'anchor', 'cat'];
const longWords = words.[1](word => word.length > 4);
const hasAStart = words.[2](word => word.startsWith('a'));

Drag options to blanks, or click blank then click option'

Afilter

Bfind

Csome

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using find instead of filter returns only one word.

Using map does not filter or check conditions.

filter creates a new array with words longer than 4 characters.
some checks if any word starts with 'a'.

5fill in blank

hard

Fill all three blanks to find the first number divisible by 3, check if some numbers are negative, and filter numbers greater than 5.

Javascript

const nums = [2, -3, 6, 8];
const firstDiv3 = nums.[1](num => num % 3 === 0);
const hasNegative = nums.[2](num => num < 0);
const greaterThan5 = nums.[3](num => num > 5);

Drag options to blanks, or click blank then click option'

Afilter

Bsome

Cfind

Devery

Attempts:

3 left

💡 Hint

Common Mistakes

Using every instead of some for checking negatives.

Using map instead of filter for filtering numbers.

find returns the first number divisible by 3.
some checks if any number is negative.
filter creates an array of numbers greater than 5.

Practice

1. What does the find method do in JavaScript arrays?

easy

A. Returns the first element that matches a condition or undefined if none

B. Returns true if all elements match a condition

C. Returns the index of the last matching element

D. Returns a new array with elements that match a condition

Solution

1. Step 1: Understand the purpose of find

   The find method searches an array and returns the first element that satisfies the given condition.

2. Step 2: Compare with other methods

   Unlike filter which returns all matching elements, find returns only the first or undefined if none found.

3. Final Answer:

   Returns the first element that matches a condition or undefined if none -> Option A

4. Quick Check:

   find returns first match [OK]

Hint: Remember: find returns one item, some returns true/false [OK]

Common Mistakes:

• Confusing find with filter
• Thinking find returns a boolean
• Assuming find returns all matches

2. Which of the following is the correct syntax to use some on an array arr to check if any element is greater than 10?

easy

A. arr.some(x > 10);

B. arr.some(x => x > 10);

C. arr.some(x => {x > 10});

D. arr.some(x => x > 10) {};

Solution

1. Step 1: Identify correct arrow function syntax

   The some method requires a function that returns true or false. The arrow function x => x > 10 correctly returns a boolean.

2. Step 2: Check syntax errors in options

   arr.some(x > 10); misses the arrow function syntax. arr.some(x => {x > 10}); uses braces but no return statement, so returns undefined. arr.some(x => x > 10) {}; has extra braces after the method call, which is invalid.

3. Final Answer:

   arr.some(x => x > 10); -> Option B

4. Quick Check:

   Arrow function with return expression [OK]

Hint: Use arrow function with expression for some() [OK]

Common Mistakes:

• Missing arrow in arrow function
• Using braces without return in arrow function
• Adding extra braces after method call

3. What is the output of this code?

const numbers = [3, 7, 12, 5];
const result = numbers.find(n => n > 10);
console.log(result);

medium

A. 7

B. undefined

C. 3

D. 12

Solution

1. Step 1: Understand the find condition

   The condition n > 10 looks for the first number greater than 10 in the array.

2. Step 2: Check array elements in order

   The array is [3, 7, 12, 5]. The first element > 10 is 12.

3. Final Answer:

   12 -> Option D

4. Quick Check:

   First number > 10 is 12 [OK]

Hint: Find returns first match, not all matches [OK]

Common Mistakes:

• Thinking find returns all matches
• Confusing find with some
• Choosing first element instead of first matching

4. The following code does not work as expected. What is the problem?

const arr = [1, 2, 3];
const hasEven = arr.some(n => { n % 2 === 0 });
console.log(hasEven);

medium

A. The condition should use == instead of ===

B. The some method is not available on arrays

C. The arrow function does not return a value

D. The array is empty

Solution

1. Step 1: Analyze arrow function body

   The arrow function uses braces but no return statement, so it returns undefined.

2. Step 2: Understand some expects boolean return

   Since the function returns undefined, some cannot check the condition properly, causing unexpected behavior.

3. Final Answer:

   The arrow function does not return a value -> Option C

4. Quick Check:

   Arrow function with braces needs explicit return [OK]

Hint: Use return inside braces or remove braces in arrow function [OK]

Common Mistakes:

• Forgetting return in arrow function with braces
• Thinking some is not an array method
• Confusing equality operators

5. Given an array of user objects:

const users = [
  { id: 1, active: false },
  { id: 2, active: true },
  { id: 3, active: false }
];

Which code correctly finds the first active user and checks if any user is active?

hard

A. const firstActive = users.find(u => u.active);
const anyActive = users.some(u => u.active);

B. const firstActive = users.some(u => u.active);
const anyActive = users.find(u => u.active);

C. const firstActive = users.filter(u => u.active)[0];
const anyActive = users.find(u => u.active);

D. const firstActive = users.find(u => u.active === false);
const anyActive = users.some(u => u.active === false);

Solution

1. Step 1: Find first active user

   The find method returns the first user object where active is true.

2. Step 2: Check if any user is active

   The some method returns true if any user has active true.

3. Final Answer:

   const firstActive = users.find(u => u.active); const anyActive = users.some(u => u.active); -> Option A

4. Quick Check:

   find returns object, some returns boolean [OK]

Hint: Use find for first match, some for boolean check [OK]

Common Mistakes:

• Swapping find and some usage
• Using filter instead of find for first element
• Checking for false instead of true