Preamble

Before we get into the React front-end framework, let's refresh readers' knowledge of JavaScript ES6, which we'll cover in this post.

History of JavaScript
let, const, var Difference
Template Literals
Arrow Function

The above Chinese translation is based on the official translation of MDN, readers are welcome to leave their comments if there are any mistakes.

JavaScript ES6 History

Brendan Eich published in 1995, JavaScript, initially JavaScript was mainly used to implement some simple functions in web pages. Later on, there were Ajax, Jquery, React.js, Vue.js, Node.js, TypeScript, and gradually JavaScript became one of the most widely used programming languages before mainstreaming, and it can be used for both front-end and back-end development.

Some readers may know about ES5 and ES6, but what is ES?

The full name of ES is ECMAScript, where ECMA stands for European Computer Manufacrurers Association, and the number at the end is the generation, so ES5 is the fifth generation of ECMAScript, and ES6 is the sixth generation of ECMAScript.

So why don't you hear about the ES1 to ES4 generations more often?

The main reason for this is that after ES1 came out in 1997, it was still a simple implementation of functionality. ES2, ES3, and ES4 fixed some problems or added new regular expressions and string processing, and then ES5 came out in 2009, which really had a lot of functionality, including expanded array methods, object attributes, and JSON.

JavaScript ES6

ES6 appeared in 2015 and added a number of handy and useful features that have been implemented in a variety of JavaScript applications.

For those who want to know more about the history, they may also refer to

var, let, const Difference

1. var

var 是一個ES5 比較早期的宣告方式，使用 var 就可以做宣告，並且是函數區域（ function-scoped ）或是全域（ globally-scoped ）

2. let

let is a relatively recent ES6 declaration method that can be declared using let. In addition to implementing the Lexical Variable Scope, the use of curly braces also creates a Code Block, which is block-scoped in a let declaration.

3. const

const is one of the more recent ES6 declarations that can be declared using const, and is block-scoped.
The biggest difference between const and let is that const is a value that is not reassigned.

var and let differences

As a quick demonstration of the difference between the two pieces of code, let's start by declaring var in ES5, and we can see that after declaring it again in the discriminant, and leaving the code block in the discriminant, the variable still has the value declared in the code block.

				
					var input = "Global"; if(input){ var input = "Block"; console.log("input"); // The variable Block will be output } console.log("input"); // The variable Block will be output

If you use the ES6 let declaration again, you can see that when you declare it again in the discriminant, it only affects the code block, and the variable does not affect the external global variable.

				
					let input = "Global"; if(input){ let input = "Block"; console.log("input"); // Block will be output } console.log("input"); // Global will be output

As you can see from the example above, the ES5 var declaration in blocks will pollute other variables with the same name, so nowadays the mainstream declarations use let or const.

Template literals

This uses the MDN WEB The name of the term is used and its Chinese translation is used, although it is also referred to as Template String in some places.
In traditional JavaScript syntax, we use the plus sign to concatenate strings, but this traditional syntax is not intuitive.

				
					console.log("Hello, This is "+ Name + " and My Phone Number is" + PhoneNumber)

After the Template literals syntax appears, we can use back-tick to enclose the string, and place variables in the string by using the money sign and curly brackets ${}. If we rewrite the above code, it will become the following.You can see that the whole string becomes more concise and easy to understand.

				
					console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)

Arrow function

Define

In the traditional ES5 syntax, the following syntax is used for declarations, starting with the keyword function, followed by the name of the function, and wrapped by curly braces to enclose the action inside the function.

				
					function printHelloWorld() { console.log("Hello World") } var printHelloWorld = function() { console.log("Hello World") }

Another type of declaration is the Function Expression, which first declares a variable and then assigns a function to that variable.

Hoist

There are two different types of declarations here, a declaration by letter and a designation by letter. In the case of a function declaration, it will be hoisted, but not in the case of a function designation.

				
					printHelloWorld() function printHelloWorld() { console.log("Hello World") } // There is no problem in executing this way printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } // Executing it this way There is a problem

Parameter Transfer

In traditional ES5, it is possible to pass parameters in a function, which is formally known as an Argument.

				
					function printHello(name) { console.log(`Hello,My Name is ${name}`) } printHello("Hogan")

But what if the value of the quoted number is not given when the function is used?

will show Hello,My Name is undefined

In ES6, there is also a function preset, so you can avoid the problem by directly assigning a reference to a value in the function declaration.

				
					function printHello(name = "Hogan") { console.log(`Hello,My Name is ${name}`) } printHello() // Hello,My Name is Hogan printHello("Bo Bo") // Hello,My Name is Bo Bo

Arrow Function

Arrow Function is one of the new features in ES6 that allows you to declare functions without using the function keyword, and even without giving a function name and returning a value.

Arrow functions will be used quite often in future React implementations, and are a very important and useful feature.

Here's how traditional ES5 functions are declared, with the keywords function and return.

				
					var printHello = function(name) { return ("Hello " + name) } console.log(printHello("Hogan"))

The Arrow Function can be rewritten as follows

				
					const printHello = (name) => `Hello ${name}` console.log(printHello("Hogan"))

Conclusion

This article introduces some of the new features and concepts in JavaScript ES6 and explains them using code.

Let's review the original JavaScript syntax before we get into the React front-end framework syntax.

Feel free to leave a comment if you have any suggestions or questions!

If you like the React Vernacular Campaign series, please like and share it so more people can see it!

JavaScript ES6 – React Vernacular Campaign 01

Table of Contents