JavaScript¶

• JavaScript
  • JavaScript Resources
    • Cheatsheet
    • JavaScript Testing
  • JavaScript Snippets
    • Math.floor / ~~ Operator
    • Cast to String
    • Check for Boolean
    • Using Class and prototype
    • Using fetch to download files
    • Create a Random ID
    • Native Date and Time formats
    • Immediately Invoked Function Expressions
    • Prototyp
    • Classes
    • CORS and fetch

JavaScript Resources¶

• The Vanilla JS Toolkit - great basic JavaScript solutions
• https://umaar.com/dev-tips/

Cheatsheet¶

• Array Cheatsheet

JavaScript Testing¶

• Mocha Tests
• Chai
• Mocha - the fun, simple, flexible JavaScript test framework
• Sinon.JS - Standalone test fakes, spies, stubs and mocks for JavaScript. Works with any unit testing framework.

JavaScript Snippets¶

Math.floor / ~~ Operator¶

~(5.5)   // => -6
~(-6)    // => 5
~~5.5    // => 5  (same as Math.floor(5.5))
~~(-5.5) // => -5 (NOT the same as Math.floor(-5.5), which would give -6 )

Cast to String¶

Problem:

('1234' === 1234) // false 

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'

or

var s = 123456 + '';

https://medium.com/dailyjs/5-ways-to-convert-a-value-to-string-in-javascript-6b334b2fc778

Check for Boolean¶

console.log(typeof true === "boolean") // true

• Using the Boolean() wrapper function.
• Putting two exclamation points !! (the logical NOT ! operator, twice) in front of any expression, which calls the Boolean() wrapper function.

// falsy values: false, 0, -0, 0n, null, undefined, NaN, and the empty string ""
console.log(Boolean(false)) // false

// truthy values: true, 1, -1, 1n, -1n, Infinity, -Infinity, " ", {}, []
console.log(Boolean(true)) // true

https://medium.com/javascript-in-plain-english/how-to-check-for-a-boolean-in-javascript-98fdc8aec2a7

Using Class and prototype¶

<https://raindrop.io/collection/2707120?q=tag:prototype&sort=-sort>

Using fetch to download files¶

fetch('example.txt')
.then(response => response.text()) 
.then(textString => {
    console.log(textString);
});

fetch('example.csv')
.then(response => response.text()) 
.then(csvString => {
    const rows = csvString.split('\n');
    for (row of rows) {
        console.log(row.split(","));
    }
});

Create a Random ID¶

toString(36) is an alphanumeric representation of a number (https://stackoverflow.com/a/37159754/814031)

Math.random().toString(36).substring(7)

Native Date and Time formats¶

const date = new Date();

const dateOptions = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};

console.log(date.toLocaleDateString("de-DE", dateOptions));

• Natively Format JavaScript Dates and Times - CodeSandbox

Immediately Invoked Function Expressions¶

(function () {
    // logic here
})();

• Use Cases for JavaScript's IIFEs — Marius Schulz
• An Introduction to IIFEs - Immediately Invoked Function Expressions - A Drip of JavaScript

Prototyp¶

Classes¶

CORS and fetch¶

if control over host server, do this

# Add these three lines to CORSify your server for everyone.
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

else find a CORS Proxy