ES6


ES6 is the latest version of javascript:
ECMAScript (or ES) is a scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262.

var vs let
var is function scope                                                      let is a block scope
var declared with var are hoisted                            var declared with let and const not hoisted           
function displayVar(){ function displayLet(){

   if(true){ if(true){
       var m = 20;  let m = 20;
   }  }
   console.log(m); console.log(m);
} displayVar(); } displayLet();

################## VAR ############################
<script>
function myfunc(){
var myvar = 10;
if(myvar == 10){
var myvar=20;
console.log("conditional block myvar=",myvar);
}
console.log("function myvar=",myvar);
}
myfunc();
</script>


<script>

function myfunc(){
var myvar = 10;
if(myvar == 10){
let myvar=20;
console.log("conditional block myvar=",myvar);
}
console.log("function myvar=",myvar);
}
myfunc();
</script>


What is the output

var a = 20;
function printA(){
           console.log(a);
           var a = 5;
       }
       printA();
  

a is undefined here, because
if you declare a variable inside a function it will be hoisted,(hoisted means memory occupied by variable in stack/heap)
if there is same variable existed in global scope and local scope,in that case precedence will be given to local scope(ie,, local scope variable will be considered).

What is the output?


  var a = 20; //we used var keyword
       function printA(){
           console.log(a);
           a = 5; //keyword not used
       }
       printA(); output: 20
if you dont declare a variable with keyword (var) that will always considered as access to the global variable 
example 2: without keyword

first global variable "a" has been hoisted,

var a = 20; a = 20;
function printA(){ function printA(){
a = 11; a = 11;
console.log(a); console.log(a);
} }
printA(); //11 printA(); //11

var a = 20; a = 20;
function printA(){ function printA(){
console.log(a); console.log(a);
a = 11; a = 11;
} }
printA(); //20 printA(); //20
a = 20; a = 20;
function printA(){ function printA(){
var a = 11;
console.log(a); console.log(a);
var a = 11;
} }
printA(); //11 printA(); //undefined
a = 20;
function printA(){
console.log(a);
}
printA();
output 20;

   function printA(){
           a = 5;
       }
       printA();
       console.log(a); // 5


  • const is used to declare constants which cannot be overridden once it is declared .
  • Constants defined with const follow the same scope rules as variables.
  • Constants are block-scoped, much like variables defined using the let statement. 
  • The value of a constant cannot change through  re-assignment, and it can't be redeclared.
  • This declaration creates a constant whose scope can be either global or local to the block in which it is declared. 
  • Global constants do not become properties of the window object, unlike var variables.

 hoisted variable can be accessed but its value cannot be accessed
constant cannot be hoisted
const tax_percentage = 13;
       tax_percentage =21;
       console.log(tax_percentage);

err no:53 Uncaught TypeError: Assignment to constant variable.

    at additemtoarray.html:53
var tax_percentage = 13;
tax_percentage =21;
console.log(tax_percentage);
op: 21

tax_percentage = 13;
var tax_percentage =21;
console.log(tax_percentage); //21
var tax_percentage = 13;
var tax_percentage =21;
console.log(tax_percentage); //21


 Destructure: example
 Like object is a structure it has different  properties , you want only some properties is called as destructure
ex i have an array it contains 10 elements it is called strucutre
i want only 1 or last or some elements that is called as destructure..

defination
  • It’s a JavaScript expression that allows us to extract data from arrays, objects, maps and sets multiple at a time.
  • ECMAScript 6 (ES2015) destructuring assignment allows you to extract individual items from arrays or objects and place them into variables using a shorthand syntax.
  • It is a convenient way to extract values from data stored in (possibly nested) objects and arrays.
  • Destructuring simply implies breaking down a complex structure into simpler parts. 
  • In JavaScript, this complex structure is usually an object or an array. 
      var employee = {
      name : 'john',
      age : 24,
      salary : 100000,
      married : true
       } //here yellow code is structured
        //var name= this.name;
// var age = this.age;

       var { name, age } = employee;
         console.log(name); // john
       console.log(age); // age
//here this is destructured code

here we have 4 properties in employee object this is called structured
and we want to get only 2 or  1properties data that is call as desturecture

Swap the variables in 3 ways
var x = 2;
var y=3;
[x,y]=[y,x]
console.log(x);
console.log(y);
op:3
2

Default Parameters
function a(x,y=3){//default parameter should be on last ex x(a,b=3,c) is not valid
return x+y;
}
var x = a(33);
console.log(x);
op: 36
  • This is the ability to have your functions initialize parameters with default values even if the function call doesn’t include them.
  • Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.

Example:

     function multiply(a,b=2){
     return a * b;
     }
     multiply(10);












Comments

Post a Comment

Popular posts from this blog

Javascript For Beginners

Image
Javascript JavaScript was invented by Brendan Eich in 1995 , and became an ECMA standard in 1997. Javascript is scripting or interpreted language .i.e the code executes line by line when the browser load the javascript into the memory.  ECMA-262 is the official name of the standard. ECMAScript is the official name of the language. When JavaScript was created, it initially had another name: “ LiveScript ”. But Java language was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java  Why Javascript? If we want to execute any code on click of a button or text box value is changed we use Javascript. JavaScript adds behavior to the web page where the web page is capable of responding to actions by your visitors without needing to load a new web page in order to process their request. We need JavaScript to add interaction to websites. Otherwise all sites would be mostly read only static text and images or we'...
Read more

javascript notes

Image
Javascript [.js] Introduction: HTML’s first version, designed by Tim Berners-Lee from 1989 to 1991, was fairly static in nature.  Except for link jumps with the a element, web pages simply displayed content, and the content was fixed.  In 1995, the dominant browser manufacturer was Netscape, and one of its employees, Brendan Eich, thought that it would be useful to add dynamic functionality to web pages.  So he designed the JavaScript programming language, which adds dynamic functionality to web pages when used in conjunction with HTML.  For example, JavaScript provides the ability to update a web page’s content when an event occurs, such as when a user clicks a button.  It also provides the ability to retrieve a user’s input and process that input. Javascript is scripting or interpreted language .i.e the code executes line by line when the browser load the javascript into the memory.  Why JavaScript: JavaScript adds beha...
Read more

Destructuring Assignment in ES6- Arrays

Destructuring assignment is a cool feature that came along with ES6. Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables. Why is this necessary? Imagine if we want extract a data from an array. Previously, how will this be done? var introduction = ["Hello", "I" , "am", "Sarah"]; var greeting = introduction[0];// here we r assigning greeting key to above value var name = introduction[3]; console.log(greeting);//"Hello" // outputing console.log(name);//"Sarah" We can see that when we want to extract data from an array , we had to do the same thing over and over again. ES6 destucturing assignment makes it easier to extract this data. How is this so? This article discusses destructuring assignment of arrays. My next article...
Read more