Why built-in methods are useful in Javascript - See It in Action

Why built-in methods are useful

📖 Scenario: Imagine you have a list of names of friends you want to invite to a party. You want to quickly check how many friends you have, find if a certain friend is on the list, and sort the names alphabetically.

🎯 Goal: You will create a list of friends and use built-in JavaScript methods to count, check, and sort the names easily.

📋 What You'll Learn

Create an array called friends with these exact names: 'Anna', 'Bob', 'Charlie', 'Diana'

Create a variable called friendToFind and set it to 'Bob'

Use the built-in method includes() on friends to check if friendToFind is in the list and store the result in isFriendFound

Use the built-in method sort() on friends to sort the names alphabetically

Print the number of friends, the result of the search, and the sorted list

💡 Why This Matters

🌍 Real World

In real life, we often need to manage lists like contacts, tasks, or products. Built-in methods help us quickly search, sort, and count items without extra work.

💼 Career

Knowing how to use built-in methods is essential for any programming job because it makes your code efficient and easier to maintain.

1

Create the friends list

Create an array called friends with these exact names: 'Anna', 'Bob', 'Charlie', 'Diana'

Javascript

# Your code here

Hint

Use square brackets [] to create an array and separate names with commas.

2

Set the friend to find

Create a variable called friendToFind and set it to 'Bob'

Javascript

const friends = ['Anna', 'Bob', 'Charlie', 'Diana'];
# Your code here

Hint

Use const to create a variable and assign the string 'Bob'.

3

Check if the friend is in the list and sort the list

Use the built-in method includes() on friends to check if friendToFind is in the list and store the result in isFriendFound. Then use the built-in method sort() on friends to sort the names alphabetically.

Javascript

const friends = ['Anna', 'Bob', 'Charlie', 'Diana'];
const friendToFind = 'Bob';
# Your code here

Hint

Use includes() to check presence and sort() to order the array.

4

Print the results

Print the number of friends using friends.length, the value of isFriendFound, and the sorted friends array.

Javascript

const friends = ['Anna', 'Bob', 'Charlie', 'Diana'];
const friendToFind = 'Bob';
const isFriendFound = friends.includes(friendToFind);
friends.sort();
# Your code here

Hint

Use console.log() to print each result on its own line.

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