es6

ES6: Explore Problems with the var KeywordOne 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' In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidently overwrite a variable that you did not intend to overwrite. Because this behaviour does not throw an error, searching and fixing bugs becomes more difficult. Another problem with the var keyword is that it is hoisted to the top of your code when it compiles. This means that you can use a variable before you declare it. console.log(camper); var camper = 'David'; // logs undefined The code runs in the following order: 1. The variable camper is declared as undefined. 2. The value of camper is logged. 3. David is assigned to camper. This code will run without an error. A new keyword called let was introduced in ES6 to solve the problems with the var keyword. With the let keyword, all the examples we just saw will cause an error to appear. We can no longer overwrite variables or use a variable before we declare it. Some modern browsers require you to add "use strict"; to the top of your code before you can use the new features of ES6. Let's try using the let keyword. S6: Compare Scopes of the var and let Keywords When you declare a variable with the varkeyword, it is declared globally, or locally if declared inside a function. The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. For example: var numArray = []; for (var i = 0; i < 3; i++) { i++) { if (i === 2) { printNumTwo = function() { return i. var i. So when i++ is executed.log(numArray). 1.log(numArray). } console. var printNumTwo.push(i). i++) { numArray. The let keyword does not follow this behavior: 'use strict'. i < 3. numArray. 2] console.log(i). } } console. 1. This code is similiar to the following: var numArray = []. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. i is declared globally. 2] console. . and 2) were created by the letkeyword within the loop statement. it updates the global variable. // returns "i is not defined" i is not defined because it was not declared in the global scope.log(printNumTwo()).push(i). let printNumTwo. } } console. // returns [0. for (i = 0. // returns 2 console. }. printNumTwo() prints 3 and not 2. // returns 3 This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable.log(printNumTwo()). i++) { if(i === 2){ printNumTwo = function() { return i. // returns 3 With the var keyword. i < 3. for (let i = 0.log(i). i < 3. } console. printNumTwo() returned the correct value because three different i variables with unique values (0. It is only declared within the for loop statement. // returns [0.log(i). This is because the stored function will always refer to the value of the updated global i variable. for (var i = 0. }. // returns 3 As you can see. 1. you can also declare variables using the const keyword. const has all the awesome features that let has. In ES6. Using the const declaration only prevents reassignment of the variable identifier. it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. However. // throws error. They are a constant value.g. ES6: Mutate an Array Declared with const The const declaration has many use-cases in modern JavaScript. it is often better to use different variable names to avoid confusion. // returns error As you can see. 6. trying to reassign a variable declared with const will throw an error. they use let. This exercise is designed to illustrate the difference between how var and let keywords assign scope to the declared variable. const s = [5. 7].Fix the code so that i declared in the if statement is a separate variable than i declared in the first line of the function. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. FAV_PET = "Dogs". A common practice is to name your constants in all upper- cases and with an underscore to separate words (e. trying to assign a const s[7] = 45. Only in that case. to the top of your code. 3]. Some developers prefer to assign all their variables using const by default. You should always name variables you don't want to reassign using the const keyword. 2. unless they know they will need to reassign the value. When programming a function similar to the one used in this exercise. with the added bonus that variables declared using const are read-only. "use strict". which means that once a variable is assigned with const. // works just as it would with an array declared with var . EXAMPLE_VARIABLE). "use strict" const FAV_PET = "Cats". it cannot be reassigned. Be certain not to use the varkeyword anywhere in your code. Note Remember to add "use strict". ES6: Declare a Read-Only Variable with the const Keyword let is not the only new way to declare variables. s = [1. As you can see. } When there is no function body. you cannot use the variable identifier. you can pass arguments into arrow functions. arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code.freeze(). To make an object immutable. This helps simplify smaller functions into one-line statements: const myFunc= () => "value" This code will still return value by default. ES6: Use Arrow Functions to Write Concise Anonymous Functions In JavaScript. Note Don't forget to use strict mode. Rewrite the function assigned to the variable magic which returns a new Date() to use arrow function syntax. and only a return value. Instead. 6. we often don't need to name our functions. to point to a different array using the assignment operator. To achieve this. the array assigned to s is mutable. s. we often use the following syntax: const myFunc = function() { const myVar = "value". especially when passing a function as an argument to another function. Instead. S6: Write Arrow Functions with Parameters Just like a normal function. Like all arrays. } ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. We don't need to name these functions because we do not reuse them anywhere else. 7]) itself and the variable identifier (s) will still point to the altered array. you can mutate the object ([5. Also make sure nothing is defined using the keyword var. return myVar. return myVar. but because const was used. you can use Object. we create inline functions. . you can use arrow function syntax: const myFunc = () => { const myVar = "value". Note Don't forget to use strict mode. ES6: Write Higher Order Arrow Functions It's time we see how powerful arrow functions are when processing data. You can pass more than one argument into arrow functions as well.likes > 500) This code is more succinct and accomplishes the same task with fewer lines of code. . Rewrite the myConcat function which appends contents of arr2 to arr1 so that the function uses arrow function syntax. Now compare it to the following code which uses arrow function syntax instead: FBPosts.thumbnail !== null && post. and reduce(). Arrow functions work really well with higher order functions.filter(function(post) { return post.likes > 500. ES6 introduces default parameters for functions. }) We have written this with filter() to at least make it somewhat readable.shares > 100 && post. Read the following code: FBPosts.thumbnail !== null && post. such as map(). that take other functions as arguments for processing collections of data. ES6: Set Default Parameters for Your Functions In order to help us create more flexible functions. filter().shares > 100 && post. Note Don't forget to use strict mode. Use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers.filter((post) => post.// doubles input value and returns it const doubler = (item) => item * 2. As you can see in the example above.log(howMany(0. arr)because Math. null. . ES6: Use the Rest Operator with Function Parameters In order to help us create more flexible functions. // Hello Anonymous The default parameter kicks in when the argument is not specified (it is undefined). which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.log(greeting()).log(howMany("string". These arguments are stored in an array that can be accessed later from inside the function. Note Don't forget to use strict mode. ES6 introduces the rest operator for function parameters. The rest operator eliminates the need to check the args array and allows us to apply map(). [1. Check out this code: function howMany(.. you can create functions that take a variable number of arguments. // returns 89 We had to use Math. } console. 89. You can add default values for as many parameters as you want. 2)).max.log(greeting("John")). With the rest operator. 3]. The ES5 code below uses apply() to compute the maximum value in an array: var arr = [6.". filter() and reduce() on the parameters array.Check out this code: function greeting(name = "Anonymous") { return "Hello " + name.. the parameter name will receive its default value "Anonymous" when you do not provide a value for the parameter.length + " arguments. var maximus = Math. 2.args) { return "You have passed " + args.apply(null. but not an array.max.max()expects comma-separated arguments. arr). ES6: Use the Spread Operator to Evaluate Arrays In-Place ES6 introduces the spread operator. 1. 45]. { })). // You have passed 3 arguments console. // You have passed 4 arguments. 3.apply(null. Modify the function sum so that is uses the rest operator and it works in the same way with any number of parameters. } console. Math.max(arr) returns NaN. // Hello John console. // returns 89 .slice(). as shown below: . y : b..y. b = 7.z. y = 7.4." and so on.6.The spread operator makes this syntax much better to read and maintain.. const arr = [6. or unpack. y: 7. Consider the following ES5 code: var voxel = {x: 3.4 var z = voxel.54 If instead you want to store the values of voxel. // will throw a syntax error Copy all contents of arr1 into another array arr2using the spread operator.prototype. 3. The following code will not work: const spreaded = . 89. you have that freedom as well. z: 6.arr). var x = voxel. the spread operator only works in-place. y. ES6: Use Destructuring Assignment to Assign Variables from Objects We earlier saw how spread operator can effectively spread. and voxel.54 Here's the same assignment statement with ES6 destructuring syntax: const { x. The result is similar to Array. ES6: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements In some situations involving array destructuring.6 var y = voxel. However. In other words.xinto a. // y = 7. We can do something similar with objects as well.54 You may read it as "get the field x and copy the value into a. const maximus = Math.4. // x = 3. // z = 6. z } = voxel. // x = 3. z = 6. Destructuring assignment is special syntax for neatly assigning values taken directly from an object to variables... it spreads the array.max(.6. the contents of the array.54 }. const { x : a.x.arr returns an unpacked array.z into c.6.arr. we might want to collect the rest of the elements into a separate array. voxel. z : c } = voxel // a = 3..y into b.. c = 6.4. like in an argument to a function or in an array literal. 45]. to wrap the string. A lot of things happened there. ES6: Create Strings using Template Literals A new feature of ES6 is the template literal. gender) => ({ name. 4. you won't have to use concatenation with the +operator anymore.arr] = [1. not quotes (' or "). because of rest operator's presence. As in. // prints // Hello. the ${variable} syntax used above is a place holder. 4. Basically. my name is Zodiac Hasbro! // I am 56 years old. age.const [a.. This new way of creating strings gives you more flexibility to create robust strings. // string interpolation const greeting = `Hello. The rest element only works correctly as the last variable in the list. 7].log(arr).name}! I am ${person. 5. // 1. b. . .. Each entry should be wrapped inside an li element with the class attribute text-warning. Secondly. 3. Use template literal syntax with backticks to display each entry of the result object's failure array. arr gets rest of the values in the form of an array. you cannot use the rest operator to catch a subarray that leaves out last element of the original array. To add variables to strings. const createPerson = (name. b). my name is ${person.age} years old.log(a. the example uses backticks (`). Firstly. age. 2 console. Consider the code below: const person = { name: "Zodiac Hasbro". 7] Variables a and b take the first and second values from the array.log(greeting). 2.`. age: 56 }. This is a special type of string that allows you to use string interpolation features to create strings. After that. console. Notice that the string is multi-line. 5. you just drop the variable in a template string and wrap it with ${ and }. console. // [3. Here is the same function from above rewritten to use this new syntax: const getMousePosition = (x. ES6: Use class Syntax to Define a Constructor Function . sayHello() { return `Hello! My name is ${this.name}. getMousePosition is a simple function that returns an object containing two fields. y) => ({ x: x. ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. Here's an example of this syntax: const person = { name: "Taylor". sayHello: function() { return `Hello! My name is ${this. and it will be converted tox: x (or something equivalent) under the hood. gender }). ES6: Write Concise Object Literal Declarations Using Simple Fields ES6 adds some nice support for easily definining object literals. y: y }). Consider the following code: const getMousePosition = (x. y) => ({ x. You can simply write x once.`. With ES6.name}.`. we have to use the keyword function as follows: const person = { name: "Taylor". y }). ES6: Write Concise Declarative Functions with ES6 When defining functions within objects in ES5. } }. You can remove the function keyword and colon altogether when defining functions in objects. } }. _author. that the class syntax is just a syntax.log(lol. unlike in languages like Java. we usually define a constructor function.targetPlanet = targetPlanet. using the keyword class. } } const lol = new Book('anonymous'). or even overwriting the previous value completely.writer). In ES5. Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable. } // getter get writer(){ return this. and set a value of a property within an object._author = updatedAuthor. and not a full-fledged class based implementation of object oriented paradigm. and a constructor was added. or Python.ES6 provides a new syntax to help create objects. var SpaceShuttle = function(targetPlanet){ this. } } const zeus = new spaceShuttle('Jupiter'). console. } // setter set writer(updatedAuthor){ this.writer = 'wut'. ES6: Use getters and setters to Control Access to an Object You can obtain values from an object. and use the new keyword to instantiate an object. This is to be noted. class Book { constructor(author) { this.targetPlanet = targetPlanet. } var zeus = new spaceShuttle('Jupiter'). These are classically called getters and setters. which would be invoked when new is called . or Ruby etc. The class syntax simply replaces the constructor function creation: class SpaceShuttle { constructor(targetPlanet){ this.to create a new object. console. . Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. Notice that the class keyword declares a new function. lol.log(lol.writer)._author = author. This change could involve calculations. because they hide internal implementation details. but the above is a very common use-case. I can bring in just the desired function. import. this presents a problem: some files and modules are rather large. in my current file. or a variable . When we want some code . won't work on a browser directly. Note The lessons in this section handle non-browser features. ES6: Use export to Reuse a Code Block In the previous challenge.a function. Getters and setters are important. Note the whitespace surrounding the function inside the curly braces is a best practice . and the statements we introduce in the rest of these lessons. known as export.Notice the syntax we are using to invoke the getter and setter . The old require() approach would force me to bring in all 20 functions. In order for this to work. and you may only need certain code from those external resources. we can choose which parts of a module or file to load into a given file. Like import. we must utilize one of the statements that goes with import. export is a non-browser feature. you learned about import and how it can be leveraged to import small amounts of code from large files. Consider the following example. we can use various tools to create code out of this to make it work in browser. saving time and memory. we must export it in order to import it into another file. like so: import { countItems } from "math_array_functions" A description of the above code: import { function } from "file_path_goes_here" // We can also import variables the same way! There are a few ways to write an importstatement. ES6: Understand the Differences Between import and require In the past. Imagine that math_array_functions has about 20 functions.to be usable in another file. With this new importsyntax. .it makes it easier to read the import statement. but I only need one. While handy. countItems. ES6 gives us a very handy tool known as import. the function require() would be used to import the functions and code in external files and modules.as if they are not even functions. though. However. With it. . ES6: Create an Export Fallback with export default In the export lesson. we can import any code we export into another file with the import syntax you learned in the last lesson. ES6: Use * to Import Everything from a File Suppose you have a file that you wish to import all of its contents into the current file. //How to export variables. it requires an object that receives the imported values.subtract(5.charAt(0). From here.3). In order to utilize this method. It is also used to create a fallback value for a file or module. With this. And breaking down that code: import * as object_with_name_of_your_choice from "file_path_goes_here" object_with_name_of_your_choice. } const foo = "bar". you will use the dot notation to call your imported values. you can take this approach: const capitalizeString = (string) => { return string. myMathModule. This allowed you to make multiple functions and variables available for use in other files.imported_function You may use any name following the import * as portion of the statement. There is another export syntax you need to know.charAt(0). Usually you will use this syntax if only one value is being exported from a file. } export { capitalizeString } //How to export functions. known as export default.toUpperCase() + string. if you would like to compact all your export statements into one line.3). export { capitalizeString. This can be done with the import * syntax. foo } Either approach is perfectly acceptable. Alternatively. you learned about the syntax referred to as a named export. export const foo = "bar".slice(1).The following is what we refer to as a named export. Here's an example: const capitalizeString = (string) => { return string.toUpperCase() + string.slice(1).add(2. Here's an example where the contents of a file named "math_functions" are imported into a file in the same directory: import * as myMathModule from "math_functions" myMathModule. to import a default export. we have a function.4). .y) => { return x + y. you need to use a different import syntax. add.Here is a quick example of export default: export default const add = (x. } There is a one major feature of export defaultyou must never forget . //Will return 9 The syntax differs in one key place .since it is used to declare a fallback value for a module or file. Here is how to import it: import add from "math_functions". add. It is important to note that. {}. ES6: Import a Default Export In the last challenge. the primary method of importing a default export is to simply write the value's name after import. add(5. In the following example. that is the default export of a file. Unlike exported values. is not surrounded by curly braces. you learned about export default and its uses. you can only have one value be a default export in each module or file.the imported value. "math_functions".