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
70
Reaction score
61
Points
30
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
822
Reaction score
841
Points
915
Location
United Kingdom
Local Time
Today, 14:53
Website
adgr.dev
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
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

szferi

Member
Joined
Oct 27, 2019
Messages
12
Reaction score
14
Points
5
Everything from this talk (The Most Annoying Website - Feross Aboukhadijeh - JSConf US 2018):
 
  • Like
  • Hot
Reactions: Adam and avena

frood

Member
Joined
Oct 13, 2019
Messages
27
Reaction score
23
Points
10
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

avena

Member
Joined
Oct 19, 2019
Messages
70
Reaction score
61
Points
30
Oh yes, now with template literals is no longer needed.
 
Last edited:

Pandemix

MD developer
Gold Member
Joined
Feb 13, 2020
Messages
17
Reaction score
30
Points
65
Location
Austin, TX
Local Time
Today, 08:53
Website
marketersdelight.com
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