Your favorite JS trick

Your favorite JS trick

avena

Member
Local time
06:16
Joined
Oct 19, 2019
Messages
149

Do you have a Javascript trick you commonly use?

For me, it is the spread sintax from ES6. Love how simple it is.
Like, for cloning an array:

Code:
let a = ["It's", "simple"];
let b = [...a, "right?"];

console.log(b); // returns ["It's", "simple", "right?"]

Reference

 
Last edited:

tom

Creator of StickerRun®
Community Team
Local time
11:16
Joined
Oct 13, 2019
Messages
258

I‘ll take all from this example list 😂

 

Adam

Mr. Webwide
Administrator
Local time
10:16
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

Code:
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
For us jQuery reminiscers. 😄

 

nick

Member
Gold Member
Local time
02:16
Joined
Oct 13, 2019
Messages
42
Pronouns
he/him

!!falsyThing -> convert something "falsy" or "truthy" thing into a boolean.

 

Jhechtf

Member
Local time
02:16
Joined
Feb 6, 2020
Messages
5

Hmm, It'd have to be the trickery you can get into when you understand how the OR / AND operators work in Javascript.

e.g.

JavaScript:
// If props.someProp is 'truthy', somethingWithFallBack will assume that value.
// Otherwise, it will remain false.
const somethingWithFallBack = props.someProp || false;

// if someProp2 is truthy, assume that value.
// If someOtherVariable is truthy, take that value
// Otherwise, empty array.
const nestedFallback = props.someProp2 || someOtherVariable || [];

// Useful for when you need to check something deep into a variable but also need to grab
// the last value
// if each respective chunk is truthy, "doesThisExist" will be the output of the function "someMethod"
const doesThisExist = props.someVariable3
    && props.someVariable3.someProperty
    && props.someVariable3.someProperty.someMethod
    && props.someVariable3.someProperty.someMethod();

 
Last edited:

frood

Member
Local time
11:16
Joined
Oct 13, 2019
Messages
31

I'm SO GLAD it's no longer necessary, because we now have multi-line strings built in, but I still love that stuff like this is possible in JS.

JavaScript:
var fragment_shader = (function () {/*
    attribute        vec2        aVertexPosition;
    attribute        vec2        aTexPosition;
    attribute        vec2        aPosition;
    varying          vec2        vTexPosition;
    const            vec2         madd = vec2(0.5,0.5);
    void main()
    {
        gl_Position = vec4( (aVertexPosition[0]),
                            (aVertexPosition[1]),
                            0.0, 1.0);
        vTexPosition = aTexPosition;
        vTexPosition = (aVertexPosition * madd) + madd;
        vTexPosition[1] = 1.0 - vTexPosition[1];
    }
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

 

avena

Member
Local time
06:16
Joined
Oct 19, 2019
Messages
149

Oh yes, now with template literals is no longer needed.

 
Last edited:

Pandemix

MD developer
Gold Member
Local time
04:16
Joined
Feb 13, 2020
Messages
28

My favorite "tricks" are anything that prevents me from needing jQuery. :D It's amazing how far recreating a few of the most useful functions can take you.

I love how much simpler JS is getting but I am always concerned about backwards compatibility for my customers going years back, so here are a few common jQuery functions in pure JS from a script I found/have slightly tweaked for my own uses:

jQuery to JS functions:
window.MD = {
    foreach: function( items, fn ) {
        if ( Object.prototype.toString.call( items ) !== '[object Array]' )
            items = items.split( ' ' );
        for ( var i = 0; i < items.length; i++ )
            fn( items[i], i );
    },
    hasClass: function( el, className ) {
        return new RegExp( '(^|\\s)' + className + '(\\s|$)').test( el.className );
    },
    addClass: function( el, classes ) {
        MD.foreach( classes, function( className ) {
            if ( ! MD.hasClass( el, className ) )
                el.className += ( el.className ? ' ' : '' ) + className;
        });
    },
    removeClass: function( el, classes ) {
        MD.foreach( classes, function( className ) {
            if ( MD.hasClass( el, className ) )
                el.className = el.className.replace( new RegExp( '(?:^|\\s)' + className + '(?!\\S)' ), '' );
        });
    },
    toggleClass: function( el, classes ) {
        MD.foreach( classes, function( className ) {
            ( MD.hasClass( el, className ) ? MD.removeClass : MD.addClass )( el, className );
        });
    }
}

// Example: MD.toggleClass( document.getElementById( 'test' ), 'class-name' );

 
Top