Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button>Test</button>
<script id="jsbin-javascript">
console.log('Let us learn some ES6')

var fName = 'ankit'
let lName = 'nigam'

if (true){
  let newlName = 'sharma'
  var newfName = 'Vikash'
}

console.log(fName)
console.log(lName)
console.log(newfName) // var variable declared inside block is acceible from block
//console.log(newlName) //let variable declared is not accesible from block

// let and var are used as normal variables instead let are not allowed to access from putside of declaring scope like above.


// const holds the value but not allowed to chnage the value within.
const arrayRol = [1,2,3,4]
console.log(arrayRol)
arrayRol.push(6) // here we are not changing the mamory address of array but only pushing the new value in it.
console.log(arrayRol)

// here new object is created.
const obj = {
  age : 27
}

// if we try to change the value in obj it throws the error.
// obj = {}

console.log(obj.age)
// here we are only chnage the value inside the const not the value of const.
obj.age = 28

console.log(obj.age)


//-------------- function --------------

function printHello()
{
  console.log('hello')
}

printHello()

var fHello = () => {console.log('hello fat arrow function')}

fHello()

// Return from Arrow function
var addNumber = () => {
  let a = 1
  let b = 2

  return a+b
}

console.log(addNumber())

// Param in arrow function
var addNumberWithParams = (a,b) => {


  return a+b
}

console.log(addNumberWithParams(3,4))

// Single param mat not need parantheses in arrow function.
 var addNumberWithParamNoParanthese = a => a + a

 console.log(addNumberWithParamNoParanthese(2))


 // this object

 function funcThis()
{
  console.log(this)
}

var funcThis2 = () => console.log(this)

funcThis()

var button = document.querySelector('button')
button.addEventListener('click',funcThis2)

// here this refers to calling button when used with normal function , but when used with arrrow function  this refers to its function context.

//------------Default-----------

function checkDefault(a = 10 , b){
  return a + b
}

console.log(checkDefault())


//------------Object ------------

let name = 'ankit'
let age = 30

const objUser = {
  name,
  age
}
// here object take value from its sorrunding.
console.log(objUser)

//----------- Dynamic Properties ---------

let dynamicAge ='age'

let dynamicProperties = {
    "name":'max',
    [dynamicAge] : 20
}

console.log(dynamicProperties["name"],dynamicProperties[dynamicAge])


//-------------- rest operator

function addNumbers(...numbers){
  let result = 0
  for(let i = 0; i<numbers.length ; i++){
    result += numbers[i]
  }

  return result
}

console.log(addNumbers(10,20,30))

//---------------- spread operator

let array1 = [1,2,3,4]
let array2 = [6,7,8,9]

let combinedArray = [...array1,...array2]

console.log(combinedArray)


//---------------- template expression - multiline string -------

let multilineString = `my name is
${name}` // here name var is used as expression

console.log(multilineString)

//------------ for of loop--------

function printAll(){
  for(item of combinedArray){
    console.log(item)
  }
}

printAll()

//--------- destructuring ---------

let [a,b] = array1

console.log("Destructured \n " + a +' '+ b)

let {names,ages} = objUser // destructing by name of variable , it returned undefined bcoz 'names' is not declared in ObjUser
console.log(names)

let newObj = {
  myName:'ankit',
  myNumber : 844934242342
}

let {myName, myNumber : myNumberAlias} = newObj

//console.log(myName + " " + myNumber)
console.log(myNumberAlias)
// After giving alias to a destructured var it old name will give error.
</script>


<script id="jsbin-source-javascript" type="text/javascript">console.log('Let us learn some ES6')

var fName = 'ankit'
let lName = 'nigam'

if (true){
  let newlName = 'sharma'
  var newfName = 'Vikash'
}

console.log(fName)
console.log(lName)
console.log(newfName) // var variable declared inside block is acceible from block
//console.log(newlName) //let variable declared is not accesible from block

// let and var are used as normal variables instead let are not allowed to access from putside of declaring scope like above.


// const holds the value but not allowed to chnage the value within.
const arrayRol = [1,2,3,4]
console.log(arrayRol)
arrayRol.push(6) // here we are not changing the mamory address of array but only pushing the new value in it.
console.log(arrayRol)

// here new object is created.
const obj = {
  age : 27
}

// if we try to change the value in obj it throws the error.
// obj = {}

console.log(obj.age)
// here we are only chnage the value inside the const not the value of const.
obj.age = 28

console.log(obj.age)


//-------------- function --------------

function printHello()
{
  console.log('hello')
}

printHello()

var fHello = () => {console.log('hello fat arrow function')}

fHello()

// Return from Arrow function
var addNumber = () => {
  let a = 1
  let b = 2

  return a+b
}

console.log(addNumber())

// Param in arrow function
var addNumberWithParams = (a,b) => {


  return a+b
}

console.log(addNumberWithParams(3,4))

// Single param mat not need parantheses in arrow function.
 var addNumberWithParamNoParanthese = a => a + a

 console.log(addNumberWithParamNoParanthese(2))


 // this object

 function funcThis()
{
  console.log(this)
}

var funcThis2 = () => console.log(this)

funcThis()

var button = document.querySelector('button')
button.addEventListener('click',funcThis2)

// here this refers to calling button when used with normal function , but when used with arrrow function  this refers to its function context.

//------------Default-----------

function checkDefault(a = 10 , b){
  return a + b
}

console.log(checkDefault())


//------------Object ------------

let name = 'ankit'
let age = 30

const objUser = {
  name,
  age
}
// here object take value from its sorrunding.
console.log(objUser)

//----------- Dynamic Properties ---------

let dynamicAge ='age'

let dynamicProperties = {
    "name":'max',
    [dynamicAge] : 20
}

console.log(dynamicProperties["name"],dynamicProperties[dynamicAge])


//-------------- rest operator

function addNumbers(...numbers){
  let result = 0
  for(let i = 0; i<numbers.length ; i++){
    result += numbers[i]
  }

  return result
}

console.log(addNumbers(10,20,30))

//---------------- spread operator

let array1 = [1,2,3,4]
let array2 = [6,7,8,9]

let combinedArray = [...array1,...array2]

console.log(combinedArray)


//---------------- template expression - multiline string -------

let multilineString = `my name is
${name}` // here name var is used as expression

console.log(multilineString)

//------------ for of loop--------

function printAll(){
  for(item of combinedArray){
    console.log(item)
  }
}

printAll()

//--------- destructuring ---------

let [a,b] = array1

console.log("Destructured \n " + a +' '+ b)

let {names,ages} = objUser // destructing by name of variable , it returned undefined bcoz 'names' is not declared in ObjUser
console.log(names)

let newObj = {
  myName:'ankit',
  myNumber : 844934242342
}

let {myName, myNumber : myNumberAlias} = newObj

//console.log(myName + " " + myNumber)
console.log(myNumberAlias)
// After giving alias to a destructured var it old name will give error.

</script></body>
</html>