image for How to Use Common JavaScript Functions with Practical Examples
In the world of web development, mastering JavaScript is essential for building dynamic and interactive applications. To become proficient, it’s crucial to understand how to use common JavaScript functions effectively. Functions like map, filter, and reduce are the building blocks of modern JavaScript programming, allowing you to manipulate arrays and objects with ease. In this guide, we’ll explore these and other essential JavaScript functions through practical examples, helping you to apply them in real-world scenarios.
Purpose: Outputs messages or objects to the console for debugging purposes.
Example:
javascriptconsole.log('Hello, World!'); console.log({ name: 'John', age: 30 });
Purpose: Executes a function after a specified delay in milliseconds.
Example:
javascriptsetTimeout(() => { console.log('This message appears after 2 seconds'); }, 2000);
Output (after 2 seconds):
This message appears after 2 seconds
Example:
javascriptlet counter = 0; const intervalId = setInterval(() => { console.log('Counter:', counter++); if (counter > 5) { clearInterval(intervalId); // Stops the interval after 5 iterations } }, 1000);
Output (every second):
makefileCounter: 0 Counter: 1 Counter: 2 Counter: 3 Counter: 4 Counter: 5
Purpose: Returns a NodeList containing all elements that match the specified CSS selector.
Example:
javascript// HTML: <p class="text">First paragraph</p> <p class="text">Second paragraph</p> const paragraphs = document.querySelectorAll('.text'); paragraphs.forEach((p) => console.log(p.textContent));
Output:
sqlFirst paragraph Second paragraph
Purpose: Attaches an event handler function to an HTML element.
Example:
javascriptdocument.querySelector('button').addEventListener('click', () => { console.log('Button was clicked!'); });
Output: (When the button is clicked)
cssButton was clicked!
Purpose: Parses a JSON string and returns a JavaScript object.
Example:
javascriptconst jsonString = '{"name": "Alice", "age": 25}'; const user = JSON.parse(jsonString); console.log(user.name); // Outputs: Alice
Purpose: Converts a JavaScript object into a JSON string.
Example:
javascriptconst user = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(user); console.log(jsonString); // Outputs: '{"name":"Alice","age":25}'
Purpose: Executes a provided function once for each array element.
Example:
javascriptconst numbers = [1, 2, 3]; numbers.forEach((num) => console.log(num * 2));
Output:
2 4 6
Purpose: Creates a new array with the results of calling a provided function on every element.
Example:
javascriptconst numbers = [1, 2, 3]; const doubled = numbers.map((num) => num * 2); console.log(doubled); // Outputs: [2, 4, 6]
Purpose: Creates a new array with elements that satisfy a provided condition.
Example:
javascriptconst numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((num) => num % 2 === 0); console.log(evenNumbers); // Outputs: [2, 4]
Purpose: Reduces an array to a single value by applying a function for each element.
Example:
javascriptconst numbers = [1, 2, 3, 4]; const sum = numbers.reduce((accumulator, current) => accumulator + current, 0); console.log(sum); // Outputs: 10
Purpose: Returns a shallow copy of a portion of an array between specified start and end indices.
Example:
javascriptconst numbers = [1, 2, 3, 4, 5]; const sliced = numbers.slice(1, 4); console.log(sliced); // Outputs: [2, 3, 4]
Purpose: Changes the array content by removing/replacing elements and/or adding new elements.
Example:
javascriptconst numbers = [1, 2, 3, 4, 5]; numbers.splice(2, 1, 10); // Removes 1 element at index 2 and adds 10 console.log(numbers); // Outputs: [1, 2, 10, 4, 5]
Purpose: Returns the first index at which a given element can be found in the array, or -1 if not present.
Example:
javascriptconst numbers = [1, 2, 3, 4, 5]; console.log(numbers.indexOf(3)); // Outputs: 2 console.log(numbers.indexOf(6)); // Outputs: -1
Purpose: Determines whether an array includes a certain element, returning true or false.
Example:
javascriptconst numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3)); // Outputs: true console.log(numbers.includes(6)); // Outputs: false
Purpose: Sorts the elements of an array based on the provided function or default sorting order.
Example:
javascriptconst numbers = [5, 3, 8, 1]; numbers.sort((a, b) => a - b); // Sorts in ascending order console.log(numbers); // Outputs: [1, 3, 5, 8]
Purpose: Reverses the order of the elements in an array.
Example:
javascriptconst numbers = [1, 2, 3]; numbers.reverse(); console.log(numbers); // Outputs: [3, 2, 1]
Purpose: Checks if a given value is an array, returning true or false.
Example:
javascriptconsole.log(Array.isArray([1, 2, 3]));// Outputs: true console.log(Array.isArray("Hello"));
// Outputs: false
These examples demonstrate how to use each of these common JavaScript functions in practical scenarios. Understanding and applying these functions will help you become more proficient in JavaScript programming.
Introduction Landing a software engineering job in 2025 has never been more competitive. With technology…
PhD Thesis Structure: A Step-by-Step Guide to Crafting a Masterpiece Writing a PhD thesis structure…
How AI Changes RPA: The Evolution from Human Labor to Intelligent Automation Automation is no…
Case Study: How AI-Driven Automation Transformed a Financial Services Firm As automation evolves, industries are…
22 Game-Changing YC Startup Tips You Can’t Afford to Miss in 2024 The startup world…
Mastering Major Decisions: A Comprehensive Guide to Making Big Choices Like a Leader Decision-making is…