{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/javascript-variable-adn-data-types","result":{"data":{"mdx":{"frontmatter":{"title":"JavaScript Variables And Data Types","category":"javascript","date":"June 22nd, 2020","readTime":2,"slug":"javascript-variable-adn-data-types","embeddedImages":null,"image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/2afd481d6d171652cf9d3b876e113b49/87706/p1.png","srcSet":"/static/2afd481d6d171652cf9d3b876e113b49/f80f8/p1.png 320w,\n/static/2afd481d6d171652cf9d3b876e113b49/9a63f/p1.png 640w,\n/static/2afd481d6d171652cf9d3b876e113b49/87706/p1.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/2afd481d6d171652cf9d3b876e113b49/c0bcc/p1.webp 320w,\n/static/2afd481d6d171652cf9d3b876e113b49/17574/p1.webp 640w,\n/static/2afd481d6d171652cf9d3b876e113b49/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 Variables And Data Types\",\n  \"slug\": \"javascript-variable-adn-data-types\",\n  \"image\": \"./images/p1.png\",\n  \"date\": \"2020-06-22T00:00:00.000Z\",\n  \"category\": \"javascript\",\n  \"readTime\": 2\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(\"p\", null, \"Variables are values that can change based on conditions or information passed to the program. Actually, variables do programs function as a set of instructions that instruct a computer what to do. Most programs use data as they run. You can represent data as either constant (fixed values that don't change) or as variables (variable values).\"), mdx(\"h2\", null, \"Data Types\"), mdx(\"p\", null, \"An important concept in programming is the data type. Data types specify the types of values a variable can hold and the operations it can perform. JavaScript presents a very flexible data type system. It is referred to as \", mdx(\"span\", {\n    style: {\n      color: 'chocolate'\n    }\n  }, \"\\\"loosely typed\\\"\"), \" or \\\"weakly typed\\\". As a result, even though the variable may start out as one type, it can be changed into another type later on. \\\"Strongly\\\" typed languages cannot change the type of variables once they have been assigned to it. \\\"Strongly\\\" typed languages provide more type safety, meaning you can assume that a variable will always be a certain type in a \\\"strongly\\\" typed language. However, weakly typed languages, on the other hand, are more flexible.\"), mdx(\"p\", null, \"There are some common data types in even \\\"weakly\\\" typed languages. In most languages, the following data types exist:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"null // a defined non-value\\ninteger  //a number\\nboolean  //a true or false value\\ncharacter  //a single character\\nfloating-point number  //a number with a decimal point\\nstring // a group of characters (i.e. a word or multiple words)\\n\")), mdx(\"p\", null, \"Another JavaScript type is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"undefined\"), \", which indicates that a variable is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"not defined\"), \". The difference between \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"undefined\"), \" is that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" is a value that is defined and set to null, while undefined is a variable without a definition. Collectively, these types of data are known as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"primitive\\\"\"), \" types in JavaScript. JavaScript provides the following kinds of \\\"complex\\\" data types:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Array\"), \": A high-level, list-like object contains values, as well as a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"length\"))), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let myArr = [1, 2, 3]\\n\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Object\"), \": An object of JavaScript has properties when its root level is defined as an object\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let myObj = { foo: 1, bar: 2 }\\n\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Function\"), \": A type of object that performs a computation when invoked. Many arguments are often passed in, and for some, they return values as well\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Function declaration\\nfunction multiply(arg1, arg2) {\\n  return arg1 * arg2\\n}\\n\\n// Function usage\\nlet result = multiply(2, 4)\\n\")), mdx(\"h2\", null, \"Defining Variables In JavaScript\"), mdx(\"p\", null, \"Most programs require the definition of variables. As in other languages, JavaScript has the requirement of defining variables before they can be used. Typically, the flow of a file in a program is top to bottom, so normally the variable definition appears before the variable usage. Take a look at the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Variable definition\\nvar num = 2\\n\\n// Variable usage\\nconsole.log(num)\\n\")), mdx(\"p\", null, \"In the code above the variable \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"num\"), \" is already defined, and it is assigned a value of 2 (an integer). Afterward, it is passed as an argument to a \\\"function\\\" called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"console.log\"), \". Because JavaScript is a weakly typed language, you do not need to explicitly declare \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"num\"), \" as an integer. In other strongly typed languages, such as C# (another common language) you might see numeric types explicitly defined, such as:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Variable definition\\nint num = 2;\\n\\n// Variable usage\\nConsole.Write(num);\\n\")), mdx(\"p\", null, \"As in the JavaScript code above, the C# code would accomplish the same task. According to the JavaScript code above, the var keyword is used to define the variable num. In modern JavaScript programs, people do not usually use this keyword. There are three different keywords you can use:\"), mdx(\"ol\", {\n    \"start\": 4\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var\"), \": Variables can be declared, and their value can be initialized\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x = 1\\n\\nif (x === 1) {\\n  var x = 2\\n\\n  // expected output: 2\\n  console.log(x)\\n}\\n\\n// expected output: 2\\nconsole.log(x)\\n\")), mdx(\"ol\", {\n    \"start\": 5\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"let\"), \": An optional value is assigned to a block-scoped variable\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let x = 1\\n\\nif (x === 1) {\\n  let x = 2\\n\\n  // expected output: 2\\n  console.log(x)\\n}\\n\\n// expected output: 1\\nconsole.log(x)\\n\")), mdx(\"ol\", {\n    \"start\": 6\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"const\"), \": This declares a local variable that is block-scoped. Values are constants and cannot be changed or redeclared\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const number = 42\\n\\ntry {\\n  number = 99\\n} catch (err) {\\n  // expected output: TypeError: invalid assignment to const `number'\\n  // Note - error messages will vary depending on browser\\n  console.log(err)\\n}\\n\\n// expected output: 42\\nconsole.log(number)\\n\")), mdx(\"p\", null, \"maximum programmer used \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" rather than \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \" for safety reasons. If you notice in the code above for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" variables share almost all of the characteristics of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \" which includes one more function. There is a concept known as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"block scope\\\"\"), \" of a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" variable. In a moment, we will discuss what that means, but notice above that in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" block x is re-assigned to \\\"2\\\" inside an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"if block,\\\"\"), \" but remains as \\\"1\\\" outside the block.\"), mdx(\"h1\", null, \"Naming Conventions\"), mdx(\"p\", null, \"There are naming conventions in JavaScript, which specify how variables should be named. In general, you should describe what your variable represents\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// bad\\nlet str = 2\\n\\n// good\\nlet num = 2\\n\")), mdx(\"p\", null, \"Additionally to naming variables descriptively, different types of variables are named with lowercase and uppercase letters. In general, JavaScript uses what's called \\\"camelCase\\\" with most variables. In \\\"camelCase\\\" the first letter of any variable name is lowercase, and all subsequent words in the variable begin with uppercase letters. There are some data types in JavaScript that should be \\\"CapitalCase,\\\" and you will learn about them later. The most common constant used by people is \\\"UPPER_SNAKE_CASE.\\\"\"), mdx(Link, {\n    to: \"/posts\",\n    className: \"btn center-btn\",\n    mdxType: \"Link\"\n  }, \"all posts\"));\n}\n;\nMDXContent.isMDXComponent = true;","id":"a2a7ae74-851a-5365-bce4-1144011c3d51"}},"pageContext":{"slug":"javascript-variable-adn-data-types"}},"staticQueryHashes":["3361116154","3824322444"]}