{"id":129931,"date":"2022-04-13T16:43:28","date_gmt":"2022-04-13T20:43:28","guid":{"rendered":"https:\/\/brainstation.io\/?post_type=codex-reference&#038;p=129931"},"modified":"2025-02-04T14:57:57","modified_gmt":"2025-02-04T19:57:57","slug":"variables","status":"publish","type":"codex-reference","link":"https:\/\/brainstation.io\/learn\/javascript\/variables","title":{"rendered":"Variables"},"content":{"rendered":"\n<header class=\"wp-block-bstn-blocks-hero-with-overview bstn-blocks-hero-with-overview\"><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--main\"><svg fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-hero-with-overview__bg-flair--full\"><g opacity=\"0.35\"><path d=\"M-103.887 96.613H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55-136.427v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332-232v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 100.134c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M-244.061 214.487H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55 214.009v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332 118.436v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 218.03c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M534.544 96.613h140.811m138.263 0H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 96.772v21.664-21.664zM813.618-232v350.436V-232zm139.218 0v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M535.357 100.134c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M673.444 214.487H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 118.436v228.739-228.739zm138.9 0v350.436-350.436zm139.218 0v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M813.696 218.03c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm-278.339 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><\/g><\/svg><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__copy-container\"><p class=\"bstn-blocks-hero-with-overview__subtitle\"><meta charset=\"utf-8\">javascript Tutorial<\/p><h1 class=\"bstn-blocks-hero-with-overview__title\">JavaScript Variables<\/h1><p class=\"bstn-blocks-hero-with-overview__description\"><meta charset=\"utf-8\">Learn more about one of the world&#8217;s most popular programming languages. <\/p><\/div><div class=\"bstn-blocks-hero-with-overview__image-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__image\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12115008\/Javascript-Light-Transparent.svg\" alt=\"\"\/><\/div><\/div><\/div><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--offset\"><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__card-container\"><div class=\"bstn-blocks-hero-with-overview__copy-card\"><nav class=\"bstn-blocks-hero-overview\"><h2 class=\"bstn-blocks-hero-overview__title\"><meta charset=\"utf-8\">Tutorial Contents<\/h2><ol class=\"bstn-blocks-hero-overview__list\">\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-variable-naming-convention\">JavaScript Variable Naming Convention<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-var-keyword\">JavaScript Var Keyword<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-let-keyword\">JavaScript Let Keyword<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-const-keyword\">JavaScript Const Keyword<\/a><\/li>\n<\/ol><\/nav><\/div><\/div><\/div><\/div><\/header>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript empowers millions and millions of websites and applications. While implementing such websites, it is important to organize your information and store data. JavaScript variables are a way of storing information or data in memory and giving it a name to easily remember where the information or data is stored.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Imagine building an eCommerce website where you have to store product information. For each product, there must be a need to store the product name, manufacturer, date launched, quantities available, and price. Now as a Developer, once you decide to store all this information, it becomes more and more difficult to remember where each piece of information is stored in memory because memory addresses on a computer are a long sequence of numbers and characters and it is impossible for any human to memorize them. A JavaScript variable is used to name these memory locations so that when the information is needed again, one can just use the variable name and the information will be retrieved.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript variables can be created in three different ways using keywords&nbsp;<code>var<\/code>,&nbsp;<code>let<\/code>&nbsp;and&nbsp;<code>const<\/code>. Initially, variables were created using only the&nbsp;<code>var<\/code>&nbsp;keyword. But due to some historic drawbacks of using&nbsp;<code>var<\/code>,&nbsp;<code>let<\/code>&nbsp;and&nbsp;<code>const<\/code>&nbsp;were implemented for creating variables. It is recommended that Developers don\u2019t use the&nbsp;<code>var<\/code>&nbsp;keyword anymore to declare variables. Irrespective of which keyword you use to get your variable declared, the syntax still remains the same.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">As seen on the right, a variable can be created by specifying the keyword, followed by a variable name that will be used to store the value and as well retrieve it later, a simple assignment operator (an equal sign) for assigning variable values, and the value to be stored itself.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Code Example<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;keyword> &lt;variable_name> = &lt;value_to_be_stored><\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">You can choose to create a local variable or a global variable. Global variables are accessible from anywhere in the program. Local variables are variables declared inside a function, which avoids a conflict with another variable with the same variable name.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">You can also declare multiple variables in one statement in JavaScript. Variable declaration can also span multiple lines.<\/p>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-variable-naming-convention\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Variable Naming Convention<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript variables are powerful programming constructs. However, there is a convention that should be followed by creating a variable in JavaScript.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Following are the rules that a Developer should follow to properly get variables declared:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Variable name should only contain alphabets, numbers, $ and _<\/li><li>Variable name should not start with a number<\/li><li>Variable names are case-sensitive i.e.&nbsp;<code>result<\/code>&nbsp;and&nbsp;<code>Result<\/code>&nbsp;are two different variables<\/li><li>Variables can\u2019t be named as one of the reserved keywords like&nbsp;<code>let<\/code>,&nbsp;<code>return<\/code>,&nbsp;<code>const<\/code>, etc.<\/li><li>Variable should use&nbsp;<code>camelCase<\/code>&nbsp;i.e.&nbsp;<code>numOne<\/code>&nbsp;is preferred over&nbsp;<code>NumOne<\/code>&nbsp;or&nbsp;<code>numone<\/code><\/li><li>Variable can\u2019t have hyphen&nbsp;<code>-<\/code>&nbsp;in its name<\/li><li>Use easy-to-understand names that symbolize the value stored in variables. For e.g. instead of calling a variable&nbsp;<code>phNum<\/code>, a Developer can call it&nbsp;<code>phoneNumber<\/code>.<\/li><li>Don\u2019t use single-letter variable names like&nbsp;<code>x<\/code>,&nbsp;<code>a<\/code>,&nbsp;<code>z<\/code>, etc.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-var-keyword\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Var Keyword<\/h2><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">Variables can be created using the&nbsp;<code>var<\/code>&nbsp;keyword. The only thing to remember is that JavaScript won\u2019t complain or throw an error if a variable is being used before it is declared using the&nbsp;<code>var<\/code>&nbsp;keyword. In modern programming using JavaScript code, using the&nbsp;<code>var<\/code>&nbsp;keyword for variables is discouraged and should be replaced with&nbsp;<code>let<\/code>&nbsp;or&nbsp;<code>const<\/code>&nbsp;keywords. Variables created using&nbsp;<code>var<\/code>&nbsp;keyword are also function-scoped or global-scoped i.e. it is very hard to limit wherein a large block of code the variable should be accessible. Hence, code written using the&nbsp;<code>var<\/code>&nbsp;keyword is hard to maintain.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Code Example<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces line-numbers language-javascript\" data-language=\"javascript\" aria-readonly=\"true\"><code>var numOne = 20;\nvar numTwo = 30;\n\nvar result = numOne + numTwo;\nconsole.log(\u2018Result is: \u2018, result);<\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-let-keyword\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Let Keyword<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"is-style-bstn-paragraph-documentation-body\"><code>let<\/code>&nbsp;keyword was introduced to solve hoisting issues that the&nbsp;<code>var<\/code>&nbsp;keyword had.&nbsp;<code>let<\/code>&nbsp;variables are block-scoped and are only accessible to where they are declared. This limits the issues of variables being overwritten somewhere else in the code. Apart from this, the variables created using the&nbsp;let&nbsp;keyword follow the same syntax as the ones created using the&nbsp;var&nbsp;keyword. Variables created using&nbsp;let&nbsp;and&nbsp;var&nbsp;keywords can be reassigned a value of a different kind. Hence they are mutable.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Code Example<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces line-numbers language-javascript\" data-language=\"javascript\" aria-readonly=\"true\"><code>let numOne = 20;\nlet numTwo = 30;\n\nvar result = numOne + numTwo; \nconsole.log(\u2018Result is: \u2018, result); \/\/ should print 50\n\nnumThree = 60;\nresult = numOne + numThree; \/\/ reassign result new value\nconsole.log(\u2018Result is: \u2018, result); \/\/ should print 80<\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-const-keyword\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Const Keyword<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Sometimes, variables created should not change the value assigned to it. This can\u2019t be achieved if you declare a variable using&nbsp;<code>let<\/code>&nbsp;and&nbsp;<code>var<\/code>&nbsp;keywords. In such cases, a variable should be created using the&nbsp;<code>const<\/code>&nbsp;keyword. A variable created using&nbsp;<code>const<\/code>\u220f can\u2019t change the value assigned to it. It symbolizes constants.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Code Example<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces line-numbers language-javascript\" data-language=\"javascript\" aria-readonly=\"true\"><code>let numOne = 20;\nlet numTwo = 30;\n\nconst result = numOne + numTwo; \nconsole.log(\u2018Result is: \u2018, result); \/\/ should print 50\n\nnumThree = 60;\nresult = numOne + numThree; \/\/ this is not allowed as result is a constant variable\nconsole.log(\u2018Result is: \u2018, result); \/\/ this will not be executed as above line has error<\/code><\/pre><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\"><code>const<\/code>&nbsp;variables are also named differently sometimes when they store a value that would be otherwise hard to remember or store. Like private keys, colors, fonts, etc. usually have complex values and hence&nbsp;<code>const<\/code>&nbsp;are appropriate for it.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Code Example<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces line-numbers language-javascript\" data-language=\"javascript\" aria-readonly=\"true\"><code>const LIGHT_GRAY = \u2018#ccc\u2019;\nconst DARK_GRAY = \u2018#eee\u2019;<\/code><\/pre><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-content-navigation-footer bstn-blocks-content-nav-footer\"><div class=\"bstn-blocks-content-nav-footer__links-container\"><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title bstn-blocks-content-nav-footer__link--desktop\">Previous<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\/comment\"><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--left\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--left\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><span class=\"bstn-blocks-content-nav-footer__link-text bstn-blocks-content-nav-footer__link--desktop\">JavaScript Comment<\/span><\/a><\/div><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title\">Next<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\/operators\"><span class=\"bstn-blocks-content-nav-footer__link-text\">JavaScript Operators<\/span><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--right\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--right\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><\/a><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-container bstn-blocks-container bstn-blocks-container--dark-blue bstn-blocks-container--96 bstn-blocks-container--negative-container bstn-blocks-container--overflow-hidden\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1140 621\" fill=\"none\" class=\"bstn-blocks-container__bg-flair\"><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.026 736.434V203.02\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.364 436.132L-120 436.131l180.364.001zm0-99.873H-120 60.364zm0-99.872H-120 60.364zM128 536.004h-248 248z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M57.518 535.982a2.286 2.286 0 114.572 0 2.286 2.286 0 01-4.572 0zm0-99.836a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002z\" cliprule=\"evenodd\"><\/path><\/g><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M979.195-28.206V397.98m81.185-524.745V397.98\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M1141.45 168.46H964h177.45zm0 98.334H964h177.45zm0 98.333H964h177.45zm66.55-295H964h244z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M1138.66 70.148a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49-.001zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.25zm-81.707 0a2.25 2.25 0 104.5.004 2.25 2.25 0 00-4.5-.005zm81.707 98.299a2.252 2.252 0 002.25 2.251 2.252 2.252 0 000-4.503 2.253 2.253 0 00-2.25 2.252zm-81.707 0a2.25 2.25 0 104.498 0 2.25 2.25 0 00-2.249-2.252 2.25 2.25 0 00-2.249 2.252zm161.917-.001a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm0 98.299a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm81.707 98.299c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm161.917 0a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0z\" cliprule=\"evenodd\"><\/path><\/g><\/svg><div class=\"bstn-blocks-container__wrapper bstn-blocks-container__wrapper--readable-width bstn-blocks-container__wrapper--negative-container\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h2 has-text-align-left bstn-blocks-heading--divider\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Learn JavaScript Today<\/h2><\/div>\n\n\n\n<p><meta charset=\"utf-8\">Get hands-on experience writing code with interactive tutorials in our free online learning platform. <\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list is-style-kg-list-checklist-alternate\"><li>Free and fun<\/li><li>Designed for beginners<\/li><li>No downloads or setup required<\/li><\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-bstn-button-primary\"><a class=\"wp-block-button__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/13110639\/Javascript-promo-clip.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript empowers millions and millions of websites and applications. While implementing such websites, it is important to organize your information and store data. JavaScript variables are a way of storing information or data in memory and giving it a name to easily remember where the information or data is stored. Imagine building an eCommerce website [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":129957,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-129931","codex-reference","type-codex-reference","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference"}],"about":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/types\/codex-reference"}],"version-history":[{"count":9,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129931\/revisions"}],"predecessor-version":[{"id":131334,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129931\/revisions\/131334"}],"up":[{"embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129957"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/media?parent=129931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/categories?post=129931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/tags?post=129931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}