Hey, What’s up ?. Today we are going to talk about something different that is “Javascript”. Yeah, I know This blog seemed to be dedicated to Xamarin. Since most posts are about Xamarin. But today we will dive into something different as I said before.
Anyone following this blog might be wondering why I’m writing a post about ES6 Which was made available back in 2015. While there is ES7 which is there and already has newer features. Well, the answer is; I’m following Udacity’s Mobile Web Specialist Course with other African students in the ALC (Andela Learning Community). And This blog post is a Summary of what I’ve learned from the course on Javascript (ES6) We covered. I make this post for anyone willing to grasp the basics of ES6 in a few minutes. And also for any of my course mates who will need it.
What we will be doing during this ES6 Tutorial
- ES6 Syntax
ES6 Syntax
This new Javascript version has several improvements as compared to former Javascript versions. one of which is the syntax. ES6 Code is cleaner and has a better syntax as we will discuss bellow.
Replace var
In former Javascript versions, variables were declared with the var keyword. And declaration with this method causes Hoisting (Variables are raised to the top of a function before execution). Thus the apperance of the let and const keywords to declare variables.
1 2 3 4 5 | //declare a variable which can be reassigned to another value let name = 'my name'; //defines a variable whose value is not reassignable const PI = 3.14; |
No more stress with complex strings
Formatting strings is easier. You can easily pass in variables in your string and write long multi line strings without the ‘+’ concatenation operator.
1 2 3 4 5 6 7 8 | let student = {name : 'Harry', age : '18'}; //See how representing it is easier with `` let description = `I'm a student my name is ${student.name} I'm ${student.age} years old.`; console.log(description); |
Destructuring
This is one of my favorite features!. it permit’s you to extract easily data from arrays and objects. For example ;
1 2 3 4 5 6 | //Extracting values from an array. const axis = [10, 25, -34]; const [x, y, z] = axis; console.log(x, y, z); |
1 2 3 4 5 6 7 8 9 10 | //Extracting values from an object. const man = { name: 'Peter', age: '30', height: 185 }; const {name, age, height} = man; console.log(name, age, height); |
Object Literal
Here is another way in which ES6 avoids useless repetitions in your code. This feature permits you to declare an object with already existing variables without redefining them as properties of the object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | name = 'Peter'; age = '30'; height = 185; const man = { name, age, height }; ///Creates a man object and automatically set its name, age and height properties console.log(man); //Prints : {name: "Peter", age: "30", height: 185} |
The Cool For Of Loop
Looping through items is easy thanks to the for of loop. This loop is similar to the foreach loop in C#. It iterates through a collection of objects and allows you to process each. It does so in a clean fashion.
1 2 3 4 5 | const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for(let number of numbers) { console.log(number); } |
Spread it
The new spread operator (…) permits Javascript developers to expand the content of iteratable objects extremely easily.
1 2 | const weapons = ["gun", "sword", "spirit bomb"]; console.log(...weapons); |
Get The Rest of it
With this operator (three dots too) you can retrieve an indefinite number of operators from objects like arrays.
1 2 3 | const weapons = ["gun", "sword","catana", "spirit bomb", "shuriken"]; const [weapon1, weapon2, weapon3, ...otherWeapons] = weapons; console.log(weapon1, weapon2, weapon3, otherWeapons); |
This operator could be also used to make functions with an indefinite number of parameters. This type of function is called variadic functions.
1 2 3 4 5 6 7 | function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total; } |
Conclusion
This is the first part of a series of posts on ES6. I hope it helps anyone to grasp quickly the basics of ES6.
office 365 16% reduction on signup.
Special Offer
Save 16% on your Microsoft Office 365 subscription Learn More >>
Follow me on social media and stay updated
If you liked this post, or it was useful to you, please ? like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.
Read about 10 tips about challenges which Xamarin.Forms beginners may face with development.
Follow me on social media and stay updated