Javascript Basic Syntax And Code Execution Complete Guide

JavaScript Basic Syntax and Code Execution: A Comprehensive Guide

Variables

Variables are used to store data in memory. JavaScript uses the let, const, and var keywords to declare variables.

• let: This keyword allows you to declare block-scoped variables—variables that exist only within the block they are defined. This helps prevent errors and potential bugs by limiting variable scope.

  let x = 10;
  if (true) {
      let x = 20; // different variable
      console.log(x); // 20
  }
  console.log(x); // 10
  

• const: Similar to let, but const is used for declaring constants, which means the value of the variable cannot be reassigned after being initially set. This ensures the integrity of values you intend to keep unchanged throughout your application.

  const pi = 3.14;
  pi = 3.15; // TypeError: Assignment to constant variable.
  

• var: Unlike let and const, var is function-scoped. Variables declared using var can be accessed throughout the function they are declared in, ignoring block scopes.

  var y = 5;
  if (true) {
      var y = 25; // same variable
      console.log(y); // 25
  }
  console.log(y); // 25
  

  Note: It's generally recommended to avoid using var due to its function-scoping characteristic, especially in modern JavaScript environments.

Data Types

JavaScript supports various data types including primitive types and objects.

• Primitive Types: These include:

  • Number: Represents both integer and floating-point values (e.g., 5, 3.14).
  • String: Represents textual data (e.g., "Hello, World!", 'JavaScript').
  • Boolean: Represents logical entity and can have only two values: true or false.
  • Null: Represents the intentional absence of any object or value (e.g., null).
  • Undefined: Represents a variable that has not been assigned a value or not declared at all (e.g., undefined).
  • Symbol: Introduced in ES6, represents a unique and immutable value (e.g., Symbol('description')).
  • BigInt: Allows representing very large whole numbers that are outside the safe integer range (e.g., 1234567890123456789012345678901234567890n).

• Objects: JavaScript objects are key-value pairs where keys are strings and values can be any data type.

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

Operators

JavaScript includes a variety of operators to perform operations on data.

• Arithmetic Operators: +, -, *, /, %, **, ++, --.

  let a = 10;
  let b = 5;
  console.log(a + b); // 15
  console.log(a / b); // 2
  console.log(a % b); // 0
  

• Assignment Operators: =, +=, -=, *=, /=, %=, **=.

  let c = 10;
  c += 5; // equivalent to c = c + 5
  console.log(c); // 15
  

• Comparison Operators: ==, !=, ===, !==, >, <, >=, <=.

  let d = 5;
  let e = '5';
  console.log(d == e);  // true (equality operator checks only value)
  console.log(d === e); // false (strict equality operator checks value and type)
  

• Logical Operators: &&, ||, !.

  let f = true;
  let g = false;
  console.log(f && g); // false (AND)
  console.log(f || g); // true (OR)
  console.log(!f);     // false (NOT)
  

Control Structures

Control structures determine the flow of your program based on conditions or loops.

• Conditional Statements: if, else if, else.

  let h = 20;
  if (h > 30) {
      console.log("Greater than 30");
  } else if (h === 20) {
      console.log("Equal to 20"); // This gets executed
  } else {
      console.log("Less than 20");
  }
  

• Switch Statements: A better alternative to multiple if-else statements.

  let day = "Monday";
  switch (day) {
      case "Monday":
          console.log("Start of the work week!");
          break;
      case "Tuesday":
          console.log("Second day.");
          break;
      default:
          console.log("Another day...");
  }
  

• Loops: Used to execute a block of statements repeatedly.

  • For Loop:

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

  • While Loop:

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

  • Do-While Loop: Ensures the loop body is executed at least once before checking the condition.

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

• For-In Loop: Iterates over the properties of an object.

  const obj = {a: 1, b: 2, c: 3};
  for (let prop in obj) {
      console.log(prop + ": " + obj[prop]);
      // a: 1
      // b: 2
      // c: 3
  }
  

• For-Of Loop: Iterates over iterable objects such as arrays.

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

Functions

Functions are blocks of code designed to perform a particular task and can be reused. JavaScript function definitions start with the function keyword followed by the function name and parentheses.

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Hello, Alice!

Arrow Functions: Introduced in ES6, provide a more concise syntax for writing functions (especially for short functions).

const add = (a, b) => a + b;
console.log(add(5, 6)); // 11

Function Expressions: A function that is assigned to a variable.

const sayHello = function(name) {
    return "Hi, " + name + "!";
};

console.log(sayHello("Bob")); // Hi, Bob!

Immediately Invoked Function Expressions (IIFE): Functions that run right after being defined.

(function() {
    console.log("This will run immediately!");
})();

Code Execution

Understanding how JavaScript executes code is crucial for efficient development. JavaScript is a single-threaded language but can handle asynchronous operations using mechanisms like the event loop.

• Single-threading: JavaScript code runs in a single thread, meaning only one script can run at a time. However, the event loop allows asynchronous operations to be managed effectively.

• Asynchronous Execution: Operations that take time (like HTTP requests or timers) do not block subsequent code execution. Instead, they use callbacks, promises, or async/await to manage asynchronous operations.

  // Using setTimeout to introduce asynchronous behavior
  console.log("Before setTimeout");
  
  setTimeout(() => {
      console.log("This runs after 2 seconds");
  }, 2000);
  
  console.log("After setTimeout");
  
  // Output:
  // Before setTimeout
  // After setTimeout
  // This runs after 2 seconds
  

• Event Loop: The event loop is a system by which JavaScript handles asynchronous operations. It continuously checks if there's code in the call stack (the stack of functions currently being executed) and the task queue (tasks awaiting execution) to run.