[JavaScript] ES6

-

ECMAScript, or ES, is a standardized version of JavaScript. Because all major browsers follow this specification, the terms ECMAScript and JavaScript are interchangeable.


Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is constantly evolving, and new features are released every year.


ES6, released in 2015, added many powerful new features to the language. In this course, you'll learn these new features, including arrow functions, destructuring, classes, promises, and modules.



1. Compare Scopes of the var and let Keywords

If you are unfamiliar with let, check out this challenge.


When you declare a variable with the var keyword, 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++) {
  numArray.push(i);
}
console.log(numArray);
console.log(i);

Here the console will display the values [0, 1, 2] and 3.


With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following:

var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
console.log(i);

Here the console will display the values [0, 1, 2] and 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. This is because the stored function will always refer to the value of the updated global i variable.

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());

Here the console will display the value 3.


As you can see, printNumTwo() prints 3 and not 2. 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. The let keyword does not follow this behavior:

let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
console.log(i);

Here the console will display the value 2, and an error that i is not defined.


i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement.


2. Mutate an Array Declared with const

If you are unfamiliar with const, check out this challenge.


The const declaration has many use cases in modern JavaScript.


Some developers prefer to assign all their variables using const by default, unless they know they will need to reassign the value. Only in that case, they use let.


However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier.

const s = [5, 6, 7];
s = [1, 2, 3];
s[2] = 45;
console.log(s);

s = [1, 2, 3] will result in an error. The console.log will display the value [5, 6, 45].


As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.


const s = [5, 7, 2];
function editInPlace() {

s[0] = 2;
s[1] = 5;
s[2] = 7;
}
editInPlace();

console.log(s);


3. Prevent Object Mutation

As seen in the previous challenge, const 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.


Any attempt at changing the object will be rejected, with an error thrown if the script is running in strict mode.

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj);

The obj.review and obj.newProp assignments will result in errors, because our editor runs in strict mode by default, and the console will display the value { name: "FreeCodeCamp", review: "Awesome" }.



4. Use Arrow Functions to Write Concise Anonymous Functions

In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.


To achieve this, we often use the following syntax:

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:

const myFunc = () => "value";

This code will still return the string value by default.


5. Write Arrow Functions with Parameters

Just like a regular function, you can pass arguments into an arrow function.

const doubler = (item) => item * 2;
doubler(4);

doubler(4) would return the value 8.


If an arrow function has a single parameter, the parentheses enclosing the parameter may be omitted.

const doubler = item => item * 2;

It is possible to pass more than one argument into an arrow function.

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

multiplier(4, 2) would return the value 8.


6. Set Default Parameters for Your Functions

In order to help us create more flexible functions, ES6 introduces default parameters for functions.


Check out this code:

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John"));
console.log(greeting());

The console will display the strings Hello John and Hello Anonymous.


The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter name will receive its default value Anonymous when you do not provide a value for the parameter. You can add default values for as many parameters as you want.


7. Use the Rest Parameter with Function Parameters

In order to help us create more flexible functions, ES6 introduces the rest parameter for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.


Check out this code:

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

The console would display the strings You have passed 3 arguments. and You have passed 4 arguments..


The rest parameter eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array.

const sum = (function() {
  return function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
};
})();

console.log(sum(1,2,3,4));
10


8. Use the Spread Operator to Evaluate Arrays In-Place

ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.


The ES5 code below uses apply() to compute the maximum value in an array:

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr);

maximus would have a value of 89.


We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaN. Math.max() expects comma-separated arguments, but not an array. The spread operator makes this syntax much better to read and maintain.

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);

maximus would have a value of 89.


...arr returns an unpacked array. In other words, it spreads the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:

const spreaded = ...arr;


9. Use Destructuring Assignment to Assign Variables from Nested Objects

You can use the same principles from the previous two lessons to destructure values from nested objects.


Using an object similar to previous examples:

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
};


Here's how to extract the values of object properties and assign them to variables with the same name:

const { johnDoe: { age, email }} = user;

And here's how you can assign an object properties' values to variables with different names:

const { johnDoe: { age: userAge, email: userEmail }} = user;

10. Use Destructuring Assignment to Assign Variables from Arrays

ES6 makes destructuring arrays as easy as destructuring objects.


One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.


Destructuring an array lets us do exactly that:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);

The console will display the values of a and b as 1, 2.


The variable a is assigned the first value of the array, and b is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);

The console will display the values of a, b, and c as 1, 2, 5.



you can skip the elements using  " , " 

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list){
  const [ , , ...arr] = list;
  return arr;
}

const arr = removeFirstTwo(source);
console.log(arr);
console.log(source);
[ 3, 4, 5, 6, 7, 8, 9, 10 ]
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]


11. Create Strings using Template Literals

A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.


Template literals allow you to create multi-line strings and to use string interpolation features to create strings.


Consider the code below:Create Strings using Template Literals

A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.


Template literals allow you to create multi-line strings and to use string interpolation features to create strings.


Consider the code below:

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting);

The console will display the strings Hello, my name is Zodiac Hasbro! and I am 56 years old..


A lot of things happened there. Firstly, the example uses backticks (`), not quotes (' or "), to wrap the string. Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. The ${variable} syntax used above is a placeholder. Basically, you won't have to use concatenation with the + operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with ${ and }. Similarly, you can include other expressions in your string literal, for example ${a + b}. This new way of creating strings gives you more flexibility to create robust strings.


12. Write Concise Object Literal Declarations Using Object Property Shorthand

ES6 adds some nice support for easily defining object literals.


Consider the following code:

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

getMousePosition is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax:

const getMousePosition = (x, y) => ({ x, y });


13. Write Concise Declarative Functions with ES6

When defining functions within objects in ES5, we have to use the keyword function as follows:

const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

With ES6, you can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax:

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

14. Use class Syntax to Define a Constructor Function

ES6 provides a new syntax to create objects, using the class keyword.


It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.


In ES5, we usually define a constructor function and use the new keyword to instantiate an object.

var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

The class syntax simply replaces the constructor function creation:

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

It should be noted that the class keyword declares a new function, to which a constructor is added. This constructor is invoked when new is called to create a new object.


Note: UpperCamelCase should be used by convention for ES6 class names, as in SpaceShuttle used above.


The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.



Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt 는  그 값의 아래는 전부 불러옴. 예를들어 Banana를 입력했을 깨 500과 그 아래 값들도 모두 불러옴. 때문에 break 를 써줘야함 default는 해당하지 않는 값을 입력했을 때 ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more