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.
Table of Contents
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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/>`); |
Javascript Assignment Operator
The assignment operator is an operator used to give orders to variables and usually used to fill variables.
Example:
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:
1 2 3 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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/>`); |
Logical Operator in Javascript
Logical operators used to carry out operations on two boolean values.
| Logical And | && |
| Logical Or | || |
| Logical Not | ! |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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}<br/>`) // operator || (or) hasil = right || wrong document.write(`${right} || ${wrong} = ${hasil}<br/>`) // operator ! (not) hasil = !right document.write(`!${right} = ${hasil}<br/>`) |
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
ifstatement.
Example:
1 2 3 4 | 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:
1 2 3 4 5 | 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:
1 2 3 4 | 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:
1 2 3 4 5 6 | 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:
1 2 3 4 5 6 7 8 | 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:
1 2 3 4 5 6 7 8 9 10 | switch(expression) { case x: // code block break; case y: // code block break; default: // code block } |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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:
1 2 3 4 5 6 7 8 9 10 11 | 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("<p>Invalid password</p>") } } else { document.write("<p>You are not registered!</p>") } |
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.
1 2 3 | for (statement 1; statement 2; statement 3) { // executed code } |
Example :
1 2 3 | 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
1 2 3 4 | var lang = ["JS", "Angular", "React", "Node"] for(i in lang){ console.log(lang[1]) } |
Foreach()
1 2 3 4 | 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:
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:
1 2 3 4 | while (i < 10) { console.log(i); i++; } |
Example 2 :
1 2 3 4 5 6 7 | 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 :
1 2 3 4 5 6 | 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 :
1 2 3 4 5 | 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
Leave a Reply