Yayan Kurnia Akbar - Wednesday, 5 March 2025 - 9 months ago

Learning JavaScript Basics Part 2

Let’s continue our learn JavaScript Basics Part 2. This article is a continuation of the JavaScript Basics series, which is part of the Fundamental JavaScript Learning series. This series is designed and tailored for beginners or those who intend to learn JavaScript

JavaScript can also serve as a foundation for understanding other programming languages.

In this part of the series, we will discuss Comments and Operators. In Indonesian, Comments are referred to as “komentar,” while Operators are used to perform operations. For more details, let’s dive into the explanation below:

JavaScript Comments

JavaScript Comments are used to write explanations about the script we create, making it easier to read and understand for others. Even we, as developers, sometimes forget the purpose of the code we wrote, so writing comments is highly important.

// Konversi Suhu dari Celcius ke Reamur
function cToR(Celcius) {
    return 4/5 * Celcius;
}


// Konversi Suhu dari Celcius ke Fahrenheit
function cToF(Celcius) {
    return 9/5 * Celcius + 32;
}


// contoh penggunaan
let R = cToR(5);
console.log(R); // output : 4

Additionally, Comments can be used to disable commands we have written. For example, when testing, we might want to modify a command but don’t want to delete it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>greet</title>
  </head>
  <body>
    <h1 id="title">Selamat Datang</h1>
    <p>Mari kita sambut perubahan dengan semangat dan kerja keras</p>
    <script>
      // document.getElementById("title").style.display = "none";
      // document.getElementsByTagName("p")[0].style.display = "none";
    </script>
  </body>
</html>

Rewrite the code above and run it in the browser, then observe what happens. The next step is to remove the // at the beginning of the command and observe again. Please conclude the experiment we have conducted (Trial and Error is the most effective way to learn a programming language)

JavaScript Comments can be created using two symbols :

Single Line Comments Single Line Comments start with //. Any text on the same line as // will not be executed by JavaScript, as demonstrated above.
Multi-Line Comments Multi-Line Comments start with /* and end with */. Any text within these markers will not be executed by JavaScript. See the following example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>greet</title>
  </head>
  <body>
    <h1 id="title">Selamat Datang</h1>
    <p>Mari kita sambut perubahan dengan semangat dan kerja keras</p>
    <script>
      /* Tulisan dan script ini tidak akan dieksekusi oleh javaScript
      document.getElementById("title").style.display = "none";
      document.getElementsByTagName("p")[0].style.display = "none"; */
      document.getElementById(
        "title"
      ).innerHTML = "Welcome";
    </script>
  </body>
</html>

JavaScript Operators

Just like in other programming languages, JavaScript has several types of operators that we use to execute commands in a program.

1. Assignment Operator

The assignment operator (=) is used to assign a value to a variable.

var ayah = "Budi";
var ibu = "Wati";
console.log("Oh "+ibu+" dan "+ayah+" selamat pagi");

In addition to the = symbol, there are several combined Assignment Operators that we will frequently use, namely :

Operator	Example of Usage	Value is equal to
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

2. Arithmetic Operator

Arithmetic Operator is an operator used to perform arithmetic operations on numbers in JavaScript. Take a look at the table below :

Operator	Description
+	Penjumlahan
–	Pengurangan
*	Perkalian
/	Pembagian
%	Modulus (Sisa hasil bagi)
++	Penambahan dengan angka 1
—	Pengurangan dengan angka 1

var a=2, b=3, c=5;
console.log(a+b); // 5
console.log(a-b); // -1
console.log(a/b); // 0.6666
console.log(a*b); // 6
console.log(c%a); // 1
console.log(++c); // 6
console.log(b++); // 3
console.log(--b); // 3

Take another look at the example above. If you carefully examine the script, you will notice an increment (++) placed before and after the variable. Will this script produce the same result?

Generally, both will add 1 to the variable, but the difference lies in the execution process.

a++ executes the statement first and then increments the value by 1. ++a increments the value by 1 first and then executes the statement.

3. Logical Operator

Logical operators are used to perform logical operations, requiring at least one or more inputs that result in either true or false.

What is a basic logic gate? To understand and recognize basic logic gates, please refer to the “Logic Gates” article available on this blog. Once you understand it, let’s explore the logical operators used in JavaScript.

Operator	Description
&&	logical and (Operator Logika AND/dan)
\|\|	logical or (Operartor Logika OR/atau)
!	logical not (Operator Logika NOT/tidak)

Example Usage :

var a = 3, b = 4;
console.log(!(a>3) && b==4);
console.log(a>1 || !(b<4));
console.log(!(a>3) || !(b>4));
console.log(!(a>0 || b<0));
console.log(!(a+b<0 && a-b >0));

Let’s try to guess the output of the above script and then run it in our browser console. If you’re still confused about this topic, feel free to discuss it with me in the comment section

4. Comparison Operator

Comparison operators are used to compare at least two statements. In everyday life, we often encounter comparison cases. For example, a question like this might arise : Is the price of a sedan car equal to the price of 10 motorcycles?

We cannot answer that question yet because we do not know the price or type of car/motorcycle mentioned in the question. Here, we can conclude that our statement is not specific or detailed enough, or that some required input is missing. Let’s clarify our statement. Given that the price of a sedan car is Rp 100,000,000 and the price of a motorcycle is Rp 20,000,000, now let’s restate the question.

Is the price of a sedan car equal to the price of 10 motorcycles? From this, we can easily conclude that the price of a sedan car is not the same as or equivalent to the price of 10 motorcycles. From the example above, we learn that to reach a conclusion from a statement, clear inputs and premises are required.

Similarly, in computer logic, computers are not designed to solve problems based on intuition or guesses. They only execute what we command and instruct them to do, so it is clear that we are required to provide clear arguments. Take a look at the following example :

var panjang = 10, lebar = 20;
var luas = p*l;
console.log(luas);

Before running the script above in the browser, try to guess what output the script will produce. Feel free to share your simple analysis in the comments section.

After understanding the series of statements and examples above, let’s take a look at the comparison operators used in JavaScript.

Operator	Description	Example (a=4, b=3)	Output
==	Equal in value	a==b	False
===	Equal in value and type	a === b	False
!=	Not equal in value	a != b	True
!==	Not equal in both value and type	a !== b	True
>	Greater than	a > b	True
<	Less than	a < b	False
>=	Greater than or equal to	a >= b	True
<=	Less than or equal to	a <= b	False
?	Ternary Operator (A simplified form of conditional branching)	a == b ? ‘Value A is equal to B’ : ‘Value A is not equal to B’	Value A is not equal to B

5. String Operator

A String Operator is an operator used to concatenate at least two strings. To concatenate strings, we can use the + and += operators. Given text1 = “Good “, text2 = “Morning”, and text3 = “”, observe the string concatenation table below.

Operator	Example	text1	text2	text3
+	text3 = text1 + text2	“Good “	“Morning”	“Good Morning”
+=	text1 += text2	“Good Morning”	“Morning”	“”

That concludes the brief explanation of Comments and Operators in JavaScript. In fact, there are still some JavaScript operators that we haven’t mentioned. Hopefully, this short explanation makes it easier for us to understand the basics of JavaScript.

Keep learning and stay motivated! ^_^

Source : w3schools.com

Read Also :

Link Copied to Clipboard