SDVSDC
SDVSDC
SDVSDC
If yes, then you need this JavaScript cheat sheet. It covers the basics of
JavaScript in a clear, concise, and beginner-friendly way.
What Is JavaScript?
JavaScript (JS) is a programming language primarily used for web development.
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:
JavaScript makes this possible by manipulating the HTML and CSS of the page in real
time.
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.
JavaScript empowers web developers to craft rich user experiences on the internet.
<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.
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.
This value is usable. Meaning we can use the variable "name" to get the value
"Adam" whenever we need it in our code.
Values in the variables created using the keyword var can be changed. You can
modify them later in your code.
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:
For example:
If you want to override the value your variable stores, you can do that like this:
Which means:
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:
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
“Subtraction” operator
The “subtraction” operator subtracts the right-hand value from the left-hand value
“Multiplication” operator
“Division” operator
The “division” operator divides the left-hand number by the right-hand number
“Modulus” operator
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:
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.
===
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.
!==
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.
>
Checks if the left value is greater than the right value. For example, “10 > 5”
returns “true.”
<
Checks if the left value is less than the right value. For example, “5 < 10”
returns “true.”
Checks if the left value is greater than or equal to the right value. For example,
“10 >= 5” returns “true.”
<=
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.
Operator Name
Symbol
Description
&&
The “logical AND” operator is used to combine two or more conditions. It returns
“true” only if all the conditions are true.
| |
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.”
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.
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.
Operator Name
Symbol
Description
“Basic assignment” operator
+=
This operator adds a value to the variable's current value and assigns the result
to the variable
-=
This operator subtracts a value from the variable's current value and assigns the
result to the variable
*=
This operator multiplies the variable's current value by a specified value and
assigns the result to the variable
/=
This operator divides the variable's current value by a specified value and assigns
the result to the variable
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.
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.
for Loop
A “for” loop is a loop that specifies "do this a specific number of times."
After each iteration, the increment is applied, and the condition is checked again.
For example, if you want to count from 1 to 10 using a “for” loop, here’s how you
would do it:
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:
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