Javascript Cheatsheet

javascript_cheatsheet.md

Javascript Cheatsheet

Data Types

let age = 28; // Number

let name = "Joe"; // string

let name = { // object
  firstName : "Joe", 
  lastName : "Smith"
}; 

let truth = true; // boolean

let sheets = [ "Linux", "Apache", "MySQL", "PHP" ]; // array

var a; 
typeof a; // "undefined" 

var a = null; // value null

Variables

Variable Scoping

• var - Can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed (hoisting)
• const - Cannot be reassigned and not accessible before they appear within the code
• let - Similar to const, however, let variable can be reassigned but not re-declared

Variable Examples

var a;                          // variable
var b = "good";                 // string
var c = "Hi" + "" + "Joe";      // "Hi Joe"
var d = 1 + 2 + "4";            // "34"
var e = [8, 4, 3, 2];           // array
var f = true;                   // boolean
var g = /\s/;                   // RegEx (regular expression)
var h = function(){};           // function object
const PI = 3.141;               // constant
var a = 1, b = 2, c = a + b;    // multiple variables on one line
let y = 'zzz';                  // block scope local variable

Javascript Operators

Basic Mathematical

• + — Addition
• - — Subtraction
• * — Multiplication
• / — Division
• (...) — Grouping operator, operations within brackets are executed earlier than those outside
• % — Modulus (remainder )
• ++ — Increment numbers
• -- — Decrement numbers

Comparison Operators

• == — Equal to
• === — Equal value and equal type
• != — Not equal
• !== — Not equal value or not equal type
• > — Greater than
• < — Less than
• >= — Greater than or equal to
• <= — Less than or equal to
• ? — Ternary operator

Logical Operators

• && — Logical and
• || — Logical or
• ! — Logical not

Bitwise Operators

• & — AND statement
• | — OR statement
• ~ — NOT
• ^ — XOR
• << — Left shift
• >> — Right shift
• >>> — Zero fill right shift

Javascript Numbers

Number Properties

MAX_VALUE — The maximum numeric value representable in JavaScript MIN_VALUE — Smallest positive numeric value representable in JavaScript NaN — The “Not-a-Number” value NEGATIVE_INFINITY — The negative Infinity value POSITIVE_INFINITY — Positive Infinity value

Number Methods

• toExponential - Returns a string representing the Number object in exponential notation
• toFixed - formats a number using fixed-point notation
• toPrecision - returns a string representing the Number object to the specified precision
• toString - returns a string representing the specifies Number object
• valueOf - returns the wrapped primitive value of a number object

Math Constants

• E — Euler’s number
• LN2 — The natural logarithm of 2
• LN10 — Natural logarithm of 10
• LOG2E — Base 2 logarithm of E
• LOG10E — Base 10 logarithm of E
• PI — The number PI
• SQRT1_2 — Square root of 1/2
• SQRT2 — The square root of 2

Math Methods

• abs(x) — Returns the absolute (positive) value of x
• acos(x) — The arccosine of x, in radians
• asin(x) — Arcsine of x, in radians
• atan(x) — The arctangent of x as a numeric value
• atan2(y,x) — Arctangent of the quotient of its arguments
• ceil(x) — Value of x rounded up to its nearest integer
• cos(x) — The cosine of x (x is in radians)
• exp(x) — Returns e^x, where e is Eulers number
• floor(x) — The value of x rounded down to its nearest integer
• log(x) — The natural logarithm (base E) of x of 1224
• max(x,y,z,...,n) — Returns the number with the highest value
• min(x,y,z,...,n) — Same for the number with the lowest value
• pow(x,y) — X to the power of y
• random() — Returns a random number between 0 and 1
• round(x) — The value of x rounded to its nearest integer
• sin(x) — The sine of x (x is in radians)
• sqrt(x) — Square root of x
• tan(x) — The tangent of an angle

Javascript Strings

Escape Characters

• ' — Single quote
• " — Double quote
• \ — Backslash
• \b — Backspace
• \f — Form feed
• \n — New line
• \r — Carriage return
• \t — Horizontal tabulator
• \v — Vertical tabulator

String Methods

• charAt - Returns the character at the specified index
• charCodeAt — Gives you the unicode of character at that position
• fromCharCode — Returns a string created from the specified sequence of UTF-16 code units
• concat - Joins two or more strings, and returns a copy of the joined strings
• replace - Searches for a match between a substring (or regex) and a string and replaces the matched substring with a new substring
• search - Searches for a match between a regex and a string, and returns the position of the match
• slice - Extracts a part of a string and returns a new string
• trim - Removes whitespace from both ends of a string
• substr - Extracts the character from a string, beginning at a specified start position, and through the specified number of character
• substring — Also similar to slice() but can’t accept negative indices
• toLowerCase - Converts a string to lowercase letters
• toUpperCase - Converts a string to uppercase letters
• indexOf — Provides the position of the first occurrence of a specified text within a string
• lastIndexOf — Same as indexOf() but with the last occurrence, searching backwards
• match — Retrieves the matches of a string against a search pattern
• split — Splits a string object into an array of strings at a specified position
• valueOf — Returns the primitive value (that has no properties or methods) of a string object

Javascript Array Methods

• concat - Joins two or more arrays, and returns a copy of the joined array
• indexOf - Search the array for an element and returns its position
• join - Joins all elements of an array into a string
• pop - Removes the last element of an array, and returns that element
• reverse - Reverses the order of the elements in an array
• shift - Removes the first element of an array, and returns that element
• sort - Sorts the element of an array
• toString - Converts an array to string, and returns the result

Global Javascript Functions

• decodeURI — Decodes a Uniform Resource Identifier (URI) created by encodeURI or similar
• decodeURIComponent — Decodes a URI component
• encodeURI — Encodes a URI into UTF-8
• encodeURIComponent — Same but for URI components
• eval — Evaluates JavaScript code represented as a string
• isFinite — Determines whether a passed value is a finite number
• isNaN — Determines whether a value is NaN or not
• Number —- Returns a number converted from its argument
• parseFloat — Parses an argument and returns a floating-point number
• parseInt — Parses its argument and returns an integer

Javascript Conditional Constructs

Basic If, Else If, Else Statements

if (condition) {     
  // what to do if condition is met 
} else if (condition2) {
  // what to do if condition2 is met
} else {
  // what to do if condition is not met 
}

Switch Statement

// input is current day
switch (new Date().getDay()) {
case 6:   // if (day == 6)
	text = "Saturday";          
	break;
case 0:   // if (day == 0)
	text = "Sunday";
	break;
default:   // else...
	text = "if no other matches";
} 

Javascript Looping Constructs

for loops (to execute a fixed number of iterations)

let a = [1, 2, 3]; 
let sum = 0; 

for (let i - 0; i <a.length; i++) {
    sum += a[i]; 
}

console.log(sum); 

while loops (runs until condition is false)

let i = 1;
while (i < 100) {
    i *= 2; 
    console.log(i + ", ");
} 

do...while loops (always executes at least once)

  var i = 1;
  do (i < 100) {
      i *= 2; 
      console.log(i + ", ");
  } while (1 < 100);

break (exits loop)

for (let i = 0; i < 10; i++) {
    if (i == 5) { 
      break; 
    } 
    console.log(i + ", ");
}

continue (skips to the next iteration)

for (let i = 0; i < 10; i++) {
    if (i == 5) { 
      continue; 
    }
    console.log(i + ", ");
}

Date Methods

• getFullYear - Returns the year of the specified date according to local time
• getMonth - Returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year).
• getDate - Returns the day of the month for the specified date according to local time
• getHours - Returns the hour for the specified date, according to local time
• getMinutes - Returns the minutes in the specified date according to local time
• getSeconds - Returns the seconds in the specified date according to local time

Regular Expressions

• Regular expressions are search patterns used to match character combinations in strings. The search pattern can be used for text search and text to replace operations.

Pattern Modifiers

• e — Evaluate replacement
• i — Perform case-insensitive matching
• g — Perform global matching
• m — Perform multiple line matching
• s — Treat strings as a single line
• x — Allow comments and whitespace in the pattern
• U — Ungreedy pattern

Brackets

• [abc] — Find any of the characters between the brackets
• [^abc] — Find any character which is not in the brackets
• [0-9] — Used to find any digit from 0 to 9
• [A-z] — Find any character from uppercase A to lowercase z
• (a|b|c) — Find any of the alternatives separated with |

Metacharacters

• . — Find a single character, except newline or line terminator
• \w — Word character
• \W — Non-word character
• \d — A digit
• \D — A non-digit character
• \s — Whitespace character
• \S — Non-whitespace character
• \b — Find a match at the beginning/end of a word
• \B — A match not at the beginning/end of a word
• \0 — NUL character
• \n — A new line character
• \f — Form feed character
• \r — Carriage return character
• \t — Tab character
• \v — Vertical tab character
• \xxx — The character specified by an octal number xxx
• \xdd — Character specified by a hexadecimal number dd
• \uxxxx — The Unicode character specified by a hexadecimal number XXXX

Quantifiers

• n+ — Matches any string that contains at least one n
• n* — Any string that contains zero or more occurrences of n
• n? — A string that contains zero or one occurrence of n
• n{X} — String that contains a sequence of X n’s
• n{X,Y} — Strings that contain a sequence of X to Y n’s
• n{X,} — Matches any string that contains a sequence of at least X n’s
• n$ — Any string with n at the end of it
• ^n — String with n at the beginning of it
• ?=n — Any string that is followed by a specific string n
• ?!n — String that is not followed by a specific string ni

DOM Mode

• The DOM is the Document Object Model of a page. It represents the structure of a webpage. JS comes with a lot of different ways to create and manipulate HTML elements (called nodes).

Node Properties

• attributes — Returns a live collection of all attributes registered to an element
• baseURI — Provides the absolute base URL of an HTML element
• childNodes — Gives a collection of an element’s child nodes
• firstChild — Returns the first child node of an element
• lastChild — The last child node of an element
• nextSibling — Gives you the next node at the same node tree level
• nodeName —Returns the name of a node
• nodeType — Returns the type of a node
• nodeValue — Sets or returns the value of a node
• ownerDocument — The top-level document object for this node
• parentNode — Returns the parent node of an element
• previousSibling — Returns the node immediately preceding the current one
• textContent — Sets or returns the textual content of a node and its descendants

Node Methods

• appendChild — Adds a new child node to an element as the last child node
• cloneNode — Clones an HTML element
• compareDocumentPosition — Compares the document position of two elements
• getFeature — Returns an object which implements the APIs of a specified feature
• hasAttributes — Returns true if an element has any attributes, otherwise false
• hasChildNodes — Returns true if an element has any child nodes, otherwise false
• insertBefore — Inserts a new child node before a specified, existing child node
• isDefaultNamespace — Returns true if a specified namespaceURI is the default, otherwise false
• isEqualNode — Checks if two elements are equal
• isSameNode — Checks if two elements are the same node
• isSupported — Returns true if a specified feature is supported on the element
• lookupNamespaceURI — Returns the namespace URI associated with a given node
• lookupPrefix — Returns a DOMString containing the prefix for a given namespace URI if present
• normalize — Joins adjacent text nodes and removes empty text nodes in an element
• removeChild — Removes a child node from an element
• replaceChild — Replaces a child node in an element

Element Methods

• getAttribute — Returns the specified attribute value of an element node
• getAttributeNS — Returns string value of the attribute with the specified namespace and name
• getAttributeNode — Gets the specified attribute node
• getAttributeNodeNS — Returns the attribute node for the attribute with the given namespace and name
• getElementsByTagName — Provides a collection of all child elements with the specified tag name
• getElementsByTagNameNS — Returns a live HTMLCollection of elements with a certain tag name belonging to the given namespace
• hasAttribute — Returns true if an element has any attributes, otherwise false
• hasAttributeNS — Provides a true/false value indicating whether the current element in a given namespace has the specified attribute
• removeAttribute — Removes a specified attribute from an element
• removeAttributeNS — Removes the specified attribute from an element within a certain namespace
• removeAttributeNode — Takes away a specified attribute node and returns the removed node
• setAttribute — Sets or changes the specified attribute to a specified value
• setAttributeNS — Adds a new attribute or changes the value of an attribute with the given namespace and name
• setAttributeNode — Sets or changes the specified attribute node
• setAttributeNodeNS — Adds a new namespaced attribute node to an element

Working with the User Browser

• JavaScript is also able to take into account the user browser and incorporate its properties into the code.

Window Properties

• closed — Checks whether a window has been closed or not and returns true or false
• defaultStatus — Sets or returns the default text in the status bar of a window
• document — Returns the document object for the window
• frames — Returns all <iframe> elements in the current window
• history — Provides the History object for the window
• innerHeight — The inner height of a window’s content area
• innerWidth — The inner width of the content area
• length — Find out the number of <iframe> elements in the window
• location — Returns the location object for the window
• name — Sets or returns the name of a window
• navigator — Returns the Navigator object for the window
• opener — Returns a reference to the window that created the window
• outerHeight — The outer height of a window, including toolbars/scrollbars
• outerWidth — The outer width of a window, including toolbars/scrollbars
• pageXOffset — Number of pixels the current document has been scrolled horizontally
• pageYOffset — Number of pixels the document has been scrolled vertically
• parent — The parent window of the current window
• screen — Returns the Screen object for the window
• screenLeft — The horizontal coordinate of the window (relative to the screen)
• screenTop — The vertical coordinate of the window
• screenX — Same as screenLeft but needed for some browsers
• screenY — Same as screenTop but needed for some browsers
• self — Returns the current window
• status — Sets or returns the text in the status bar of a window
• top — Returns the topmost browser window

Window Methods

• alert — Displays an alert box with a message and an OK button
• blur — Removes focus from the current window
• clearInterval — Clears a timer set with setInterval()
• clearTimeout — Clears a timer set with setTimeout()
• close — Closes the current window
• confirm — Displays a dialogue box with a message and an OK and Cancel button
• focus — Sets focus to the current window
• moveBy — Moves a window relative to its current position
• moveTo — Moves a window to a specified position
• open — Opens a new browser window
• print — Prints the content of the current window
• prompt — Displays a dialogue box that prompts the visitor for input
• resizeBy — Resizes the window by the specified number of pixels
• resizeTo — Resizes the window to a specified width and height
• scrollBy — Scrolls the document by a specified number of pixels
• scrollTo — Scrolls the document to specified coordinates
• setInterval — Calls a function or evaluates an expression at specified intervals
• setTimeout — Calls a function or evaluates an expression after a specified interval
• stop — Stops the window from loading

Screen Properties

• availHeight — Returns the height of the screen (excluding the Windows Taskbar)
• availWidth — Returns the width of the screen (excluding the Windows Taskbar)
• colorDepth — Returns the bit depth of the color palette for displaying images
• height — The total height of the screen
• pixelDepth — The color resolution of the screen in bits per pixel
• width — The total width of the screen

Javascript Events

Mouse

• onclick — The event occurs when the user clicks on an element
• oncontextmenu — User right-clicks on an element to open a context menu
• ondblclick — The user double-clicks on an element
• onmousedown — User presses a mouse button over an element
• onmouseenter — The pointer moves onto an element
• onmouseleave — Pointer moves out of an element
• onmousemove — The pointer is moving while it is over an element
• onmouseover — When the pointer is moved onto an element or one of its children
• onmouseout — User moves the mouse pointer out of an element or one of its children
• onmouseup — The user releases a mouse button while over an element

Keyboard

• onkeydown — When the user is pressing a key down
• onkeypress — The moment the user starts pressing a key
• onkeyup — The user releases a key

Frame

• onabort — The loading of a media is aborted
• onbeforeunload — Event occurs before the document is about to be unloaded
• onerror — An error occurs while loading an external file
• onhashchange — There have been changes to the anchor part of a URL
• onload — When an object has loaded
• onpagehide — The user navigates away from a webpage
• onpageshow — When the user navigates to a webpage
• onresize — The document view is resized
• onscroll — An element’s scrollbar is being scrolled
• onunload — Event occurs when a page has unloaded

Form

• onblur — When an element loses focus
• onchange — The content of a form element changes (for <input>, <select> and <textarea>)
• onfocus — An element gets focus
• onfocusin — When an element is about to get focus
• onfocusout — The element is about to lose focus
• oninput — User input on an element
• oninvalid — An element is invalid
• onreset — A form is reset
• onsearch — The user writes something in a search field (for <input="search">)
• onselect — The user selects some text (for <input> and <textarea>)
• onsubmit — A form is submitted

Drag

• ondrag — An element is dragged
• ondragend — The user has finished dragging the element
• ondragenter — The dragged element enters a drop target
• ondragleave — A dragged element leaves the drop target
• ondragover — The dragged element is on top of the drop target
• ondragstart — User starts to drag an element
• ondrop — Dragged element is dropped on the drop target

Clipboard

• oncopy — User copies the content of an element
• oncut — The user cuts an element’s content
• onpaste — A user pastes the content in an element

Media

• onabort — Media loading is aborted
• oncanplay — The browser can start playing media (e.g. a file has buffered enough)
• oncanplaythrough — The browser can play through media without stopping
• ondurationchange — The duration of the media changes
• onended — The media has reached its end
• onerror — Happens when an error occurs while loading an external file
• onloadeddata — Media data is loaded
• onloadedmetadata — Metadata (like dimensions and duration) are loaded
• onloadstart — The browser starts looking for specified media
• onpause — Media is paused either by the user or automatically
• onplay — The media has been started or is no longer paused
• onplaying — Media is playing after having been paused or stopped for buffering
• onprogress — The browser is in the process of downloading the media
• onratechange — The playing speed of the media changes
• onseeked — User is finished moving/skipping to a new position in the media
• onseeking — The user starts moving/skipping
• onstalled — The browser is trying to load the media but it is not available
• onsuspend — The browser is intentionally not loading media
• ontimeupdate — The playing position has changed (e.g. because of fast forward)
• onvolumechange — Media volume has changed (including mute)
• onwaiting — Media paused but expected to resume (for example, buffering)

Animation

• animationend — A CSS animation is complete
• animationiteration — CSS animation is repeated
• animationstart — CSS animation has started

Other

• transitionend — Fired when a CSS transition has completed
• onmessage — A message is received through the event source
• onoffline — The browser starts to work offline
• ononline — The browser starts to work online
• onpopstate — When the window’s history changes
• onshow — A <menu> element is shown as a context menu
• onstorage — A Web Storage area is updated
• ontoggle — The user opens or closes the <details> element
• onwheel — Mouse wheel rolls up or down over an element
• ontouchcancel — Screen-touch is interrupted
• ontouchend — User’s finger is removed from a touch-screen
• ontouchmove — A finger is dragged across the screen
• ontouchstart — A finger is placed on the touch-screen

Errors

• try — Lets you define a block of code to test for errors
• catch — Set up a block of code to execute in case of an error
• throw — Create custom error messages instead of the standard JavaScript errors
• finally — Lets you execute code, after try and catch, regardless of the result

Error Name Values

JavaScript also has a built-in error object. It has two properties:

• name — Sets or returns the error name
• message — Sets or returns an error message in a string from

The error property can return six different values as its name:

• EvalError — An error has occurred in the eval() function
• RangeError — A number is “out of range”
• ReferenceError — An illegal reference has occurred
• SyntaxError — A syntax error has occurred
• TypeError — A type error has occurred
• URIError — An encodeURI() error has occurred

Javascript Tips / Tricks

Convert Fahrenheit / Celsius

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

Get a random boolean (true/false)

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());

// Result: a 50/50 change on returning true of false

Generate a list with random numbers

Array.from({ length: 3 }, Math.random)
// [ 0.027519891180024736, 0.7477909353302613, 0.6261696776859895 ]

Check if the provided day is a weekday

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(new Date(2021, 0, 12)));
// true (Tuesday)
console.log(isWeekday(new Date(2021, 0, 9)));
// false (Saturday)

Generate a list with numbers

Array.from({ length: 2 }, (v, i) => i)
// [ 0, 1 ]

Reverse a string

const reverse = str => str.split('').reverse().join('');

reverse('hello world');     
// 'DLROW OLLEH'

Check if the current tab is in view / focus

const isBrowserTabInView = () => document.hidden;

isBrowserTabInView();

// Result: returns true or false depending on if tab is in view / focus

Odd or Even

const isEven = num => num % 2 === 0;

console.log(isEven(2));
// true

console.log(isEven(3));
// false

Check URL Validity

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
};

isValidURL("https://dev.to");
// true

isValidURL("https//blah");
// false

Get the time from a date

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// 17:30:00
console.log(timeFromDate(new Date()));
// will log the current time (e. g. 16:07:06)

Truncate a number to a fixed decimal point

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);

toFixed(15.912321213, 1);       // 15.9
toFixed(15.912321213, 2);       // 15.91
toFixed(15.912321213, 3);       // 15.912
toFixed(15.912321213, 4);       // 15.9123
toFixed(15.912321213, 5);       // 15.91232
toFixed(15.912321213, 6);       // 15.912321

N (seconds,minutes,hours,days,months,years) something ago

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);

  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};

const createdAt = new Date(2020, 1, 7);
fromAgo(createdAt); // 1 year(s) ago

Check if an element is currently in focus

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement);
// Result: will return true if in focus, false if not in focus

Generate path with parameters

const generatePath = (path, obj) =>
    path.replace(/(\:[a-z]+)/g, (v) => obj[v.substr(1)]);

const route = "/api/:page/:id";

generatePath(route, {
  page: "items",
  id: 12855,
});

// /api/items/12855

Check if the current user has touch events supported

let touchSupported = () => {
  if ('ontouchstart' in window) {
    return true;
  } else if (typeof(window.DocumentTouch) !== 'undefined' && window.DocumentTouch && document instanceof window.DocumentTouch) {
    return true;
  }
  return false;
}

console.log(touchSupported());

// Result: will return true if touch events are supported, false if not

Check if the current user is on an Apple device

let isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);

// Result: will return true if user is on an Apple device

Get params from path

const getPathParams = (path, pathMap, serializer) => {
  path = path.split("/");
  pathMap = pathMap.split("/");
  return pathMap.reduce((acc, crr, i) => {
    if (crr[0] === ":") {
      const param = crr.substr(1);
      acc[param] = serializer && serializer[param]
        ? serializer[param](path[i])
        : path[i];
    }
    return acc;
  }, {});
};

getPathParams("/app/products/123", "/app/:page/:id");
// { page: 'products', id: '123' }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => ['Car', 'Mobile', 'Home'][v],
  id: v => +v
});
// { category: 'Home', id: 8583212 }

Generate path with query string

const generatePathQuery = (path, obj) =>
  path +
  Object.entries(obj)
    .reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?")
    .slice(0, -1);

generatePathQuery("/person", { personname: "joe smith", personage: 40 }); 
// "/person?personname=joe%20smith&personage=40"

Get params from query string

const getQueryParams = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
    const [key, value] = crr.split("=");
    total[key] = value;
    return total;
  }, {});

getQueryParams("/user?lastname=smith&userage=40");
// { lastname: 'smith', userage: '40' }

Scroll to top of the page

const goToTop = () => window.scrollTo(0, 0);
goToTop();

// Result: will scroll the browser to the top of the page
// NOTE: not supported on Internet Explorer

Get average value of arguments (functional approach)

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
// 5.5