Why built-in methods are useful in Javascript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Array map with built-in method

What is the output of this code?

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(Math.sqrt);
console.log(doubled);

Javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(Math.sqrt);
console.log(doubled);

A [1, 1.4142135623730951, 1.7320508075688772, 2]

B [2, 4, 6, 8]

C [1, 4, 9, 16]

D TypeError

💡 Hint

Math.sqrt returns the square root of a number.

The map method applies Math.sqrt to each number, so the output is the square root of each element.

❓ Predict Output

intermediate

Output of String built-in method

What is the output of this code?

const text = 'Hello World';
const result = text.toUpperCase();
console.log(result);

Javascript

const text = 'Hello World';
const result = text.toUpperCase();
console.log(result);

A 'HELLO WORLD'

B 'hello world'

C 'Hello World'

D ReferenceError

💡 Hint

toUpperCase converts all letters to uppercase.

The toUpperCase method converts all letters in the string to uppercase.

❓ Predict Output

advanced

Output of Array filter with built-in method

What is the output of this code?

const values = [10, 15, 20, 25, 30];
const filtered = values.filter(x => x % 20 === 0);
console.log(filtered);

Javascript

const values = [10, 15, 20, 25, 30];
const filtered = values.filter(x => x % 20 === 0);
console.log(filtered);

A [10, 20, 30]

B [20]

C [20, 40]

D SyntaxError

💡 Hint

filter keeps elements where the function returns true.

Only 20 is divisible by 20 with no remainder, so the filtered array contains only 20.

❓ Predict Output

advanced

Output of Object.keys built-in method

What is the output of this code?

const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
console.log(keys);

Javascript

const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
console.log(keys);

A ['a:1', 'b:2', 'c:3']

B [1, 2, 3]

C ['a', 'b', 'c']

D TypeError

💡 Hint

Object.keys returns an array of property names.

Object.keys returns an array of the object's own property names as strings.

❓ Predict Output

expert

Output of chaining built-in methods

What is the output of this code?

const sentence = '  JavaScript is fun  ';
const result = sentence.trim().split(' ').filter(word => word.length > 2).join('-');
console.log(result);

Javascript

const sentence = '  JavaScript is fun  ';
const result = sentence.trim().split(' ').filter(word => word.length > 2).join('-');
console.log(result);

A 'JavaScript-is-fun'

B 'JavaScript--is--fun'

C 'JavaScript-is-'

D 'JavaScript-fun'

💡 Hint

trim removes spaces, split divides words, filter removes short words, join connects with dashes.

trim() removes leading/trailing spaces: 'JavaScript is fun'. split(' ') gives ['JavaScript', 'is', 'fun']. filter(word => word.length > 2) removes 'is' (length 2), leaving ['JavaScript', 'fun']. join('-') gives 'JavaScript-fun'.

Practice

1. Why are built-in methods useful in JavaScript?

easy

A. They require writing more code manually.

B. They make the code run slower.

C. They save time by performing common tasks automatically.

D. They only work with numbers.

Solution

1. Step 1: Understand the purpose of built-in methods

   Built-in methods are pre-made functions in JavaScript that help perform common tasks easily.

2. Step 2: Identify the benefit of using them

   They save time and make code cleaner by doing tasks automatically without extra code.

3. Final Answer:

   They save time by performing common tasks automatically. -> Option C

4. Quick Check:

   Built-in methods save time = C [OK]

Hint: Built-in methods do common tasks fast and easy [OK]

Common Mistakes:

• Thinking built-in methods slow down code
• Believing built-in methods need more manual code
• Assuming built-in methods only work with numbers

2. Which of the following is the correct way to use the built-in method toUpperCase() on a string text?

easy

A. text.toUpperCase()

B. toUpperCase(text)

C. text.to_upper_case()

D. text.upperCase()

Solution

1. Step 1: Recall the syntax of string methods

   In JavaScript, string methods are called on the string variable using dot notation, like variable.method().

2. Step 2: Match the correct method name and usage

   The correct method name is toUpperCase(), so calling text.toUpperCase() is correct.

3. Final Answer:

   text.toUpperCase() -> Option A

4. Quick Check:

   String method syntax = A [OK]

Hint: Use dot notation with exact method name and parentheses [OK]

Common Mistakes:

• Using function style call like toUpperCase(text)
• Writing method name with underscores
• Missing parentheses after method name

3. What will be the output of the following code?

const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.includes('banana');
console.log(result);

medium

A. false

B. Error

C. undefined

D. true

Solution

1. Step 1: Understand what includes() does on arrays

   The includes() method checks if an array contains a specific value and returns true or false.

2. Step 2: Check if 'banana' is in the array

   The array fruits contains 'banana', so fruits.includes('banana') returns true.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Array includes 'banana' = true [OK]

Hint: includes() returns true if item is found in array [OK]

Common Mistakes:

• Confusing includes() with indexOf() returning index
• Expecting string output instead of boolean
• Mistyping method name

4. Find the error in this code that tries to convert a string to lowercase:

let name = 'Alice';
let lower = name.lowercase();
console.log(lower);

medium

A. Strings cannot be converted to lowercase.

B. The method should be toLowerCase(), not lowercase().

C. Missing semicolon after console.log.

D. The variable name is not declared.

Solution

1. Step 1: Check the method name for converting to lowercase

   The correct method is toLowerCase(), not lowercase().

2. Step 2: Identify the cause of the error

   Calling name.lowercase() causes a TypeError because the method does not exist.

3. Final Answer:

   The method should be toLowerCase(), not lowercase(). -> Option B

4. Quick Check:

   Correct method name = D [OK]

Hint: Use exact method names with correct capitalization [OK]

Common Mistakes:

• Using lowercase() instead of toLowerCase()
• Ignoring case sensitivity in method names
• Assuming semicolon errors cause runtime failure

5. You have an array of numbers: [1, 2, 3, 4, 5]. You want to create a new array with each number doubled using a built-in method. Which code correctly does this?

hard

A. const doubled = numbers.map(n => n * 2);

B. const doubled = numbers.forEach(n => n * 2);

C. const doubled = numbers.filter(n => n * 2);

D. const doubled = numbers.reduce(n => n * 2);

Solution

1. Step 1: Understand the purpose of each method

   map() creates a new array by applying a function to each element. forEach() runs a function but returns undefined. filter() selects elements based on a condition. reduce() combines elements into a single value.

2. Step 2: Choose the method that returns a new array with doubled values

   map() is the correct method to transform each element and return a new array.

3. Final Answer:

   const doubled = numbers.map(n => n * 2); -> Option A

4. Quick Check:

   Use map() to transform arrays = A [OK]

Hint: Use map() to create new arrays from existing ones [OK]

Common Mistakes:

• Using forEach() expecting a returned array
• Using filter() to change values instead of select
• Using reduce() without proper accumulator function