Add semi-colons

;

to the end of the function calls in order for them both to work.

<input id="btn" type="button" value="click" onclick="pay(); cls();"/>

Variable

variableVAR

is visible outside the

if

statement because it uses function scope instead of block scope

function callMePlease() {
  if (1 == 1) {
    let variableLET = 'LET'
    var variableVAR = 'VAR'
  }
  document.write('My ' + variableVAR + '</br>')
  document.write('My ' + variableLET + '</br>')
}

callMePlease()

Another variable

variableLET

is not visible outside the block because it uses block scope and the code above will generate the following error:

Uncaught ReferenceError: variableLET is not defined

Variable described using keyword

let

uses block scope

let myNumber = 1

function callMePlease() {
  let myNumber = 2
  
  if (1 == 1) {
    let myNumber = 3    
    document.write('My number is: ' + myNumber + '</br>')
  }  
  document.write('My number is: ' + myNumber + '</br>')
}

document.write('My number is: ' + myNumber + '</br>')

callMePlease()

Chains several array functions

filter

,

map

together. Uses

onlyMen

and

underTwenty

methods for filtering the result. Uses

onlyNames

function to take only names from the objects.

let people = [
  {name: 'გიორგი', age: 15, gender: 'male'},
  {name: 'ეკატერინე', age: 35, gender: 'female'},
  {name: 'დავითი', age: 75, gender: 'male'},
  {name: 'ნინო', age: 18, gender: 'female'},
  {name: 'თორნიკე', age: 11, gender: 'male'}
]
function onlyMen(human) {
  return human.gender == 'male'
}
function underTwenty(human) {
  return human.age < 20
}
function onlyNames(human) {
  return human.name
}
let onlyBoysNames = people.filter(onlyMen).filter(underTwenty).map(onlyNames)
document.write(onlyBoysNames)

The function

filter

filters the array members based on the

getNames

function condition

let myFavoritePlanets = [
    {name: 'Earth', radius: 6371}, 
    {name: 'Jupiter', radius: 69911}, 
    {name: 'Neptune', radius: 24622, moons: ['Triton', 'Thalassa', 'Nereid', 'Proteus', 'Hippocamp', 'Naiad']}
]
let biggerPlanetsNames = myFavoritePlanets.filter(getNames);

function getNames(planet) {
  return planet.radius > 20000
}
console.log(biggerPlanetsNames );

The

map

function calls

getNames

function for each item of the array. Each time the function

getNames

returns only names from each object

let myFavoritePlanets = [
    {name: 'Earth', radius: 6371}, 
    {name: 'Jupiter', radius: 69911}, 
    {name: 'Neptune', radius: 24622, moons: ['Triton', 'Thalassa', 'Nereid', 'Proteus', 'Hippocamp', 'Naiad']}
]
let namesOnly = myFavoritePlanets.map(getNames);

function getNames(planet) {
  return planet.name
}
console.log(namesOnly);

First we add

click

event listener for two functions:

func1

,

func2

to document object. After clicking three times we remove the event listener for

func1

function

let counter = 0;
document.addEventListener('click', func1);
document.addEventListener('click', func2);

function func1(){
    console.log('You clicked me!');
  
    if (counter>2) {
        console.log('Max limit is 3');
        document.removeEventListener('click', func1);
    }
}
function func2(){
    counter ++;
    console.log('counter: '+counter);
}

1)Literal Notation It's comma delimited list of 0 or more pairs of property names and values enclosed in curly braces

let car = {
    mark: 'Toyota',
    model: 'AE86',
    drift: function(place){ //method
        return 'car is drifting on the ' + place;
    }

};

--------------------------------------------------------------------------------------------------------------------------------------------------- 2)Object() constructor The Object constructor creates an object wrapper for the given value

let car = new Object();

car.mark = 'Toyota';
car.model = 'AE86';
car.drift = function(place){
    return this.mark+ ' is drifting on the ' + place;
}

new Object('text')

gives us String object,

new Object(123)

gives us Number object and so on, anything other than null/undefined given to this constructor will create wrapper for that value___________ 3)Constructor functions Blueprint function to create any number of objects that are the same type and inherit the same functionality

function Car(mark, model, speed){
    this.mark = mark;
    this.model = model;
    this.speed = speed;
}
Car.prototype.drift = function(place){
    return this.mark+ ' is drifting on the ' + place;
}

let car1 = new Car('Toyota', 'AE86', 240);
let car2 = new Car('Subaru', 'Impreza', 200);

this keyword is an object that owns the code but in this context it is meant to be the newly created object by this constructor --------------------------------------------------------------------------------------------------------------------------------------------------- 4)Object.create() method

let car = Object.create({});

car.mark = 'Toyota';
car.model = 'AE86';
car.drift = function(place){
    return this.mark+ ' is drifting on the ' + place;
}

giving null/undefined to

create

method will cause newly created object to have no prototype, which by default should be

Object.prototype

, or alternatively you can use prototype of another constructor function

let car = Object.create(Car.prototype)

or object itself to set a new prototype of an object

let car = Object.create({prototype_property1: 'value1'})

you can also use

property descriptor

to assign properties more precisely as you desire

let car2 = Object.create({}, {
    mark: {
        value: 'Toyota'
        writable: true  // false by default
        enumerable: true  // false by default
        configurable: true  // false by default
    },
    model: {
        value: 'AE86'
    },
    speed: {
        value: 240
    },
    drift: {
        value: function(place){
            return this.mark+ ' is drifting on the ' + place;
        }
    },
})

--------------------------------------------------------------------------------------------------------------------------------------------------- 5)ES6 class syntax WARNING: ES6 features might not be available for older version of some browsers

class Car{
    constructor(mark, model, speed){
        this.mark = mark;
        this.model = model;
        this.speed = speed;
    }
    drift(place){
        return this.mark+ ' is drifting on the ' + place;
    }
}

this is basically the same as constructor function but the different syntax --------------------------------------------------------------------------------------------------------------------------------------------------- 6)singleton pattern downside of this is that you can't create many instances and methods will repeat

let car = new function(){
    this.mark = 'Toyota';
    this.model = 'AE86';
    this.speed = 240;
    this.drift = function(place){
        return this.mark+ ' is drifting on the ' + place;
    }
}

Creates several multiplier functions without using

Higher order function

function doubleMe(number) {
    return 2*number;
}
function tripleMe(number) {
    return 3*number;
}
function quadrupleMe(number) {
    return 4*number;
}
document.write(doubleMe(10));
document.write(tripleMe(10));
document.write(quadrupleMe(10));

Creates the same multiplier functions using

Higher order function

In this case we only need to create one function instead of 3 multiplier functions

function multiplier(multiply) {
    return function(number){
        return number*multiply;
    };
}

let double = multiplier(2);
let triple = multiplier(3);
let quadruple = multiplier(4);

document.write(double(10));
document.write(triple(10));
document.write(quadruple(10));

Built-in built-in higher order functions that expect to receive a function as an argument

document.addEventListener('click', func);
function func() {
    alert('You clicked me!');
}

Using anonymous function:

document.addEventListener('click', function() {
    alert('You clicked me!');
});

Another built-in function

foreach

that receives a function as an argument

let greatColors = ['green', 'orange', 'yellow'];

greatColors.forEach(listColors);

function listColors(color) {
    document.write('The color ' + color + ' is a great color<br>');
}