Welcome to the Javascript Operators Homepage, Guest!


Javascript | Operators of many functions




Operators

Javascript operators can assign values to variables, and then add the two variables together. The assignment operators, = , will assign a value to the variable on the left hand side. The addition operator, + , will add two numbers together and to concatenate two strings together. The most commonly used arithmetic operators are:

  • + -> Addition

    var x = 5;
    var y = 10;
    var z = x + y;
    z = 15

  • - -> Subtraction

    var x = 5;
    var y = 10;
    var z = x - y;
    z = -5

  • * -> Multiplication

    var x = 5;
    var y = 10;
    var z = x * y;
    z = 50

  • / -> Division

    var x = 5;
    var y = 10;
    var z = x / y;
    z = 0.5

  • % -> Modulus

    var x = 5;
    var y = 10;
    var z = x + y;
    z = 5

  • ++ -> Increment

    var x = 5;
    var y = x++;
    y = 6

  • -- -> Decrement

    var x = 5;
    var y = x--;
    y = 4


Additional arithmetic operators will be featured in the next tutorial. Javascript has a few useful assignment operators available to Javascript programmers:
  • = -> x = y means x = y

    var x = 5;
    var y = 10;
    x = y;
    x = 10

  • += -> x += y means x = x + y

    var x = 5;
    var y = 10;
    x += y;
    x = 15

  • -= -> x -= y means x = x - y

    var x = 5;
    var y = 10;
    x -= y;
    x = -5

  • *= -> x *= y means x = x * y

    var x = 5;
    var y = 10;
    x *= y;
    x = 50

  • /= -> x /= y means x = x / y

    var x = 5;
    var y = 10;
    x /= y;
    x = 0.5

  • %= -> x %= y means x = x % y

    var x = 5;
    var y = 10;
    x %= y;
    x = 5





String Operators

String operators concatenate two string objects together into one larger string object to be displayed within the html document. Strings can be any length within Javascript, but are typically not very long if programmed by hand. The majority of longer more detailed documents are the work on programs feeding in the right information at the right time. I personally use a python script to write all of the python functions I need for this website. The script will prompt me to type in specific data, ask additional data when needed, and indent the proper spacing for python. The use of string concatenation is huge in a python script like that. The use of string operators really helped me ease the pain of programming every individual little detail. When the + operator is used with strings, it is known as the concatenation operator.

var firstName = "James";

var lastName = "Patterson";

var name = firstName + lastName;

Output name: James Patterson




Concatenation

Concatenation is the direct addition of two string variables together to create a new longer string variable. The + sign becomes the concatenation operator. The concatenation of a number and a string will result in a new string object.

var phrase = "I am #";

var one = 1;

var greeting = phrase + one + 2;

Output name: I am #12




Comparison Operators

Javascript has comparison operators such as equal to, not equal, and more. Comparison operators can be used inside of conditional statements to compare values. The conditional statements take action depending on the result returned.

if(age < 18) text = "Too young";

The example above is one way that a comparison operator could be used.


  • == -> equal to

    var x = 5;
    var y = 5;
    x == y;
    Would return true

  • === -> equal value and equal type

    var x = 5;
    x === "5"
    Would return false, but if it were a number it would return true

  • != -> not equal

    var x = 5;
    var y = 10;
    x != y;
    Would return true

  • !== -> not equal value and not equal type

    var x = 5;
    var y = "5";
    x !== y;
    Would return true because x is a number and y is a string

  • > -> greater than

    var x = 5;
    var y = 10;
    x > y;
    Would return false because 5 is not greater than 10

  • < -> less than

    var x = 5;
    var y = 10;
    x < y;
    Would return true because 5 is less than 10

  • >= -> greater than or equal to

    var x = 5;
    var y = 10;
    x >= y;
    Would return false because 5 is not greater than or equal to 10

  • <= -> less than or equal to

    var x = 5;
    var y = 10;
    x < y;
    Would return true because 5 is less than or equal to 10

  • ? -> ternary


    <!DOCTYPE html>
    <html>
      <body>

        <p>This will tell you if you can vote or not, legally:</p>

        <input id="age" value="18" />

        <button onclick="myFunction()">Click Here</button>

        <p id="tutorial"></p>

        <script>
          function myFunction() {
              var age, voteable;
              age = document.getElementById("age").value;
              voteable = (age < 18) ? "Too young":"Old enough";
              document.getElementById("tutorial").innerHTML = voteable + " to vote.";
          }
        </script>

      </body>
    </html>





Logical Operators

Javascript has built in logical operators to help the programmer with logic. Logical operators are used to determine the logic between variables and values. Let us say x = 5 and y = 3. The following examples will use the two variables to express logical expressions using logical operators.

  • && -> and

    ( x < 10 && y > 2)
    Would return true because x is less than 10 and y is greater than 2.

  • || -> Or

    ( x != 5 || y == 2)
    Would return true because x does equal 5, but y doesn't equal two. The or only needs to satisfy one of the criteria

  • ! -> not

    ( y!=2 )
    Would return true because y does not equal 2.





Conditional (Ternary) Operators

Javascript has a built in conditional operator that will assign a value to a variable once a specific condition is triggered.


variableName = (condition) ? value1:value2;

var eligibleToVote = (age < 18) ? "Too Young":"Old Enough";

If the age is a value below 18, the string returned will be too young to vote, and vice versa.



Comparing Different Types

You can compare different types of data against each other. Comparing two different data types can yield unexpected results. When comparing a string with a number for example, JS will convert the string over to a number. In doing so, the string will be comparable to a number. Empty strings will convert to a 0, and non-numerix strings convert to NaN. NaN will always return a false.

  • 2 < 12 Returns: true
  • 2 < "12" Returns: true
  • 2 < "James" Returns: false
  • 2 > "James" Returns: false
  • 2 == "James" Returns: false
  • "2" < "12" Returns: false
  • "2" > "12" Returns: true because when you are comparing strings, 2 will be alphabetically less than 12.
  • "2" == "12" Returns: false

You should always use proper data types together to ensure proper results. Variables should be converted using known functions to parse data types instead of trying to force the computer to read different types as one.




NaN Input

A javascript function can handle NaN input types. When you are expecting a number instead of a string, you can use an if statement to test if the input is a string or not. The following code will use a preprogrammed input element with value set to 18. The button will compare the user's input to see if they are old enough to vote. An empty element will be used to display the results of the comparison. The Javascript function declares two variables; age and voteable. Age is then assigned the value of the element set to 18. SO, if age is not a number, the program will say the input is wrong, but if it is a number the program will either specify the ability to vote or not vote.


<!DOCTYPE html>
<html>
  <body>

    <h2>JavaScript Comparisons</h2>

    <p>Input your proper age: </p>

    <input id="age" value="18" />

    <button onclick="myFunction()">Click here</button>

    <p id="tutorial"></p>

    <script>
        function myFunction() {
            var age, voteable;
            age = Number(document.getElementById("age").value);
            if (isNaN(age)) {
                voteable = "Input is not a number";
            } else {
                voteable = (age < 18) ? "Too young" : "Old enough";
            }
            document.getElementById("tutorial").innerHTML = voteable;
        }
    </script>

  </body>
</html>




Type Operators

1. typeof will return the type of a specific variable.

2. instanceof will return true if an object is an instance of an object type.

Type operators will be discussed further later in an additional tutorial.




Next, we will take a look at Arithmetics function within Javascript.

Just follow the buttons to continue the tutorial, Guest