Before you learn React: You should master these JavaScript features

In this series we introduce you to eight helpful features from EcmaScript 6. First, it’s about variables and the difference between var, let, and const.

React is a JavaScript library that aims to simplify the development of visual interfaces. The library was developed by Facebook and published in 2013. Today it is behind the user interfaces of Facebook, Instagram and countless other apps. The idea behind React is to simplify state management in an app. The library wants to achieve this – to put it simply – by dividing the UI into components.

If you learn web development, you can’t avoid React. The library took the hearts of front-end developers by storm. When React was first launched, frameworks like Angular and Ember dominated. React had the advantage over its long-established competitors that it was comparatively easy to integrate into an existing project. In addition, the timing was perfect. Google had just announced the launch of Angular 2. The new Angular release contained so many incompatible changes that React was a welcome alternative.

Before you dive into the framework, however, it is helpful to get to know some ES6 features beforehand. Some of them are used so often in React that newbies might get the impression that they are syntax inherent in the framework – instead, it is just modern JavaScript. This series introduces the most basic ones in hopes to get you started.

Variables: var, let and const

Variables are so-called literals. These are values ​​explicitly written into the code and therefore unchangeable. They are assigned a designation, the variable name. You can reference them within your program using the variable name. JavaScript is dynamically typed. This means that variable names that are assigned to literals of a certain type can be assigned to variables of another type in the further course of the program.

Before you can use them, variables have to be declared. You use the keywords for this var, let and const.

var was the only keyword used to define variables until ES2015. var-Variables can be redefined or updated.

The variable defined by the keyword var width you can easily assign a new value.

var width = 100;
console.log(width); // 100

width = 200;
console.log(width); // 200

 

An important point when it comes to variables is scope. Scope describes the scope of a variable. var– Variables are generally only valid in the area of ​​the function within which they were defined. You define var-Variables outside of a function, however, are available in your complete codebase.

Now if we create a function and define the var width inside the function:

function setWidth() {
var width = 100;

console.log(width);
}

 

setWidth();

 

does the code work because var width is defined within the function.

This code, however, throws an error message:

function setWidth() {
var width = 100;

console.log(width);
}

 

setWidth();
console.log(width); // error, width is not defined

 

The reason: width() is defined within the function, can from the outside console.log(width); not access it.

Let’s define width() however outside of the setWidth()-Function:

var width;
function setWidth() {
width = 100;

console.log(width);
}

 

setWidth();
console.log(width);

 

the scope of the variable is global and we can access it from outside the function.

However, if you have no function at all, but want to limit the scope of a variable to – let’s say – an if statement, you have no way of doing this. We remember: var-Variables are function-scoped. A if-Statement is not a function and can therefore extend the scope of a var– Do not limit variables.

;
var age = 10;

if(age > 2) {
var catYears = 25 + (age – 2) * 4;
console.log(`You are ${catYears} 🐈 years old!`)

 

}

 

In our code snippet is catYears , despite the fact that the variable was defined within the if statement, a global variable that we can access from anywhere within the codebase. Global variables make it easy for us to lose track of which code influences what. This is not particularly user-friendly – on the contrary, it makes developing with JavaScript unnecessarily complicated.

That is why two new variables were introduced with EcmaScript2015: let and const.

Let is not so dissimilar to var, but unlike var, the scope is one let-Variable limited to the respective statement or the respective block where it was defined.

Basically you can remember that functions count as so-called blocks, let– – and by the way too const-Variables – are therefore function-scoped just like var variables. In addition, everything counts as a block that goes through { curly brackets } is limited. The scope of let and const variables always extends to the nearest curly brackets. This also applies if such a block is located within a function.

In our Katzenjahre-if-statement we can var against let change:


let age = 10;

if(age > 2) {
let catYears = 25 + (age – 2) * 4;
console.log(`You are ${catYears} 🐈  years old!`)

 

}

 

– and the code works as usual. However, if you now try to display catYears in the browser console, it does not work:

Code screenshot

(Screenshot: t3n)

Would you let in our code example const by the way, the result would be the same. Still differs const in one point fundamental of let.

You can change and reassign var and let variables later in the program. Once a const variable has been initialized, you can neither change it nor assign it to another value:

const t3n = 'digital pioneer'

The variable name t3n you can’t assign another value now:

code

Screenshot: t3n

Warning: this does not mean that the literal 'digital pioneer' is immutable. over const Initialized objects can of course be mutated using associated methods, for example like this:

code

(Screenshot: t3n)

Basically, it is advisable to always use the simplest available construct. Variables that do not have to be reassigned in the further course of your program should therefore always be used with const declare.

Next up: what are template strings?

More on the subject:

You might be interested in that too

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png