Jump to navigation

.Cheatsheet

On this page

Shorthand JS

Ternary Operator

const x = 20;
const answerText = x > 10 ? "greater than 10" : "less than 10";

For Loop

const fruits = ['mango', 'peach', 'banana'];

for(index in fruits) {
  console.log(index, fruits[index]);
}

Short-circuit Evaluation

let name;
if (data.name) {
  name = data.name;
} else {
  name = 'Unknown';
}

// Shorthand
const name = data.name || 'Unknown';

Object Property Shorthand

const name = 'Shane', age = 33;
const obj = { x:x, y:y };

// Shorthand
const obj = {x, y};

KeyCode values

Enter = 19
Escape = 27
Tab = 9

keycode.info

Convert a string to boolean

const isTrue = (theValue == 'true');

slideUp/slideDown with JS

const slideUp = (target, duration = 500) => {
    target.style.transitionProperty = 'height, margin, padding';
    target.style.transitionDuration = duration + 'ms';
    target.style.boxSizing = 'border-box';
    target.style.height = target.offsetHeight + 'px';
    target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    window.setTimeout(() => {
        target.style.display = 'none';
        target.style.removeProperty('height');
        target.style.removeProperty('padding-top');
        target.style.removeProperty('padding-bottom');
        target.style.removeProperty('margin-top');
        target.style.removeProperty('margin-bottom');
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition-duration');
        target.style.removeProperty('transition-property');
        //alert("!");
    }, duration);
}

const slideDown = (target, duration = 500) => {
    target.style.removeProperty('display');
    let display = window.getComputedStyle(target).display;

    if (display === 'none')
        display = 'block';

    target.style.display = display;
    let height = target.offsetHeight;
    target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    target.offsetHeight;
    target.style.boxSizing = 'border-box';
    target.style.transitionProperty = "height, margin, padding";
    target.style.transitionDuration = duration + 'ms';
    target.style.height = height + 'px';
    target.style.removeProperty('padding-top');
    target.style.removeProperty('padding-bottom');
    target.style.removeProperty('margin-top');
    target.style.removeProperty('margin-bottom');
    window.setTimeout(() => {
        target.style.removeProperty('height');
        target.style.removeProperty('overflow');
        target.style.removeProperty('transition-duration');
        target.style.removeProperty('transition-property');
    }, duration);
}

const slideToggle = (target, duration = 500) => {
    if (window.getComputedStyle(target).display === 'none') {
        return slideDown(target, duration);
    } else {
        return slideUp(target, duration);
    }
}

Sort Alphabetically

const arr = ['b', 'c', 'a'];
arr.sort();
// ['a', 'b', 'c']

The 'new' operator

  • It creates a new, empty object.
  • It binds this to our newly created object.
  • It adds a property onto our newly created object called “__proto__” which points to the constructor function’s prototype object.
  • It adds a return this to the end of the function, so that the object that is created is returned from the function.

Clone an array

const array = [1,2,3,4,5];

const a = [...array];
const b = array.slice();

Slice & Splice

splice() method changes the original array where as slice() doesn't change the original array and infact returns a new one.

Slice() creates a new array object with the extracted portion

var names = ['Joe', 'Paul', 'Shane', 'Tom', 'Ralph'];

console.log(animals.slice(2));
// ["Shane", "Tom", "Ralph"]

console.log(animals.slice(0,2));
// ["Joe", "Paul"]

Splice() changes the contents of an array by removing existing elements and/or adding new elements.

names.splice(1, 0, 'Carol');
console.log(names);
// ['Joe', 'Carol', 'Paul', 'Shane', 'Tom', 'Ralph'];

names.splice(0, 4, 'June');
console.log(names);
// ['June', 'Ralph'];

JSON to string

// JSON to string
JSON.stringify({x: 5, y: 6});

// String to JSON
const str = "{ hello: 'world', places: ['Africa', 'America', 'Asia', 'Australia'] }"
JSON.stringify(eval('('+str+')'));

// OR, if the JSON defo correct
JSON.parse(jsontext);

Is not undefined

// to check if a variable is declared and is not undefined
if (typeof yourvar !== 'undefined')

// Does not execute if yourvar is `undefined`
if (yourvar === null)

// If know the variable exists, and want to check whether there's any value stored in it
if (yourvar !== undefined)

// If is true, or false
if (yourvar)
if (!yourvar)

Mobile swipe

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

Stackoverflow - givanse

Get Day

var d = new Date();
console.log(d);

var c = new Date('1964-03-30T16:43:40.723Z');
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
console.log(days[c.getDay()]);

Get CSS values in JS

Inline styles

<div class="el" style="font-size: 2em; color: red;">1234</div>
const element = document.querySelector('.element')

const fontSize = element.style.fontSize
console.log(fontSize) // 2em

const color = element.style.color
console.log(color) // red

From a stylesheet

const style = getComputedStyle(element)

getComputedStyle is read-only. You cannot set a CSS value with getComputedStyle unlike inline styles

From pseudo elements

.element::before { content: "Before pseudo element"; }
pseudoElementStyle = getComputedStyle(element, '::before')