JavaScript built-in functions: A cheat sheet for Beginners

In this article, you will be able to discover the cheat sheet for JavaScript built-in functions along with its definitions and examples.

We will show you everything you need to know concerning the built-in functions.

Whether you’re new to JavaScript or just looking to enhance your skills, this cheat sheet has everything you need to master built-in functions.

What is built in function in JavaScript?

A built-in function in JavaScript is a function that’s already available for use without needing any extra code.

These functions are a part of JavaScript itself and are designed to do common tasks like working with text, doing math calculations, and handling lists of data.

For instance, eval() can run a piece of JavaScript code that’s stored as a text string, isFinite() can check if a value is a regular number, and parseInt() can change a text into a whole number.

You can use these functions directly in your code, and they save you time and effort by providing ready-made solutions to common problem

A cheat sheet of JavaScript built in functions

Here is a list of each functions, along with description and examples.

Array Operations

Arrays play a vital role in JavaScript as they serve as fundamental data structures.

To enhance efficiency, the language incorporates a variety of built-in functions specifically designed for manipulating arrays. Now, let’s delve into a few of these operations that can be performed on arrays.

1. forEach()

The forEach() function executes a provided function once for each element in an array. Basically, it is a concise way to iterate over arrays.

For example:

let numbers = [10, 20, 30, 40, 50];
numbers.forEach((num) => {
console.log(num);
});

Output:

10
20
30
40
50

2. join()

The join() function joins all elements of an array into a string, separated by a specified separator.

For example:

let subjects = ["English", "Math", "Science"];
let joinedString = subjects.join(", ");
console.log(joinedString);

Output:

English, Math, Science

3. push() and pop()

The push() function allows us to add one or more elements to the end of an array, expanding its size.

On the other hand, the pop() function comes in handy when we want to remove the last element from an array and retrieve it as a result.

These functions provide convenient ways to modify arrays according to our needs.

let subjects = ["English", "Math", "Science"];
subjects.push("History");
console.log(subjects); // Output: [ 'English', 'Math', 'Science', 'History' ]
let removedsubject = subjects.pop();
console.log(removedsubject); // Output: History

Output:

[ 'English', 'Math', 'Science', 'History' ]
History

4. slice()

The slice() function makes a new array that’s a copy of a part of the original array. It takes two arguments: the start index and the end index (exclusive).

For example:

let numbers = [10, 20, 30, 40, 50];
let slicedArray = numbers.slice(1, 4);
console.log(slicedArray);

Output:

[ 20, 30, 40 ]

5. sort()

The sort() function arranges the items in an array and changes the original array. It also gives back the sorted array.

By default, it organizes the items in increasing order, considering how they are represented as strings.

For example:

let subjects = ["Math", "Science", "English"];
subjects.sort();
console.log(subjects);

Output:

[ 'English', 'Math', 'Science' ]

Date and Time Functions

JavaScript offers several built-in functions for handling dates and times. Now, let’s take a closer look at some of these functions.

1. Date()

The Date() function creates a new Date object that shows the current date and time.

For example:

let currentDate = new Date();
console.log(currentDate);

Output:

2023-07-19T07:04:05.254Z

2. getFullYear()

The getFullYear() function returns the four-digit year of a Date object.

For example:

let currentDate = new Date();
let year = currentDate.getFullYear();
console.log(year);

Output:

2023

3. getMonth()

The getMonth() function returns the month of a Date object as a zero-based index (0 for January, 1 for February, and so on).

For example:

let currentDate = new Date();
let month = currentDate.getMonth();
console.log(month);

Output:

6 (July)

4. getDate()

The getDate() function returns the day of the month of a Date object (from 1 to 31).

For example:

let currentDate = new Date();
let day = currentDate.getDate();
console.log(day);

Output:

19

5. toLocaleDateString()

The toLocaleDateString() function returns a string showing the date portion of a Date object based on the current locale’s conventions.

For example:

let currentDate = new Date();
let dateString = currentDate.toLocaleDateString();
console.log(dateString); 

Output:

7/19/2023

DOM Manipulation

JavaScript is widely used for manipulating web pages and interacting with the Document Object Model (DOM).

Let’s explore some built-in functions for DOM manipulation:

1. addEventListener():

The addEventListener() function attaches an event handler to an element. It allows you to specify a function that will be executed when a particular event occurs, such as a button click or a keypress.

For example:

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Button clicked!");
});

2. getElementById()

The getElementById() function returns the element with the specified ID attribute. It allows you to access and modify the properties and content of that element.

For example:

let element = document.getElementById("myElement");
element.textContent = "Hi, Welcome to Itsourcecode!";

3. setAttribute() and getAttribute()

The setAttribute() function sets the value of a specified attribute on an element. It allows you to dynamically modify attributes such as src, href, or class.

Meanwhile, the getAttribute() function retrieves the value of a specified attribute from an element.

For example:

let link = document.getElementById("myLink");
link.setAttribute("href", "https://itsourcecode.com");
let hrefValue = link.getAttribute("href");
console.log(hrefValue); 

Output:

https://itsourcecode.com

4. querySelector() and querySelectorAll()

The querySelector() function returns the first element that matches a specified CSS selector. It is useful for selecting elements based on class names, IDs, or other attributes.

The querySelectorAll() function returns a collection of all elements that match a specified CSS selector.

For example:

let firstElement = document.querySelector(".myClass");
let allElements = document.querySelectorAll("p");

JSON Manipulation

JSON (JavaScript Object Notation) is a lightweight way to share data. In JavaScript, there are functions that can change JSON data into objects and back again.

Let’s look at these functions and see how they work.

1. JSON.parse()

The JSON.parse() function parses a JSON string and returns a JavaScript object. It allows you to convert JSON data into a usable form in your code.

For example:

let jsonString = '{"name":"Itsourcecode","age":18,"city":"New York"}';
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject); 

Output:

{ name: 'Itsourcecode', age: 18, city: 'New York' }

2. JSON.stringify()

The JSON.stringify() function converts a JavaScript object into a JSON string. It allows you to serialize and transmit data in a standardized format.

For example:

let person = { name: "Itsourcecode", age: 18, city: "New York" };
let jsonString = JSON.stringify(person);
console.log(jsonString);

Output:

{"name":"Itsourcecode","age":18,"city":"New York"}

Mathematical functions

JavaScript offers a wide range of mathematical functions that make it simple for developers to carry out complex calculations.

Now, let’s take a look at a few of these mathematical functions:

1. Math.random()

The Math.random() function in JavaScript generates a random number ranging from 0 to 1.

For example:

let randomNumber = Math.random();
console.log(randomNumber);

Note: The output will automatically change every time you run the code.

Output:

0.13624169941976105

2. Math.round()

The Math.round() function in JavaScript helps you round a number to the nearest integer.

It’s like making the number closer to the nearest integer.

For example:

let num = 1.5;
let roundedNum = Math.round(num);
console.log(roundedNum);

Output:

2

3. Math.max() and Math.min()

You can use the Math.max() and Math.min() functions to find the largest and smallest values from a given list of numbers.

The Math.max() function helps you discover the highest value, while the Math.min() function allows you to identify the lowest value.

For example:

let maxNum = Math.max(10, 15, 20, 30);
let minNum = Math.min(0, 5, 8, 9);
console.log(maxNum); 
console.log(minNum);

Output:

30
0

4. Math.pow()

The Math.pow() function in JavaScript allows you to raise a number to the power of another number.

It’s like multiplying a number by itself multiple times.

For example:

let base = 10;
let exponent = 3;
let result = Math.pow(base, exponent);
console.log(result);

Output:

1000

5. Math.sqrt()

The Math.sqrt() function helps you calculate the square root of a number. It’s like finding the value that, when multiplied by itself, gives you the original number.

let num = 64;
let squareRoot = Math.sqrt(num);
console.log(squareRoot); 

Output:

8

String Manipulation

Strings are really important in JavaScript, and the language has some built-in functions that make it easy to work with them.

Let’s check out a few of these useful functions for manipulating strings:

1. charAt()

The charAt() function returns the character at the specified index in a string.

For example:

let str = "Itsourcecode";
let char = str.charAt(1);
console.log(char);

Output:

t

2. concat()

The concat() function is used to merge two or more string or arrays. This method does not change the existing string or arrays, but instead returns a new string or new array.

For example:

let str1 = "Hi";
let str2 = "Welcome to Itsourcecode!";
let concatenatedStr = str1.concat(" ", str2);
console.log(concatenatedStr);

Output:

Hi Welcome to Itsourcecode!

3. includes()

The includes() function determines whether one string may be found within another string, returning true or false as appropriate.

For example:

let str = "It, sourcecode!";
let result = str.includes("It");
console.log(result);

Output:

true

4. indexOf()

The indexOf() function in JavaScript helps you find the first occurrence of a specific value within a string. If the value is found, it tells you the position (index). But if the value is not there, it gives you -1.

For example:

let str = "Hi, Welcome to Itsourcecode!";
let index = str.indexOf("Welcome");
console.log(index);

Output:

4

5. replace()

The replace() function in JavaScript allows you to create a new string where certain patterns are replaced with something else.

The pattern can be a specific string or a more complex pattern defined using RegExp.

Similarly, the replacement can be a plain string or a function that gets called for each match. This function gives you a lot of flexibility to modify strings in various ways.

For example:

let str = "Hi, Welcome to Itsourcecode!";
let result = str.replace("Hi", "Hello");
console.log(result)

Output:

Hello, Welcome to Itsourcecode!

6. toUpperCase() and toLowerCase()

The toUpperCase() and toLowerCase() functions in JavaScript help you change the case of a string.

The toUpperCase() function converts the string to uppercase, while the toLowerCase() function converts it to lowercase.

These functions are useful when you want to standardize the case of a string or perform case-insensitive comparisons.

For example:

let str = "Itsourcecode";
let upperCaseStr = str.toUpperCase();
let lowerCaseStr = str.toLowerCase();
console.log(upperCaseStr);
console.log(lowerCaseStr);

Output:

ITSOURCECODE
itsourcecode

Additional Useful Functions

In addition to the categories mentioned earlier, JavaScript offers many more built-in functions that serve different purposes.

Here are a few examples:

📌parseInt(): Turns a string into a integer.

📌 parseFloat(): Turns a string into a floating-point number.

📌isNaN(): Checks if a value is NaN (Not-a-Number).

📌 encodeURI() and decodeURI(): Converts and reverses Uniform Resource Identifiers (URIs).

📌 setTimeout() and setInterval(): Run a function after a specific delay or at regular intervals.

Conclusion

In conclusion, this article explores the JavaScript built-in functions.

If you’re looking to enhance your JavaScript skills, this cheat sheet offers definitions, examples, and practical information to help you master built-in functions and streamline your coding tasks.

We are hoping that this article provides you with enough information that help you understand the javascript built in functions.

You can also check out the following article:

• JavaScript call stack
• JavaScript math ceil
• JavaScript change class

Thank you for reading itsourcecoders 😊.