Notes

JavaScript Speed Course - Learn JavaScript in ~75 Minutes

Play

Questions in the video

1. Running Js
   1. In Browser
      1. How to run js from browser using html script tag?
      2. How to reference .js file in script tag?
   2. Using Node.js
2. string interpolation in js | template literals or template strings
3. npm package prompt-sync -> for collecting user input in console i.e. without browser
4. Import file in js in node env is const prompt = require(prompt-sync)
5. Data Types
   1. string
   2. boolean
   3. number
   4. undefined -> it is a type as well as only value allowed in that type
   5. null -> it is a type as well as only value allowed in that type
6. Variable Type
   1. var -> Function scoped, Hoisted
   2. let -> Block scoped
   3. const -> Block Scoped
7. Arithmetic operations on different types
   1. Type cohesion -> When different types are used in arthimetic operations, js tries to convert the types to do the operations
   2. adding number + string = String concatenation e.g. 1 + "1" = "11"
   3. number + boolean = number e.g. 1 + true = 2
   4. number + boolean = number e.g. 1 + false = 1
   5. string + boolean = string concatenation e.g. "hello" + true = "hellotrue"
   6. string(number) * number = number e.g. "123"*2=246
   7. number / string(number) = number e.g. 123/"3"=41
   8. string * number = NaN e.g. "hello"*2=NaN | Nan -> not a number
8. Type conversion
   1. String to number. Number("123") = 123 or parseInt("123") = 123
   2. Number to string. String(123) = "123" or 123.toString() = "123"
   3. Boolean to number. Number(true) = 1 or Number(false) = 0
   4. Number to boolean. Boolean(0) = false or Boolean(1) = true
   5. String to boolean. Boolean("hello") = true or Boolean("") = false
   6. Boolean to string. String(true) = "true" or String(false) = "false"
   7. string to float parseFloat("12.2")=12.2
9. Logical operators
   1. == -> equal value | loose equality operator
      1. Performs type cohesion
      2. console.log(null==undefined) -> true
      3. console.log("1"==1) -> true
      4. console.log(1=="1") -> true
      5. console.log(1=="true") -> false
      6. console.log(NaN==NaN) -> false
      7. console.log(undefined == null) -> true
      8. console.log(0 == false) -> true
      9. console.log(1 == true) -> true
      10. console.log(null == false) -> false
      11. console.log(""==[]) -> true
      12. console.log(0 == []) -> true
      13. console.log("1,2"==[1,2] -> true
   2. === -> equal value and equal type | strict equality operator
   3. != -> not equal value
   4. !== -> not equal value and not equal type
   5. && -> and
   6. || -> or
      1. Exceptions
         1. console.log("hello" || true) -> hello
         2. console.log("" || true) -> true
         3. console.log("" || false) -> false
   7. ! -> not
10. Switch statement
    1. Switch automatic fallthrough -> need to use break; otherwise it runs next case available
11. Arrays
    1. cosnt arr = []
    2. arr.length to get length of array
    3. const arr = [1,2,4, true] -> Type of array can be different
    4. const arr2 = new Array(5)
    5. const arr = Array.from("hello") -> ['h','e','l','l','o']
    6. Access element that is not existing it give undefined. e.g. let a =arr[arr.length]
    7. Assigning value to index that doesn’t exist -> works just fine e.g. arr[10] = 5 and arr.length becomes 11, the values become [ <1 empty item>, 2, 4, true, <6 empty items>, 5 ]
    8. arr2.push(12) -> appends at end
    9. arr2.pop() -> last element get popped
    10. arr2.shift() -> Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified
    11. arr2.unshift(5) -> Inserts new elements at the start of an array, and returns the new length of the array
    12. arr2.indexOf('t'); Returns the index of the first occurrence of a value in an array, or -1 if it is not present.
    13. arr2.lastIndexOf('t');
    14. arr2.includes('t'); -> returning true or false
    15. cosnt arr3 = arr2.concat(arr) -> Concatenate both the arrays
    16. cosnt str = arr2.join(",") -> returns string after joining the elements by ,
    17. arr2.slice(starIndex, endIndex); -> return sliced array
    18. arr2.splice(starIndex, deleteCount); - Removes elements from an array from start
    19. De-structuring
        1. const [x,y] = [1,2] -> console.log(x,y)
        2. const [x,...y] = [1,2,3,4] -> console.log(x,y) | Spread operator is used for y and now y will have [2,3,4]
    20. Copy of array
        1. const x = [1,2] const y= [...x] -> both x and y will have different reference
    21. Map | Filter | Reduce

// Mapping numbers
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

// Mapping user names
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob"]

// Reducing array to sum
const numbers2 = [1, 2, 3, 4];
const sum = numbers2.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

// Filtering even numbers
const numbers3 = [1, 2, 3, 4, 5];
const evenNumbers = numbers3.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

13. For loop
    1. for(let i=0; i<arr.length;i++){}
    2. for (const element of arr) {}
    3. for (const [index,value] of arr.entries()) {}
14. Objects
    1. JSON -> Javascript Object Notation
    2. const obj = {}
    3. const obj = {key:"value", key2: "value2"}
    4. const obj = {key: "value", method: function(){}}
    5. Accessing value -> obj.key or obj["key"]
    6. Delete value -> delete obj.key | delete obj["key"]
    7. Object.keys(obj) -> return all keys in array
    8. for (let key in Obj) {} -> Notice for objects we use in for iterables we use for in for loop
    9. Object.values(obj) -> return all values in array
    10. Object.entries(obj) -> returns array of array with key and value. e.g. [[key,value],[key2,value2]]
    11. Object.assign(obj, {key3:"value3"}) -> adds key and value to obj
    12. De-structuring
        1. const {key,key2} = obj
        2. const {key, ...rest} = obj | rest contains rest of key-value pair of obj
    13. Copy of object
        1. const x = {a:1, b:2} const y = {...x}
    14. JSON.stringify(obj) -> Convert object to string
    15. JSON.parse(obj) -> Convert string to object
15. Sets
    1. const set = new Set()
    2. const set = new Set([1,2,3])
    3. set.add(4) | set.delete(12) | set.has(3) | set.size | set.clear() | for (const item of set) {}
    4. Get array from set. e.g. const arr = [...set]
16. Map
    1. const map = new Map();
    2. map.set("key", "value"); | map.get("key"); | map.delete("key"); | map.has("key"); | map.size | map.clear(); | for (const [key,value] of map) {}
    3. convert map to array const arr = Array.from(map) -> [[key,val],key,val]
17. Error Handling
    1. try{} catch(err){ } finally{}
    2. throw new Error("error message") -> throw custom error
18. Functions
    1. function functionName (param1, param2){ }
    2. const functionName = function(param1, param2){}
    3. const functionName = (param1, param2) => { } | Arrow function
    4. const geet = (name) => { return ()=> name } -> call it like geet("hello")()
    5. Rest Parameters -> accept any number of parameters
       1. function addNums(...number){}
19. This Keyword & Scope
    1. In object method it refers to current object, but only works in standard function but not in arrow function we get undefined in that case. -> Reason : Arrow function actually inherit this at the time of definition not when they called. so it calls from global scope and if in global scope there is no variable it spits out undefined

const person = 1
  name: "Alice"
  greet: ()=> {
    console.log(Hello, my name is ${this.name}*);
  },
person.greet();  // Hello, my name is undefined

13. Promises A promise in JavaScript represents a value that will be available either now, later, or never. It helps handle async tasks without callback hell. It has three states: pending, fulfilled, rejected.

// A function that returns a promise
function fetchNumber(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (num > 0) {
        resolve(`Success. Number is ${num}`);
      } else {
        reject("Number must be greater than zero");
      }
    }, 500);
  });
}

// Calling with then and catch
fetchNumber(5)
  .then(result => {
    console.log("Then Catch Result:", result);  // Output: Then Catch Result: Success. Number is 5
  })
  .catch(err => {
    console.error("Then Catch Error:", err);    // Will not run here
  });

// Calling with async and await
async function run() {
  try {
    const result = await fetchNumber(10);
    console.log("Async Await Result:", result); // Output: Async Await Result: Success. Number is 10
  } catch (error) {
    console.error("Async Await Error:", error);
  }
}

run();

// Using Promise.all
const p1 = fetchNumber(3);
const p2 = fetchNumber(7);
const p3 = fetchNumber(9);

Promise.all([p1, p2, p3])
  .then(values => {
    console.log("Promise.all Results:", values);
    // Output: Promise.all Results: [
    //   "Success. Number is 3",
    //   "Success. Number is 7",
    //   "Success. Number is 9"
    // ]
  })
  .catch(error => {
    console.error("Promise.all Error:", error);
  });

14. Other available method for promise
    1. Promise.allSettled -> Waits for all promises to finish, even if some fail.
    2. Promise.race -> Returns the result of the first settled promise, success or failure.
    3. Promise.any -> Returns the first fulfilled promise. Ignores rejections. If all reject, it throws an AggregateError.
    4. Promise.resolve -> Creates an already resolved promise. const p = Promise.resolve(100);