DEV Community

HornGang
HornGang

Posted on β€’ Edited on

1 2

Make learning JS basic methods as game tasks

When I begin to learn JavaScript, I often feeling tired with searching document. I spent a lot of time in looking for a simple function in standard lib. Till one day, I can't stand wasting time in this anymore. Why not remember all of them in my head, I thought.

But remember the functions in std lib is a boring job. To add some fun in doing that, I worte a simple script, that will generate a todo list, with js methods name and the link to that method's MDN document.

const FundamentalObjects = [
    Object,
    Function,
    Boolean,
    Symbol,
    Error
]

const NumbersAndDates = [
    Number,
    BigInt,
    Math,
    Date
]

const TextProcessing = [
    String,
    RegExp
]

const IndexedCollections = [
    Array,
    Int8Array,
    Uint8Array,
    Uint8ClampedArray,
    Int16Array,
    Uint16Array,
    Int32Array,
    Uint32Array,
    Float32Array,
    Float64Array,
    BigInt64Array,
    BigUint64Array
]

const KeyedCollections = [
    Map,
    Set,
    WeakMap,
    WeakSet
]

const StructuredData = [
    ArrayBuffer,
    SharedArrayBuffer,
    Atomics,
    DataView,
    JSON
]

const ControlAbstractionObjects = [
    Promise,
    // Generator,
    // GeneratorFunction,
    // AsyncFunction 
]

const Reflection = [
    Reflect,
    Proxy
]

const Internationalization = [
    Intl,
    Intl.Collator,
    Intl.DateTimeFormat,
    Intl.ListFormat,
    Intl.NumberFormat,
    Intl.PluralRules,
    Intl.RelativeTimeFormat,
    Intl.Locale
]

const WASM = [
    WebAssembly,
    WebAssembly.Module,
    WebAssembly.Instance,
    WebAssembly.Memory,
    WebAssembly.Table,
    WebAssembly.CompileError,
    WebAssembly.LinkError,
    WebAssembly.RuntimeError
]


const ObjectsToLearn =
    FundamentalObjects
    .concat(NumbersAndDates)
    .concat(TextProcessing)
    .concat(IndexedCollections)
    .concat(KeyedCollections)
    .concat(StructuredData)
    .concat(ControlAbstractionObjects)
    .concat(Internationalization)
    .concat(WASM)

const listMethodsOf = (object) => {
    try {
        return Object.getOwnPropertyNames(object.prototype)
            .filter(f => !['caller', 'callee', 'arguments'].includes(f))
            .filter(f => {
                try {
                    let bool = typeof(object['prototype'][f]) == 'function'
                    return bool
                } catch (e) {
                    return false
                }
            })
    } catch (e) {
        return []
    }
}


let r =
    ObjectsToLearn
    .filter(o => o.name)
    .map(o => '# ' + o.name + '\n' +
        listMethodsOf(o)
        .map(f => '- [ ] [' + f + '](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/' + o.name + '/' + f + ')')
        .join('\n')
    )
    .join('\n')

console.log(r)
Enter fullscreen mode Exit fullscreen mode

Then copy the content in console, and paste in your gist, you just got a clickable todo list of all methods of main objects in JavaScript (Browser). You can visit the result here: https://gist.github.com/Ljzn/d93dae3de64660e66be598ee88fa57be .

Happy Coding!

2019.08.06 Update:

I changed the code into two functions: "listOfJSObjectsDoc" and "listOfWebAPIDoc".

const listMethodsOf = (object) => {
    try {
        return Object.getOwnPropertyNames(object.prototype)
            .filter(f => !['caller', 'callee', 'arguments'].includes(f))
            .filter(f => {
                try {
                    let bool = typeof(object['prototype'][f]) == 'function'
                    return true
                } catch (e) {
                    return false
                }
            })
    } catch (e) {
        return []
    }
}


const listOfWebAPIDoc = modules =>
    toDoc(modules, 'https://developer.mozilla.org/en-US/docs/Web/API/')

const listOfJSObjectDoc = modules =>
    toDoc(modules, 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/')

const toDoc = (modules, baseURL) =>
    modules
    .filter(o => o.name)
    .map(o => '# ' + o.name + '\n' +
        listMethodsOf(o)
        .map(f => `- [ ] [${f}](${baseURL}${o.name}/${f})`)
        .join('\n')
    )
    .join('\n')
Enter fullscreen mode Exit fullscreen mode

Example:

let modules = [MediaStream, MediaStreamTrack]

console.log(listOfWebAPIDoc(modules))
Enter fullscreen mode Exit fullscreen mode

You can try this in https://jsbin.com/dujeril/1/edit?js,console .

Happy Coding!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs