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 engineer role in 2025 is about more than just acing…
📈 Introduction Master behavioral interviews as a software engineer role in 2025 isn’t just about…
📈 Introduction Landing a software engineering job in 2025 is a thrilling milestone—coding challenges crushed,…
📈 Introduction In the ever-evolving landscape of software engineering in 2025, contributing to open source…
📈 Introduction In the highly competitive landscape of software engineering in 2025, excelling in technical…
📈 Introduction In the competitive realm of software engineering in 2025, a well-optimized LinkedIn profile…