10. ECMA Script 6 Öffentlich

10. ECMA Script 6

Kostas Diakogiannis
Kurs von Kostas Diakogiannis, aktualisiert more than 1 year ago Beitragende

Beschreibung

ES6 JS Features. Introduced after 2015.

Modulinformationen

Keine Merkmale angegeben

Kontext

Course's Objectives 1. The participants can identify the usage of default values in function's parameters. 2. The participants learn how to use arrow functions.  3. The participants learn more about the array's find method. 4. The participants learn how and when to use maps for unique values in an array.
Weniger sehen
Keine Merkmale angegeben

Kontext

What is ES6 Next generation JavaScript comes with some handy features that make JavaScript a more mature and sophisticated language than it used to be. With the rise and popularity of node.js and the transformation of JS from a 'browser-only' to a 'general-purpose' language, more needs and solutions arose.  Here is where EcmaScript comes into play. EcmaScript is not a programming language different from JavaScript. In fact is not a programming language at all. It is just a specification on HOW JavaScript should be written and what features JavaScript includes or not. (consider this like the current version of JavaScript to understand it better). Every now and then new features are added to JavaScript in order to make the life of developers easier.  The biggest step JavaScript has made as a language was in 2015 with the introduction of ES2015 or ES6. This is when the biggest changes were introduced and the landscape of JavaScript took the schema as we know it today. Some of these features you have already faced them without even knowing it, like the spread operator, the string interpolation, const and let definition variables etc. Other notable features we will find them out throughout this walkthrough. Notice that the current EcmaScript version is ES10 (or ES2019), so many things have been added in the meantime and you should keep yourself constantly updated with them.
Weniger sehen
Keine Merkmale angegeben

Kontext

Default Values in functions' arguments   One of the features that ES6 provides is the default values in functions' arguments as it shown above. Normally we need to define the arguments for our functions and then replace them with actual values during execution.  By assigning a default value next to the argument during function declaration, this argument will hold this value as a default, that means if we forget or omit to specify a value for the given argument. Like a fallback value. We can do this for any argument, and the value can be any value we would put while calling the function as before.  If a value is given to this argument during execution, then the value we have passed will overwrite the default value.  Attention: If you have more than arguments with default values, yoou have to be careful as the order matters. For example if you have: function example(a = 10, b = 5) { return a + b; } example(7) //call the function  like that, overwrites the first argument a to 7 and keep b default. There is no way to change the default of b argument without passing a value to a though!
Weniger sehen
Keine Merkmale angegeben

Kontext

ES-1 Factorial Number Create a function that accepts one number as an argument and returns it's factorial. The function should have a default argument of 10 if no argument is passed for some reason. ex. factorial(5) // Returns 120 ex. factorial(6) // Returns 720 ex. factorial() // Returns 3628800
Weniger sehen
Keine Merkmale angegeben

Kontext

Arrow functions Arrow functions is a syntactic sugar for defining functions the way the image above shows.
Weniger sehen
Keine Merkmale angegeben

Kontext

ES-2 Square root Create an arrow function that accepts a number as an argument and returns it's square root. Bonus: Put also a default value of 9 to the number parameter.
Weniger sehen
Keine Merkmale angegeben

Kontext

ES-3 Check multiples Create a single arrow function that accepts two numbers as arguments and returns true if the first is multiple of the second one. Otherwise returns false.
Weniger sehen
Keine Merkmale angegeben

Kontext

ES-4 Telephone country Problem Given that you have this data structure: let telephoneData = [   {countryCode: '0030', country: 'Greece'},   {countryCode: '0039', country: 'Italy'},   {countryCode: '00972', country: 'Israel'},   {countryCode: '0007', country: 'Russia'},   {countryCode: '0044', country: 'United Kingdom'},   {countryCode: '0001', country: 'United States'},   {countryCode: '00963', country: 'Syria'},   {countryCode: '0029', country: 'Belgium'},   {countryCode: '0031', country: 'Holland'},   {countryCode: '0049', country: 'Germany'} ]   Write an arrow function that accepts a string (a country code from the array above) and returns the country itself.  Bonus: Try to accomplish this result without using any if statements, switch cases or ternary operators. You can use of course loops and any known array function. Maybe you will find the 'find' array method documentation below very useful in order to achieve this. In a nutshell the Array's find method accepts a function (like map, forEach, filter or reduce) and loops through each element until it finds the first match given the specified condition inside the testing function. If it finds it returns the element itself, otherwise returns undefined. Find more about this method by clicking the link below.   The find function
Weniger sehen
Keine Merkmale angegeben

Kontext

The Set data structure Set is an iterable JavaScript object that came through ECMA Script 6. It works like an array, the main difference is that it is primarily used for storing there unique values and it does NOT allow duplicates.  The way to create a set is with the new Set() constructor. Inside the set you can pass an array as a seeding data, and all the data of the array is going to be used in order to be valid for data for a set (remove duplicates etc). Some of the commonest methods when working with sets include:  1. let mySet = new Set() // Creates a new empty set. 2. mySet.add('something') // Adds the value of something to mySet. 3. mySet.delete('something') // Deletes the value of 'something' from mySet. 4. mySet.has('something') // Returns a boolean if mySet contains a value of something 5. mySet.size // Returns a property of size (equivalent to length for arrays)
Weniger sehen
Keine Merkmale angegeben

Kontext

ES-5 Find Unique Names Given that you have the following data that is comprised from many names. let names = [   'Mauro',   'Eugen',   'Mauro',   'Meir',   'Eugen',   'Jens',   'Jens',   'Jake',   'Mohammed',   'Mauro',   'Mohammed',   'Marcelo',   'Sue',   'Murhaf',   'Jens' ]; Create a single arrow function that accepts this array as an argument and returns a new collection (new array with unique names, so no duplicates allowed. All the names but only once!). Hint: You can use the Set constructor you just learned and pass an array as an argument...
Weniger sehen
Zusammenfassung anzeigen Zusammenfassung ausblenden