{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/javascript-various-types-of-operations","result":{"data":{"mdx":{"frontmatter":{"title":"JavaScript Various Types Of Operations","category":"javascript","date":"June 22nd, 2020","readTime":4,"slug":"javascript-various-types-of-operations","embeddedImages":[{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/50ed44dcd7254090b520c47b2c689430/43923/c.png","srcSet":"/static/50ed44dcd7254090b520c47b2c689430/f5f2a/c.png 240w,\n/static/50ed44dcd7254090b520c47b2c689430/53b8e/c.png 480w,\n/static/50ed44dcd7254090b520c47b2c689430/43923/c.png 959w","sizes":"(min-width: 959px) 959px, 100vw"},"sources":[{"srcSet":"/static/50ed44dcd7254090b520c47b2c689430/8c1fe/c.webp 240w,\n/static/50ed44dcd7254090b520c47b2c689430/8afe1/c.webp 480w,\n/static/50ed44dcd7254090b520c47b2c689430/7abe8/c.webp 959w","type":"image/webp","sizes":"(min-width: 959px) 959px, 100vw"}]},"width":959,"height":345}}},{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/6a596a492e3214a5a7a2e9e684665dc4/8b69e/a.png","srcSet":"/static/6a596a492e3214a5a7a2e9e684665dc4/08641/a.png 285w,\n/static/6a596a492e3214a5a7a2e9e684665dc4/4382d/a.png 570w,\n/static/6a596a492e3214a5a7a2e9e684665dc4/8b69e/a.png 1139w","sizes":"(min-width: 1139px) 1139px, 100vw"},"sources":[{"srcSet":"/static/6a596a492e3214a5a7a2e9e684665dc4/6ab1f/a.webp 285w,\n/static/6a596a492e3214a5a7a2e9e684665dc4/e1b40/a.webp 570w,\n/static/6a596a492e3214a5a7a2e9e684665dc4/0c583/a.webp 1139w","type":"image/webp","sizes":"(min-width: 1139px) 1139px, 100vw"}]},"width":1139,"height":285}}},{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/4598a290002bf6b91e1b1f972cae90c5/5c892/b.png","srcSet":"/static/4598a290002bf6b91e1b1f972cae90c5/8b689/b.png 294w,\n/static/4598a290002bf6b91e1b1f972cae90c5/61128/b.png 589w,\n/static/4598a290002bf6b91e1b1f972cae90c5/5c892/b.png 1177w","sizes":"(min-width: 1177px) 1177px, 100vw"},"sources":[{"srcSet":"/static/4598a290002bf6b91e1b1f972cae90c5/2bde8/b.webp 294w,\n/static/4598a290002bf6b91e1b1f972cae90c5/4e45a/b.webp 589w,\n/static/4598a290002bf6b91e1b1f972cae90c5/217f5/b.webp 1177w","type":"image/webp","sizes":"(min-width: 1177px) 1177px, 100vw"}]},"width":1177,"height":445.99999999999994}}},{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/6caa42695f55f583ae65138ebd2f2463/f30e9/l.png","srcSet":"/static/6caa42695f55f583ae65138ebd2f2463/c0e0a/l.png 322w,\n/static/6caa42695f55f583ae65138ebd2f2463/5e390/l.png 643w,\n/static/6caa42695f55f583ae65138ebd2f2463/f30e9/l.png 1286w","sizes":"(min-width: 1286px) 1286px, 100vw"},"sources":[{"srcSet":"/static/6caa42695f55f583ae65138ebd2f2463/6dc46/l.webp 322w,\n/static/6caa42695f55f583ae65138ebd2f2463/cf0f0/l.webp 643w,\n/static/6caa42695f55f583ae65138ebd2f2463/7df19/l.webp 1286w","type":"image/webp","sizes":"(min-width: 1286px) 1286px, 100vw"}]},"width":1286,"height":243}}},{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/c889e482ff044569b605b4b7d6713b97/ebc0b/o.png","srcSet":"/static/c889e482ff044569b605b4b7d6713b97/5a872/o.png 148w,\n/static/c889e482ff044569b605b4b7d6713b97/066dc/o.png 296w,\n/static/c889e482ff044569b605b4b7d6713b97/ebc0b/o.png 591w","sizes":"(min-width: 591px) 591px, 100vw"},"sources":[{"srcSet":"/static/c889e482ff044569b605b4b7d6713b97/1c7d6/o.webp 148w,\n/static/c889e482ff044569b605b4b7d6713b97/79bac/o.webp 296w,\n/static/c889e482ff044569b605b4b7d6713b97/75c5e/o.webp 591w","type":"image/webp","sizes":"(min-width: 591px) 591px, 100vw"}]},"width":591,"height":638}}}],"image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/b3bbc86670cee18688cf66b658d518ba/87706/p1.png","srcSet":"/static/b3bbc86670cee18688cf66b658d518ba/f80f8/p1.png 320w,\n/static/b3bbc86670cee18688cf66b658d518ba/9a63f/p1.png 640w,\n/static/b3bbc86670cee18688cf66b658d518ba/87706/p1.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/b3bbc86670cee18688cf66b658d518ba/c0bcc/p1.webp 320w,\n/static/b3bbc86670cee18688cf66b658d518ba/17574/p1.webp 640w,\n/static/b3bbc86670cee18688cf66b658d518ba/71d4d/p1.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]},"width":1280,"height":720}}}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"JavaScript Various Types Of Operations\",\n  \"slug\": \"javascript-various-types-of-operations\",\n  \"image\": \"./images/p1.png\",\n  \"date\": \"2020-06-22T00:00:00.000Z\",\n  \"category\": \"javascript\",\n  \"readTime\": 4,\n  \"embeddedImages\": [\"./images/c.png\", \"./images/a.png\", \"./images/b.png\", \"./images/l.png\", \"./images/o.png\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"JavaScript Operations\"), mdx(\"p\", null, \"JavaScript operators assign values, compare values, execute arithmetic operations, and so on. It's likely that you are already familiar with many of these like addition \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"+\"), \", subtraction \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"-\"), \", multiplication \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*\"), \", and division \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/\"), \".\"), mdx(\"h2\", null, \"JavaScript Expressions\"), mdx(\"p\", null, \"A JavaScript expression contains both operators and operands. In general, it can be regarded as any valid unit of code that corresponds to a value.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"operand - what operators are applied to. For instance in the expression \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"8 * 3\"), \" there are two operands. The left operand is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"8\"), \" and the right operand is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"3\"), \". Operands can also be referred to as arguments.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"operator - the verb of the expression that denotes what we're doing to the operands. JavaScript has the following types of operators:\"))), mdx(\"blockquote\", {\n    display: \"info\"\n  }, mdx(\"u\", null, \" assignment operators\"), \" \", mdx(\"br\", null), mdx(\"br\", null), \" comparison operators \", mdx(\"br\", null), mdx(\"br\", null), \" \", mdx(\"u\", null, \"arithmetic operators\"), mdx(\"br\", null), mdx(\"br\", null), \" bitwise operators \", mdx(\"br\", null), mdx(\"br\", null), \" \", mdx(\"u\", null, \"logical operators\"), \" \", mdx(\"br\", null), mdx(\"br\", null), \" string operators\", ' ', mdx(\"br\", null), mdx(\"br\", null), \" \", mdx(\"u\", null, \"conditional (or ternary) operators\"), \" \", mdx(\"br\", null), mdx(\"br\", null), \" comma operator \", mdx(\"br\", null), mdx(\"br\", null), \" unary operator \", mdx(\"br\", null), mdx(\"br\", null), \" \", mdx(\"u\", null, \"relational operators\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"unary expression - consists of a single operand, one before or one after the operator:\")), mdx(\"p\", null, \"operator operand: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"++x;\"), \" or: operand operator \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"x++\"), \";\"), mdx(\"ol\", {\n    \"start\": 4\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"binary expression - requires two operands: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"operand1 operator operand2\"))), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"3 + 4\\n6 * y\\n\")), mdx(\"ol\", {\n    \"start\": 5\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"ternary expression - an only JavaScript operator that creates a ternary expression is a conditional operator with the syntax: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"condition? val1 and val2\"), \". Assuming condition is \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"true\"), \", the operation has the result of val1, otherwise, it has the result of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"val2\"), \".\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"age >= 21 ? 'alcoholic' : 'non-alcoholic'\\n\")), mdx(\"h2\", null, \"Assignment Operators\"), mdx(\"p\", null, \"Using the assignment operator, one assigns a numerical value to its left operand depending on that of its right operand. For simple assignments, you can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"=\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"x = y\\n\")), mdx(\"p\", null, \"For complex assignments, you can use compound assignment operators like the following examples:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"x += y\\nx -= y\\n\")), mdx(\"p\", null, \"Which is equivalent to:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"x = x + y\\nx = x - y\\n\")), mdx(\"h3\", null, \"Destructuring\"), mdx(\"p\", null, \"In complex assignment problems, you can use destructuring to extract data from arrays or objects using a syntax that matches the structure of array or object data.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let foo = ['one', 'two', 'three']\\n\\n// without destructuring\\nlet one = foo[0]\\nlet two = foo[1]\\nlet three = foo[2]\\n\\n// with destructuring\\nlet [one, two, three] = foo\\n\")), mdx(\"h2\", null, \"Comparison Operators\"), mdx(\"p\", null, \"In the comparison operator, operands are examined and a logical result is generated (true or false) based on the result of the comparison.\"), mdx(GatsbyImage, {\n    image: getImage(props.embeddedImages[0]),\n    alt: \"random stuff\",\n    className: \"first-inline-img\",\n    mdxType: \"GatsbyImage\"\n  }), mdx(\"p\", null, \"Look at the more details: \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators\",\n    target: \"_blank\"\n  }, \"MDN\")), mdx(\"h2\", null, \"Arithmetic Operators\"), mdx(\"p\", null, \"The arithmetic operators use numerical values (such as words or variables) during their operands and always assign one number.\"), mdx(GatsbyImage, {\n    image: getImage(props.embeddedImages[1]),\n    alt: \"random stuff\",\n    className: \"first-inline-img\",\n    mdxType: \"GatsbyImage\"\n  }), mdx(\"p\", null, \"Look at the more details: \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators\",\n    target: \"_blank\"\n  }, \"MDN\")), mdx(\"h2\", null, \"Bitwise Operators\"), mdx(\"p\", null, \"Bitwise operators handle operands in the context of a set of 32 bits (ones and zeros), rather than decimal, octal, or hexadecimal numbers. For instance, decimal 10 has a binary number of 1010. In JavaScript, Bitwise operators are assigned to such binary values, however, they return standard JavaScript numerical values.\"), mdx(GatsbyImage, {\n    image: getImage(props.embeddedImages[2]),\n    alt: \"random stuff\",\n    className: \"first-inline-img\",\n    mdxType: \"GatsbyImage\"\n  }), mdx(\"p\", null, \"Look at the more details: \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators\",\n    target: \"_blank\"\n  }, \"MDN\")), mdx(\"h2\", null, \"Logical Operators\"), mdx(\"p\", null, \"There are several logic operators that are commonly used with boolean (logic) values; when they are returning a boolean value. Although the && and || operators always return the value this is the specified operands, therefore when these operators interact with non-Boolean values, they may return a non-Boolean result.\"), mdx(GatsbyImage, {\n    image: getImage(props.embeddedImages[3]),\n    alt: \"random stuff\",\n    className: \"first-inline-img\",\n    mdxType: \"GatsbyImage\"\n  }), mdx(\"p\", null, \"Look at the more details: \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators\",\n    target: \"_blank\"\n  }, \"MDN\")), mdx(\"h2\", null, \"String Operators\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"+\"), \" operator (in conjunction with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"+=\"), \" compound operator) is also effectively used as a concatenation operator when dealing with strings.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"console.log('alpha' + 'bet') // logs the string 'alphabet' to the console\\n\")), mdx(\"h2\", null, \"Other Unary Operators\"), mdx(\"h3\", null, \"delete\"), mdx(\"p\", null, \"The delete operator removes an element, an object's attribute, or an element at a specific index in an array\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"delete objectName\\ndelete objectName.property\\ndelete objectName[index]\\n\")), mdx(\"h3\", null, \"typeof\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"typeof\"), \" operator returns a string specifying the type of the undetected operand with the syntax typeof operand. an operand is a keyword, string, or variable for which type is to be returned\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let shape = 'round'\\nlet size = 1\\nlet foo = ['Apple', 'Mango', 'Orange']\\n\\ntypeof shape // returns \\\"string\\\"\\ntypeof size // returns \\\"number\\\"\\ntypeof foo // returns \\\"object\\\"\\n\")), mdx(\"h3\", null, \"void\"), mdx(\"p\", null, \"The void operator instructs an expression it should be evaluated without returning a value with the syntax void evaluate, expression is a JavaScript expression to be evaluated.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"<a href=\\\"javascript:void(0)\\\">Click here to do nothing</a>\\n\")), mdx(\"h2\", null, \"Relational Operators\"), mdx(\"h3\", null, \"in\"), mdx(\"p\", null, \"The in operator indicates the given property in the specified data.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']\\n3 in trees // returns true\\n6 in trees // returns false\\n'length' in trees // returns true (length is an Array property)\\n\\n'PI' in Math // returns true\\n\\nlet mycar = { make: 'Honda', model: 'Accord', year: 1998 }\\n'make' in mycar // returns true\\n\")), mdx(\"h3\", null, \"instanceof\"), mdx(\"p\", null, \"The instanceof operator returns true when the specified object of the specified object category.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let theDay = new Date(2018, 1, 1)\\n\\ntheDay instanceof Date // returns true\\n\")), mdx(\"h2\", null, \"Operator Precedence\"), mdx(\"p\", null, \"The appearance of operators indicates the order they are executed when computing an expression. You can modify operator ordering by using brackets.\"), mdx(\"p\", null, \"The following table describes the precedence of operators, from highest to lowest:\"), mdx(GatsbyImage, {\n    image: getImage(props.embeddedImages[4]),\n    alt: \"random stuff\",\n    className: \"first-inline-img\",\n    mdxType: \"GatsbyImage\"\n  }), mdx(\"p\", null, \"Look at the more details: \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators\",\n    target: \"_blank\"\n  }, \"MDN\")), mdx(Link, {\n    to: \"/posts\",\n    className: \"btn center-btn\",\n    mdxType: \"Link\"\n  }, \"all posts\"));\n}\n;\nMDXContent.isMDXComponent = true;","id":"70d575b0-624f-549f-8583-4296bdff3959"}},"pageContext":{"slug":"javascript-various-types-of-operations"}},"staticQueryHashes":["3361116154","3824322444"]}