JavaScript language basics

basics.js

/*
 * Basic operations with JavaScript arrays, functions, objects, and strings.
 * JavaScript is a small language. With ECMAScript 6 (ES6), it has some
 * powerful functional programming tools. I focus on the idioms I've used often.
 * If you learn these operations, you won't reach for third-party libraries as often.
 *
 * To run examples and verify the outputs, paste this file in your browser's console.
 */
({
  array: {
    literal: [8, 6, 7], //= [8, 6, 7]

    typeTest: Array.isArray([8, 6, 7]), //= true


    /*
     * :: PURE operations ::
     * No change to this array.
     */

    get: [8, 6, 7][1], //= 6

    length: [8, 6, 7].length, //= 3

    map: [8, 6, 7].map(x => x * 2), //= [16, 12, 14]

    concat: [8, 6, 7].concat([5, 3, 0, 9]), //= [8, 6, 7, 5, 3, 0, 9]

    find: [8, 6, 7].find(x => x < 8), //= 6 :: first element matching predicate

    filter: [8, 6, 7].filter(x => x < 8), //= [6, 7] :: all elements matching predicate

    includes: [8, 6, 7].includes(6), //= true

    indexOf: [8, 6, 7].indexOf(6), //= 1 :: index of 1st occurrence
    //                                      returns -1 if not found

    join: [8, 6, 7].join('-'), //= "8-6-7"

    // Reduce will accumulate the elements of an array by feeding your closure's output
    // back in as its first argument in the next iteration.
    reduce_sum: [8, 6, 7].reduce((acc, x) => acc + x), //= 21 :: the sum of the array

    reduce_flatten: [[8, 6, 7], [5, 3], [0, 9]]
        .reduce((a, b) => a.concat(b), []), //= [8, 6, 7, 5, 3, 0, 9] :: flattened array

    reduce_toMap: [8, 6, 7].reduce((acc, x) => {
      acc[x] = String.fromCodePoint(5309 * x);
      return acc;
    }, {}), //= { 6: "籮", 7: "鄫", 8: "ꗨ" } :: a map with array elements as keys

    slice: [8, 6, 7, 5].slice(1, 3), //= [6, 7] :: subarray indexed in interval [1, 3)

    slice_toCopy: [8, 6, 7].slice(0), //= [8, 6, 7] :: a shallow copy


    /*
     * :: MUTATING operations ::
     * This array will be mutated.
     */

    set: [8, 6, 7][2] = 5, //= 5 :: sets the element
    //                         array is now [8, 6, 5]

    sort: [8, 6, 7].sort(), //= [6, 7, 8] :: itself
    sort_descending: [8, 6, 7].sort((a, b) => b-a), //= [8, 7, 6] :: itself

    reverse: [8, 6, 7].reverse(), //= [7, 6, 8] :: itself

    push: [8, 6, 7].push(5), //= 4 :: the new length
    //                                array is now [8, 6, 7, 5]
    push_many: [8, 6, 7].push(5, 3), //= 5 :: the new length
    //                                        array is now [8, 6, 7, 5, 3]

    pop: [8, 6, 7].pop(), //= 7 :: the old tail value
    //                             array is now [8, 6]
    pop_empty: [].pop(), //= undefined :: no error
    //                                    array is still []

    shift: [8, 6, 7].shift(), //= 8 :: the old head value
    //                                 array is now [6, 7]
    shift_empty: [].shift(), //= undefined :: no error
    //                                        array is still []

    unshift: [8, 6, 7].unshift(1) //= 4 :: the new length
    //                                     array is now [1, 8, 6, 7]
  },

  func: {
    arguments: (function () { return arguments; })(8, 6, 7), //= [8, 6, 7]
    // Returns its own arguments as an array

    call: ((x, y, z) => x + y + z).call(null, 8, 6, 7), //= 21
    // Calls the function with this=null, followed by x=8, y=6, z=7

    bind: ((x, y, z) => x + y + z).bind(null, 8)(6, 7), //= 21
    // Binds arguments to the function (this=null, x=8), then calls it with y=6, z=7.

    apply: ((x, y, z) => x + y + z).apply(null, [8, 6, 7]) //= 21
    // Calls the function with this=null, followed by argsArray.
  },

  object: { // used as a map or dictionary
    literal: {a: 3, '.b.': 4}, // {a: 3, ".b.": 4}

    // typeTest: none. Everything is an Object. There is no Object test.

    getByNiceKey: ({a: 3, '.b.': 4}).a, //= 3

    getByMessyKey: ({a: 3, '.b.': 4})[".b."], //= 4

    keys: Object.keys({a: 3, '.b.': 4}) //= ["a", "b"] :: order not guaranteed
  },

  string: {
    literal: '555.867.5309', //= "555.867.5309"

    indexOf: '555.867.5309'.indexOf('.'), //= 3

    lastIndexOf: '555.867.5309'.lastIndexOf('.'), //= 7

    split: '555.867.5309'.split('.') //= ["555", "867", "5309"]
  },

  misc: {
    log: console.log('hello'), //= undefined
    // Also use console.warn and console.error

    voidOperator: void true, //= undefined :: removes the result of an expression
    // Idiomatic use: `if (err) return void callback(err);`

    // Brave ones will uncomment this 👇
    debuggerStatement: (() => { /* debugger; */ })() //= undefined :: declares a breakpoint
    // Not available in all environments. Press [▶ Continue] to continue execution.
  }
})