Ready to learn JavaScript quickly?

If yes, then you need this JavaScript cheat sheet. It covers the basics of
JavaScript in a clear, concise, and beginner-friendly way.

Use it as a reference or a guide to improve your JavaScript skills.

Let’s dive in.

What Is JavaScript?
JavaScript (JS) is a programming language primarily used for web development.

It allows developers to add interactivity and dynamic behavior to websites.

For example, you can use JavaScript to create interactive forms that validate
users’ inputs in real time. Making error messages pop up as soon as users make
mistakes.

Like this:

An interactive sign-in form on Semrush

JavaScript can also be used to enable features like accordions that expand and
collapse content sections.

Here’s one example with the “SEO” section expanded:

“SEO” section expanded on Semrush's site

In the example above, clicking on each element in the series shows different
content.

JavaScript makes this possible by manipulating the HTML and CSS of the page in real
time.

JavaScript is also extremely useful in web-based applications like Gmail.

When you receive new emails in your Gmail inbox, JavaScript is responsible for
updating the inbox and notifying you of new messages without the need for manually
refreshing.

New emails in Gmail inbox

So, in other words:

JavaScript empowers web developers to craft rich user experiences on the internet.

Understanding the Code Structure

To leverage JavaScript effectively, it's crucial to understand its code structure.

JavaScript code often sits in your webpages’ HTML.

It’s embedded using the <script> tags.

<script>
// Your JavaScript code goes here
</script>
You can also link to external JavaScript files using the src attribute within the
<script> tag.

This approach is preferred for larger JavaScript codebases. Because it keeps your
HTML clean and separates the code logic from the page content.
<script src="mycode.js"></script>
Now, let's explore the essential components that you can use in your JavaScript
code.

List of JavaScript Components (Cheat Sheet Included)

Below, you’ll find the most essential components used in JavaScript.

As you become more familiar with these building blocks, you'll have the tools to
create engaging and user-friendly websites.

(Here’s the cheat sheet, which you can download and keep as a handy reference for
all these components. )

Variables
Variables are containers that store some value. That value can be of any data type,
such as strings (meaning text) or numbers.

There are three keywords for declaring (i.e., creating) variables in JavaScript:
“var,” “let,” and “const.”

var Keyword
“var” is a keyword used to tell JavaScript to make a new variable.

After we make a variable with “var,” it works like a container to store things.

Consider the following example.

var name = "Adam";

Here, we’ve created a variable called “name” and put the value “Adam” in it.

This value is usable. Meaning we can use the variable "name" to get the value
"Adam" whenever we need it in our code.

For example, we can write:

var name = "Adam";

console.log("Hello, " + name);
This means the second line will show “Hello, Adam” in your console (a message
window for checking the output of your program).

Values in the variables created using the keyword var can be changed. You can
modify them later in your code.

Here’s an example to illustrate this point:

var name = "Adam";

name = "John";
console.log("Hello, " + name);
First, we’ve put “Adam” in the “name” variable. Later, we changed the value of the
same variable to “John.” This means that when we run this program, the output we
will see in the console is “Hello, John.”

But, remember one thing:

In modern JavaScript, people often prefer using “let” and “const” keywords (more on
those in a moment) over “var.” Because “let” and “const” provide improved scoping
rules.
let Keyword
An alternative to “var,” “let” is another keyword for creating variables in
JavaScript.

Like this:

let name = "Adam";

Now, we can use the variable “name” in our program to show the value it stores.

For example:

let name = "Adam";

console.log("Hello, " + name);
This program will display "Hello, Adam" in the console when you run it.

If you want to override the value your variable stores, you can do that like this:

var name = "Adam";

name = "Steve";
console.log("Hello, " + name);
const Keyword
“const” is similar to “let,” but declares a fixed variable.

Which means:

Once you enter a value in it, you can't change it later.

Using “const” for things like numeric values helps prevent bugs by avoiding
unintended changes later in code.

“const” also makes the intent clear. Other developers can see at a glance which
variables are meant to remain unchanged.

For example:

let name = "Adam";

const age = 30;
Using “const” for "age" in this example helps prevent unintentional changes to a
person's age.

It also makes it clear to other developers that "age" is meant to remain constant
throughout the code.

Operators
Operators are symbols that perform operations on variables.

Imagine you have some numbers and you want to do math with them, like adding,
subtracting, or comparing them.

In JavaScript, we use special symbols to do this, and these are called operators.
The main types of operators are:

Arithmetic Operators
Arithmetic operators are used to perform mathematical calculations on numbers.
These include:

Operator Name

Symbol
Description

“Addition” operator

The “addition” operator adds numbers together

“Subtraction” operator

The “subtraction” operator subtracts the right-hand value from the left-hand value

“Multiplication” operator

The “multiplication” operator multiplies numbers together

“Division” operator

The “division” operator divides the left-hand number by the right-hand number

“Modulus” operator

The “modulus” operator returns a remainder after division

Let’s put all of these operators to use and write a basic program:

let a = 10;
let b = 3;
let c = a + b;
console.log("c");
let d = a - b;
console.log("d");
let e = a * b;
console.log("e");
let f = a / b;
console.log("f");
let g = a % b;
console.log("g");
Here's what this program does:

It sets two variables, “a” and “b,” to 10 and 3, respectively

Then, it uses the arithmetic operators:
“+” to add the value of “a” and “b”
“-” to subtract the value of “b” from “a”
“*” to multiply the value of “a” and “b”
“/” to divide the value of “a” by “b”
“%” to find the remainder when “a” is divided by “b”
It displays the results of each arithmetic operation using “console.log()”
Comparison Operators
Comparison operators compare two values and return a boolean result—i.e., either
true or false.

They’re essential for writing conditional logic in JavaScript.

The main comparison operators are:

Operator Name

Symbol

Description

“Equality” operator

==

Compares if two values are equal, regardless of data type. For example, “5 == 5.0”
would return “true” even though the first value is an integer and the other is a
floating-point number (a numeric value with decimal places) with the same numeric
value.

“Strict equality” operator

===

Compares if two values are equal, including the data type. For example, “5 === 5.0”
would return “false” because the first value is an integer and the other is a
floating-point number, which is a different data type.

“Inequality” operator

!=

Checks if two values are not equal. It doesn’t matter what type of values they are.
For example, “5 != 10” would return “true” because 5 does not equal 10.

“Strict inequality” operator

!==

Checks if two values are not equal, including the data type. For example, “5 !==
5.0” would return “true” because the first value is an integer and the other is a
floating-point number, which is a different data type.

“Greater than” operator

>

Checks if the left value is greater than the right value. For example, “10 > 5”
returns “true.”

“Less than” operator

<

Checks if the left value is less than the right value. For example, “5 < 10”
returns “true.”

“Greater than or equal to” operator

>=

Checks if the left value is greater than or equal to the right value. For example,
“10 >= 5” returns “true.”

“Less than or equal to” operator

<=

Checks if the left value is less than or equal to the right value. For example, “5
<= 10” returns “true.”

Let’s use all these operators and write a basic JS program to better understand how
they work:

let a = 5;
let b = 5.0;
let c = 10;
if (a == b) {
console.log('true');
} else {
console.log('false');
}
if (a === b) {
console.log('true');
} else {
console.log('false');
}
if (a != c) {
console.log('true');
} else {
console.log('false');
}
if (a !== b) {
console.log('true');
} else {
console.log('false');
}
if (c > a) {
console.log('true');
} else {
console.log('false');
}
if (a < c) {
console.log('true');
} else {
console.log('false');
}
if (c >= a) {
console.log('true');
} else {
console.log('false');
}
if (a <= c) {
console.log('true');
} else {
console.log('false');
}
Here’s what this program does:

It sets three variables: “a” with a value of 5, “b” with a value of 5.0 (a
floating-point number), and “c” with a value of 10
It uses the “==” operator to compare “a” and “b.” Since “a” and “b” have the same
numeric value (5), it returns "true."
It uses the “===” operator to compare “a” and “b.” This time, it checks not only
the value but also the data type. Although the values are the same, “a” is an
integer and “b” is a floating-point number. So, it returns "false."
It uses the “!=” operator to compare “a” and “c.” As “a” and “c” have different
values, it returns "true."
It uses the “!==” operator to compare “a” and “b.” Again, it considers the data
type, and since “a” and “b” are of different types (integer and floating-point), it
returns "true."
It uses the “>” operator to compare “c” and “a.” Since “c” is greater than “a,” it
returns "true."
It uses the “<” operator to compare “a” and “c.” As “a” is indeed less than “c,” it
returns "true."
It uses the “>=” operator to compare “c” and “a.” Since c is greater than or equal
to a, it returns "true."
It uses the “<=” operator to compare “a” and “c.” As “a” is less than or equal to
“c,” it returns "true."
In short, this program uses the various comparison operators to make decisions
based on the values of variables “a,” “b,” and “c.”

You can see how each operator compares these values and determines whether the
conditions specified in the if statements are met. Leading to different console
outputs.

Logical Operators
Logical operators allow you to perform logical operations with values.

These operators are typically used to make decisions in your code, control program
flow, and create conditions for executing specific blocks of code.

There are three main logical operators in JavaScript:

Operator Name

Symbol

Description

“Logical AND” operator

&&

The “logical AND” operator is used to combine two or more conditions. It returns
“true” only if all the conditions are true.

“Logical OR” operator

| |

The “logical OR” operator is used to combine multiple conditions. And it returns
“true” if at least one of the conditions is true. If all conditions are false, the
result will be “false.”

“Logical NOT” operator

!

The “logical NOT” operator is used to reverse the logical state of a single
condition. If a condition is true, “!” makes it “false.” And if a condition is
false, “!” makes it “true.”

To better understand each of these operators, let’s consider the examples below.

First, a “&&” (logical AND) operator example:

let age = 25;

let hasDriverLicense = true;
if (age >= 18 && hasDriverLicense) {
console.log("You can drive!");
} else {
console.log("You cannot drive.");
}
In this example, the code checks if the age is greater than or equal to 18 and if
the person has a driver's license. Since both conditions are true, its output is
"You can drive!"

Second, a “| |” (logical OR) operator example:

let isSunny = true;

let isWarm = true;
if (isSunny || isWarm) {
console.log("It's a great day!");
} else {
console.log("Not a great day.");
}
In this example, the code outputs "It's a great day!" because one or both of the
conditions hold true.

And third, a “!” (logical NOT) operator example:

let isRaining = true;

if (!isRaining) {
console.log("It's not raining. You can go outside!");
} else {
console.log("It's raining. Stay indoors.");
}
Here, the “!” operator inverts the value of isRaining from true to false.

So, the “if” condition “!isRaining” evaluates to false. Which means the code in the
else block runs, returning "It's raining. Stay indoors."

Assignment Operators:
Assignment operators are used to assign values to variables. The standard
assignment operator is the equals sign (=). But there are other options as well.

Here’s the complete list:

Operator Name

Symbol

Description
“Basic assignment” operator

The “basic assignment” operator is used to assign a value to a variable

“Addition assignment” operator

+=

This operator adds a value to the variable's current value and assigns the result
to the variable

“Subtraction assignment” operator

-=

This operator subtracts a value from the variable's current value and assigns the
result to the variable

“Multiplication assignment” operator

*=

This operator multiplies the variable's current value by a specified value and
assigns the result to the variable

“Division assignment” operator

/=

This operator divides the variable's current value by a specified value and assigns
the result to the variable

Let’s understand these operators with the help of some code:

let x = 10;
x += 5;
console.log("After addition: x = ", x);
x -= 3;
console.log("After subtraction: x = ", x);
x *= 4;
console.log("After multiplication: x = ", x);
x /= 6;
console.log("After division: x = ", x);
In the code above, we create a variable called “x” and set it equal to 10. Then, we
use various assignment operators to modify its value:

“x += 5;” adds 5 to the current value of “x” and assigns the result back to “x.”
So, after this operation, “x” becomes 15.
“x -= 3;” subtracts 3 from the current value of “x” and assigns the result back to
“x.” After this operation, “x” becomes 12.
“x *= 4;” multiplies the current value of “x” by 4 and assigns the result back to
“x.” So, “x” becomes 48.
“x /= 6;” divides the current value of “x” by 6 and assigns the result back to “x.”
After this operation, “x” becomes 8.
At each operation, the code prints the updated values of “x” to the console.

if-else
The “if-else” statement is a conditional statement that allows you to execute
different blocks of code based on a condition.

It’s used to make decisions in your code by specifying what should happen when a
particular condition is true. And what should happen when it’s false.

Here's an example to illustrate how “if-else” works:

let age = 21;

if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
In this example, the “age” variable is compared to 18 using the “>=” operator.

Since “age >= 18” is true, the message "You are an adult." is displayed. But if it
weren’t, the message "You are a minor." would’ve been displayed.

Loops
Loops are programming constructs that allow you to repeatedly execute a block of
code as long as a specified condition is met.

They’re essential for automating repetitive tasks.

JavaScript provides several types of loops, including:

for Loop
A “for” loop is a loop that specifies "do this a specific number of times."

It's well-structured and has three essential components: initialization, condition,

and increment. This makes it a powerful tool for executing a block of code a
predetermined number of times.

Here's the basic structure of a “for” loop:

for (initialization; condition; increment) {

// Code to be executed as long as the condition is true
}
The loop starts with the initialization (this is where you set up the loop by
giving it a starting point), then checks the condition, and executes the code block
if the condition is true.

After each iteration, the increment is applied, and the condition is checked again.

The loop ends when the condition becomes false.

For example, if you want to count from 1 to 10 using a “for” loop, here’s how you
would do it:

for (let i = 1; i <= 10; i++) {

console.log(i);
}
In this example:

The initialization part sets up a variable “i” to start at 1

The loop keeps running as long as the condition (in this case, “i <= 10”) is true
Inside the loop, it logs the value of “i” using “console.log(i)”
After each run of the loop, the increment part, “i++”, adds 1 to the value of “i”
Here's what the output will look like when you run this code:
1
2
3
4
5
6
7
8
9
10
As you can see, the “for” loop starts with “i” at 1. And incrementally increases it
by 1 in each iteration.

It continues until “i” reaches 10 because the condition “i <= 10” is satisfied.

The “console.log(i)” statement prints the current value of “i” during each
iteration. And that results in the numbers from 1 to 10 being displayed in the
console.

while Loop
A “while” loop is a loop that indicates "keep doing this as long as something is
true."

It's a bit different from the “for” loop because it doesn't have an initialization,
condition, and increment all bundled together. Instead, you write the condition and
then put your code block inside the loop.

For example, if you want to count from 1 to 10 using a “while” loop, here’s how you
would do it:

let i = 1;
while (i <= 10) {
console.log(i);
i++;
}
In this example:

You initialize “i” to 1

The loop keeps running as long as “i” is less than or equal to 10
Inside the loop, it logs the value of “i” using “console.log(i)”
“i” incrementally increases by 1 after each run of the loop
The output of this code will be:

1
2
3
4
5
6
7
8
9
10
So, with both “for” and “while” loops, you have the tools to repeat tasks and
automate your code