const - JS | lectureJavaScript Fundamentals 1

Values and Variables

JavaScript Fundamentals 1

A value is a piece of data. It is the most fundamental unit of information that we have in programming. Any text like; "John" or number; 23 is a value that you can output using console.log, as we saw in the previous lecture. Let us consider the below code snippet, for example. Each number in the mathematical operation is a value, .i.e. 20 and 22, and the mathematical operator; + joins them together to form a single value which is 42. So as said previously, a value is the smallest piece of information that we have in JavaScript.

One useful thing that we can do with values is to store them into variables, making them reusable repeatedly. Consider the below code snippet where we have a variable userName with a value of 'Ulrich'.

script.js
let userName = 'Ulrich';

This action of assigning a value to a variable is called declaring a variable. This will create a real variable in our computer's memory. That is, it will store the value 'Ulrich' in the variable userName.

Think of a variable like a basket that can hold some object, for example, bread. On that basket, we can write a label to describe what is inside. We can then find the object when we need it by using that label. That is the same way variables work.

Back to the previous code snippet, we have a basket called userName, and inside that basket, we put the value 'Ulrich'. If we then want to use that value, all we need to do is use that label.

To show you what I am talking about, let us try to output our variable userName using console.log ( Use this whenever you want to output something to the browser ).

script.js
let userName = 'Ulrich';
console.log(userName); // Result ==> Ulrich

If we save everything and reload our browser, we get 'Ulrich' in our browser console. This actually proves that our variable declaration worked. We can now use the variable userName as many times as we wish.

Variable declaration is useful because let us suppose we have something like this :

script.js
let userName = 'Ulrich';let anotherUserName = userName;
let nextUserName = userName;
console.log(userName); // Result ==> Ulrich
console.log(anotherUserName); // Result ==> Ulrich
console.log(nextUserName); // Result ==> Ulrich

If we wished to change the value of the variable userName to something else, we only have to do it in one place ( The highlighted line ), and the other variables will have the new value. Let us say we change the value of userName to something else like 'Mark'; doing this will also change anotherUserName and nextUserName to 'Mark'. This is one of the big advantages of variables because, without variables, we would now have to change the value everywhere to 'Mark' manually. Thanks to variables, everywhere we reference, the variable 'userName' will automatically change to 'Mark'. That is one of the most important things to keep in mind about variables.

Naming Rules and Conventions

Knowing what variables are now, let us talk about variables naming rules and conventions. We need to talk about this because it is a bad practice to give random names to variables.

To start, the way that I named my variables in the previous code snippets is called camel case. Camel case means that whenever I have multiple words in a variable name, I write the first word with lowercase and then all the following words with uppercase.

If your variable name is just a single word, we would have this :

script.js
let user = 'Ulrich';

but in case you have a variable with two or more words as we previously had, we instead have this :

script.js
let userName = 'Ulrich';
let anotherUserName = 'Jacob';

There are, of course, other ways of naming a variable. For example, we have this :

script.js
let user_name = 'Ulrich';

This naming convention-style is mostly found amongst Ruby developers. You can use whatever suits you most, but keep in mind that it's kind of a standard in JavaScript to use the camel case convention style.

There also exist some hard rules in JavaScript concerning naming variables. For example, a variable name should not start with a number.

script.js
let 12months = 12;

Writing this is illegal, or it's an illegal naming style. Using VS Code will warn you about this simply because your variable name starts with a number. If you try loading this, you will get an error ( Syntax Error ) in your console, which means you made a mistake in your code syntax.

Variable names can only contain Numbers, Letters, Underscore, or the Dollar Sign. If we try to write something like this :

script.js
let user&name = 'Ulrich';

It will eventually give us a syntax error again in our browser console if we try loading this because & is illegal in variable names.

You may also get an error if you try to name a variable using a reserved JavaScript keyword. For example, if we try to do something like this :

script.js
let new = 'Ulrich';

This variable name won't be allowed as you will again get a syntax error in your console. This is because the word new is a reserved keyword in JavaScript, as we will see later. If you want to use these keywords as variable names, you can fix it by starting your variable name with an underscore or dollar sign. These are the only two symbols allowed besides letters and numbers.

script.js
let _new = 'Ulrich';
//or
let $new = 'Ulrich';

Another JavaScript convention about naming variables is that you shouldn't start your variable name with an uppercase letter. So you shouldn't do something like this :

script.js
let User = 'Ulrich';

This is just a convention: it isn't illegal. It's just that this kind of variable name with an uppercase letter is meant for a specific case in JavaScript, which is OOP ( Object Oriented Programming ) which we are going to cover later. So please never do this when naming your variables, but instead, always name your variables starting with a lower case.

On the same note, variables that are written all in uppercase are reserved for constants. Variables that we know their values will never change—for example, the constant Pi.

script.js
let PI = 3.141592;

Knowing that the value of Pi never changes, that's a constant, and we have a convention of writing it in all uppercase.

Before ending this lecture, let's talk about the final convention: to always use descriptive variable names. It's the first step to write clean code. So when naming variables, it should be really easy to understand exactly what value the variable is holding, just by reading the variable's name.

As an example, let's consider this code snippet :

script.js
let myCurrentJob = 'Software Engineer';
let myCurrentCity = 'Paris';

as compared to this code snippet which is not good :

script.js
let job1 = 'Software Engineer';
let city1 = 'Paris';

I hope we agree that it's much easier to understand what Software Engineer and Paris are in the first case compared to the second just by simply looking at the variable.

To conclude, keep in mind whenever you write your variable names, always make sure they are descriptive as much as possible.