{"id":30,"date":"2019-03-27T13:32:02","date_gmt":"2019-03-27T13:32:02","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=30"},"modified":"2020-08-06T06:02:08","modified_gmt":"2020-08-06T06:02:08","slug":"05-javascript-operators","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/","title":{"rendered":"JavaScript – Operators"},"content":{"rendered":"

In the Lesson 4, we discussed JavaScript Variables<\/a>. In this lesson, we will examine Operators. Is there a relationship between the two? Yes. Operators work with operands (which are variables sometimes). For example, x = y +z. Here the ‘+’ sign is an operator while y and z are operands.<\/p>\n

 <\/p>\n

So we would consider 5 JavaScript operators:<\/p>\n

    \n
  1. Arithmetic Operators<\/a><\/li>\n
  2. Comparison Operators<\/a><\/li>\n
  3. Logical Operators (Relational Operators)<\/a><\/li>\n
  4. Bitwise Operators<\/a><\/li>\n
  5. Assignment Operators<\/a><\/li>\n
  6. Conditional Operator<\/a><\/li>\n
  7. The typeof Operator<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Arithmetic Operators<\/strong><\/h4>\n

    You use arithmetic operators to perform calculations. There are 7 of them listed in the table below.<\/p>\n

    The operations assume x = 10 and y = 20<\/p>\n

     <\/p>\n\n\n\n\n\n\n\n\n\n\n
    Sr.No.<\/th>\nOperator & Description<\/th>\n<\/tr>\n
    1<\/td>\n+ (Addition)<\/b><\/p>\n

    Adds the two operands<\/p>\n

    Example:<\/b> x + y will give 30<\/td>\n<\/tr>\n

    2<\/td>\n– (Subtraction)<\/b><\/p>\n

    Subtracts the second operand, x from the first one, y<\/p>\n

    Example:<\/b> x – y will give -10<\/td>\n<\/tr>\n

    3<\/td>\n* (Multiplication)<\/b><\/p>\n

    Multiply the two operands<\/p>\n

    Example:<\/b> x * y will give 200<\/td>\n<\/tr>\n

    4<\/td>\n\/ (Division)<\/b><\/p>\n

    Divide the numerator x by the denominator y<\/p>\n

    Example:<\/b> y \/ x will give 2<\/td>\n<\/tr>\n

    5<\/td>\n% (Modulus)<\/b><\/p>\n

    Returns the remainder of an integer division<\/p>\n

    Example:<\/b> x% y will give 0<\/td>\n<\/tr>\n

    6<\/td>\n++ (Increment)<\/b><\/p>\n

    Takes only one operand. Increases an integer value of the operand by one.<\/p>\n

    Example:<\/b> x++ will give 11<\/td>\n<\/tr>\n

    7<\/td>\n— (Decrement)<\/b><\/p>\n

    Takes only one operand. Decreases an integer value by one<\/p>\n

    Example:<\/b> x– will give 9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     <\/p>\n

    While the addition operator works with numbers, it can also work with strings. Hence you can add two strings together.<\/p>\n

    For example “name” + 20 will give name 20.<\/p>\n

    In this way, the ‘+’ is called a ‘concatenation’ operator. It concatenates or combines two strings. The would be discussed more in later chapters.<\/p>\n

    The html file below shows how arithmetic operators work.<\/p>\n

     <\/p>\n

    <\/p>\n

    <html><\/span>\r\n<head><title><\/span>Arithmetic Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 33<\/span>;\r\n            var<\/span> y =<\/span> 10<\/span>;\r\n            var<\/span> z =<\/span> \"Test\"<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n         \r\n            document<\/span>.write(\"x + y = \"<\/span>);\r\n            result =<\/span> x +<\/span> y;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"x - y = \"<\/span>);\r\n            result =<\/span> x -<\/span> y;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"x \/ y = \"<\/span>);\r\n            result =<\/span> x \/<\/span> y;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"x % y = \"<\/span>);\r\n            result =<\/span> x %<\/span> y;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"x + y + z = \"<\/span>);\r\n            result =<\/span> x +<\/span> y +<\/span> x;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            x =<\/span> ++<\/span>x;\r\n            document<\/span>.write(\"++x = \"<\/span>);\r\n            result =<\/span> ++<\/span>x;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            y =<\/span> --<\/span>y;\r\n            document<\/span>.write(\"--y = \"<\/span>);\r\n            result =<\/span> --<\/span>y;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>\r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
     <\/p>\n
    If you view this file, the output would be as shown below<\/p>\n
    x + y = 43\r\nx - y = 23\r\nx \/ y = 3.3\r\nx % y = 3\r\nx + y + z = 76\r\n++x = 35\r\n--y = 8\r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    2. Comparison Operators<\/strong><\/h4>\n
    You use comparison operators to compare a value against another value. The table below gives a list of comparison operators in JavaScript.<\/p>\n
    We assume x = 10 and y = 20<\/p>\n\n\n\n\n\n\n\n\n\n
    SNo.<\/th>\nOperator and brief description<\/th>\n<\/tr>\n
    1<\/td>\n= = (Equal)<\/b><\/p>\n
    Checks if the value of two operands are equal , if they are, then the condition becomes true. Otherwise, false<\/p>\n
    Example:<\/b> (x == y) is not true.<\/td>\n<\/tr>\n
    2<\/td>\n!= (Not Equal)<\/b><\/p>\n
    Checks if the value of two operands are equal not equal, if the values are not equal, then the condition becomes true.<\/p>\n
    Example:<\/b> (x != y) is true.<\/td>\n<\/tr>\n
    3<\/td>\n> (Greater than)<\/b><\/p>\n
    Checks if the value of the left operand is greater than the value of the right operand, if true, then the condition becomes true. Otherwise the condition becomes false.<\/p>\n
    Example:<\/b> (x > y) is not true.<\/td>\n<\/tr>\n
    4<\/td>\n< (Less than)<\/b><\/p>\n
    Checks if the value of the left operand is less than the value of the right operand, if true, then the condition becomes true.<\/p>\n
    Example:<\/b> (x < y) is true.<\/td>\n<\/tr>\n
    5<\/td>\n>= (Greater than or Equal to)<\/b><\/p>\n
    Checks if the value of the left operand is greater than or equal to the value of the right operand, if true, then the condition becomes true. Otherwise, false<\/p>\n
    Example:<\/b> (x >= y) is not true.<\/td>\n<\/tr>\n
    6<\/td>\n<= (Less than or Equal to)<\/b><\/p>\n
    Checks if the value of the left operand is less than or equal to the value of the right, if they are equal, then the condition becomes true.<\/p>\n
    Example:<\/b> (x <= y) is true.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    The html file below shows how the comparison operator works. I recommend you take time to examine it. Also watch the video lesson for clarification.<\/p>\n
    <html><\/span>\r\n<head><title><\/span>Comparison Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n       <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 10<\/span>;\r\n            var<\/span> y =<\/span> 20<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n      \r\n            document<\/span>.write(\"(x == y) => \"<\/span>);\r\n            result =<\/span> (x ==<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x < y) => \"<\/span>);\r\n            result =<\/span> (x <<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x > y) => \"<\/span>);\r\n            result =<\/span> (x ><\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x != y) => \"<\/span>);\r\n            result =<\/span> (x !=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x >= y) => \"<\/span>);\r\n            result =<\/span> (x >=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x <= y) => \"<\/span>);\r\n            result =<\/span> (x <=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span> \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view this file in the browser, then the output would be:<\/p>\n
     <\/p>\n
    <\/p>\n
    (x == y) => false\r\n(x < y<\/span>) =><\/span> true\r\n(x > y) => false\r\n(x != y) => true\r\n(x >= y) => false\r\n(x <<\/span>= y) => true\r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    3. Logical Operators (Relational Operators)<\/strong><\/h4>\n
    Logical operator are used for performing logical operations. Let’s take some examples to illustrate this.<\/p>\n
    Assuming x = 10 and y = 20, then the table below holds<\/p>\n\n\n\n\n\n\n
    SNo.<\/th>\nOperator and brief description<\/th>\n<\/tr>\n
    1<\/td>\n&& (Logical AND)<\/b><\/p>\n
    If both of the operands are non-zero, then the condition holds true. Otherwise false<\/p>\n
    Example:<\/b> (x && y) is true.<\/td>\n<\/tr>\n
    2<\/td>\n|| (Logical OR)<\/b><\/p>\n
    If any of the two operands are non-zero, then the condition holds true. Otherwise false<\/p>\n
    Example:<\/b> (x || y) is true.<\/td>\n<\/tr>\n
    3<\/td>\n! (Logical NOT)<\/b><\/p>\n
    It takes only one operand. Reverses the logical state of the operand. If a condition is true, then the Logical NOT operator will make it false.<\/p>\n
    Example:<\/b> ! (x && y) is false.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    Now you can run the code below to see how logical operations work. I also recommend you change up the values of x and y and see what happens.<\/p>\n
     <\/p>\n
    <html><\/span>\r\n<head><title><\/span>Logical Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n       <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> true<\/span>;\r\n            var<\/span> y =<\/span> false<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n      \r\n            document<\/span>.write(\"(x && y) => \"<\/span>);\r\n            result =<\/span> (x &&<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x || y) => \"<\/span>);\r\n            result =<\/span> (x ||<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"!(x && y) => \"<\/span>);\r\n            result =<\/span> (!<\/span>(x &&<\/span> y));\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>     \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view this html file, then you will have the output below:<\/p>\n
    <\/p>\n
    (x &&<\/span> y) => false\r\n(x || y) => true\r\n!(x &&<\/span> y) => true\r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    4. Bitwise Operators<\/strong><\/h4>\n
    Bitwise operators are used to perform certain operations on the individual bits of the binary equivalent of the operator. To understand how it works, you need to have an idea of binary numbers.<\/p>\n
    The table below shows how bitwise operators work.<\/p>\n
    We assume x = 2 and y = 3<\/p>\n
     <\/p>\n\n\n\n\n\n\n\n\n\n\n
    SNo.<\/th>\nOperator and brief description<\/th>\n<\/tr>\n
    1<\/td>\n& (Bitwise AND)<\/b><\/p>\n
    It performs a Boolean AND operation on each bit of its integer arguments.<\/p>\n
    Example:<\/b> (x & y) is 2.<\/td>\n<\/tr>\n
    2<\/td>\n| (BitWise OR)<\/b><\/p>\n
    It performs a Boolean OR operation on each of the bit of its integer operand.<\/p>\n
    Example:<\/b> (x | y) is 3.<\/td>\n<\/tr>\n
    3<\/td>\n^ (Bitwise XOR)<\/b><\/p>\n
    It performs a Boolean exclusive OR (XOR) operation on each bit of the given integer arguments. Exclusive OR means that either of the operand, just one is true or operand two is true, but not both.<\/p>\n
    101 ^ 111 = 010 (it’s 1 only for the middle bit where)<\/p>\n
    Example:<\/b> (x ^ y) is 1.<\/td>\n<\/tr>\n
    4<\/td>\n~ (Bitwise Not)<\/b><\/p>\n
    It is a unary(works on a single operand) operator and operates by reversing all its bits in the operand.<\/p>\n
    Example:<\/b> (~y) is -4.<\/td>\n<\/tr>\n
    5<\/td>\n<< (Bitwise left Shift)<\/b><\/p>\n
    It moves all the bits in its first operand to the left by the number of places given in the second operand. New bit spaces are filled with zeros. Shifting a value left by one position is equivalent to multiplying by 2, shifting two positions is equivalent to multiplying by 4. And so one.<\/p>\n
    Example:<\/b> (y << 1) is 4.<\/td>\n<\/tr>\n
    6<\/td>\n>> (Bitwise right Shift)<\/b><\/p>\n
    Binary Right Shift Operator. The left operand\u2019s value is moved right by the number of bits specified by the right operand.<\/p>\n
    Example:<\/b> (x >> 1) is 1.<\/td>\n<\/tr>\n
    7<\/td>\n>>> (Bitwise right shift with Zero)<\/b><\/p>\n
    This operator is just like the >> operator, except that the bits shifted in on the left are always zero.<\/p>\n
    Example:<\/b> (x >>> 1) is 1.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    The html file below illustrates how the bitwise operator work<\/p>\n
     <\/p>\n
    <html><\/span>\r\n<head><title><\/span>Bitwise Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 2<\/span>; \/\/ Binary equivalent of 10<\/span>\r\n            var<\/span> y =<\/span> 3<\/span>; \/\/ Binary equivalent of 11<\/span>\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n         \r\n            document<\/span>.write(\"(x & y) => \"<\/span>);\r\n            result =<\/span> (x &<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x | y) => \"<\/span>);\r\n            result =<\/span> (x |<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x ^ y) => \"<\/span>);\r\n            result =<\/span> (x ^<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(~y) => \"<\/span>);\r\n            result =<\/span> (~<\/span>y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(x << y) => \"<\/span>);\r\n            result =<\/span> (x <<<\/span> b);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"(a >> y) => \"<\/span>);\r\n            result =<\/span> (x >><\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>      \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view the html file above, you will have the output below:<\/p>\n
    <\/p>\n
    (x &<\/span> y) => 2\r\n(x | y) => 3\r\n(x ^ y) => 1\r\n(~y) => -4\r\n(x <<\/span>< y<\/span>)<\/span> =<\/span>><\/span> \r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    5. Assignment Operators<\/strong><\/h4>\n
    You probably have used some assignment operators before. The assignment operators support in JavaScript are given below:<\/p>\n
     <\/p>\n\n\n\n\n\n\n\n\n\n
    Sr.No.<\/th>\nOperator & Description<\/th>\n<\/tr>\n
    1<\/td>\n= (Simple Assignment )<\/b><\/p>\n
    Assigns values from the right side operand to the left side operand<\/p>\n
    Example:<\/b> z = x + y will assign the value of x + y into z<\/td>\n<\/tr>\n
    2<\/td>\n+= (Add and Assignment)<\/b><\/p>\n
    It adds the right operand to the left operand and then assigns the result to the left operand.<\/p>\n
    Example:<\/b> z += x is equivalent to z = z + x<\/td>\n<\/tr>\n
    3<\/td>\n\u2212= (Subtract and Assignment)<\/b><\/p>\n
    It subtracts the right operand from the left operand and then assigns the result to the left operand.<\/p>\n
    Example:<\/b> z -= x is equivalent to z = z – x<\/td>\n<\/tr>\n
    4<\/td>\n*= (Multiply and Assignment)<\/b><\/p>\n
    It multiplies the right operand with the left operand and then assigns the result to the left operand.<\/p>\n
    Example:<\/b> z *= x is equivalent to z = z * x<\/td>\n<\/tr>\n
    5<\/td>\n\/= (Divide and Assignment)<\/b><\/p>\n
    It divides the left operand with the right operand and then assigns the result to the left operand.<\/p>\n
    Example:<\/b> z \/= x is equivalent to z = z \/ x<\/td>\n<\/tr>\n
    6<\/td>\n%= (Modules and Assignment)<\/b><\/p>\n
    It takes modulus using two operands and assigns the result to the left operand.<\/p>\n
    Example:<\/b> z %= x is equivalent to z = z % x<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    The html file below illustrates these assignment operators discussed. I recommend you view it and also change the values to see what you get.<\/p>\n
    <html><\/span>\r\n<head><title><\/span>Assignment Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 33<\/span>;\r\n            var<\/span> y =<\/span> 10<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n         \r\n            document<\/span>.write(\"Value of x => (x = y) => \"<\/span>);\r\n            result =<\/span> (x =<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"Value of x => (x += y) => \"<\/span>);\r\n            result =<\/span> (x +=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"Value of x => (x -= y) => \"<\/span>);\r\n            result =<\/span> (x -=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"Value of x => (x *= y) => \"<\/span>);\r\n            result =<\/span> (x *=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"Value of x => (x \/= y) => \"<\/span>);\r\n            result =<\/span> (x \/=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write(\"Value of x => (x %= y) => \"<\/span>);\r\n            result =<\/span> (x %=<\/span> y);\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>      \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view the file above, then you will have the output.<\/p>\n
    Value of x => (x = y) => 10\r\nValue of x => (x += y) => 20\r\nValue of x => (x -= y) => 10\r\nValue of x => (x *= y) => 100\r\nValue of x => (x \/= y) => 10\r\nValue of x => (x %= y) => 0\r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    6. Conditional Operator (?:)<\/strong><\/h4>\n
    The is operation applies to an expression. It first evaluates the expression for either true or false. Then it executes one of the two specified statements depending on the result of the initial evaluation.<\/p>\n
    The syntax of the contitional operator is:<\/p>\n
    (condition) ? x : y<\/em><\/strong><\/p>\n
    If condition is true. the value x: otherwise value y<\/p>\n
    Let’s take an example.<\/p>\n
    The code below illustrates the use of conditional operator.<\/p>\n
     <\/p>\n
    <html><\/span>\r\n<head><title><\/span>Conditional Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 10<\/span>;\r\n            var<\/span> y =<\/span> 20<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n         \r\n            document<\/span>.write (\"((ax > y) ? 100 : 200) => \"<\/span>);\r\n            result =<\/span> (x ><\/span> y) ?<\/span> 100<\/span> :<\/span> 200<\/span>;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            document<\/span>.write (\"((x < y) ? 100 : 200) => \"<\/span>);\r\n            result =<\/span> (x <<\/span> y) ?<\/span> 100<\/span> :<\/span> 200<\/span>;\r\n            document<\/span>.write(result);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>        \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view the file, you will have the output below:<\/p>\n
    <\/p>\n
    ((ax > y) ? 100 : 200) => 200\r\n((x < y<\/span>)<\/span> ?<\/span> 100<\/span> :<\/span> 200<\/span>)<\/span> =<\/span>><\/span> 100\r\nYou can try different values for x and y \r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    7. The typeof Operator<\/strong><\/h4>\n
    This operator works on a single operand (it is a unary operator).<\/p>\n
    The typeof operator returns the data type of the specified operand. So it could return number, string or boolean depending on the type of its operand.<\/p>\n
    The table below summarizes the values that can be returned by the typeof operator<\/p>\n\n\n\n\n\n\n\n\n\n\n
    Type<\/th>\nValue Returned by typeof<\/th>\n<\/tr>\n
    Number data<\/td>\n“number”<\/td>\n<\/tr>\n
    String data<\/td>\n“string”<\/td>\n<\/tr>\n
    Boolean data<\/td>\n“boolean”<\/td>\n<\/tr>\n
    Object operand<\/td>\n“object”<\/td>\n<\/tr>\n
    Function operand<\/td>\n“function”<\/td>\n<\/tr>\n
    Undefined<\/td>\n“undefined”<\/td>\n<\/tr>\n
    Null<\/td>\n“object”<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    The code below illustrates how the typeof operator works. I recommend you make sure to try it yourself.<\/p>\n
    <html><\/span>\r\n<head><title><\/span>Typeof  Operators Example<\/title><\/head><\/span>\r\n   <body><\/span>\r\n   \r\n      <script <\/span>type =<\/span> \"text\/javascript\"<\/span>><\/span>\r\n         <!--<\/span>\r\n            var<\/span> x =<\/span> 10<\/span>;\r\n            var<\/span> y =<\/span> \"String\"<\/span>;\r\n            var<\/span> linebreak =<\/span> \"<br \/>\"<\/span>;\r\n         \r\n            output =<\/span> (typeof<\/span> y ==<\/span> \"string\"<\/span> ?<\/span> \"Y is String\"<\/span> :<\/span> \"Y is Numeric\"<\/span>);\r\n            document<\/span>.write(\"Output => \"<\/span>);\r\n            document<\/span>.write(output);\r\n            document<\/span>.write(linebreak);\r\n         \r\n            output =<\/span> (typeof<\/span> x ==<\/span> \"string\"<\/span> ?<\/span> \"X is String\"<\/span> :<\/span> \"X is Numeric\"<\/span>);\r\n            document<\/span>.write(\"Output => \"<\/span>);\r\n            document<\/span>.write(output);\r\n            document<\/span>.write(linebreak);\r\n         \/\/--><\/span>\r\n      <\/script><\/span>         \r\n      \r\n      You can try different values for x and y\r\n   <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
    If you view the file, you will have the output below<\/p>\n
    Output => Y is String\r\nOutput => X is Numeric\r\nYou can try different values for x and y \r\n<\/pre>\n
    Note: Ensure you try out all the examples yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In the Lesson 4, we discussed JavaScript Variables. In this lesson, we will examine Operators. Is there a relationship between the two? Yes. Operators work … <\/p>\n","protected":false},"author":395,"featured_media":31,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[3],"class_list":["post-30","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tutorials","tag-operators-in-javascript"],"yoast_head":"\nJavaScript - Operators - JavaScript Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript - Operators - JavaScript Tutorial\" \/>\n<meta property=\"og:description\" content=\"In the Lesson 4, we discussed JavaScript Variables. In this lesson, we will examine Operators. Is there a relationship between the two? Yes. Operators work …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-27T13:32:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-06T06:02:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"912\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"headline\":\"JavaScript – Operators\",\"datePublished\":\"2019-03-27T13:32:02+00:00\",\"dateModified\":\"2020-08-06T06:02:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/\"},\"wordCount\":1496,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2019\\\/03\\\/Operators-in-JavaScript.jpg\",\"keywords\":[\"Operators in JavaScript\"],\"articleSection\":[\"JavaScript Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/\",\"name\":\"JavaScript - Operators - JavaScript Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2019\\\/03\\\/Operators-in-JavaScript.jpg\",\"datePublished\":\"2019-03-27T13:32:02+00:00\",\"dateModified\":\"2020-08-06T06:02:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2019\\\/03\\\/Operators-in-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2019\\\/03\\\/Operators-in-JavaScript.jpg\",\"width\":912,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/05-javascript-operators\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript – Operators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\",\"name\":\"JavaScript Tutorial\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/author\\\/kindsonthegenius-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript - Operators - JavaScript Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript - Operators - JavaScript Tutorial","og_description":"In the Lesson 4, we discussed JavaScript Variables. In this lesson, we will examine Operators. Is there a relationship between the two? Yes. Operators work …","og_url":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/","og_site_name":"JavaScript Tutorial","article_published_time":"2019-03-27T13:32:02+00:00","article_modified_time":"2020-08-06T06:02:08+00:00","og_image":[{"width":912,"height":500,"url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"headline":"JavaScript – Operators","datePublished":"2019-03-27T13:32:02+00:00","dateModified":"2020-08-06T06:02:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/"},"wordCount":1496,"commentCount":1,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg","keywords":["Operators in JavaScript"],"articleSection":["JavaScript Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/","url":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/","name":"JavaScript - Operators - JavaScript Tutorial","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg","datePublished":"2019-03-27T13:32:02+00:00","dateModified":"2020-08-06T06:02:08+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2019\/03\/Operators-in-JavaScript.jpg","width":912,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/05-javascript-operators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/javascript\/"},{"@type":"ListItem","position":2,"name":"JavaScript – Operators"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website","url":"https:\/\/www.kindsonthegenius.com\/javascript\/","name":"JavaScript Tutorial","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/javascript\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/javascript\/author\/kindsonthegenius-2\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":2,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/30\/revisions\/110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/31"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}