In every programming language, you will find variables. This also holds true for JavaScript. Essentially variables are used to carry information. Without them, it wouldnât be really possible to code any applications. At some point in time, you always have to keep or transfer information in variables. In this JavaScript tutorial, I want to dive with you into JavaScript Variables by example.
For instance, letâs say we have the following JavaScript variable:
Here the variable name carries the information 'Robin Wieruch' . Once you have such variable in JavaScript, you can reference it in your code. For instance, you can output something in JavaScript the following way:
So instead of using the information explicitly, you can put the information into a variable, and use this variable instead the implicit way:
Not only can you carry around the information in this variable and use it somewhere in your JavaScript code, you can use it more than once as well:
Now imagine you are using a variable multiple times throughout your JavaScript application at different places. If you wouldnât have a variable and use the information explicitly, you would have to change it at many places:
Instead, by having a variable for this information in place, you can change it once and affect all the places where it is used:
Actually variables can be changed if you assign a new value to them. You donât need the var statement though, because the variable has been declared before.
In this section, you have used a string primitive from a set of available JavaScript data types . In the following, you will learn more about this and other data types in JavaScript.
A string primitive consists of one or multiple characters. If a string primitive is defined as a variable, it has to be set in quotes. Otherwise, JavaScript would think itâs just another variable.
You can concatenate strings to a new string variable:
You can also define the other string as its own variable:
What you have done here is called string interpolation . By putting your new string into back ticks instead of single quotes, any JavaScript variable can be referenced with ${} in between to create a new JavaScript string. The back ticks notation is called template literals in JavaScript.
In earlier JavaScript versions, template literals as a feature werenât available and you would have used string concatenation instead of string interpolation with the + operator:
JavaScript strings are only one of six JavaScript primitives which are a subset of JavaScript data types .
A JavaScript variable is initialized the following way:
It only takes one step to declare and define a variable. But there is a difference between both. A variable declaration already takes place if no value is assigned to the variable.
In another step, the variable definition can take place. Because it has been declared before, there is no other declaration needed, but just an assignement :
Both steps, the JavaScript variable declaration and JavaScript variable definition can take place in one line of code by declaring and defining the variable right away.
A JavaScript variable can be re-assigned too, by just overwriting the defined value without another declaration:
Itâs also called mutation of the variable or mutating the variable â which are just more technical terms than changing a variable . Later this knowledge is useful, because there is a difference between mutable and immutable data structures . After all, mutating a variable just means you are re-assigning the variableâs value.
The last code snippet shows that itâs also possible to declare/define a new variable based on another declared variable.
In contrast to many other programming languages, JavaScript is a loosely typed language â which only means that variables are not assigned to a particular data type . As you have learned before, a variable can be re-assigned, which means it can also change the data type.
In the last code snippet, the variable was declared and defined as a string primitive , re-assigned to a number primitive and re-assigned again to a boolean primitive . A JavaScript variable can be assigned to any data type. Seven of eight data types in JavaScript are primitives:
The eighth data type is an JavaScript object . Before exploring the JavaScript object, letâs go through the most important JavaScript data types step by step with the simplest explanations for them:
Very rarely you will use BigInt or Symbol in JavaScript, thatâs why I keep them out for this introduction to JavaScript variables for the sake of keeping you in flow for this learning experience. You can read more about those in the exercises below.
Then there are JavaScript objects. For the sake of keeping it beginner friendly again, I will introduce the object as a more complex JavaScript data structure that allows us to hold more/other information than just a string or number. The most commonly used objects in JavaScripts are:
Correct, a JavaScript object is the general term for the data structure, but a specific data structure in itself too. Letâs dive into all specific data structures here. An array is used to hold a list of information. The entries in the list can have any data type:
However, usually all entries in an array have the same data type; which doesnât mean that itâs not possible to have an array with different data types (e.g. integers, booleans, strings). In contrast to objects, arrays have a specific order:
You can access each entry in an array by its position (index). The index starts by 0 though, which is commonly seen in other programming languages as well:
As mentioned before, objects have unordered information defined within the object as key/value pairs, whereas any data type can be present:
Since an object has no order, you can access the values by its keys:
Since an array (also called list) can hold any types as entries (also called items), it can hold a list of objects too:
Since objects can have any types as values, it can hold arrays too:
This can go on and on with objects within objects, arrays within arrays â so-called multi-dimensional arrays â, arrays within objects, and objects within arrays. All permutations of data types are possible in this more complex data structures.
Last but not, there are functions. Same as objects and arrays, I will not go into too much detail here. Rather I want to give you an introduction to elaborate more on these JavaScript data structures later. Functions are used as mini programs to run in your JavaScript application.
Fundamentally a function has the function statement (1), a name (e.g. getName ) (2), input parameters (e.g. person ) (3), some business related internal statements (4), and a return statement (5) â for giving something back from this mini program. The returned valued can be stored in a variable again when calling the function (6).
Within a function, the mini program (4) can be as long as you need to have it to fulfil a business related task for your program. If there is only one computed variable, like in our case for (4), we can use an immediate return as well, without assigning a new variable in between.
Both, input parameters (3) and return statement (5) are optional:
However, itâs a good practice to have input and output for a function:
It keeps a function versatile and more input/output focused which makes your code more robust against any bugs. Anyway, you are here to learn about JavaScript variables and data types/structures in JavaScript. In JavaScript, functions are first-class citizens â which only means that you can make use of them in a more powerful way than in many other programming languages. For instance, one property of being a first-class citizen function is the ability to assign them to a variable:
Since the function has no name, itâs called an anonymous function .
An anonymous function isnât much different in comparison to the previous code snippet, but later we will encounter how this is a powerful way of using functions more dynamically in JavaScript than in many other programming languages.
This was a first introduction about the commonly used JavaScript data types and structures. While primitives can be expressed with strings, numbers (also called integers), booleans, undefined, and null, more complex data structures are represented by objects, arrays and functions.