Introduction to the ES6

ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term ECMAScript is interchangeable with the term JavaScript.

The ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers.

The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:

  • Arrow functions
  • Classes
  • Modules
  • Promises
  • Generators
  • let and const


Note
Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.


ES6 :1 Explore Differences Between the var and let Keywords

ES6 :2 Compare Scopes of the var and let Keywords

ES6 :3 Declare a Read-Only Variable with the const Keyword

ES6: 4 Mutate an Array Declared with const

ES6: 5 Prevent Object Mutation

ES6: 6 Use Arrow Functions to Write Concise Anonymous Functions

 ES6: 7 Write Arrow Functions with Parameters

ES6: 8 Write Higher Order Arrow Functions

ES6: 9 Set Default Parameters for Your Functions

ES6:10 Use the Rest Operator with Function Parameters

ES6: 11 Use the Spread Operator to Evaluate Arrays In-Place

ES6: 12 Use De-structuring Assignment to Assign Variables from Objects

ES6:13 Use Destructuring Assignment to Assign Variables from Nested Objects

ES6: 14 Use Destructuring Assignment to Assign Variables from Arrays

ES6: 15 Use Destructuring Assignment with the Rest Operator to Reassign Array Elements

ES6: 16 Use Destructuring Assignment to Pass an Object as a Function's Parameters

ES6: 17 Create Strings using Template Literals

ES6:18 Write Concise Object Literal Declarations Using Simple Fields

ES6: 19 Write Concise Declarative Functions with ES6

ES6: 20 Use class Syntax to Define a Constructor Function

 

Comments

Post a Comment

Popular posts from this blog

ES6 : 5 Prevent Object Mutation

As seen in the previous post declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze() to prevent data mutation. Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. let obj = { name:"FreeCodeCamp" review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; //will be ignored. Mutation not allowed obj.newProp = "Test"; // will be ignored. Mutation not allowed console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
Read more

ES6: 1 Explore Differences Between the var and let Keywords

One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. var camper = 'James'; var camper = 'David'; console.log(camper); // logs 'David' As you can see in the code above, the camper variable is originally declared as James and then overridden to be David . In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. let camper = 'James'; let camper = 'David'; // throws an error This error can be seen...
Read more

CSS Grid: Reduce Repetition Using the repeat Function

 When we used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. Here's an example that would create the 100 row grid, each row at 50px tall. grid-template-rows: repeat(100, 50px); You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean: grid-template-columns: repeat(2, 1fr 50px) 20px;  this will be translated to :            grid-template-columns:1fr 50px 1fr 50px  20px;   1fr 50px is repeated t...
Read more