loading...

JavaScript Variables

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Variables in programming are named memory locations that store data. This said data can be retrieved for later user via the name. Some programming languages allow you to assign the same name to another variables and others strictly forbid this.

The programming languages that allow the reassignment of the same variable name to another data are called loosely typed languages others that forbid this are called strongly typed languages.

JavaScript is an example of a loosely typed language.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.


Variables in JavaScript can be declared with three keywords. They are:

  • var
  • let
  • const

They literally do the same thing but with some huge differences.

Variables declared with the var keyword are the "traditional" way of declaring variables in JavaScript and you will still find them in modern code and some developers still use them and some advocate against it.

The var keyword used in ReactJS as seen in Firefox 71.0 Developer Tools
The var keyword used in ReactJS as seen in Firefox 71.0 Developer Tools

Now, you might wonder why i said the var keyword is a "traditional" way, that's because of its behavior. And prior to ES6 (ES2015) the var keyword was the only way to declare variables in JavaScript. The let keyword was introduced in ES6 to solve some of the issues that arise when using variables declared with var. We'll talk about let later.

The question you might ask is: What behavior are you talking about?

The behavior is called hoisting. From a beginners perspective hoisting is an advanced JavaScript concept but, it will be of great help if you know about it when starting out with JavaScript.

Let's talk about it briefly and we'll provide an additional learning resource if you decide to go deep and learn this further.

Hoisting means regardless of where a variable is declared, it is moved to the top of the scope in which it is defined.

That's the basic definition. Let's see some code.

Take a look at the image below. We called variable a before declaring it but due to hoisting the variable still get the value 10 after the code is executed.

Variable hoisting as seen in Firefox 71 Developer Tools


Mind you i have docked the Developer Tools into a separate window. If you've followed this series up to this point i believe you should be able to do this.

This is just a basic example and its enough to get you started.

This particular hoisting behavior also applied to functions as we'll see later in the series.

If you will like to take a deep dive into hoisting, please read the following post by lydia hallie.


The let keyword was introduced in ES6 (ES2015). Any variable declared with the let keyword cannot be called before being created.

We'll revisit our previous example by changing var to let.

Variable declaration in JavaScript

When the code is executed you will get an error stating ReferenceError: can't access lexical declaration 'a' before initialization.

Reference error shown in Firefox developer tools

But, in the source code after the variable is declared with let you can assign another value then the code will execute just fine.

Variable declaration shown in Firefox devtools

const on the other does not allow this.


The const keyword was introduced in ES6 (ES2015) alongside let and unlike let you cannot assign another value to a variable declared with const.

If you try to assign another value to a variable declared with const you will get an invalid assignment Type error.

Type error shown in firefox devtools

There is more to JavaScript variables than what we've discussed here but this is enough to get you started.

Up next, Arrays.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide