Cheatsheets - JavaScript

Summary

• Variables and data types
• Conditional statements
• Scope and hoisting
• Functions
• Loops
• Handle strings
• Arrays and their methods
• Working with objects
• Destructuring and spread operator
• Working with the DOM

Variables and data types

• Variables declaration

  var a = "foo"; // Scope: closest function. Can be reassigned. Hoisted. Not recommended
  const b = "bar"; // Scope: current block. Cannot be reassigned. Hoisted but throws ReferenceError
  let c = "baz"; // Scope: current block. Can be reassigned. Hoisted but throws ReferenceError
  

  var a = "foo"; // Scope: closest function. Can be reassigned. Hoisted. Not recommended const b = "bar"; // Scope: current block. Cannot be reassigned. Hoisted but throws ReferenceError let c = "baz"; // Scope: current block. Can be reassigned. Hoisted but throws ReferenceError

  ‎

• Data types

  const a = "abc"; // string
  const b = 42; // number
  const c = true; // boolean
  const d; // undefined, same as const d = undefined
  const e = { age: 25, name: "Bob" } // object
  const f = null; // null, typeof => object
  const g = Symbol("unique"); // symbol
  const h = 9007199254740991n; // bigint
  const i = [1, 2, 3]; // array, typeof => object
  const j = () => {}; // function
  

  const a = "abc"; // string const b = 42; // number const c = true; // boolean const d; // undefined, same as const d = undefined const e = { age: 25, name: "Bob" } // object const f = null; // null, typeof => object const g = Symbol("unique"); // symbol const h = 9007199254740991n; // bigint const i = [1, 2, 3]; // array, typeof => object const j = () => {}; // function

  ‎

• Operations on data

  let res;
  
  
  // Basic operations and casting
  res = 2 + 3; // 5
  res = 2 + "3"; // "23"
  res = "" + 2 + 3; // "23"
  res = 2 + 3 + ""; // "5"
  res = +"4"; // 4
  
  
  // Assignment operators
  res *= 5; // 4*5 = 20
  res /= 2; // 20/2 = 10
  res += 4; // 10+4 = 14
  res -= 4; // 14-4 = 10
  
  
  // Increment and decrement
  res++; // 10+1 = 11
  res--; // 11-1 = 10
  
  
  // Maths operators: exponent and modulo
  res = 3**4; // 3*3*3*3 = 81
  res = 13 % 5; // 3
  

  let res; // Basic operations and casting res = 2 + 3; // 5 res = 2 + "3"; // "23" res = "" + 2 + 3; // "23" res = 2 + 3 + ""; // "5" res = +"4"; // 4 // Assignment operators res *= 5; // 4*5 = 20 res /= 2; // 20/2 = 10 res += 4; // 10+4 = 14 res -= 4; // 14-4 = 10 // Increment and decrement res++; // 10+1 = 11 res--; // 11-1 = 10 // Maths operators: exponent and modulo res = 3**4; // 3*3*3*3 = 81 res = 13 % 5; // 3

  ‎

Conditional statements

• Comparison operators

  1 == "1" // True: loose equality
  1 != "1" // False: loose difference
  1 === "1" // False: strict equality
  1 !== "1" // True: strict difference
  2 > 1 // True: strictly superior
  1 < 1 // False: strictly inferior
  2 >= 1 // True: superior or equal
  1 <= 1 // True: inferior or equal
  

  1 == "1" // True: loose equality 1 != "1" // False: loose difference 1 === "1" // False: strict equality 1 !== "1" // True: strict difference 2 > 1 // True: strictly superior 1 < 1 // False: strictly inferior 2 >= 1 // True: superior or equal 1 <= 1 // True: inferior or equal

  ‎

• Logical operators

  const a = true, b = false;
  if (a && b) // False: true AND false is false
  if (a || b) // True: true OR false is true
  if (!a) // False: NOT true is false
  

  const a = true, b = false; if (a && b) // False: true AND false is false if (a || b) // True: true OR false is true if (!a) // False: NOT true is false

  ‎

• If, else if, else

  if (condition1) {
    // Do something
  } else if (condition2) {
    // Do something
  } else {
    // Do something
  }
  

  if (condition1) { // Do something } else if (condition2) { // Do something } else { // Do something }

  ‎

• Switch statement

  switch (expression) {
    case value1:
      // Do something
      break;
    case value2:
      // Do something
      break;
    default:
      // Do something
      break;
  }
  

  switch (expression) { case value1: // Do something break; case value2: // Do something break; default: // Do something break; }

  ‎

• Ternary operator

  let a = 1, res;
  res = a === 2 ? 123 : 456; // a is not 2, res = 456
  res = a === 1 ? 123 : 456; // a is indeed 1, res = 123
  

  let a = 1, res; res = a === 2 ? 123 : 456; // a is not 2, res = 456 res = a === 1 ? 123 : 456; // a is indeed 1, res = 123

  ‎

Scope and hoisting

Under construction...

This section is not available yet. Come back soon to see it completed!

Functions

Under construction...

This section is not available yet. Come back soon to see it completed!

Loops

Under construction...

This section is not available yet. Come back soon to see it completed!

Handle strings

Under construction...

This section is not available yet. Come back soon to see it completed!

Arrays and their methods

Under construction...

This section is not available yet. Come back soon to see it completed!

Working with objects

Under construction...

This section is not available yet. Come back soon to see it completed!

Destructuring and spread operator

Under construction...

This section is not available yet. Come back soon to see it completed!

Working with the DOM

Under construction...

This section is not available yet. Come back soon to see it completed!