JavaScript Fundamentals: 20 Functions to Supercharge Your Projects

The foundation of web development, JavaScript, enables programmers to construct dynamic, interactive websites. Understanding its foundations is essential for every developer who wants to create reliable products quickly. We’ll look at 20 crucial JavaScript functions in this blog article that will definitely make your projects fly. Practical code samples are provided for each function to show how to use and benefit from it.

JavaScript Fundamentals: Building Blocks of Web Development

JavaScript is a fundamental component of web development that enables programmers to create dynamic and engaging online content. Comprehending its foundations is like having a master key that opens up countless opportunities for web application development. We’ll explore the foundations of JavaScript in this book, which will act as the foundation for your coding endeavors.

1. Variables and Data Types

JavaScript accommodates various data types, including numbers, strings, booleans, arrays, and objects. Understanding how to declare and manipulate variables of different types is fundamental to writing effective JavaScript code.

let name = 'John';
const age = 30;
const isDeveloper = true;
let numbers = [1, 2, 3, 4, 5];
let person = { name: 'Jane', age: 25 };

2. Functions

Functions encapsulate reusable blocks of code, promoting modularity and code organization. They are the workhorses of JavaScript, allowing developers to define behavior and execute tasks efficiently.

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('Alice')); // Output: Hello, Alice!

3. Conditional Statements

Conditional statements enable developers to execute code selectively based on specified conditions. These statements are pivotal in controlling the flow of your program and making decisions dynamically.

const temperature = 25;

if (temperature > 30) {
  console.log('It\'s hot outside!');
} else if (temperature > 20) {
  console.log('It\'s warm outside.');
} else {
  console.log('It\'s cold outside.');
}

4. Loops

Loops iterate over collections of data or execute code repeatedly until a certain condition is met. They provide a powerful mechanism for automating repetitive tasks and processing data efficiently.

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// Output:
// 1
// 2
// 3
// 4
// 5

5. DOM Manipulation

The Document Object Model (DOM) represents the structure of HTML documents, and JavaScript enables developers to manipulate this structure dynamically. DOM manipulation allows for the creation, modification, and deletion of HTML elements, facilitating interactive web experiences.

const element = document.getElementById('myElement');
element.textContent = 'Updated content';
element.style.color = 'blue';

6. Events

Events are user interactions or system occurrences that trigger JavaScript code execution. By handling events, developers can create responsive and interactive web applications that respond to user actions in real-time.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

Mastering these fundamental concepts equips you with the necessary skills to embark on your JavaScript journey with confidence. Whether you’re building a simple website or a complex web application, understanding these fundamentals lays a solid foundation for your coding endeavors. So dive in, experiment, and let JavaScript’s magic unfold in your hands!

20 JavaScript Functions:

1. getElementById()

A key JavaScript function for retrieving a reference to an HTML element on a webpage by its unique identifier (ID) is getElementById(). This feature is a component of the Document Object Model (DOM) API, which gives HTML documents an organized representation and allows JavaScript to dynamically interact with their content.

Here’s how getElementById() works:

const element = document.getElementById('elementId');

In this example:

• document refers to the entire HTML document.
• getElementById() is a method of the document object.
• 'elementId' is the parameter passed to getElementById(), representing the unique ID attribute of the HTML element you want to retrieve.

Once you’ve obtained a reference to the desired element using getElementById(), you can manipulate its properties, modify its content, or apply styles dynamically using JavaScript.

Here’s a practical example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getElementById Example</title>
  <style>
    #myElement {
      color: red;
    }
  </style>
</head>
<body>
  <div id="myElement">Hello, World!</div>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      const element = document.getElementById('myElement');
      element.style.color = 'blue';
    }
  </script>
</body>
</html>

In this example:

• There’s a <div> element with the ID "myElement".
• Initially, the text color of the div is red, as defined in the CSS.
• There’s a <button> element that, when clicked, calls the changeColor() function.
• Inside changeColor(), getElementById('myElement') retrieves the div element with the ID "myElement".
• The color of the div is then dynamically changed to blue using the style property.

getElementById() is a powerful tool for dynamically accessing and manipulating specific elements within an HTML document, enabling developers to create rich and interactive web experiences.

2. querySelector()

The querySelector() method is another essential function in JavaScript, primarily used to select and retrieve HTML elements from the DOM (Document Object Model) using CSS selectors. This method returns the first element that matches a specified CSS selector within the document.

Here’s the basic syntax of querySelector():

const element = document.querySelector(selector);

In this syntax:

• document refers to the entire HTML document.
• querySelector() is a method of the document object.
• selector is a string parameter representing the CSS selector used to identify the desired element(s).

With querySelector(), you can specify CSS selectors similar to those used in CSS stylesheet rules, including element names, class names, IDs, attribute selectors, and more.

Here are some examples:

1. Selecting by Element Name:

const paragraph = document.querySelector('p');

This selects the first <p> (paragraph) element in the document.

2. Selecting by Class Name:

const element = document.querySelector('.className');

This selects the first element with the specified class name.

3. Selecting by ID:

const element = document.querySelector('#elementId');

This selects the element with the specified ID.

4. Selecting by Attribute:

const link = document.querySelector('a[href="https://example.com"]');

This selects the first <a> (anchor) element with the specified href attribute value.

5. Selecting by Complex Selectors:

const element = document.querySelector('ul li:first-child');

This selects the first <li> (list item) within the first <ul> (unordered list) in the document.

Once you’ve obtained a reference to the desired element using querySelector(), you can manipulate its properties, modify its content, or apply styles dynamically using JavaScript, similar to other DOM manipulation methods.

Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>querySelector Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <div class="highlight">This is a highlighted div.</div>
  <button onclick="highlightElement()">Highlight</button>

  <script>
    function highlightElement() {
      const divToHighlight = document.querySelector('.highlight');
      divToHighlight.style.backgroundColor = 'cyan';
    }
  </script>
</body>
</html>

In this example:

• There’s a <div> element with the class name "highlight".
• Initially, the background color of the div is yellow, as defined in the CSS.
• There’s a <button> element that, when clicked, calls the highlightElement() function.
• Inside highlightElement(), querySelector('.highlight') retrieves the div element with the class name "highlight".
• The background color of the div is then dynamically changed to cyan using the style property.

querySelector() is versatile and widely used for selecting elements in JavaScript, offering flexibility and convenience in DOM manipulation tasks.

3. addEventListener()

Associating event listeners with HTML elements is made possible via JavaScript’s addEventListener() function, which is essential for developing interactive online applications. When certain events occur, such clicks, mouse movements, key presses, and more, these event listeners wait for them and then run JavaScript code in response.

Here’s the basic syntax of addEventListener():

element.addEventListener(event, callbackFunction);

In this syntax:

• element is the HTML element to which the event listener is added.
• event is a string representing the type of event to listen for (e.g., “click”, “mouseover”, “keydown”).
• callbackFunction is the function to be executed when the specified event occurs.

Here are some examples of using addEventListener():

1. Click Event:

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

In this example, when the button with the ID “myButton” is clicked, the specified arrow function is executed, logging “Button clicked!” to the console.

2. Mouseover Event:

const element = document.querySelector('.myElement');
element.addEventListener('mouseover', () => {
  element.classList.add('highlight');
});

In this example, when the mouse moves over an element with the class “myElement”, the specified arrow function adds the class “highlight” to that element, triggering a visual change.

3. Keydown Event:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Enter key pressed!');
  }
});

In this example, when any key is pressed, the specified arrow function checks if the pressed key is the “Enter” key. If it is, it logs “Enter key pressed!” to the console.

4. Submit Event (Form Submission):

const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Form submitted!');
});

This example shows how the given arrow function stops the default form submission action, which would refresh the page, when a form with the ID “myForm” is submitted. It also logs “Form submitted!” to the console.

With the help of addEventListener(), developers may create dynamic and responsive web apps and specify behavior based on how users interact with HTML elements. Developers may design dynamic and engaging user experiences that react instantly to user activities by adding event listeners to items.

4. setInterval()

JavaScript’s setInterval() method is used to periodically run a given function at certain intervals. It’s an effective tool for doing repetitive actions, such querying for updates, reloading data from a server, or performing animations.

Here’s the basic syntax of setInterval():

setInterval(callbackFunction, delay);

In this syntax:

• callbackFunction is the function to be executed at each interval.
• delay is the time interval (in milliseconds) between each execution of the callback function.

Here’s an example of using setInterval() to log a message to the console every 2 seconds:

setInterval(() => {
  console.log('Executing task...');
}, 2000);

In this example, the arrow function () => { console.log('Executing task...'); } is the callback function that logs “Executing task…” to the console. 2000 milliseconds (or 2 seconds) is the delay specified for setInterval(), indicating that the callback function should be executed every 2 seconds.

It’s important to note that setInterval() continues to execute the specified function indefinitely until it is stopped using clearInterval() or the page is unloaded.

Here’s an example of using setInterval() with a named function:

function displayTime() {
  const currentTime = new Date();
  console.log(`Current time: ${currentTime.toLocaleTimeString()}`);
}

setInterval(displayTime, 1000);

In this example, the current time is logged to the console by calling the displayTime() method once per second, or 1000 milliseconds. This illustrates the usage of setInterval() with named and anonymous methods.

SetInterval() is helpful for repetitive activities, but it must be used carefully to prevent performance problems, particularly when shorter intervals are being executed. In order to avoid wasting resources, don’t forget to use clearInterval() to end the interval when it’s no longer required.

5. setTimeout()

JavaScript’s setTimeout() method may be used to launch a given function or piece of code after a predetermined amount of time (in milliseconds). It’s frequently used to implement tasks that must be completed after a predetermined amount of time, such displaying a message following a user’s interaction with a webpage or pausing the execution of code.

Here’s the basic syntax of setTimeout():

setTimeout(callbackFunction, delay);

In this syntax:

• callbackFunction is the function or code snippet to be executed after the specified delay.
• delay is the time interval (in milliseconds) before the callbackFunction is executed.

Here’s an example of using setTimeout() to display a message after 3 seconds:

setTimeout(() => {
  console.log('Delayed message');
}, 3000);

In this example, the arrow function () => { console.log('Delayed message'); } is the callbackFunction that logs “Delayed message” to the console. 3000 milliseconds (or 3 seconds) is the delay specified for setTimeout(), indicating that the callback function should be executed after a 3-second delay.

It’s important to note that unlike setInterval(), which repeatedly executes a function at defined intervals, setTimeout() executes the specified function only once after the specified delay.

Here’s another example demonstrating the use of setTimeout() with a named function:

function displayMessage() {
  console.log('This message is displayed after 2 seconds');
}

setTimeout(displayMessage, 2000);

In this example, the displayMessage() function is called after a delay of 2 seconds, logging “This message is displayed after 2 seconds” to the console.

setTimeout() is a versatile function commonly used in JavaScript for implementing delayed actions and asynchronous behavior. It’s essential for scenarios where certain tasks need to be performed after a specified time interval, providing flexibility and control in coding.

6. Array.prototype.map()

In JavaScript, the Array.prototype.map() method is used to apply a given function to each member of an existing array in order to build a new array. Iterating through every element in the array, it applies the supplied function on each one before returning a new array with the outcomes of doing so.

Here’s the basic syntax of map():

const newArray = array.map(callbackFunction);

In this syntax:

• array is the original array on which map() is called.
• callbackFunction is the function to be applied to each element of the array. This function receives three arguments: the current element being processed, the index of the current element, and the array itself.
• newArray is the new array containing the results of applying the function to each element of the original array.

Here’s an example of using map() to double each element of an array:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

The map() method in this example receives the arrow function (number) => { return number * 2; }. This function multiplies each element number in the numbers array by two before returning the outcome. After that, the doubled values are created in a new array called doubledNumbers via the map() function.

When manipulating data in arrays, map() is frequently used to format data, extract certain attributes, or conduct computations on each piece. It offers a clear and sophisticated method of applying a function to every element of an array without changing the original array, yielding a new array with the modified values.

7. Array.prototype.filter()

In JavaScript, the Array.prototype.filter() method generates a new array containing all elements that satisfy a predetermined criterion specified by a supplied function. Iteratively going over each element in the array, it uses the designated function to decide if it belongs in the new array.

Here’s the basic syntax of filter():

const newArray = array.filter(callbackFunction);

In this syntax:

• array is the original array on which filter() is called.
• callbackFunction is the function used to test each element of the array. This function should return true to include the element in the new array or false to exclude it.
• newArray is the new array containing the elements that pass the test specified by the callback function.

Here’s an example of using filter() to filter out even numbers from an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});

console.log(oddNumbers); // Output: [1, 3, 5, 7, 9]

The filter() method in this example receives the arrow function (number) => { return number % 2!== 0;}. This function checks if each integer in the numbers array is odd, or not divisible by two, for each entry. The element is added to the new array oddNumbers if the criteria is met. If not, it is not included.

When choosing components from an array based on predetermined standards, including removing undesired or incorrect data, extracting certain values, or adding search functionality, filter() is frequently utilized. It offers a clear and simple method of creating a new array without changing the current array, with just the items that satisfy a certain criteria.

8. Array.prototype.reduce()

In JavaScript, an array may be reduced to a single value by applying a function to each element in the array using the Array.prototype.reduce() method. By applying the designated function to each member of the array iteratively, a single result is accumulated.

Here’s the basic syntax of reduce():

const result = array.reduce(callbackFunction, initialValue);

In this syntax:

• array is the original array on which reduce() is called.
• callbackFunction is the function to execute on each element of the array. This function takes four arguments: the accumulator (the value resulting from the previous iteration), the current element, the current index, and the array itself.
• initialValue (optional) is the initial value of the accumulator. If provided, the callback function is called with this initial value as the initial accumulator value. If not provided, the first element of the array is used as the initial accumulator value.

Here’s an example of using reduce() to calculate the sum of all elements in an array:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Output: 15 (1 + 2 + 3 + 4 + 5)

The reduce() method in this example receives the arrow function (accumulator, currentValue) => { return accumulator + currentValue;}. Beginning with an initial value of 0, this method adds each element currentValue of the numbers array to the accumulator accumulator. The total of each element in the array is the outcome.

Because of its versatility, reduce() may be used for a variety of tasks, including figuring out averages, finding the highest or lowest value, flattening arrays, and carrying out intricate transformations. It is an important tool in functional programming and data manipulation because it offers a strong and adaptable method of processing arrays and extracting single values from them.

9. Array.prototype.forEach()

When using JavaScript, the Array.prototype.forEach() method is utilized to run a given function once for every element in an array. Iterating over every element in the array, it successively applies the designated function to each one.

Here’s the basic syntax of forEach():

array.forEach(callbackFunction);

In this syntax:

• array is the original array on which forEach() is called.
• callbackFunction is the function to execute on each element of the array. This function takes three arguments: the current element, the current index, and the array itself.

Here’s an example of using forEach() to log each element of an array to the console:

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach((fruit, index) => {
  console.log(`Fruit at index ${index}: ${fruit}`);
});

In this example, the arrow function (fruit, index) => { console.log(Fruit at index ${index}: ${fruit}); } is passed to the forEach() method. This function logs each element fruit of the fruits array along with its corresponding index to the console.

forEach() is commonly used for executing side effects, such as logging, updating DOM elements, or performing calculations, for each element in an array. It provides a concise and readable way to iterate over array elements without the need for manual indexing or iteration control, making code more expressive and maintainable. However, it does not return a new array or modify the original array, as it is primarily used for its side effects.

10. String.prototype.split()

JavaScript’s String.prototype.split() function divides a string according to a given separator into an array of substrings. It enables you to split a string into manageable chunks, which are then saved as array items.

Here’s the basic syntax of split():

const newArray = string.split(separator, limit);

In this syntax:

• string is the original string that you want to split.
• separator is a string or a regular expression that specifies where to split the string. If omitted, the entire string will be treated as a single element in the resulting array.
• limit (optional) is an integer that specifies the maximum number of splits to perform. If omitted or negative, the entire string will be split.

Here’s an example of using split() to split a string into an array of substrings based on a comma (,):

const sentence = 'Hello, world, how, are, you?';
const words = sentence.split(',');

console.log(words); // Output: ["Hello", " world", " how", " are", " you?"]

In this example, the split(',') method call splits the sentence string into substrings wherever a comma , is encountered. Each substring is then stored as an element in the words array.

You can also specify a regular expression as the separator. Here’s an example splitting a string based on a regular expression to match whitespace characters:

const sentence = 'Hello world, how are you?';
const words = sentence.split(/\s+/);

console.log(words); // Output: ["Hello", "world,", "how", "are", "you?"]

The regular pattern /\s+/ in this instance matches one or more whitespace characters, such as tabs, spaces, and line breaks. Anywhere there is one or more whitespace characters in the sentence string, the split() function divides it into substrings.

Split() is a flexible function that is frequently used to tokenize input, parse strings, and extract distinct parts from delimited text. In particular, whether working with structured data or text processing jobs, it offers a straightforward approach to interact with strings and alter their contents.

11. String.prototype.trim()

The String.prototype.trim() method in JavaScript is used to remove whitespace from both ends of a string. Whitespace includes spaces, tabs, and newline characters. It does not affect whitespace within the string itself.

Here’s the basic syntax of trim():

const trimmedString = string.trim();

In this syntax:

• string is the original string from which you want to remove whitespace.
• trimmedString is the new string with whitespace removed from both ends.

Here’s an example of using trim() to remove whitespace from both ends of a string:

const stringWithWhitespace = '   Hello, world!   ';
const trimmedString = stringWithWhitespace.trim();

console.log(trimmedString); // Output: "Hello, world!"

In this example, the trim() method removes the leading and trailing whitespace from the stringWithWhitespace, resulting in the trimmedString containing only the text "Hello, world!".

trim() is commonly used to sanitize input data, especially user input, where leading or trailing whitespace can cause unintended behavior. It’s also useful for cleaning up strings before further processing, such as validation or comparison. Additionally, it’s often used in conjunction with other string manipulation methods to ensure consistent formatting and improve readability of text.

12. String.prototype.toUpperCase()

The String.prototype.toUpperCase() method in JavaScript is used to convert all characters in a string to uppercase. It doesn’t modify the original string but returns a new string with all alphabetic characters converted to uppercase.

Here’s the basic syntax of toUpperCase():

const upperCaseString = string.toUpperCase();

In this syntax:

• string is the original string that you want to convert to uppercase.
• upperCaseString is the new string with all characters converted to uppercase.

Here’s an example of using toUpperCase() to convert a string to uppercase:

const originalString = 'Hello, world!';
const upperCaseString = originalString.toUpperCase();

console.log(upperCaseString); // Output: "HELLO, WORLD!"

In this example, the toUpperCase() method converts all alphabetic characters in the originalString to uppercase, resulting in the upperCaseString containing the text "HELLO, WORLD!".

toUpperCase() is often used for case-insensitive string comparison, text formatting, or ensuring consistent capitalization in user inputs. It provides a convenient way to transform strings to uppercase without modifying the original string, allowing for non-destructive string manipulation.

13. String.prototype.includes()

The String.prototype.includes() method in JavaScript is used to determine whether one string can be found within another string. It returns true if the specified string is found, false otherwise. This method is case-sensitive.

Here’s the basic syntax of includes():

const isSubstring = string.includes(substring);

In this syntax:

• string is the original string that you want to search within.
• substring is the string to search for within string.
• isSubstring is a boolean indicating whether substring was found within string.

Here’s an example of using includes() to check if a substring exists within a string:

const sentence = 'The quick brown fox jumps over the lazy dog';
const hasFox = sentence.includes('fox');

console.log(hasFox); // Output: true

In this example, the includes() method checks if the string "fox" exists within the sentence. Since "fox" is found within the sentence, hasFox is assigned true.

includes() is commonly used for simple substring searches, such as checking if a specific word or phrase exists within a larger body of text. It’s a convenient and straightforward method for performing substring checks in JavaScript, providing a quick way to determine the presence or absence of substrings within strings.

14. Math.random()

To create a random floating-point integer between 0 (inclusive) and 1 (exclusive), utilize JavaScript’s Math.random() method. Although the numbers created are not completely random, they are adequately random for the majority of applications since it yields a pseudo-random number.

Here’s the basic syntax of Math.random():

const randomNumber = Math.random();

In this syntax:

• randomNumber is a floating-point number between 0 (inclusive) and 1 (exclusive).

Here’s an example of using Math.random() to generate a random number between 0 and 1:

const randomNumber = Math.random();

console.log(randomNumber); // Output: a random number between 0 and 1 (e.g., 0.123456789)

In this example, randomNumber will contain a random floating-point number between 0 (inclusive) and 1 (exclusive).

You can also use Math.random() to generate random numbers within a specific range. For example, to generate a random integer between two values, you can use the following formula:

const min = 1;
const max = 100;
const randomInteger = Math.floor(Math.random() * (max - min + 1)) + min;

console.log(randomInteger); // Output: a random integer between 1 and 100

In this instance, a random floating-point number between 0 (inclusive) and 1 (exclusive) is produced using Math.random(). It may be scaled to the required range by multiplying the random number by (max – min + 1). To ensure that the final result is an integer within the given range, Math.floor() rounds the result down to the closest integer.

Applications for Math.random() include creating random numbers for games, simulations, cryptographic techniques, and randomized testing. It offers a quick and easy approach to add randomization to JavaScript applications.

15. Math.floor()

To round a number to the closest integer that is less than or equal to the input, use JavaScript’s Math.floor() method. The greatest integer less than or equal to the supplied number is returned after the fractional portion of the number is effectively removed.

Here’s the basic syntax of Math.floor():

const roundedNumber = Math.floor(number);

In this syntax:

• number is the numeric value that you want to round down.
• roundedNumber is the resulting integer after rounding down.

Here’s an example of using Math.floor() to round down a floating-point number:

const number = 4.9;
const roundedNumber = Math.floor(number);

console.log(roundedNumber); // Output: 4

In this example, Math.floor() rounds down the number 4.9 to the nearest integer less than or equal to 4.

Math.floor() is commonly used when you need to convert a floating-point number to an integer but want to ensure the number is rounded down, regardless of its fractional part. It’s especially useful when working with financial calculations, pagination, or situations where you need to deal with discrete quantities or indexes.

16. Math.ceil()

To round a number to the closest integer that is bigger than or equal to the input, use JavaScript’s Math.ceil() method. By removing the fractional portion of the number, it returns the lowest integer that is bigger than or equal to the input.

Here’s the basic syntax of Math.ceil():

const roundedNumber = Math.ceil(number);

In this syntax:

• number is the numeric value that you want to round up.
• roundedNumber is the resulting integer after rounding up.

Here’s an example of using Math.ceil() to round up a floating-point number:

const number = 4.1;
const roundedNumber = Math.ceil(number);

console.log(roundedNumber); // Output: 5

In this example, Math.ceil() rounds up the number 4.1 to the nearest integer greater than or equal to 5.

Math.ceil() is commonly used when you need to convert a floating-point number to an integer but want to ensure the number is rounded up, regardless of its fractional part. It’s especially useful when dealing with situations where you need to ensure a quantity is rounded up to the nearest whole unit, such as when calculating page counts, quantities of items needed, or for precise measurements.

17. Math.max()

To get the largest value in a list of integers or numeric expressions, use JavaScript’s Math.max() method. It gives the greatest number given any amount of parameters.

Here’s the basic syntax of Math.max():

const maxValue = Math.max(number1, number2, ...);

In this syntax:

• number1, number2, etc., are the numbers or numeric expressions among which you want to find the maximum value.
• maxValue is the largest value among the provided numbers.

Here’s an example of using Math.max() to find the maximum value among a list of numbers:

const maxNumber = Math.max(10, 20, 5, 30);

console.log(maxNumber); // Output: 30

In this example, Math.max() finds the largest value among the numbers 10, 20, 5, and 30, and assigns it to the variable maxNumber, which is then logged to the console.

You can also use Math.max() with an array of numbers by spreading the array using the spread syntax (...):

const numbers = [10, 20, 5, 30];
const maxNumber = Math.max(...numbers);

console.log(maxNumber); // Output: 30

In this example, the spread syntax (…numbers) distributes the numbers array’s members as separate inputs to Math.max(), enabling you to determine the array’s maximum value.

When you need to determine the maximum value among a series of numbers, such the biggest dimension of an item, the highest score in a game, or the maximum value in a dataset, you frequently utilize Math.max(). It offers a practical alternative to manually comparing each number in the calculation.

18. Math.min()

JavaScript’s Math.min() method may be used to determine the lowest value in a list of integers or numeric expressions. It accepts any number of inputs and returns the lowest number among them, much to Math.max().

Here’s the basic syntax of Math.min():

const minValue = Math.min(number1, number2, ...);

In this syntax:

• number1, number2, etc., are the numbers or numeric expressions among which you want to find the minimum value.
• minValue is the smallest value among the provided numbers.

Here’s an example of using Math.min() to find the minimum value among a list of numbers:

const minNumber = Math.min(10, 20, 5, 30);

console.log(minNumber); // Output: 5

In this example, Math.min() finds the smallest value among the numbers 10, 20, 5, and 30, and assigns it to the variable minNumber, which is then logged to the console.

You can also use Math.min() with an array of numbers by spreading the array using the spread syntax (...), similar to Math.max():

const numbers = [10, 20, 5, 30];
const minNumber = Math.min(...numbers);

console.log(minNumber); // Output: 5

In this example, the spread syntax (...numbers) spreads the elements of the numbers array as individual arguments to Math.min(), allowing you to find the minimum value among the elements of the array.

Math.min() is commonly used when you need to find the minimum value among a collection of numbers, such as when determining the lowest temperature in a dataset, the smallest dimension of an object, or the minimum score required to pass an exam. It provides a convenient way to perform this calculation without having to manually compare each value.

19. Date.now()

The Date.now() method in JavaScript is used to retrieve the current timestamp in milliseconds since the Unix epoch (January 1, 1970, 00:00:00 UTC). It provides a simple and efficient way to obtain the current time as a numeric value, which is useful for various time-related calculations and operations.

Here’s the basic syntax of Date.now():

const currentTime = Date.now();

In this syntax:

• currentTime is a numeric value representing the current timestamp in milliseconds.

Here’s an example of using Date.now() to retrieve the current timestamp:

const currentTime = Date.now();

console.log(currentTime); // Output: current timestamp in milliseconds

In this example, Date.now() returns the current timestamp in milliseconds since the Unix epoch, which is then assigned to the variable currentTime.

Date.now() is commonly used in applications where you need to measure elapsed time, calculate time differences, or generate unique identifiers based on timestamps. It’s often used in conjunction with the Date object to perform various time-related operations in JavaScript.

20. JSON.parse()

The JSON.parse() method in JavaScript is used to parse JSON (JavaScript Object Notation) strings and convert them into JavaScript objects. JSON is a lightweight data interchange format commonly used for transmitting data between a server and a web application.

Here’s the basic syntax of JSON.parse():

const parsedObject = JSON.parse(jsonString);

In this syntax:

• jsonString is the JSON string that you want to parse into a JavaScript object.
• parsedObject is the resulting JavaScript object after parsing the JSON string.

Here’s an example of using JSON.parse() to parse a JSON string:

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const parsedObject = JSON.parse(jsonString);

console.log(parsedObject); // Output: { name: 'John', age: 30, city: 'New York' }

This example shows how to parse a JSON string (jsonString) using JSON.parse() to create a JavaScript object, which is then assigned to the parsedObject variable. The attributes “name”, “age”, and “city”, together with their respective values, are present in the resultant object.

Remember that JSON.parse() will only take strings that are genuine JSON; otherwise, a SyntaxError will be raised. JSON syntax requirements must be followed by valid JSON strings, which prohibit trailing commas and require the use of double quotes for property names and string values.

In web development, JSON.parse() is frequently used to handle data from external sources—like HTTP replies from APIs—and transform it into JavaScript objects for the application’s internal manipulation and processing.