Variables and Data Types

• Variables: In JavaScript, variables are declared using the let, const, or var keyword. let and const are block-scoped, while var is function-scoped. Code example of Declairing Variables:
  

  let Lecturely;
  const url = 'www.lecturely.com';

• Data Types: JavaScript has several primitive data types, including number for numeric values, string for text, boolean for true/false values, null for intentional absence of any object value, and undefined for uninitialized variables. It also has complex data types like object for storing collections of key-value pairs and array for storing multiple values in a single variable. Additionally, functions are a special type of object in JavaScript.

Operators

• Arithmetic Operators: These operators perform mathematical calculations, such as addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).
• Assignment Operators: These operators assign values to variables. For example, = assigns a value, while +=, -=, *=, /=, and %= perform a calculation and assign the result to the variable.
• Comparison Operators: These operators compare two values and return a boolean result. They include strict equality (===), strict inequality (!==), greater than (>), less than (<), greater than or equal to (>=), and less than or equal to (<=).
• Logical Operators: These operators are used to combine or negate boolean values. The logical AND (&&), logical OR (||), and logical NOT (!) operators are commonly used.
  

  Code example:

  let x = 10;
  let y = 5;
  let sum = x + y; // Addition
  let isGreater = x > y; // Comparison
  let result = (x === 10) ? 'x is 10' : 'x is not 10'; // Ternary operator

Control Flow

• Conditional Statements: if, else if, and else statements are used to execute different blocks of code based on specified conditions.
• Ternary Operator: It provides a concise way to write conditional statements in a single line. The syntax is:
  

  condition ? expression1 : expression2

  
  If the condition is true, expression1 is executed; otherwise, expression2 is executed.
• Switch Statement: It evaluates an expression and executes code blocks based on different cases. Each case is defined using the case keyword, and the code block for a matching case is executed.
• Looping Statements: for, while, do...while, for...in, and for...of loops are used to repeat blocks of code based on different conditions.
• Loop Control Statements: break is used to exit a loop, while continue skips the current iteration and proceeds to the next iteration.
  

  Code example:

  let age = 18;
  
  if (age >= 18) {
    console.log('You are an adult.'); // Condition is true
  } else if (age >= 13) {
    console.log('You are a teenager.');
  } else {
    console.log('You are a child.');
  }
  
  let i = 0;
  while (i < 5) {
    console.log('Iteration:', i);
    i++;
  }
  
  for (let j = 0; j < 5; j++) {
    console.log('Iteration:', j);
  }
  

Functions

• Function Declaration: Functions are declared using the function keyword followed by the function name, optional parameters enclosed in parentheses, and the code block to be executed.
• Function Expression: Functions can also be assigned to variables using function expressions. They don't require a function name and are useful for anonymous or callback functions.
• Arrow Functions: Arrow functions provide a concise syntax for writing functions. They use the => arrow notation and are particularly useful for shorter functions.
  

  Code example:

  function greet(name) {
    console.log('Hello, ' + name + '!');
  }
  
  greet('Lecturely'); // Function call with argument
  
  const multiply = (a, b) => a * b; // Arrow function
  console.log(multiply(5, 3));

Arrays

• Creating Arrays: Arrays are created using square brackets [] and can store multiple values of any type. Arrays can be assigned to variables using the const keyword.
• Accessing Elements: Array elements are accessed using their index within square brackets. The index starts from 0 for the first element.
• Array Methods: Arrays have built-in methods like push(), pop(), shift(), unshift(), slice(), splice(), forEach(), map(), filter(), and reduce() for manipulating and iterating over array elements.
  

  Code example:

  const numbers = [1, 2, 3, 4, 5];
  console.log(numbers.length); // Length of the array
  console.log(numbers[0]); // Accessing array element
  
  numbers.push(6); // Adding an element to the end of the array
  console.log(numbers);
  
  const squaredNumbers = numbers.map(num => num ** 2); // Mapping each element to its square
  console.log(squaredNumbers);

Objects

• Creating Objects: Objects are created using curly braces {} and consist of key-value pairs. Keys are strings that act as property names, and values can be of any data type.
• Accessing Object Properties: Object properties are accessed using dot notation (object.key) or square bracket notation (object['key']).
• Object Methods: JavaScript provides built-in methods like Object.keys(), Object.values(), and Object.entries() to work with objects.

  Code example

  const person = {
    name: 'John',
    age: 30,
    profession: 'Developer'
  };
  
  console.log(person.name); // Accessing object property
  console.log(Object.keys(person)); // Getting object keys as an array
  
  const keys = Object.keys(person);
  for (let key of keys) {
    console.log(key + ':', person[key]); // Accessing object properties dynamically
  }

DOM Manipulation

• Selecting Elements: The document.querySelector() method selects the first element that matches a specified CSS selector, while document.querySelectorAll() selects all matching elements.
• Modifying Elements: DOM elements can be modified using properties like .innerHTML to set or retrieve the HTML content, .textContent to set or retrieve the text content, .setAttribute() to set attributes, and .addEventListener() to attach event listeners to elements.

  Code example:

  const element = document.querySelector('#myElement');
  element.innerHTML = 'Hello, Lecturely!'; // Modifying element content
  
  const button = document.querySelector('#myButton');
  button.addEventListener('click', () => {
    console.log('Button clicked!'); // Event listener for button click
  });

Error Handling

• Try-Catch Blocks: These blocks are used to handle potential errors. Code that might throw an error is placed in the try block, and if an error occurs, it is caught in the catch block where appropriate actions can be taken.

  Code example:

  try {
    // Code that may throw an error
    const result = x / y;
    console.log(result);
  } catch (error) {
    console.log('An error occurred:', error.message); // Handling and displaying the error message
  }