Tutorial Operator, Conditional Statement and Loops Javascript for Beginners

After knowing what variables and data types are in Javascript, the next tutorial is about operators, conditional statements, and loops. All three are basic techniques that must be understood by a programmer.

Operator Javascript

What is the operator?

An operator is a symbol used to perform operations on value and variable. Also, operators are fundamental logic and arithmetic that must be understood in all programming languages. Javascript itself has some basic rules for using operators.

Operators in Javascript programming are divided into 6 types:

Arithmetic operators.
Assignment operator.
Relational operator or comparison.
Logic Operators.
Bitwise operator.
Ternary operators.

Arithmetic Operators in Javascript

Arithmetic operators are operators to carry out arithmetic operations such as addition, subtraction, division, multiplication, etc.

The arithmetic operator consists of:

Operator Name	Symbol
Addition	+
Reduction	–
Multiplication	*
Appointment	**
Division	/
Remaining Share	%
Increment	++
Decrement	—

Example:

        let a = 5;
        let b = 15;
        let c = 0;
        // addition
        c = a+b
        document.write(`${a} + ${b} = ${c}<br/>`);
        // Subtraction
        c = a - b;
        document.write(`${a} - ${b} = ${c}<br/>`);
        // Multiplication
        c = a * b;
        document.write(`${a} * ${b} = ${c}<br/>`);
        // Exponentiation
        c = a ** b;
        document.write(`${a} ** ${b} = ${c}<br/>`);
        // Division
        c = a / b;
        document.write(`${a} / ${b} = ${c}<br/>`);
        // Modulus
        c = a % b;
        document.write(`${a} % ${b} = ${c}<br/>`);

let a = 5;

let b = 15;

let c = 0;

// addition

c = a+b

document.write(`${a} + ${b} = ${c} `);

// Subtraction

c = a - b;

document.write(`${a} - ${b} = ${c} `);

// Multiplication

c = a * b;

document.write(`${a} * ${b} = ${c} `);

// Exponentiation

c = a ** b;

document.write(`${a} ** ${b} = ${c} `);

// Division

c = a / b;

document.write(`${a} / ${b} = ${c} `);

// Modulus

c = a % b;

document.write(`${a} % ${b} = ${c} `);

Javascript Assignment Operator

The assignment operator is an operator used to give orders to variables and usually used to fill variables.

Example:

let x =23;

1	let x =23;

We give an assignment variable x to store value 23. The assignment operator consists of:

Operator Name	Symbol
Charging Value	=
Filling and Addition	+=
Charging and Reduction	-=
Filling and Multiplication	*=
Filling and Lifting	**=
Filling and Distribution	/=
Charging and Modulus	%=

Assignment operators are the same as arithmetic operators. It’s used for arithmetic operations. The assignment operator is usually used to speed up typing the application code.

Example:

let countArticle = 3
countArticle += 1
console.log(countArticle) // result : 4

let countArticle = 3

countArticle += 1

console.log(countArticle) // result : 4

Javascript Comparison Operator

A comparison operator is an operator used to compare two values. The comparison operator produce a true and false boolean value.

Operator Name	Symbol
Greater than	>
less than	<
equal to / equal value and equal type	== or ===
not equal / not equal value or not equal type	!= or !==
greater than or equal to	>=
less than or equal to	<=

Example:

        let a = 13;
        let b = 15;
        // equal to
        let result = a == b;
        document.write(`${a} == ${b} = ${result}<br/>`);
        // greater than
         result = a > b;
        document.write(`${a} > ${b} = ${result}<br/>`);
        // greater than or equal ton
         result = a >= b;
        document.write(`${a} >= ${b} = ${result}<br/>`);
        // less than
         result = a < b;
        document.write(`${a} < ${b} = ${result}<br/>`);
        // less than or equal to
         result = a <= b;
        document.write(`${a} <= ${b} = ${result}<br/>`);
        // not equal
         result = a != b;
        document.write(`${a} != ${b} = ${result}<br/>`);

let a = 13;

let b = 15;

// equal to

let result = a == b;

document.write(`${a} == ${b} = ${result} `);

// greater than

result = a > b;

document.write(`${a} > ${b} = ${result} `);

// greater than or equal ton

result = a >= b;

document.write(`${a} >= ${b} = ${result} `);

// less than

result = a < b;

document.write(`${a} < ${b} = ${result} `);

// less than or equal to

result = a <= b;

document.write(`${a} <= ${b} = ${result} `);

// not equal

result = a != b;

document.write(`${a} != ${b} = ${result} `);

Logical Operator in Javascript

Logical operators used to carry out operations on two boolean values.

Logical And	&&
Logical Or	\|\|
Logical Not	!

Example:

let a = 20
let b = 19
let right = a &gt; b
let wrong = a &lt; b
// operator &amp;&amp; (and)
let hasil = right &amp;&amp; wrong
document.write(`${right} &amp;&amp; ${wrong} = ${hasil}&lt;br/&gt;`)
// operator || (or)
hasil = right || wrong
document.write(`${right} || ${wrong} = ${hasil}&lt;br/&gt;`)
// operator ! (not)
hasil = !right
document.write(`!${right} = ${hasil}&lt;br/&gt;`)

let a = 20

let b = 19

let right = a > b

let wrong = a < b

// operator && (and)

let hasil = right && wrong

document.write(`${right} && ${wrong} = ${hasil} `)

// operator || (or)

hasil = right || wrong

document.write(`${right} || ${wrong} = ${hasil} `)

// operator ! (not)

hasil = !right

document.write(`!${right} = ${hasil} `)

Javascript Bitwise Operator

The bitwise operator is an operator used for operations based on bits.

Because this operator rarely used, I will go through this section.

Ternary Javascript Operators

Ternary is a conditional operator and the operator that only requires three operators. This worker often used as a shortcut for if statement.

Example:

let expr1 = 20;
let expr2 = 5 ;
let result = expr1 &lt; expr2 ? " expr1 less than expr2" : " expr1 greater than expr2"
console.log(result)

let expr1 = 20;

let expr2 = 5 ;

let result = expr1 < expr2 ? " expr1 less than expr2" : " expr1 greater than expr2"

console.log(result)

If the condition returns true, then this operator returns the value from expr1, and if it is the opposite, this will return the value from expr2.

Conditional Statements Javascript

What are Conditional statements?

A conditional statement is a choice between two or more choices. In programming languages, we recognize if-else. Consider the following example:

If(5 &lt; 6){
Console.log(true)
}else{
Console.log(false)
}

If(5 < 6){

Console.log(true)

}else{

Console.log(false)

}

In the example above, if the value 5 is smaller than 6, it returns true. Conditional statements make the program think and determine the actions we expect by the logic/conditions we provide.

Various types of Javascript conditional statements

IF Statement

Conditional statement that has only one selection block and will be executed when the condition is true.

Example:

Let score = 100
If( score &gt; 90){
Console.log(‘You’re great)
}

Let score = 100

If( score > 90){

Console.log(‘You’re great)

}

Block code in Javascript, starting with curly brackets { } .

If in the block there is only one line of expression or statement, then it can be written without curly brackets.

IF / ELSE Statement

An if / else statement is a statement that has two choice blocks. The first choice for the right condition, and the second choice for the else condition.

Example:

Let score = 100
If( score &gt; 90){
Console.log('You re great')
}else{
Console.log('You re out of luck')
}

Let score = 100

If( score > 90){

Console.log('You re great')

}else{

Console.log('You re out of luck')

}

Else IF Statement

Conditional statements that have more than two choice blocks.

Example:

Let score = 100
if (score &gt; 80) {
console.log('you re great')
} else if (score &gt; 90) {
console.log('Savage')
} else {
console.log('you re newbie')
}

Let score = 100

if (score > 80) {

console.log('you re great')

} else if (score > 90) {

console.log('Savage')

} else {

console.log('you re newbie')

}

Statement switch case

The switch case statement is another form of else/if statements .

Usage syntax:

switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

switch(expression) {

case x:

// code block

break;

case y:

// code block

break;

default:

// code block

}

Example:

let score = 5
switch (score){
case 1 :
console.log('one')
break
case 2 :
console.log('two')
break
case 3 :
console.log('three')
break
case 4 :
console.log('for')
break
case 5 :
console.log('five')
break
default:
console.log('undefined')
}

let score = 5

switch (score){

case 1 :

console.log('one')

break

case 2 :

console.log('two')

break

case 3 :

console.log('three')

break

case 4 :

console.log('for')

break

case 5 :

console.log('five')

break

default:

console.log('undefined')

}

We can make as many code blocks as desired in the switch block. Each case must end with “break.” Especially for default, there is no need to use “break” because it’s located at the end. Giving a “break” statement aims to stop the program from checking other cases when a case fulfilled.

Nested If

The block statement in another conditional statement. This called nested if.

Example:

var user_id = prompt("Please fill in the username : ")
var pass = prompt("Please fill in the password:")
if(user_id == "seegatesite"){
if(pass == "123456"){
document.write("&lt;h2&gt;Welcome to our seegatesite.com&lt;/h2&gt;")
} else {
document.write("&lt;p&gt;Invalid password&lt;/p&gt;")
}
} else {
document.write("&lt;p&gt;You are not registered!&lt;/p&gt;")
}

var user_id = prompt("Please fill in the username : ")

var pass = prompt("Please fill in the password:")

if(user_id == "seegatesite"){

if(pass == "123456"){

document.write("<h2>Welcome to our seegatesite.com</h2>")

} else {

document.write("Invalid password")

}

} else {

document.write("You are not registered!")

}

Javascript Loops

Loops are used to run one or several statements several times. In other words, looping allows you to run several statements by merely writing the statement once.

In general, loops divided into two types namely counted loop and uncounted loop.

Counted Loop is a definite loop and has determined in length.
Uncounted Loop is a loop that is unclear how many times must repeat until it finds the goal.

There are 5 types of loops in Javascript:

Counted Loop:

For
Foreach
Repeat

Uncounted Loop :

While
Do/While

For

For is a counted loop, because it’s clear how many times you have to repeat.

for (statement 1; statement 2; statement 3) {
// executed code
}

for (statement 1; statement 2; statement 3) {

// executed code

}

Example :

for (i=1; i&lt;=10; i++) {
console.log(i);
}

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

console.log(i);

}

Explanation :

The count will start from 1 (i = 1)
Counts to i <= 10
Then in each iteration i will increase +1 (i ++)

Foreach

The foreach loop is often used to execute a collection of items in an array. This loop is included in the counted loop because the length of the array will determine the number of repetitions.

There are two ways to use foreach loops in Javascript:

– for/in

– forEach()

for/in

var lang = ["JS", "Angular", "React", "Node"]
for(i in lang){
console.log(lang[1])
}

var lang = ["JS", "Angular", "React", "Node"]

for(i in lang){

console.log(lang[1])

}

Foreach()

var months = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
days.forEach(function(month){
console.log(month);
});

var months = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];

days.forEach(function(month){

console.log(month);

});

Repeat

Loops with the repeat() function used to repeat a text (string). Repeat is shorter than for method.

Example:

console.log("Repeat this text ".repeat(50))

1	console.log("Repeat this text ".repeat(50))

Other tutorial : Tutorial Create First And Last Day Of The Current Month Javascript

While

The while loop runs the code block in the conditions specified correctly. The while loop is an uncounted loop.

Example:

while (i &lt; 10) {
console.log(i);
i++;
}

while (i < 10) {

console.log(i);

i++;

}

Example 2 :

var repeat = confirm("Repeat this code?");
var counter = 0;
while(repeat){
counter++;
repeat = confirm("Repeat again?");
}
console.log("Count of repeat : "+counter)

var repeat = confirm("Repeat this code?");

var counter = 0;

while(repeat){

counter++;

repeat = confirm("Repeat again?");

}

console.log("Count of repeat : "+counter)

Explanation of the code above:

Loops will occur as long as the repeat variable is true. While selecting the OK button on the confirmation dialog, the repeat variable continues to be true. However, when we select the Cancel button, the repeat variable be a false value, and the loop stopped.

Do While

do / while is the same as the while loop.

The difference:

The do/while loop checks the condition behind (after repeating), while loops checking the conditions in the front or the beginning (before repeating).

Example :

var i=0;
do{
console.log(i)
i++;
}
while (i &lt; 10);

var i=0;

do{

console.log(i)

i++;

}

while (i < 10);

In the loop block, we can make another loop. This method is called a nested loop. There are several cases we use a loop in loop, usually occurs in looping arrays.

Example :

for(let i = 0; i &lt; 10; i++){
for(let j = 0; j &lt; 10; j++){
console.log(i+" -&gt; "+j);
}
}

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

for(let j = 0; j < 10; j++){

console.log(i+" -> "+j);

}

Other article : CodeIgniter Tutorial How To Make Rest API ( Server And Client )

Conclusion

Operators, conditional statements, and loops are basic programming techniques that are mandatory to master. Javascript is relatively easy to implement.

Next Javascript tutorial : Tutorial On Various Types Of Javascript Dialog Windows

Tutorial Operator, Conditional Statement and Loops Javascript for Beginners

Operator Javascript

What is the operator?

Arithmetic Operators in Javascript

Javascript Assignment Operator

Javascript Comparison Operator

Logical Operator in Javascript

Javascript Bitwise Operator

Ternary Javascript Operators

Conditional Statements Javascript

What are Conditional statements?

Various types of Javascript conditional statements

IF Statement

IF / ELSE Statement

Else IF Statement

Statement switch case

Nested If

Javascript Loops

For

Foreach

for/in

Foreach()

Repeat

While

Do While

Conclusion

About Sigit Prasetya Nugroho

Leave a Reply Cancel reply

Operator Javascript

What is the operator?

Arithmetic Operators in Javascript

Javascript Assignment Operator

Javascript Comparison Operator

Logical Operator in Javascript

Javascript Bitwise Operator

Ternary Javascript Operators

Conditional Statements Javascript

What are Conditional statements?

Various types of Javascript conditional statements

IF Statement

IF / ELSE Statement

Else IF Statement

Statement switch case

Nested If

Javascript Loops

For

Foreach

for/in

Foreach()

Repeat

While

Do While

Conclusion

About Sigit Prasetya Nugroho

Reader Interactions

Leave a Reply Cancel reply