Here I have hand-picked some of the most useful code snippets from . It’s an awesome resource, go ahead and show it some love. 30 seconds of code In this article, I tried to sort them based on their practical use, answering common questions you may face in your project: 1. How to hide all elements specified? hide = [...el].forEach( (e.style.display = )); hide( .querySelectorAll( )); const ( ) => ...el => e 'none' // Example document 'img' // Hides all <img> elements on the page 2. How to check if the element has the specified class? hasClass = el.classList.contains(className); hasClass( .querySelector( ), ); const ( ) => el, className // Example document 'p.special' 'special' // true 3. How to toggle a class for an element? toggleClass = el.classList.toggle(className); toggleClass( .querySelector( ), ); const ( ) => el, className // Example document 'p.special' 'special' // The paragraph will not have the 'special' class anymore 4. How to get the scroll position of the current page? getScrollPosition = ({ : el.pageXOffset !== ? el.pageXOffset : el.scrollLeft, : el.pageYOffset !== ? el.pageYOffset : el.scrollTop
}); getScrollPosition(); const ( ) => el = window x undefined y undefined // Example // {x: 0, y: 200} 5. How to smooth-scroll to the top of the page? scrollToTop = { c = .documentElement.scrollTop || .body.scrollTop; (c > ) { .requestAnimationFrame(scrollToTop); .scrollTo( , c - c / );
  }
}; scrollToTop(); const => () const document document if 0 window window 0 8 // Example 6. How to check if the parent element contains the child element? elementContains = parent !== child && parent.contains(child); elementContains( .querySelector( ), .querySelector( )); elementContains( .querySelector( ), .querySelector( )); const ( ) => parent, child // Examples document 'head' document 'title' // true document 'body' document 'body' // false 7. How to check if the element specified is visible in the viewport? elementIsVisibleInViewport = { { top, left, bottom, right } = el.getBoundingClientRect(); { innerHeight, innerWidth } = ; partiallyVisible
    ? ((top > && top < innerHeight) || (bottom > && bottom < innerHeight)) &&
        ((left > && left < innerWidth) || (right > && right < innerWidth))
    : top >= && left >= && bottom <= innerHeight && right <= innerWidth;
}; elementIsVisibleInViewport(el); elementIsVisibleInViewport(el, ); const ( ) => el, partiallyVisible = false const const window return 0 0 0 0 0 0 // Examples // (not fully visible) true // (partially visible) 8. How to fetch all images within an element? getImages = { images = [...el.getElementsByTagName( )].map( img.getAttribute( )); includeDuplicates ? images : [...new (images)];
}; getImages( , ); getImages( , ); const ( ) => el, includeDuplicates = false const 'img' => img 'src' return Set // Examples document true // ['image1.jpg', 'image2.png', 'image1.png', '...'] document false // ['image1.jpg', 'image2.png', '...'] 9. How to figure out if the device is a mobile device or a desktop/laptop? detectDeviceType = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? : ; detectDeviceType(); const => () 'Mobile' 'Desktop' // Example // "Mobile" or "Desktop" 10. How to get the current URL? currentURL = .location.href; currentURL(); const => () window // Example // 'https://google.com' 11. How to create an object containing the parameters of the current URL? getURLParameters = (url.match( ) || []).reduce( ((a[v.slice( , v.indexOf( ))] = v.slice(v.indexOf( ) + )), a),
    {}
  ); getURLParameters( ); getURLParameters( ); const => url /([^?=&]+)(=([^&]*))/g ( ) => a, v 0 '=' '=' 1 // Examples 'http://url.com/page?n=Adam&s=Smith' // {n: 'Adam', s: 'Smith'} 'google.com' // {} 12. How to encode a set of form elements as an object? formToObject = .from( FormData(form)).reduce( ({
      ...acc,
      [key]: value
    }),
    {}
  ); formToObject( .querySelector( )); const => form Array new ( ) => acc, [key, value] // Example document '#form' // { email: 'test@email.com', name: 'Test Name' } 13. How to retrieve a set of properties indicated by the given selectors from an object? get = [...selectors].map( s
      .replace( , )
      .split( )
      .filter( t !== )
      .reduce( prev && prev[cur], )
  ); obj = { : { : { : } }, : [ , , { : }] }; get(obj, , , ); const ( ) => , ...selectors from => s /\[([^\[\]]*)\]/g '.$1.' '.' => t '' ( ) => prev, cur from const selector to val 'val to select' target 1 2 a 'test' // Example 'selector.to.val' 'target[0]' 'target[2].a' // ['val to select', 1, 'test'] 14. How to invoke the provided function after wait (in milliseconds)? delay = setTimeout(fn, wait, ...args);
delay( { .log(text);
  }, , ); const ( ) => fn, wait, ...args ( ) function text console 1000 'later' // Logs 'later' after one second. 15. How to trigger a specific event on a given element, optionally passing custom data? triggerEvent = el.dispatchEvent( CustomEvent(eventType, { detail })); triggerEvent( .getElementById( ), );
triggerEvent( .getElementById( ), , { : }); const ( ) => el, eventType, detail new // Examples document 'myId' 'click' document 'myId' 'click' username 'bob' 16. How to remove an event listener from an element? off = el.removeEventListener(evt, fn, opts); fn = .log( ); .body.addEventListener( , fn);
off( .body, , fn); const ( ) => el, evt, fn, opts = false const => () console '!' document 'click' document 'click' // no longer logs '!' upon clicking on the page 17. How to get readable format of the given number of milliseconds? formatDuration = { (ms < ) ms = -ms; time = { : .floor(ms / ), : .floor(ms / ) % , : .floor(ms / ) % , : .floor(ms / ) % , : .floor(ms) % }; .entries(time)
    .filter( val[ ] !== )
    .map( )
    .join( );
}; formatDuration( ); formatDuration( ); const => ms if 0 const day Math 86400000 hour Math 3600000 24 minute Math 60000 60 second Math 1000 60 millisecond Math 1000 return Object => val 1 0 ( ) => [key, val] ` ` ${val} ${key} ${val !== ? : } 1 's' '' ', ' // Examples 1001 // '1 second, 1 millisecond' 34325055574 // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds' 18. How to get the difference (in days) between two dates? getDaysDiffBetweenDates = (dateFinal - dateInitial) / ( * * ); getDaysDiffBetweenDates( ( ), ( )); const ( ) => dateInitial, dateFinal 1000 3600 24 // Example new Date '2017-12-13' new Date '2017-12-22' // 9 19. How to make a GET request to the passed URL? httpGet = { request = XMLHttpRequest();
  request.open( , url, );
  request.onload = callback(request.responseText);
  request.onerror = err(request);
  request.send();
};

httpGet( , .log
); const ( ) => url, callback, err = .error console const new 'GET' true => () => () 'https://jsonplaceholder.typicode.com/posts/1' console // Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"} 20. How to make a POST request to the passed URL? httpPost = { request = XMLHttpRequest();
  request.open( , url, );
  request.setRequestHeader( , );
  request.onload = callback(request.responseText);
  request.onerror = err(request);
  request.send(data);
}; newPost = { : , : , : , : }; data = .stringify(newPost);
httpPost( ,
  data, .log
); const ( ) => url, data, callback, err = .error console const new 'POST' true 'Content-type' 'application/json; charset=utf-8' => () => () const userId 1 id 1337 title 'Foo' body 'bar bar bar' const JSON 'https://jsonplaceholder.typicode.com/posts' console // Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"} 21. How to create a counter with the specified range, step and duration for the specified selector? counter = { current = start,
    _step = (end - start) * step < ? -step : step,
    timer = setInterval( {
      current += _step; .querySelector(selector).innerHTML = current; (current >= end) .querySelector(selector).innerHTML = end; (current >= end) clearInterval(timer);
    }, .abs( .floor(duration / (end - start)))); timer;
}; counter( , , , , ); const ( ) => selector, start, end, step = , duration = 1 2000 let 0 => () document if document if Math Math return // Example '#my-id' 1 1000 5 2000 // Creates a 2-second timer for the element with id="my-id" 22. How to copy a string to the clipboard? copyToClipboard = { el = .createElement( );
  el.value = str;
  el.setAttribute( , );
  el.style.position = ;
  el.style.left = ; .body.appendChild(el); selected = .getSelection().rangeCount > ? .getSelection().getRangeAt( ) : ;
  el.select(); .execCommand( ); .body.removeChild(el); (selected) { .getSelection().removeAllRanges(); .getSelection().addRange(selected);
  }
}; copyToClipboard( ); const => str const document 'textarea' 'readonly' '' 'absolute' '-9999px' document const document 0 document 0 false document 'copy' document if document document // Example 'Lorem ipsum' // 'Lorem ipsum' copied to clipboard. 23. How to find out if the browser tab of the page is focused? isBrowserTabFocused = ! .hidden; isBrowserTabFocused(); const => () document // Example // true 24. How to create a directory, if it does not exist? fs = ( ); createDirIfNotExists = (!fs.existsSync(dir) ? fs.mkdirSync(dir) : ); createDirIfNotExists( ); const require 'fs' const => dir undefined // Example 'test' // creates the directory 'test', if it doesn't exist Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , , and ! Twitter LinkedIn GitHub DEV Previously published at https://blog.madza.dev/24-modern-es6-code-snippets-to-solve-practical-js-problems

Fetch

Google

Target

Twitter

21 Best Developer Portfolio Examples

How it Feels to Work in CSS and Styling in 2020

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

Top 24 ES6 Code Snippets for JavaScript Problems

Top 24 ES6 Code Snippets for JavaScript Problems

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps