{"id":7738,"date":"2018-10-14T08:34:17","date_gmt":"2018-10-14T12:34:17","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=7738"},"modified":"2021-03-06T15:50:46","modified_gmt":"2021-03-06T20:50:46","slug":"javascript-operators","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/javascript-operators\/","title":{"rendered":"JavaScript Operators"},"content":{"rendered":"\n
JavaScript provides different kinds of operators which enable us to perform actions on given values or variables used in our code. As you develop more complex code, you will come to rely on operators for performing the various functionally you are building. Before we dive into operators, let’s clear up a couple of fundamental programming terms, statements and expressions.<\/p>\n\n\n\n
A statement is a line of code or action that consist of values, variables, and operators. In the last lesson you created several statements that assigned values to variables using the assignment = operator. Statements can set values but do not become values themselves<\/strong>. Statements end with a semi-colon. In contrast, an expression is a piece of code that resolves to a value, i.e. values, calculations resulting in other values, variables, and groups of variables.<\/p>\n\n\n\n Now, let’s look at the different types of operators we can use in JavaScript.<\/p>\n\n\n\n As with most programming languages, JavaScript uses the four most common operators:<\/p>\n\n\n\n In addition, the assignment operator = is used for value assignment.<\/p>\n\n\n\n Four equality operators are available in JavaScript:<\/p>\n\n\n\n The loose operators provide a way to compare two values of different types. For example “13” == 13 would yield true even though one is a string and one is a number.<\/p><\/blockquote>\n\n\n\n In addition to equality operators, JavaScript provides several different comparison and logical operators:<\/p>\n\n\n\n Compound operators are useful for writing shorthand statements such as a = a + 2, which can make use of the compound variable +=. In this example a = a + 2 would become a += 2. Compound operations are available in each of the four operators:<\/p>\n\n\n\n Increment \/ decrement operators work in a similar way to compound operators whereby they provide a shorthand method of writing statements to increment or decrement values. For example a = a + 1 can use an increment variable of a++. Similarly a decrement take on this would look like a–. There are two increment and decrement operators:<\/p>\n\n\n\n Create two files called index.html<\/strong> and script.js<\/strong> and enter the code below into each. Alternatively, if you followed along in the previous lesson, use the existing script.js file and replace its content with code below. After you have updated your script.js file, examine the results produced in the browser console.<\/p>\n\n\n\n To see the results: open index.html in your browser and open the console, Press Ctrl+Shift+J (Windows \/ Linux) or Cmd+Opt+J (Mac).<\/p><\/blockquote>\n\n\n\n How did you do? Were the results as you expected? Continue plugging in other values, variables and operators in order to practice these concepts further.<\/p>\n\n\n\n Remember math class when you had to work out precedence of values in a calculation?<\/p>\n\n\n\n The first statement will result in 58, while the second in 90. This is due to the order in which the expressions are calculated. In the first example 6 is multiplied by 9 first and then 4 is added. The parenthesis in the second statement give precedence to 4 + 6 which are added first before multiplying by 9. The good news is that JavaScript works in the same way you use precedence in regular math. Try it out and enter both in the console.<\/p>\n\n\n\n In addition to regular math, as you’ve learned JavaScript has a number of other operators. Try adding the below statement to your script:<\/p>\n\n\n\n Was the result as you expected? in JavaScript, the order of precedence of math operators is higher than that of comparison operators. Therefore the expression 4 + 6 is calculated before comparing the result to 9, resulting in true.<\/p>\n\n\n\n Operator precedence determines the way in which operators are parsed with respect to each other. Operators with higher precedence become the operands of operators with lower precedence. So how do we keep track of what takes precedence? Thankfully, there is a very handy reference sheet included below, which lists all operators and associated precedence ranked from highest to lowest.<\/p>Math Operators<\/h2>\n\n\n\n
+ (plus)\n\n- (minus)\n\n\/ (divide)\n\n* (multiply)<\/code><\/pre>\n\n\n\n
Comparison Operators<\/h2>\n\n\n\n
== (loose equals)\n\n=== (strict equals)\n\n!= (loose not equals)\n\n!== (strict not equals)<\/code><\/pre>\n\n\n\n
< (less than)\n\n> (greater than)\n\n<= (less than or loose equals)\n\n>= (greater then or loose equals)<\/code><\/pre>\n\n\n\n
Compound Operators<\/h2>\n\n\n\n
+=\n\n-=\n\n*=\n\n\/=<\/code><\/pre>\n\n\n\n
Increment\/Decrement Operators<\/h2>\n\n\n\n
++\n\n--<\/code><\/pre>\n\n\n\n
\u2192 Try it out<\/strong><\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Learning JavaScript<\/title>\n <\/head>\n <body>\n <h1>Learning JavaScript<\/h1>\n <script src=\"script.js\"><\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\/**\n* Operators\n*\/\n\nlet a = 10;\nlet b = 5;\nlet c = '5';\nlet d = 10;\n \n\/\/ Math Operators\nconsole.log(a + b);\nconsole.log(b * a);\nconsole.log(a \/ b);\nconsole.log(b - a);\n \n\/\/ Comparison Operators\nconsole.log(a != b);\nconsole.log(a == d);\nconsole.log(b === c);\nconsole.log(b == c);\nconsole.log(b >= c);\n \n\/\/ Compound Operators\nlet result= a-=1;\nconsole.log(result);\n \nlet result = b++;\nconsole.log(result);<\/code><\/pre>\n\n\n\n
Precedence and Associativity<\/h2>\n\n\n\n
4 + 6 * 9\n(4 + 6) * 9<\/code><\/pre>\n\n\n\n
4 + 6 > 9<\/code><\/pre>\n\n\n\n