JavaScript Tutorial - JavaScript Syntax

Posted by Ridwan Fadilah on Sep 08, 2020 - 03:26 pm

JavaScript Syntax

Beginners JavaScript Course! Learn JavaScript Syntax.

If you have read the JavaScript introduction in the previous chapter, now, you will learn about JavaScript Syntax.

The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program.

Table of Contents

JavaScript Identifiers

Before you learn more about JavaScript Syntax, you must know about the identifiers first.

The syntax of JavaScript must contain an identifier. Identifiers are names.

Identifiers are used to name variables, keywords, functions, and labels.

In JavaScript, the first character must be a letter, or an underscore (_), or a dollar sign ($).

Subsequent characters may be letters, digits, underscores, or dollar signs.

Important to note: Numbers are not allowed as the first character. This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

For example, the variables firstName and firstname, are two different variables. See the example below:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript is Case Sensitive</h2>

  <p id="demo"></p>

<script>
  var firstname, firstName;
  firstName = "John";
  firstname = "Jhon";
  document.getElementById("demo").innerHTML = firstName;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Case Sensitive Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Camel Case (Joining Two Words Into One Variable Name)

Historically, programmers have used different ways of joining multiple words into one variable name:

# Name Example
1 Underscore first_name, last_name, master_card, inter_city
2 Upper Camel Case (Pascal Case) FirstName, LastName, MasterCard, InterCity.
3 Lower Camel Case firstName, lastName, masterCard, interCity
JavaScript programmers tend to use camel case that starts with a lowercase letter

JavaScript Values

The JavaScript syntax defines two types of values:

  • Fixed values
  • Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals

Numbers and strings are the two most important syntax rules for fixed values.

Numbers can be written with or without decimals, while strings are text, written within double or single quotes.

Example:

- Numbers


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Literals (Numbers)</h2>

  <p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = 11.20;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Literals (Numbers) by Ridwan (@ridwan-the-bold) on CodePen.


- Strings


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Literals (Strings)</h2>

  <p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Literals (Strings) Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Variables

In a programming language, variables are used to store data values.

In JavaScript, the var keyword is used to declare variables.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Variables Example</h2>
  <p>The <b>x</b> is defined as a variable.</p>

  <p>And, <b>x</b> is assigned the value of 6:</p>

  <p id="demo"></p>

<script>
  var x;
  x = 6;
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Variables Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Operators

The syntax of JavaScript also contains some operators. JavaScript uses operators to compute values, assign values to variable, logical, comparison, and more.

Here are some of the JavaScript operators:

  • Arithmetic Operators
  • Assignment Operators
  • Comparison Operators
  • Logical Operators
  • Type Operators
  • Bitwise Operators
Here, I only explain some operators that often use in JavaScript.

JavaScript Arithmetic Operators

The JavaScript arithmetic operators ( + - * / ) are used to compute values.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>Simple Arithmetic Operators Usage</h2>
  <p>x = 26, y = 33, calculate z = x + y, and display z:</p>

  <p id="demo"></p>

<script>
  var x = 26;
  var y = 33;
  var z = x + y;
  document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen Simple Arithmetic Operators Usage by Ridwan (@ridwan-the-bold) on CodePen.


Here is arithmetic operators list to perform arithmetic on numbers:

# Operator Description
1 + Addition
2 - Subtraction
3 * Multiplication
4 ** Exponentiation (ES2016)
5 / Division
6 % Modulus (Division Remainder)
7 ++ Increment
8 -- Decrement
JavaScript Assignment Operators

The JavaScript assignment operators are used to assign values to variables.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Assignment Operators Usage Example</h2>

  <p id="demo"></p>

<script>
  var x = 200;
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Assignment Operators Usage Example by Ridwan (@ridwan-the-bold) on CodePen.


Here is assignment operators list:

# Operator Example Same As
1 = x = y x = y
2 += x += y x = x + y
3 -= x -= y x = x - y
4 *= x *= y x = x * y
5 /= x /= y x = x / y
6 %= x %= y x = x % y
7 **= x **= y x = x ** y

The addition assignment operator (+=) adds a value to a variable.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Adds Value to Variable</h2>

  <p id="demo"></p>

<script>
  var x = 12;
  x += 6;
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Adds Value to Variable by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript String Operators

The addition (+) operator is not only used for numbers.

The + operator can also be used to add (concatenate) strings.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript String Operators Example</h2>

  <p id="demo"></p>

<script>
  var txt1 = "John";
  var txt2 = "Doe";
  document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript String Operator Example by Ridwan (@ridwan-the-bold) on CodePen.


The += assignment operator can also be used to add (concatenate) strings:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Concatenate String Example</h2>

  <p id="demo"></p>

<script>
  txt1 = "Have a ";
  txt1 += "nice day";
  document.getElementById("demo").innerHTML = txt1;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Concatenate String Example by Ridwan (@ridwan-the-bold) on CodePen.


Important to note: When used on strings, the + operator is called the concatenation operator.

Adding Strings and Numbers

In JavaScript, you can use the addition (+) operator for a string and number.

If you use addition (+) for two numbers, that will return the sum, but if you use a number and a string, the addition (+) operator will return a string:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Adding Strings and Numbers Example</h2>

  <p id="demo"></p>

<script>
  var x = 10 + 5;
  var y = "5" + 10;
  var z = "Hello" + 5;
  document.getElementById("demo").innerHTML =  x + "
" + y + "
" + z; </script> </body> </html>

The code above will display by the browser like this:

See the Pen JavaScript Adding Strings and Numbers Example by Ridwan (@ridwan-the-bold) on CodePen.


Important to note: If you add a number and a string, the result will be a string!

JavaScript Comparison Operators

In JavaScript, you will also find the comparison operators.

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Here is comparison operators list:

# Operator Description
1 == equal to
2 === equal value and equal type
3 != not equal
4 !== not equal value or not equal type
5 > greater than
6 < less than
7 >= greater than or equal to
8 <= less than or equal to
9 ? ternary operator

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Less Than (<) Comparison Operators Example</h2>

  <p id="demo"></p>

  <button onclick="myFunction()">Click Me!</button>

<script>
  function myFunction() {
  var age = 14;
  if (age < 18) {
    document.getElementById("demo").innerHTML = "Too young";
  }
};
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Comparison Operators Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Logical Operators

JavaScript has other operators called logical operators.

Logical operators are used to determine the logic between variables or values.

See the table below explains logical operators:

# Operator Description
1 && logical and
2 || or
3 ! logical not

Here's the example of logical operators:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Logical Operators Example</h2>

  <p id="demo"></p>

  <button onclick="myFunction()">Click Me!</button>

<script>
  function myFunction() {
  var age1 = 14, age2 = 17;
  if (age1 && age2 < 18) {
    document.getElementById("demo").innerHTML = "Too young";
  }
};
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Logical Operators Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Keywords

What is JavaScript Keywords? JavaScript keywords are used for action identifying to be performed by the browser.

For example, the var keyword will tell the browser to create a variable.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Keywords Example</h2>

  <p>The <code>var</code> keyword will tell the browser to create a variable.</p>

  <p id="demo"></p>

<script>
  var x, y;
  x = 5 + 9;
  y = x * 10;
  document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Keywords Example by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Comments

Not all JavaScript statements are "executed".

JavaScript comment is a statement in JavaScript used to insert comment or information. Comment can be used to explain your code.

To use JavaScript Comment, you only need to add the following syntax to your JavaScript source code:


// add your comment here
or
/* add your comment here */

Code after double slashes // or between /* and */ is treated as a comment.


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Comments Example</h2>

  <p id="demo"></p>

<script>
  // I am a comment
  var x;
  x = 10;
  /* x = 20; I will not be executed */
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

The code above will display by the browser like this:

See the Pen JavaScript Comments Example by Ridwan (@ridwan-the-bold) on CodePen.


Okay, that's the tutorial about JavaScript Syntax. You should know, that's just the basics! You'll learn more about JavaScript in the next chapter.

You can read another JavaScript basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.

Thanks for reading.


Related Articles