The functions that follow are fundamental to web development and javascript programming in general, simplifying tasks such as debugging ** using the old and new console.log(), **manipulating the DOM, and handling JSON data.
Knowing and using these functions is like building the backbone of the fundamentals of this language.
Mastering these tools will also surely streamline the coding process resulting in a good developer experience.
TL;DR
Console and Debugging
-> console.log(…args)
Timing
-> setTimeout(callback, delay)
-> setInterval(callback, interval)
DOM Manipulation and Event Handling
-> querySelectorAll(selector)
-> addEventListener(event, callback)
JSON Handling
-> JSON.parse(jsonString)
-> JSON.stringify(object)
Array Manipulation (Higher-Order Functions)
-> forEach(callback)
-> map(callback)
-> filter(callback)
-> reduce(callback, initialValue)
Array Operations
-> slice(start, end)
-> splice(start, deleteCount, …items)
-> indexOf(element)
-> includes(element)
-> sort(compareFunction)
-> reverse()
-> isArray(value)
String Manipulation
-> split(separator)
-> join(separator)
-> toLowerCase(), toUpperCase()
-> trim()
Console and Debugging:
0⃣1⃣ console.log(…args)
⇒ Outputs messages or objects to the console for debugging purposes.
// console.log(...args)
console.log("Hello World!");
Timing:
0⃣2⃣ setTimeout(callback, delay)
⇒ Executes a function after a specified delay in milliseconds.
0⃣3⃣ setInterval(callback, interval)
⇒ Repeatedly executes a function at specified intervals.
// setTimeout(callback, delay)
setTimeout(function() {
console.log("This message will appear after 3 seconds.");
}, 3000);
// Runs the anonymous function after 3000 milliseconds (3 seconds)
// setInterval(callback, interval)
function printCounter() {
let count = 0;
setInterval(function() {
console.log("Count:", count++);
}, 1000);
}
printCounter(); // Prints count every second
DOM Manipulation and Event Handling:
0⃣4⃣ querySelectorAll(selector)
⇒ Returns a NodeList containing all the elements that match the specified selector.
0⃣5⃣ addEventListener(event, callback)
⇒ Attaches an event handler function to an HTML element.
// querySelectorAll(selector)
console.log("querySelectorAll(selector)");
const container = document.getElementById('container');
const links = container.querySelectorAll('a');
// Accessing the href attribute of each link
// Iterate over the NodeList
links.forEach(link => {
console.log(link.href);
});
// addEventListener(event, callback)
console.log("addEventListener(event, callback)");
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked!');
});
JSON Handling:
0⃣6⃣ JSON.parse(jsonString)
⇒ Parses a JSON string and returns a JavaScript object.
0⃣7⃣ JSON.stringify(object)
⇒ Converts a JavaScript object into a JSON string.
// JSON.parse(jsonString)
console.log("JSON.parse(jsonString)");
const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);
// Output: John
console.log(jsonObject.age);
// Output: 30
console.log(jsonObject.city);
// Output: New York
// JSON.stringify(object)
console.log("JSON.stringify(object)");
const person = { name: 'John', age: 30, city: 'New York' };
const jsonString2 = JSON.stringify(person);
console.log(jsonString2);
// Output: {"name":"John","age":30,"city":"New York"}
Array Manipulation (Higher-Order Functions):
0⃣8⃣ forEach(callback)
⇒ Executes a provided function once for each array element.
0⃣9⃣ map(callback)
⇒ Creates a new array with the results of calling a provided function on every element.
1⃣0⃣ filter(callback)
⇒ Creates a new array with elements that satisfy a provided condition.
1⃣1⃣ reduce(callback, initialValue)
⇒ Reduces an array to a single value by applying a function for each element.
const numbers = [1, 2, 3, 4, 5];
// forEach(callback)
console.log("forEach:");
numbers.forEach(num => {
console.log(num);
});
// Output:
// 1
// 2
// 3
// 4
// 5
// map(callback)
const doubledNumbers = numbers.map(num => num * 2);
// Output: [2, 4, 6, 8, 10]
// filter(callback)
const evenNumbers = numbers.filter(num => num % 2 === 0);
// [2, 4]
// reduce(callback, initialValue)
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// 15
Array Operations:
1⃣2⃣ slice(start, end)
⇒ Returns a shallow copy of a portion of an array between specified start and end indices.
1⃣3⃣ splice(start, deleteCount, …items)
⇒ Changes the array content by removing/replacing elements and/or adding new elements.
1⃣4⃣ indexOf(element)
⇒ Returns the first index at which a given element can be found in the array, or -1 if not present.
1⃣5⃣ includes(element)
⇒ Determines whether an array includes a certain element, returning true or false.
1⃣6⃣ sort(compareFunction)
⇒ Sorts the elements of an array based on the provided function or default sorting order.
1⃣7⃣ reverse()
⇒ Reverses the order of the elements in an array.
1⃣8⃣ isArray(value)
⇒ Checks if a given value is an array, returning true or false.
// slice(start, end)
const array = [1, 2, 3, 4, 5];
const slicedArray = array.slice(1, 4);
console.log("slice:", slicedArray);
// Output: [2, 3, 4]
// splice(start, deleteCount, ...items)
const spliceArray = [1, 2, 3, 4, 5];
spliceArray.splice(2, 2, 'a', 'b');
console.log("splice:", spliceArray);
// Output: [1, 2, "a", "b", 5]
// indexOf(element)
const indexOfArray = ['apple', 'banana', 'cherry'];
const indexOfCherry = indexOfArray.indexOf('cherry');
console.log("indexOf:", indexOfCherry);
// Output: 2
// includes(element)
const includesArray = [1, 2, 3, 4, 5];
const includesValue = includesArray.includes(3);
console.log("includes:", includesValue);
// Output: true
// sort(compareFunction)
const sortArray = [3, 1, 4, 1, 5];
sortArray.sort((a, b) => a - b);
console.log("sort:", sortArray);
// Output: [1, 1, 3, 4, 5]
// reverse()
const reverseArray = ['a', 'b', 'c', 'd'];
reverseArray.reverse();
console.log("reverse:", reverseArray);
// Output: ['d', 'c', 'b', 'a']
// isArray(value)
const isArrayValue = [1, 2, 3];
const isArray = Array.isArray(isArrayValue);
console.log("isArray:", isArray);
// Output: true
String Manipulation:
1⃣9⃣ split(separator)
⇒ Splits a string into an array of substrings based on a specified separator.
2⃣0⃣ join(separator)
⇒ Joins all elements of an array into a string, separated by the specified separator.
2⃣1⃣ toLowerCase(), toUpperCase()
⇒ Converts a string to lowercase or uppercase.
2⃣2⃣ trim()
⇒ Removes whitespace from both ends of a string.
// split(separator)
const sentence = "Hello, world! How are you?";
const words = sentence.split(' ');
console.log("split:", words);
// Output: ["Hello,", "world!", "How", "are", "you?"]
// join(separator)
const fruits = ['Apple', 'Banana', 'Orange'];
const fruitString = fruits.join(', ');
console.log("join:", fruitString);
// Output: "Apple, Banana, Orange"
// toLowerCase(), toUpperCase()
const mixedCase = "Hello WoRLd";
const lowerCase = mixedCase.toLowerCase();
const upperCase = mixedCase.toUpperCase();
console.log("toLowerCase:", lowerCase);
// Output: "hello world"
console.log("toUpperCase:", upperCase);
// Output: "HELLO WORLD"
// trim()
const stringWithWhitespace = " Hello, world! ";
const trimmedString = stringWithWhitespace.trim();
console.log("trim:", trimmedString);
// Output: "Hello, world!"
Final Thoughts
As we wrap up our discussion the above functions, I ask you to share your insights.
What other functions do you find all necessary in your web development or mainly JavaScript projects?
Don’t hesitate to share your thoughts and useful functions in the comments below!
I hope you liked the article!
Connect with me: LinkedIn.
Explore my YouTube Channel! If you find it useful.
Please give my GitHub Projects a star
Happy Coding!
Thanks for 22097!
Subscribe To Our Newsletter
Enter your email address to subscribe
