Simplifying JavaScript

1 Signal Intention with Variable Assignment

  • Variables declared using var are lexically (function) scoped - the variable will return the last assigned value when the function is called.

    // items.length = 5;
    const items = document.querySelectorAll('li');
    for(var i = 0; i< items.length; i++) {
    items[i].addEventListener('click', () => {
    // will always return 5 because of the
    // function. use let i = 0 instead
    alert(i);
    })
    };

3 Maximize Code Clarity with Special Collections

  • Objects are great for static lookup information - data that does not change like configuration and enumeration. If what you need requires frequent change like adding or removing, use maps and sets instead.
  • If you pass an existing property name when using the Object spread operator, it will overwrite the initial value with what you set last.
  • Sorting a Map keys require converting it to an array using the spread operator
  • Use Set to weed out duplicates in an array, e.g. new Set(['a','a','b']) // = { 'a', 'b' }. Convert it back to an array using the spread operator [...instanceOfASetObject]

5 Simplify Loops

  • Use foreach when you need to execute an operation to array items outside the scope of the function argument

6 Clean Up Parameters and Return Statements

  • Use object destructuring to assign default property values to what otherwise could be undefined

    const item = { test: true, foo: 'bar' };
    let { key1 = "key 1", foo:bar, ...others } = item;
    // key1 = "key 1"
    // foo = undefined
    // bar = 'bar'
    // others = { test: true }
  • Use the rest operator to pass dynamic number of parameters. The only catch is that it has to be the last argument in the function

    function foo(param1, ...items){
    return JSON.stringify(items);
    }
    
    foo(1); //'[]'
    foo(1, 'abc'); //'["abc"]'
    foo(1, 'abc','def'); //'["abc","def"]'
    
    // take note of the ...
    // w/o it, it will be [['abc', 'def', 'g']]
    foo(1, ...['abc','def', 'gh']); //'["abc","def","gh"]'

7 Build Flexible Functions

  • An arrow function's context is the closest function scope when it is declared.

    const foobar = {
    text: 'test',
    globalScope: () => { console.log(`this.text is ${this.text}`) },
    propertyScope(){ console.log(`this.text is ${this.text}`) }
    }
    
    foobar.globalScope(); // this.text is undefined
    foobar.propertyScope(); // this.text is test

8 Keep Interfaces Clear with Classes

  • Make generator iterables from a tree object. It will allow you to use for-of and ...

10 Gather Related Files with Component Architecture

  • If you omit the {} from an import statement, you will import whatever is defined in the modules export.default statement. The name you use when importing is arbitrary.