Before you learn React: This is a JavaScript-Features, you should know

In this series, we introduce you to eight helpful Features of EcmaScript 6. As a first of it’s variables and the difference between var, let and const.

React is a JavaScript Library which aims to simplify the development of visual Interfaces. The Library was developed by Facebook and published in 2013. Today, she’s the one behind the User Interfaces of Facebook, Instagram, and countless other Apps. The idea behind React is to simplify State Management in one App. To reach the Library wants to spoken –simplified by dividing the UI into components.

Those who learn Web-Development, not to React. The Library won the hearts of front-end developers, and Developers in the storm. When React was first launched, dominated Frameworks like Angular and Ember. React to the long-established competitors the advantage that the Integration in an existing project was relatively simple. In addition, the Timing was perfect. Google had just announced the Launch of Angular 2. The new Angular Release contained so many non-backward-compatible Changes that React was a welcome Alternative.

Before you dive into the Framework, however, it is helpful to some ES6 Features to get to know. Some of these you can find in React so often that newcomers might have the impression that it was framework inherent Syntax – instead, it is just a modern JavaScript. This series introduces the most basic, in the hope to make it easier for you to start.

Variables: var, let and const

Variables are called literals. The are explicitly written in the Code and thus immutable values. You are assigned to a name, the variable name. On the variable name, you can reference them within your program. JavaScript is dynamically typed. That means that variable names that are assigned to the Literals of a given type can be assigned in the further program history variables of a different type.

Before you can use variables are declared. For this, you use the Keywords var, let and const.

var

var was to ES2015, the only Keyword to Define variables. varVariables can be defined or updated.

The Keyword var Variable defined width you can assign a new value.

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

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

 

An important point is the issue of variable Scope. Scope refers to the scope of a Variable. varVariables are only in the range of the function within which they were defined, valid. Define your varVariables outside of a function, you are in your entire Codebase is available.

If we now create a function and the var width within the define function:

function setWidth() {
var width = 100;

console.log(width);
}

 

setWidth();

 

the Code works, because var width within the function is defined.

This Code throws a 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, from the outside, can console.log(width); ‘t access it.

We 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.

If you have, however, no function at all, but the Scope of a variable – say, an if Statement, you want to limit, you have no way to do that. Let us remember: varVariables are function-scoped. A ifStatement is not a function, and can, thus, the Scope var-Variable limit.

;
var age = 10;

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

 

}

 

In our Code Snippet catYears , nevertheless, that the Variable inside the if-statement has been defined, it can be a global Variable, which we can access from anywhere in the Codebase from. Global variables let us have a quick Overview about what is the Code of what influenced. This is not particularly user-friendly – on the contrary, it makes Developing with JavaScript unnecessarily complicated.

Therefore, were introduced with EcmaScript2015 two new variables: let and const.

let

Let not var is not so dissimilar, but different than the var of the Scope is a letVariable to the Statement or the Block where it is defined, limited.

What is a Block?

Basically, you can notice that functions as a so-called blocks, let– and by the way also constVariables are, therefore, exactly how var is function-scoped. In addition, everything is considered to be Block, what { braces } limited. The scope of let and const variables is always up to the nearest curly brackets. This also applies if such a Block is inside a function.

In our cat years-if Statement, we can var against let share:


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. If you are trying now, however, catYears in the Browser Console output will not work:

Code Screenshot

(Screenshot: t3n)

Would you let in our Code example, by const replace the results would be the same. Nevertheless, differs const in a point-fundamentals of let.

const

var and let variables, you can change them later in the program, and re-assign. A const Variable is initialized once, you can change, nor is any other value, assign to:

const t3n = 'digital pioneer'

The Variable Name t3n you can’t now a different value to assign to:

Code

Screenshot: t3n

Note: This does not mean that the Literal 'digital pioneer' immutable is. About const uninitialized objects can of course be associated methods mutated, for example, like this:

Code

(Screenshot: t3n)

In principle, it is recommended to always use the simplest available construction. Variables that do not need to be assigned in the further course of your program again, you should therefore, in principle, by using const declare.

Next: What are Template Strings are actually?

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