A typical thing you do when starting out with a new language is that you go and learn from tutorials, grab a book or watch some videos.

They often focus on many details of every type found in a language and cover most of the functions that operate on them. Too many details often mean too big cognitive load. We struggle to get small things done, often procrastinate. We read more than we practice. Even today I find myself often reading more than practicing when things seem to be too difficult. And I try to change this behavior and challenge myself to write more code. So if I could give you an advice it would be to get your hands dirty coding!

A thing I personally found useful when learning programming languages was a language reference. A simple one-page summary of the most common patterns found in a language with short explanations. Not too many details, just the code, good and bad parts.

I tried to wrap most common constructs below:

 // 1. Numbers

  1
  -1
  1.15
  -1.15
  Infinity

  // Not A Number - often occurs
  // when trying to parse something
  // that does not really look like a number, e.g. parseInt(null)
  NaN


  /*** Simple operations ***/
  (1 * 2) + (1 / 2) - 1


  /*** Detecting if of a number **/

  // NaN and Infinity included
  typeof myNumber === 'number'

  // NaN and Infinity not included
  Number.isFinite(myNumber)


  /*** Trying to cast to a number ***/
  parseInt('1')    // 1
  parseInt('1.12') // 1

  parseFloat('1')    // 1
  parseFloat('1.12') // 1.12

  parseInt('word');   // NaN
  parseFloat('word'); // NaN

  parseInt('Infinity')   // Infinity
  parseFloat('Infinity') // Infinity

  +'1.12'     // 1.12
  +'Infinity' // Infinity

  
  // 2. Strings

  "A String"
  'A String'

  // ES6 Syntax, can be multiline,
  // not supported widely across browsers
  `A String`
             

  /*** Detecting if a string ***/
  typeof myString === 'string'

  
  /*** Simple operations ***/
  'John' + ' ' + 'Smith'
  `${name} ${surname}` // Given variables name=John and surname=Smith
                       // will output 'John Smith'

  
  /*** Trying to cast to a string ***/
  String(null)      // 'null'
  String(undefined) // 'undefined'
  String(true)      // 'true'
  String(1)         // '1'
  String(1.12)      // '1.12'

  '' + 1.12         // '1.12'
  '' + true         // 'true'

  
  // 3. Booleans

  true
  false

  
  /*** Detecting if a boolean ***/
  typeof myBoolean === 'boolean'


  /*** Simple operations ***/
  false && true  // AND: false
  false || true  // OR: true
  !true          // NOT: false
  !false         // NOT: true
  !!true         // NOT(NOT): true

  
  /*** Trying to cast to a boolean ***/
  Boolean(1);        // true
  Boolean(0);        // false
  Boolean('word');   // true
  Boolean('');       // false
  Boolean(null)      // false
  Boolean(undefined) // false
  !!'word'           // true

  
  // 4. Arrays

  []
  [1,2,3]
  ['an', 'array', 'of', 'strings']
  ['an', 'array', 'of', 6, 'mixed', 'values']
  new Array(1,2,3) // [1,2,3]
  Array(3);        // [undefined,undefined,undefined]


  /*** Detecting if an array ***/
  Array.isArray(myArray)
  // For older browsers try
  Object.prototype.toString.call(myArray) === '[object Array]'


  /*** Simple operations ***/
  [6,5,4][0] // take first element:  6
  [6,5,4][1] // take second element: 5
  [3,2].length // 2
  [6,5,4].indexof(6); // 0
  [6,5,4].indexof(7); // -1
  [6,5,4].includes(4); // true
  [3,2,1].sort() // [1,2,3]
  [1,2].concat([3,4], [5,6], 7) // [1,2,3,4,5,6,7]


  /*** Trying to cast to an array ***/
  [].concat(1);        // [1]
  [].concat('word')    // ['word']
  [].concat(true)      // [true]
  [].concat([1])       // [1]
  [].concat(undefined) // [undefined]
  [].concat(null)      // [null]

 
  // 5. Objects

  {}
  { name: 'John', surname: 'Smith', age: 30 }
  {
    username: 'johnny',
    details: {
      age: 30,
      interests: ['music', 'yoga']
    }
  }
  new Object({ username: 'johnny' })
  Object.create(Object.prototype, { username: { value: 'johnny' } })

  // Important: To evaluate object literals in console
  // you often need to wrap them with parantheses, e.g.:
  ({})
  ({ username: 'johny' })


  /*** Detecting if an object ***/
  typeof myObject === 'object' && !('length' in myObject)


  /*** Simple operations ***/

  // Extends an EXISTING object with a new property
  Object.assign(myObject, { city: 'NY' })

  // Copies an object and extends a COPY rather than original value
  Object.assign({}, myObject, { city: 'NY' })

  // Removes a property from the existing object
  delete myObject.city


  // Trying to cast to an object
  // Not really available, use Object.assign
  // to extend existing objects if needed

  // 6. Functions

  // Function Declaration
  function add(x, y) {
    return x + y;
  }

  // Function Expression - Anonymous (nameless) function gets assigned to a variable
  var add = function (x, y) {
    return x + y;
  }

  // Functions don't need to take parameters
  function () {
    return 1;   // returns a value
  }

  // Functions don't need to return
  function () {
    doSomething(); // does something but does not return
                   // returning value is `undefined`
  }

  // ES6 Arrow functions
  var add = (x, y) => {
    return x + y;
  }

  // ES6 Short Arrow functions
  // Use when you want to only return in the function
  var add = (x, y) => x + y;

  // IIFE (Immediately Invoked Function Expression)
  var result = (function () {
    return 1 + 2
  }()) // 3


  /*** Binding context - `this` ***/
  function age() {
    return this.age;
  }

  // Returns a FUNCTION that can be then called
  age.bind({ age: 30 })
  // Calls the function, returns 30
  age.call({ age: 30 })
  // Calls the function, returns 30
  age.apply({ age: 30 })

  // Important: You CANNOT bind `this` context to an arrow function.
  // Returning value will be `undefined`
  (() => { return this.age }).call({ age: 30 });

  // 7. Other (undefined, null)

  undefined
  null

  // Simple operations
  undefined == null  // true
  undefined === null // false

Just to make it clear - most of the sophisticated operations with these types are not covered in this cheatsheet on purpose. Learn simple things first, then broaden your knowledge. Once you get the basics, we can move on to more advanced language constructs.