Learn JavaScript the right way with this beginner's cheat sheet

Table of contents

1. Fundamentals
2. Variables
3. Data Types
4. Operators
5. Functions
6. Array
7. Loops
8. If-Else
9. Strings
10. Regular Expression
11. Data Transformation
12. Dealing with Dates in JavaScript
13. Document Object Model (DOM) in JavaScript
14. JavaScript Numbers & Math
15. Events
16. Error
17. Working With Browser

1. JavaScript Fundamentals

Here are the basics on how to add JavaScript to your website.

• In HTML code, JavaScript is written as follows:

Adding JavaScript code to an HTML page requires it to be enclosed within the <script> tag as shown below:

<script type = "text/javascript">//JavaScript coding can be done inside this tag</script>

Using this input, the browser can correctly identify and execute the code.

• Including external JavaScript files in an HTML file:

It is also possible to create a separate JavaScript file and include it within our HTML file.

Keeping different types of code separate will result in better-organized files, and different kinds of codes can be kept isolated from one another.

We can, for example, include our JavaScript code in our HTML file in the following manner if our JavaScript code is in the file script.js:

<script src="script.js"></script>

• Including Comments:

Leaving comments in your code helps other people understand what you're doing or reminds you if you've forgotten something.
Note: To prevent the browser from trying to execute them, they must be properly marked.

In JavaScript you have two different options:

Single-line comments Whenever you want to include a comment that is limited to a single line, precede it with //
Multi-line comments If you want to include a long comment between several lines, wrap it in /* and */ to avoid it being executed

2. JavaScript Variables

JavaScript variables are simply storage locations named by their names.

Thus, we can use them in our JavaScript codes as stand-in values through which we can perform various operations.

There are three ways to use variables in JavaScript:
var The most common variable. It can be reassigned but only accessed within a function. with var move to the top when the code is executed.

var x = 140; //  variable x can be reassigned a new value and also redeclared

const Cannot be reassigned and are not accessible until they appear in a program.

const x = 5; // variable x cannot be reassigned a new value or redeclared

let Like const, the let variable can be reassigned but not re-declared.

let x = 202; // variable x cannot be redeclared but can be reassigned a new value

3. JavaScript Data Types

Variables in JavaScript can store a variety of values and data. You use the equals to "=" operator to assign values to JavaScript variables. JavaScript has the following data types:

• Numbers: These can either be real numbers or integers.

var id = 50

• Variables: Unlike a fixed value, a variable data type does not have a fixed value.

var x

• Text (strings): Strings are the most basic types of JavaScript data.

var demoString = "Hello! World"

• Operations: JavaScript variables can be assigned operations.

var mul = 10*9

• Boolean Values:True or false are the only two types of Boolean values.

var booleanValue = true

• Constant numbers: These data types have a constant value.const

l = 8.8

• JavaScript objects: These are containers for properties that have names. JavaScript objects have methods and members.

var name = {name:"Jon Snow", id:"AS123"}

4. JavaScript Operators

Having variables allows you to perform various types of operations on them. Operators allow you to do this.

There are 4 types of Operators

• Fundamental Operators:

• Bitwise Operators:

• Comparison Operators:

• Logical Operators:

5. JavaScript Functions

The JavaScript function is a block of code that performs a particular task. They look like this:

function nameOfTheFunction(parameterOne, parameterTwo, parameterThree, parameterFour,....,parameterN) {   // Job or Task of the function }

• Function for outputting dataFunctions are commonly used to output data. There are several options for the output:

• Global FunctionsGlobal functions are functions built into every browser capable of running JavaScript.

6. JavaScript Arrays

An array is a special variable, which can hold more than one value:

const cars = ["Saab", "Volvo", "BMW"];

• Array Methods:

Which can be used to perform various types of operations.

An array is a special variable, which can hold more than one value:

const cars = ["Saab", "Volvo", "BMW"];

7. JavaScript Loops

Almost all programming languages include loops. It allows you to run blocks of code indefinitely with different values:

• for loop: JavaScript's most common method for creating loops.

for (initialization of the loop variable; condition checking for the loop; updation after the loop) {   // code to be executed in loop}

• while loop: Determines when a loop should run. // Initialization of the loop variable is done before the while loop begins

while(condition checking for the loop){// 1. code to be executed in loop// 2. updation of the loop variable}

• do-while loop: Similar to the while loop, it runs at least once and checks whether there is a condition to run it again at the end. // Initialization of the loop variable is done before the do-while loop begins

do{// 1. code to be executed in loop// 2. updation of the loop variable}while(condition checking for the loop);

When it comes to loops, there are two important statements:

Continue statement: If certain conditions are met, skip sections of the loop.
break statement: Exit the cycle when a specified condition is met.

8. JavaScript If-Else

If-else is used in JavaScript to execute a block of codes conditionally. These are used to set conditions for your code block to run. There are situations where certain blocks of code are executed, and there are situations where they are not.

if (condition){   // Executes this block if   // condition is true}else{   // Executes this block if   // condition is false}

9. JavaScript Strings

In JavaScript, strings are used to represent text that does not perform a function but can be displayed.

var Name = "John Cena";

In this case, John Cena is the string.

The following are all the escape sequences in JavaScript, as well as methods that JavaScript provides for strings:

• Escape CharactersUsing single or double quotes, strings are marked in JavaScript. Special characters are needed for quotation marks in a string:

• String methods: Strings can be worked with in many different ways:

10. JavaScript Regular Expression

Strings can be matched by regular expressions, which are search patterns. They can be used for text search and text replacement.

• Pattern Modifiers

• Brackets

• Metacharacters

• Quantifiers

11. Data Transformation

'Data transformation' is the conversion of one format to another. Using higher-order JavaScript functions, you can transform data by taking two or more functions as inputs and returning a function as a consequence. Map(), filter(), and reduce() are all higher-order functions that take a function as input.

• Map()By calling a specific function on each element of a parent array, JavaScript's map() method creates an array. Iterating over an array and calling functions on every element is accomplished using

map(), a non-mutating method.var arr = [10,20,30];var triple  = arr.map(x => x * 3);triple; // [30,60,90]

• filter()With arr.filter(), a new array is generated that consists only of those elements in a given array that meet a given set of conditions and criteria.

var arr = [13,40,47];var odd = arr.filter(x => x % 2);odd; // [13,47]

• Reduce()When used in JavaScript, the arr.reduce() method reduces a given array to a single value by running a function provided for each value (from left-to-right), and storing the output in an accumulator.

var arr = [10,20,30];var counter = 0;let answer = arr.reduce((accumulator, value) => value + accumulator, counter);console.log(answer) // answer = 10 + 20 + 30 = 60

12. Dealing with Dates in JavaScript

Dealing with Dates in JavaScript
You can also work with and modify dates and time with JavaScript. This is the next chapter in the JavaScript cheat sheet.

• Setting Dates

• Pulling Date and Time Values

• Set Part of a Date

13. Document Object Model (DOM) in JavaScript

A website's code is organized into Document Object Models (DOMs). JavaScript allows you to build and alter HTML elements (called nodes) in many different ways.

• Node Properties

• Node Methods

• Element Methods

14. JavaScript Numbers & Math

Mathematical functions and constants can also be performed in JavaScript.

• Number Properties

• Number Methods

• Math Properties

• Math Methods

15. JavaScript Events

Events are things that can happen to HTML elements and are performed by the user. The programming language can listen for these events and trigger actions in the code. No JavaScript cheat sheet would be complete without them.

• Mouse

• Keyboard

• Frame

• Form

• Drag

• Clipboard

• Media

• Animation

• Other

16. JavaScript Errors

When working with JavaScript, different errors can occur. There are several ways of handling them:

• Error Name Values

JavaScript also has a built-in error object. It has two properties:

The error property can return six different values as its name:

17. JavaScript Working With Browser

Besides HTML elements, JavaScript is also able to take into account the user browser and incorporate its properties into the code.

• Window Properties

• Window Methods

• Screen Properties