Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Your favorite JS trick

avena

Member
Joined
Oct 19, 2019
Messages
145
Reaction score
148
Points
165
Website
alejandro.fun
Credits
352
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:
  • Like
Reactions: lildev and Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,102
Reaction score
1,141
Points
1,115
Location
United Kingdom
Local Time
Today, 17:42
Credits
9,873
Pronouns
he/him
Code:
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
For us jQuery reminiscers. 😄
 
  • Shifty
Reactions: avena

Jhechtf

Member
Joined
Feb 6, 2020
Messages
5
Reaction score
2
Points
5
Credits
0
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:
  • Like
Reactions: avena

frood

Member
Joined
Oct 13, 2019
Messages
31
Reaction score
24
Points
10
Credits
35
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];
 
  • Like
Reactions: Adam and avena

Pandemix

MD developer
Gold Member
Joined
Feb 13, 2020
Messages
28
Reaction score
42
Points
70
Location
Austin, TX
Local Time
Today, 11:42
Website
marketersdelight.com
Credits
72
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