Javascript basics in 20 min

 

1. Variables

• var, let, and const are used to declare variables.

  var x = 5;  // Function-scoped (old way, use with caution)
  let y = 10; // Block-scoped (preferable)
  const z = 15; // Block-scoped, cannot be reassigned
  

• const is used when you know the value won’t change.

2. Data Types

• Primitive Types: string, number, boolean, null, undefined, symbol, bigint

  
  let name = "John"; // String
  let age = 25; // Number
  let isActive = true; // Boolean
  let data = null; // Null
  let notAssigned; // Undefined
  

• Reference Types: Objects, Arrays, Functions.

  
  let person = { name: "John", age: 25 }; // Object
  let numbers = [1, 2, 3]; // Array
  

3. Functions

• Functions can be declared and invoked:

  
  function greet(name) {
      return "Hello, " + name;
  }
  console.log(greet("Alice"));
  

• Arrow Functions (ES6):

  
  const greet = (name) => "Hello, " + name;
  console.log(greet("Bob"));
  

4. Control Flow (if-else, switch)

• If-else:

  
  let age = 18;
  if (age >= 18) {
      console.log("Adult");
  } else {
      console.log("Minor");
  }
  

• Switch:

  
  let day = 3;
  switch (day) {
      case 1: console.log("Monday"); break;
      case 2: console.log("Tuesday"); break;
      case 3: console.log("Wednesday"); break;
      default: console.log("Invalid day");
  }
  

5. Loops

• For loop:

  
  for (let i = 0; i < 5; i++) {
      console.log(i);
  }
  

• While loop:

  
  let i = 0;
  while (i < 5) {
      console.log(i);
      i++;
  }
  

• For...of loop (for iterating arrays):

  
  let arr = [10, 20, 30];
  for (let num of arr) {
      console.log(num);
  }
  

6. Arrays and Objects

• Arrays are ordered collections:

  
  let fruits = ["apple", "banana", "cherry"];
  console.log(fruits[0]); // "apple"
  

• Objects are key-value pairs:

  let person = { name: "John", age: 30 };
  console.log(person.name); // "John"
  

7. Events (Browser-Specific)

• JavaScript can interact with the DOM (Document Object Model) to handle events:

  
  document.getElementById("myButton").onclick = function() {
      alert("Button clicked!");
  };
  

8. Array Methods

• map (creates a new array by applying a function):

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

• filter (creates a new array with values passing the test):

  
  let numbers = [1, 2, 3, 4];
  let even = numbers.filter(num => num % 2 === 0);
  console.log(even); // [2, 4]
  

9. Error Handling (Try-Catch)

• Try-Catch blocks are used for error handling:

  
  try {
      let result = riskyFunction();
  } catch (error) {
      console.log("Error: " + error.message);
  }
  

10. ES6 Features

• Template Literals (for string interpolation):

  
  let name = "John";
  console.log(`Hello, ${name}!`);
  

• Destructuring:

  
  let person = { name: "John", age: 30 };
  let { name, age } = person;
  console.log(name, age); // John 30
  

11. Promises and Async-Await (for Asynchronous Code)

• Promise:

  
  let promise = new Promise((resolve, reject) => {
      let success = true;
      if (success) {
          resolve("Success!");
      } else {
          reject("Error!");
      }
  });
  promise.then(result => console.log(result)).catch(error => console.log(error));
  

• Async-Await (modern approach to handling promises):

  
  async function fetchData() {
      let response = await fetch('https://api.example.com');
      let data = await response.json();
      console.log(data);
  }
  fetchData();
  

12. Object-Oriented Programming (OOP)

• Classes:

  
  class Car {
      constructor(make, model) {
          this.make = make;
          this.model = model;
      }
      drive() {
          console.log(`${this.make} ${this.model} is driving`);
      }
  }
  const car = new Car("Toyota", "Corolla");
  car.drive();
  

---