JAVASCRIPT.md

Go Back

Javascript

usefull links

ES6 cheat sheet

if shorthands

    console.log(true ? "its true": "its false")
    // returns its true or its false

    console.log(true && "its true")
    // returns its true
    
     console.log(false && "its true")
    // returns Boolean false

    console.log(true && "its true" && "its false")
    // returns "its true"

    console.log(false || "its false")
    // returns "its false"

    // You can also test some values
    console.log(null || "false") // returns "false"
    console.log(NaN || "its false") // returns "false"
    console.log(undefined || "its false") // returns "false"
    console.log('' || "its false") // returns "false"

Destructuring assign shorthands

    import { observable, action, runInAction } from 'mobx';

    const { store, form, loading, errors, entity } = this.props;

assign custom names

    const { store, form, loading, errors, entity:contact } = this.props;

Spread Operator

    // joining arrays
    const odd = [1, 3, 5 ];
    const nums = [2 ,4 , 6, ...odd];
    console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

    // cloning arrays
    const arr = [1, 2, 3, 4];
    const arr2 = [...arr];

    const odd = [1, 3, 5 ];
    const nums = [2, ...odd, 4 , 6];

    const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
    console.log(a) // 1
    console.log(b) // 2
    console.log(z) // { c: 3, d: 4 }

Mandatory parameter shorthand

    mandatory = () => {
        throw new Error('Missing parameter!');
    }

    foo = (bar = mandatory()) => {
        return bar;
    }

Math.floor shorthand

    ~~4.9 // 4

Exponent Power shorthand

    2**3 // 8
    2**4 // 4
    4**3 // 64

Bitwise IndexOf Shorthand

    if(~arr.indexOf(item)) { // Confirm item IS found

    }

    if(!~arr.indexOf(item)) { // Confirm item IS NOT found

    }

Object.entries()

    const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
    const arr = Object.entries(credits);
    console.log(arr);

    /** Output:
    [ [ 'producer', 'John' ],
    [ 'director', 'Jane' ],
    [ 'assistant', 'Peter' ]
    ]
    **/

Object.values()

    const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
    const arr = Object.values(credits);
    console.log(arr);

    /** Output:
    [ 'John', 'Jane', 'Peter' ]
    **/

    function App(props){
        const test = () => ("test")
        return(
            <p>App {test()}</p>
        )
    }

Javascript odities

Null is an object so to evaluate it

    alert(typeof null); // alerts 'object'
    alert(null instanceof Object); // evaluates false

NaN is a number, to evaluate it you can just compare it with another NaN

    alert(typeof NaN); // alerts 'Number'
    alert(NaN === NaN); // evaluated false

Replace has a callBack, for every match callBack is called

    alert('10 13 21 48 52'.replace(/\d/g, function(match) {
        return parseInt(match) < 3 ? '*' : match; 
    })); ** *3 ** 48  5*

Undefined is not reserved, it can be used inside scopes

    (function() {
        var undefined = 'foo'; 
        alert(undefined, typeof undefined); // foo string
    })(); 

Array with no keys evaluates to false when no type evaluation is used

    alert(new Array() == false); // evaluates true

You can use vibration on the browser

check compatibility on: vibrate()

    window.navigator.vibrate(500); // Vibrates for 500 miliseconds

You can get the some network info from the clinet, like download speed

check compatibility on: navigator.connection, rtt, downlink, effectiveType

    console.log(navigator.connection.rtt); // Latency
    console.log(navigator.connection.effectiveType) // kind of connection the internet speed aproaches best
    console.log(navigator.connection.downlink); // Doanload speed in megabits per second

Prohibiting paste action

    input.addEventListener("paste", function(e){
        e.preventDefault() // prevents default action
    })