ES6 modules learning

arrow.js

var evens = [2,4,6,8,10];

var odds = evens.map(v=>v+1)

var pairs = evens.map(value => ({even : value , odd :value+1}))

console.log('odds', pairs)

//This works differntly in arrow function
var object = {
    name : 'dev',
    arrowGetName : ()=>  this.name,
    regularGetName : function(){
        return this.name
    },

    arrowGetThis : ()=>  this,
    regularGetThis : function(){
        return this
    }

}

// console.log(this.name)
// console.log(object.arrowGetName());
// console.log(object.arrowGetThis());
// console.log(this)
// console.log('111',object.regularGetName());
// console.log('----',object.regularGetThis())

class someClass {
    constructor() {
        this.name = "ram"
    }

    testRegular() {
        return function() { return this }

    }

    testArrow() {
        return () => this.name;
    }
}

var obj = new someClass();

console.log('=====', obj.name)
console.log('===', obj.testRegular()());
console.log('====', obj.testArrow()());


/**
 Arrow functions and function declarations / expressions are not equivalent and cannot be 
 replaced blindly.
 If the function you want to replace does not use this, arguments and
 is not called with new, then yes arrow functions

 Not use arrow functions in
 object methods  {a =0 , getA()=>this.a}
 context should be dynamic (addEventListeners, click, hover places)
 const button = document.querySelector('#pushy');

  button.addEventListener('click', () => {
    console.log(this); // Window!
    this.classList.toggle('on');
  });

 Class methods

Replaceable:

Functions that don't use this or arguments.
Functions that are used with .bind(this)
Not replaceable:

Constructor functions
Function / methods added to a prototype (because they usually use this)
Variadic functions (if they use arguments (see below))


https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable

 */

 

class Car {
    constructor(make, colour) {
        this.make = make;
        this.colour = colour;
    }
}

Car.prototype.summarize = () => {
    console.log (`arrow => This car is a ${this.make} in the colour ${this.colour}`);  
};

Car.prototype.regularSummarize = function(){
    console.log (`reg summarize This car is a ${this.make} in the colour ${this.colour}`);  
};


const beemer = new Car('BMW', 'blue');
beemer.summarize()
beemer.regularSummarize()

circle.mjs

//circle.js
//Exports and imports example 

export  const PI = Math.PI;
export let name = 'wheel'

export const setName = (test) => name = test

export const getName = ()=> name

export const area = (radius)=>{
  return PI * (radius ** 2)
}

export const circumference = (radius)=>{
   return PI * 2 * radius
}

class.js

class Vehicle {
    constructor(name, noWheels) {
        this.name = name;
        this.noWheels = noWheels;
    }

    get name() {
        return this._name
    }

    set name(value) {
        this._name = value;
    }

    get noWheels() {
        return this._noWheels
    }
    set noWheels(value) {
        if (value === 4 || value === 2) {
            this._noWheels = value;
        } else {
            throw new Error('hey no wheels is 2 or 4');

        }
    }

}

var car = new Vehicle('audi', 4)

console.log('car', car.name, car)
car.noWheels = 2

index.js

import { area, circumference } from "./circle.mjs";

console.log('area==>', area(5))
//We can change the name because its "export let "  means gobal + modifyable variable 
console.log('set=cirle name=============', Circle.setName('Tyre'))
console.log('after set=============', Circle.getName())