JavaScript Posts

## What is a variable?

A variable, in terms of a programming language can be considered a reserved space booked by a developer within the memory of the system in which a particular program is run. These are like containers where we can put values upfront, like at the time of declaration, or we can just let the computer know of their existence and fill those containers or reserved spaces with some value at a later point of time.

> Talk is cheap, show me the code &mdash; Linus Torvalds

We can think of variables as small containers for various items that we use, on daily basis, in our kitchen, like a container for sugar or salt etc. We usually buy a 1kg or 2kg pack of sugar or salt from the market but we store a certain quantity of sugar or salt in a small jar that is easily accessible for day to day use. This similar concept applies to variables in programming languages.

In a programming language, we can store a particular value in variable, like a number or a string or a boolean, or an array or a function or an object. Basically, we can store all forms data structures within a variable in a programming language. The use-case of storing values in a variable could more imagined with the example where you want to write an article and that article is about someone, *suppose Mr. X*. Suppose that article uses the word *Mr. X* in 100 different places in that article. Hence, instead of writing the word *Mr. X* in 100 different places, we can simply write it once in a variable, say *personName* and use that *personName* variable 100 different places in the article. That is the most use of variables in a programming language and particularly in JavaScript.

## How to use variables in JavaScript?

In JavaScript, we can declare variables in three different ways which are listed below:

- by using the **let** keyword;
- by using the using the **const** keyword; or
- by using the **var** keyword.

Each of the above-mentioned will perform a similar task of storing a value in a variable but the behavior will be different when it comes to re-assigning a value or accessing that variable.

Before going into any further details about variables, let's have a look at examples below to see how we can define an use variables in JavaScript with all of the above keywords:

**&rarr;  using the "let" keyword**

```javascript
let firstName = 'John Doe';
let age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "const" keyword**

```javascript
const firstName = 'John Doe';
const age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "var" keyword**

```javascript
var firstName = 'John Doe';
var age = 28;

console.log(firstName, age); // John Doe 28
```

As you can notice from all of the above examples that pattern of declaring a variable in JavaScript is very similar. The only change in each of the above example is the use different keyword. And that is all about basic usage of variables in JavaScript.

The **var** keyword has been quite old in the language. It has been the primary method of declaring variables in the language until 2015 when ES6 came out and introduced two new methods for declaring variables in JavaScript programs i.e. **let** and **const**. In the current times, it is recommended to use only **let** and **const** keywords in a program to declare variables as these are the improved versions of **var**.

With that said, we can now tackle the basic characteristics of each of these three kinds of variable. Further details about each of them will covered in a later article and a link to that article will included in this article.

## The "let" keyword

Variables which are declared with **let** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **let** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **let** keyword. This can be checked from the below example:

```javascript
let papersPassed = 5;
console.log(papersPassed);

// Now the person took the exam and got passed in 2 more papers. Now 7 papers are passed.

papersPassed = papersPassed + 2;
console.log(papersPassed);
```

As can be seen from above example, we can change the value *papersPassed* variable at a later point in our code. However, the other important thing to notice is that when reassigning a value to *papersPassed* variable later in the code, we did not use the **let** keyword. This is because **let** keyword is required to be used when first declaring a variable. When assigning a new value to the same value, we do no use **let** keyword again. If **let** keyword is used again for the same variable, JavaScript will think that we are creating a new variable and since the name of this new variable clashes with an already declared variable, JavaScript will throw an error and will not further execute the program.

Since, variables declared with **let** keyword can be assigned a new value, it is possible that we only declare them initially and then later assign a value. To explain this further, let's have a look at the below example:

```javascript
// A student enrolled in college. The number of papers passed would be zero as no exams are yet taken.

let papersPassed; // value will be undefined

// First year exams. Three papers passed. We should not use plus sign here as it then result NaN.

papersPassed = 3; // value will be 3

// Second year exams. Two papers passed.

papersPassed = papersPassed + 2; // value will be 5
```

## The "const" keyword

Variables which are declared with **const** keyword can't be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **const** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. **That is not possible** with variables declared with **const** keyword. Therefore, **const** keyword is used, usually, for variables which are not supposed to change like birth year or value of PI. This can be illustrated from the below example:

```javascript
const birthYear = 1990;
console.log(birthYear);

// It is not possible that a person's birth year will be changed unless it was documented incorrectly. In order to correct that we can use the following code.

const updatedBirthYear = 1991;
console.log(updatedBirthYear);
```

As can be seen from above example, we have not changed the value *birthYear* variable at a later point in our code but rather used a new variable to rectify the documentation of birth year. Had we reassigned the value of the *birthYear*, JavaScript would have thrown an error and program will not be further executed. **This is the rule for these variable types that a new value can't be assigned to them**. Since, we can't reassign a new value to variables declared with **const** keyword, we can't declare a variable with **const** keyword without providing a value. It would also result in an error.

## The "var" keyword

Variables which are declared with **var** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **var** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **var** keyword. This can be illustrated from the below example:

```javascript
var birthYear = 1990;
console.log(birthYear);

// Changing the value of the birthYear variable directly

birthYear = 1991;
console.log(birthYear);
```

As can be seen from above we can reassign the value of a variable declared with **var** keyword, similar to variables declared with **let** keyword. Moreover, we can also just initialise these variables without any value and change the value later in the code similar to variables with **let** keyword. In many ways variables declared with **var** keyword have somewhat similar functionality as variables declared with **let** keyword. However, there are some very critical differences between the two, the important one of which is the scoping of the two kinds of variable. This scoping will be discussed in detail in a later article which will be linked to this article.

With that, now you know three different ways in which you can create variables in you JavaScript program. It is highly recommended that always create variables with **let** and / or **const** keywords unless the situation demands the use of **var** keyword which is absolutely rare.

## Naming conventions for variables

There are three very popular naming conventions when it comes to naming variables. These are as follows:

- **Pascal case** - In this convention all words forming a name of a variable starts with uppercase first character like **FirstName** or **LastName** or **Age**.
- **Snake case** - In this convention all words forming a name of a variable starts with lowercase and are separated by an underscore like **first_name** or **last_name** or **age**.
- **Camel case** - In this convention all words forming a name of a variable starts with uppercase first character except for the first character of the first word which would be lower case like **firstName** or **lastName** or **age**.

**In JavaScript, it is common and usual practice to always use camel case variable naming convention.**

## Rules for naming variables

There are few very important rules when it comes to naming variables which are listed below.

- A variable name **must not** start with a number like 2 or 1 or 3 etc.
- A variable name **can only** contain *$* (dollar sign) or an *_* (underscore) as special characters. **All other special characters are not allowed.**
- A variable **must not** be a reserved keyword in JavaScript like *let*, *const* *function* etc.
- Variable names **should be** descriptive enough to give reader an idea of the value or data type the variable holds.

## Conclusion

The key take away from this article are as follows:

- We can use variables in our program which will help us in reusing the same values at different points in our code.
- There are three keywords with which we can declare variables in JavaScript and these are **var**, **let** and **const**.
- The value assigned to variables declared with **let** and **var** keywords can be changed later in the code.
- Variables declared with **let** and **var** keywords can be initialised with no value.
- Variables declared with **const** keywords can not be initialised with no value and the value of these variables can not be changed later in the code. 
- Never start a variable with a number.
- Never use special characters in variable names except for *$* or *_*.
- Never name variables which are reserved keywords in JavaScript.
- It is recommended to use **camel case** convention for naming variables.

Random Quote Generator

## What is a variable?

A variable, in terms of a programming language can be considered a reserved space booked by a developer within the memory of the system in which a particular program is run. These are like containers where we can put values upfront, like at the time of declaration, or we can just let the computer know of their existence and fill those containers or reserved spaces with some value at a later point of time.

We can think of variables as small containers for various items that we use, on daily basis, in our kitchen, like a container for sugar or salt etc. We usually buy a 1kg or 2kg pack of sugar or salt from the market but we store a certain quantity of sugar or salt in a small jar that is easily accessible for day to day use. This similar concept applies to variables in programming languages.

In a programming language, we can store a particular value in variable, like a number or a string or a boolean, or an array or a function or an object. Basically, we can store all forms data structures within a variable in a programming language. The use-case of storing values in a variable could more imagined with the example where you want to write an article and that article is about someone, *suppose Mr. X*. Suppose that article uses the word *Mr. X* in 100 different places in that article. Hence, instead of writing the word *Mr. X* in 100 different places, we can simply write it once in a variable, say *personName* and use that *personName* variable 100 different places in the article. That is the most use of variables in a programming language and particularly in JavaScript.

## How to use variables in JavaScript?

In JavaScript, we can declare variables in three different ways which are listed below:

- by using the **let** keyword;
- by using the using the **const** keyword; or
- by using the **var** keyword.

Each of the above-mentioned will perform a similar task of storing a value in a variable but the behavior will be different when it comes to re-assigning a value or accessing that variable.

Before going into any further details about variables, let's have a look at examples below to see how we can define an use variables in JavaScript with all of the above keywords:

**&rarr;  using the "let" keyword**

```javascript
let firstName = 'John Doe';
let age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "const" keyword**

```javascript
const firstName = 'John Doe';
const age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "var" keyword**

```javascript
var firstName = 'John Doe';
var age = 28;

console.log(firstName, age); // John Doe 28
```

As you can notice from all of the above examples that pattern of declaring a variable in JavaScript is very similar. The only change in each of the above example is the use different keyword. And that is all about basic usage of variables in JavaScript.

The **var** keyword has been quite old in the language. It has been the primary method of declaring variables in the language until 2015 when ES6 came out and introduced two new methods for declaring variables in JavaScript programs i.e. **let** and **const**. In the current times, it is recommended to use only **let** and **const** keywords in a program to declare variables as these are the improved versions of **var**.

With that said, we can now tackle the basic characteristics of each of these three kinds of variable. Further details about each of them will covered in a later article and a link to that article will included in this article.

## The "let" keyword

Variables which are declared with **let** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **let** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **let** keyword. This can be checked from the below example:

```javascript
let papersPassed = 5;
console.log(papersPassed);

// Now the person took the exam and got passed in 2 more papers. Now 7 papers are passed.

papersPassed = papersPassed + 2;
console.log(papersPassed);
```

As can be seen from above example, we can change the value *papersPassed* variable at a later point in our code. However, the other important thing to notice is that when reassigning a value to *papersPassed* variable later in the code, we did not use the **let** keyword. This is because **let** keyword is required to be used when first declaring a variable. When assigning a new value to the same value, we do no use **let** keyword again. If **let** keyword is used again for the same variable, JavaScript will think that we are creating a new variable and since the name of this new variable clashes with an already declared variable, JavaScript will throw an error and will not further execute the program.

Since, variables declared with **let** keyword can be assigned a new value, it is possible that we only declare them initially and then later assign a value. To explain this further, let's have a look at the below example:

```javascript
// A student enrolled in college. The number of papers passed would be zero as no exams are yet taken.

let papersPassed; // value will be undefined

// First year exams. Three papers passed. We should not use plus sign here as it then result NaN.

papersPassed = 3; // value will be 3

// Second year exams. Two papers passed.

papersPassed = papersPassed + 2; // value will be 5
```

## The "const" keyword

Variables which are declared with **const** keyword can't be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **const** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. **That is not possible** with variables declared with **const** keyword. Therefore, **const** keyword is used, usually, for variables which are not supposed to change like birth year or value of PI. This can be illustrated from the below example:

```javascript
const birthYear = 1990;
console.log(birthYear);

// It is not possible that a person's birth year will be changed unless it was documented incorrectly. In order to correct that we can use the following code.

const updatedBirthYear = 1991;
console.log(updatedBirthYear);
```

As can be seen from above example, we have not changed the value *birthYear* variable at a later point in our code but rather used a new variable to rectify the documentation of birth year. Had we reassigned the value of the *birthYear*, JavaScript would have thrown an error and program will not be further executed. **This is the rule for these variable types that a new value can't be assigned to them**. Since, we can't reassign a new value to variables declared with **const** keyword, we can't declare a variable with **const** keyword without providing a value. It would also result in an error.

## The "var" keyword

Variables which are declared with **var** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **var** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **var** keyword. This can be illustrated from the below example:

```javascript
var birthYear = 1990;
console.log(birthYear);

// Changing the value of the birthYear variable directly

birthYear = 1991;
console.log(birthYear);
```

As can be seen from above we can reassign the value of a variable declared with **var** keyword, similar to variables declared with **let** keyword. Moreover, we can also just initialise these variables without any value and change the value later in the code similar to variables with **let** keyword. In many ways variables declared with **var** keyword have somewhat similar functionality as variables declared with **let** keyword. However, there are some very critical differences between the two, the important one of which is the scoping of the two kinds of variable. This scoping will be discussed in detail in a later article which will be linked to this article.

With that, now you know three different ways in which you can create variables in you JavaScript program. It is highly recommended that always create variables with **let** and / or **const** keywords unless the situation demands the use of **var** keyword which is absolutely rare.

## Naming conventions for variables

There are three very popular naming conventions when it comes to naming variables. These are as follows:

- **Pascal case** - In this convention all words forming a name of a variable starts with uppercase first character like **FirstName** or **LastName** or **Age**.
- **Snake case** - In this convention all words forming a name of a variable starts with lowercase and are separated by an underscore like **first_name** or **last_name** or **age**.
- **Camel case** - In this convention all words forming a name of a variable starts with uppercase first character except for the first character of the first word which would be lower case like **firstName** or **lastName** or **age**.

**In JavaScript, it is common and usual practice to always use camel case variable naming convention.**

## Rules for naming variables

There are few very important rules when it comes to naming variables which are listed below.

- A variable name **must not** start with a number like 2 or 1 or 3 etc.
- A variable name **can only** contain *$* (dollar sign) or an *_* (underscore) as special characters. **All other special characters are not allowed.**
- A variable **must not** be a reserved keyword in JavaScript like *let*, *const* *function* etc.
- Variable names **should be** descriptive enough to give reader an idea of the value or data type the variable holds.

## Conclusion

The key take away from this article are as follows:

- We can use variables in our program which will help us in reusing the same values at different points in our code.
- There are three keywords with which we can declare variables in JavaScript and these are **var**, **let** and **const**.
- The value assigned to variables declared with **let** and **var** keywords can be changed later in the code.
- Variables declared with **let** and **var** keywords can be initialised with no value.
- Variables declared with **const** keywords can not be initialised with no value and the value of these variables can not be changed later in the code. 
- Never start a variable with a number.
- Never use special characters in variable names except for *$* or *_*.
- Never name variables which are reserved keywords in JavaScript.
- It is recommended to use **camel case** convention for naming variables.

Analysis of variable declarations in JavaScript

Variables in JavaScript (let, const, var)

It is very important to have comments in the code as these are suppose to give a brief but specific information to the reader of the code about what the code is supposed to do. JavaScript offers both multi-line and single-line comments.

A comment in code is simply the information that is ignored by the browsers while executing the code. In JavaScript, one can write some code and then comment them out so that piece of code could be ignored by browsers.

With that said, let's have a look at some of the common forms of comments in JavaScript.

## Single-line comments

Below is the example of a single-line comment which just gives a brief information about what the below code is supposed to do.

```javascript
// print name to console
console.log('John Doe');
```

## Multi-line comments

Below is the example of a multi-line comment which just gives a brief information about what the below code is supposed to do.

```js
/* 
  print name to console
  print age to console
*/
console.log('Joh Doe');
console.log(28);
```

## Ignoring statements

Below is the example of a comment which is just written, may be, for the purpose of testing during development but was intended to get ignored while final code runs.

```js
console.log('Joh Doe');
// console.log(28);
```

## Comments in front of statements

Below is the example of a comment which is just written to explain the us of a particular statement.

```js
console.log('Joh Doe'); // Print name to console
```

## Conclusion

The key take away from this article are as follows:

- Comments are used improve code readability
- Comments should be concise and to the point
- JavaScript offers both multi-line and single-line comments.

Comments in JavaScript

In order to get started with with JavaScript, create a folder wherever you want on your system and name it whatever you want. For the sake of simplicity, I will create a folder on the desktop by the name of _html-script_. Inside that I will create a new HTML file by the name of _index.html_ and another file by the name of _script.js_.

Then, I will open the _index.html_ file and write the following markup in that file.

```html
!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <p>Learning JavaScript</p>
    <script src="./script.js"></script>
  </body>
</html>
```

As can be seen from the above markup, I have already linked my script file with the markup. Now, I will open the _script.js_ and write the below code in that file:

```js
const fullName = 'John Doe';
const age = 28;

console.log(fullName);
console.log(age);
```

After that I will open my _index.html_ file in the browser and will then go to the browser console. There I should see two lines printed with following text:

1. John Doe
2. 28

That's it! Now you have written your first very basic JavaScript program that runs in the browser. Now it's time to get to know what each line of as written in _script.js_ file does.

## The first two lines of script

The first line of the _script.js_ starts with a word **const**. That is a keyword in JavaScript which means we are going to create a variable (we are going to reserve some memory which will store some value). After that a white space is left and that is necessary to avoid any syntax errors. Since, we have used **const** keyword while creating a variable, we will not be able change its value later in our code. There are two more forms of variable declaration keywords which will be discussed in a variables' specific article.

After that, we have written a word **fullName** which is the name we have assigned to the variable that is created with the help of **const** keyword. There is not typo error in the word **fullName**. It was intentional. The reason is that we can't leave a white-space in a variable name. Moreover, since the character "f" is small while character "N" is capitalised only because of a variable declaration convention which is called **camel-case**.

In **camel-case** convention, we use the small letter for the first word in a variable name and if there are more than one word in a variable name, all subsequent words' first character is capitalised.

After that, there is an equal sign which simply means that the value of this variable would be what is after the equal sign.

Please note that the value after the equal sign in wrapped around with single-quotes and that is because it is a string i.e. sequence of characters which then form words and sentences. Therefore, it is is mandatory for us to use single or double-quotes around the string. One can use either single-quotes or double-quotes to wrap the strings as long as the both the opening and closing are of same type.

After that we have marked the end of the line or statement with a semi-colon. It is optional but recommended to use them as it specifies that statement ends here.

The second line of the code in _script.js_ file has same rules as the first line but in that line, we have not used quotations for the value and that is only because the value is a number, and we do not use quotes around the value.

### The last two lines script

The last two lines in the script file are very simple. These are just the built-in functions of JavaScript which will print any thing that is provided in between parenthesis. In this case, we have stored values in variables and then passed those variables in the function in between parenthesis. Hence, when page gets loaded, **fullName** and **age** variables are printed in the browser's console.

A Simple JS Program

JavaScript (JS) is a programming language which was first appeared in 1996 and was developed for the purpose of implementing interactivity on the front-end. Over 97% of websites use it JS for client-side interactivity, often incorporating third-party libraries. Alongside HTML and CSS, JavaScript is one of the core technologies for the front-end development.

## What can be done with JavaScript?

One can done multiple variety of tasks of with JS ranging from basic front-end interactivity to development of desktop applications. Below are some of the major areas where JS can be used:

1. Back-end of a website (using Node.js or Deno)
2. Smartphone applications (using react-native)
3. Desktop applications (using electron.js)
4. Single Page Applications (using React, Angular, Vue)
5. And much much more!

## How JS can be used on websites?

One can use JS in the front-end of a website to add interactivity on the client-side like appearance of a pop-up when certain button is clicked or changing theme of the website with the help of a certain theme switch button. Moreover, JS can be used to send http requests to certain APIs to load data on the page with the help of fetch API.

In order to use JS on the front-end, one has two option which are listed below:

1. Internal JavaScript
2. External JavaScript

It is always recommended to use external script file as this would ensure the separation of concerns. However, inline scripts can be used where the script consists of few lines of code.

### Internal JavaScript

One can use JS in the same html file using the below code which simply create an alert with the text "Hello, world!" when html file is run:

```html
<!DOCTYPE html>
<html>
  <head>
    <script>
      alert('Hello, world!');
    </script>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
```

As can be seen from, the JS needs to written inside of **script** tag. That script tag can be used anywhere on the page. It can be included in the **head** tag or **body** tag. It is a common practice to include **script** tag in the **body** tag and particularly, at the end of the **body** tag such as below code snippet:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>

    <script>
      alert('Hello, world!');
    </script>
  </body>
</html>
```

The decision where to include script tag also depends on the need for the script. If it is necessary to get all data from some API before the html is rendered, then it is best to include that script in **head** tag.

### External JavaScript

Using external files is considered the best practice as it increase code reusability, readability and separation of logic from markup. In order to use external script, one needs to create a file with **.js** extension and then let the markup know of the existence of that script.

Suppose, you have created a folder **my-site** on the desktop and inside that folder an html file is created by the name of _index.html_ with below code:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
```

After that, a new file is created in the same directory with name of _script.js_ which has the following code:

```js
alert('Hello, world!');
```

Now it's time to link script with markup as shown in the below code:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
    <script src="./script.js"></script>
  </body>
</html>
```

Now when _index.html_ is run in the browser, you should see an alert window in the browser saying "Hello, world!".

## Conclusion

- JavaScript is scripting language that was first released in 1996.
- Earlier it was only intended only for client-side interactivity but to day it can be used in smartphone applications, back-end and for the purpose developing desktop applications.
- It is best practice to always use external script file and then link that script to markup.
- The file extension of JavaScript files is **.js**.

HTML posts

Random Quote Generator

Analysis of variable declarations in JavaScript

Variables in JavaScript (let, const, var)

Comments in JavaScript

A Simple JS Program

What is JavaScript?