Mastering JavaScript: Best Practices for Clean, Efficient, and Maintainable Code in 2023

function example() {
  // Block 1
  let x = 10
  const y = 20

  if (x === 10) {
    // Block 2
    let x = 30 // Different variable x, only accessible within this block
    const y = 40 // Different constant y, only accessible within this block

    console.log("Block 2 - x:", x) // Output: Block 2 - x: 30
    console.log("Block 2 - y:", y) // Output: Block 2 - y: 40
  }

  console.log("Block 1 - x:", x) // Output: Block 1 - x: 10
  console.log("Block 1 - y:", y) // Output: Block 1 - y: 20
}

example()

// Variables
let itemCount = 5 // Number of items in a list
let totalPrice = 100.5 // Total price of the items
let shippingAddress = "123 Main St" // Shipping address for the order

// Functions
function calculateTotalPrice(itemCount, pricePerItem) {
  return itemCount * pricePerItem
}

function formatAddress(address) {
  return address.toUpperCase()
}

// Constants
const TAX_RATE = 0.08 // Tax rate applied to the total price
const MAX_ITEMS = 10 // Maximum number of items allowed in the list

// Usage
const finalPrice = calculateTotalPrice(itemCount, totalPrice)
console.log("Final Price:", finalPrice)

const formattedAddress = formatAddress(shippingAddress)
console.log("Formatted Address:", formattedAddress)

if (itemCount > MAX_ITEMS) {
  console.log("Warning: Exceeded maximum item count!")
}

// Demonstrating the benefits of well-formatted code

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    // Base case: factorial of 0 or 1 is 1
    return 1
  } else {
    // Recursive case: multiply the number by the factorial of (n-1)
    return n * factorial(n - 1)
  }
}

// Variable declaration and assignment
const number = 5

// Call the factorial function with the number
const result = factorial(number)

// Output the result
console.log(`The factorial of ${number} is: ${result}`)

// Caching frequently accessed elements
const myElement = document.getElementById("myElement")

// Changing the text content of an element using textContent
myElement.textContent = "Hello, world!"

try {
  // Code that may throw an exception
  const result = someFunction() // Assuming someFunction is undefined

  // Code that depends on the result
  console.log("Result:", result)
} catch (error) {
  // Handling exceptions
  console.error("An error occurred:", error)
}

// Debugging using console.log
console.log("Debugging information")

// More code...

// Debugging using debugging tools
debugger

// Example function that performs a division operation
function divideNumbers(a, b) {
  try {
    // Attempt to divide two numbers
    var result = a / b

    // Output the result for debugging
    console.log("Result:", result)

    // Return the result
    return result
  } catch (error) {
    // Catch any errors that occur during the division operation

    // Output the error message for debugging
    console.log("Error:", error.message)

    // Handle the error gracefully by providing a fallback option
    return "Error: Division operation failed"
  }
}

// Call the divideNumbers function with different arguments

// Division operation succeeds
console.log(divideNumbers(10, 2))

// Division operation fails due to dividing by zero
console.log(divideNumbers(8, 0))

// Enabling strict mode in JavaScript helps catch common coding mistakes and enhances code quality.
'use strict';

// Enables stricter syntax rules:
// In strict mode, assigning values to undeclared variables or using variables without declaring them is not allowed.
// It helps prevent accidental global variable creation and promotes cleaner code.
let myVariable = 10;  // No error, 'myVariable' is properly declared.

// Throws errors for potentially dangerous actions:
// In strict mode, certain actions that could be potentially dangerous or have unexpected behavior are not allowed.
// For example, deleting variables, functions, or function parameters is not allowed.
delete myVariable;  // Throws an error in strict mode, preventing accidental deletion of variables.

// Strict mode also prevents the use of reserved keywords as variable names.
let let = 'Hello';  // Throws an error in strict mode, as 'let' is a reserved keyword.

// Additionally, strict mode prohibits the use of duplicate parameter names in function declarations.
function myFunction(param1, param1) {  // Throws an error in strict mode, as parameter names must be unique.
  // Function body
}

// It's recommended to place the "use strict" directive at the beginning of the JavaScript file or function scope.

// Rest of the code...

// Encapsulating related functionality within a module
const CalculatorModule = (() => {
  // Private variables and functions
  let result = 0

  const add = (num) => {
    result += num
  }

  const subtract = (num) => {
    result -= num
  }

  const multiply = (num) => {
    result *= num
  }

  const divide = (num) => {
    if (num !== 0) {
      result /= num
    }
  }

  const getResult = () => {
    return result
  }

  // Publicly accessible methods
  return {
    add,
    subtract,
    multiply,
    divide,
    getResult,
  }
})()

// Using the CalculatorModule to perform calculations
CalculatorModule.add(5)
CalculatorModule.subtract(2)
CalculatorModule.multiply(3)
CalculatorModule.divide(4)

const finalResult = CalculatorModule.getResult()
console.log(finalResult) // Output: 5.25

// Example 1: Strict Equality (===)
let num1 = 5
let num2 = "5"

console.log(num1 === num2) // Output: false (type mismatch)

// Example 2: Strict Equality (===)
let bool1 = true
let bool2 = 1

console.log(bool1 === bool2) // Output: false (type mismatch)

// Example 3: Strict Equality (===)
let str1 = "Hello"
let str2 = "hello"

console.log(str1 === str2) // Output: false (case-sensitive comparison)

// Example 4: Loose Equality (==)
let x = 10
let y = "10"

console.log(x == y) // Output: true (type coercion)

// Example 5: Loose Equality (==)
let a = false
let b = 0

console.log(a == b) // Output: true (type coercion)

// Example array of numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Example function to determine if a number is even
function isEven(number) {
  console.log("Checking if number is even:", number)
  return number % 2 === 0
}

// Example function to double a number
function double(number) {
  console.log("Doubling number:", number)
  return number * 2
}

// Using a for loop with cached array length
console.log("Using for loop with cached array length:")
const length = numbers.length
for (let i = 0; i < length; i++) {
  const number = numbers[i]
  if (isEven(number)) {
    const doubled = double(number)
    console.log("Doubled even number:", doubled)
  }
}

// Using the map and filter functions
console.log("Using map and filter functions:")
const doubledEvens = numbers
  .filter(isEven) // Filter even numbers
  .map(double) // Double each even number

console.log("Doubled even numbers:", doubledEvens)

// Using the reduce function
console.log("Using reduce function:")
const sum = numbers.reduce((accumulator, number) => {
  if (isEven(number)) {
    return accumulator + double(number)
  }
  return accumulator
}, 0)

console.log("Sum of doubled even numbers:", sum)

// Module: MathUtils
// Provides basic math utility functions
const MathUtils = (function () {
  function add(a, b) {
    return a + b
  }

  function multiply(a, b) {
    return a * b
  }

  // Public API
  return {
    add,
    multiply,
  }
})()

// Module: StringUtils
// Provides string manipulation functions
const StringUtils = (function () {
  function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }

  function reverse(str) {
    return str.split("").reverse().join("")
  }

  // Public API
  return {
    capitalize,
    reverse,
  }
})()

// Usage example:
console.log(MathUtils.add(5, 3))
console.log(MathUtils.multiply(4, 2))

console.log(StringUtils.capitalize("hello"))
console.log(StringUtils.reverse("world"))

// Simulating an asynchronous operation
function simulateAsyncOperation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data received from async operation")
    }, 2000) // Simulating a delay of 2 seconds
  })
}

// Using async/await to handle the asynchronous operation
async function handleAsyncOperation() {
  console.log("Before async operation")
  try {
    const data = await simulateAsyncOperation()
    console.log("Data received:", data)
  } catch (error) {
    console.error("Error:", error)
  }
  console.log("After async operation")
}

// Invoking the async function
handleAsyncOperation()

// Arrow function: multiply two numbers
const multiply = (a, b) => a * b

// Template literals: greet a person
const name = "Alice"
console.log(`Hello, ${name}!`)

// Destructuring assignment: extract values from an object
const person = { name: "Bob", age: 30 }
const { name, age } = person
console.log(`${name} is ${age} years old.`)

// This variable stores the user's name.
const userName = "John"

// This function greets the user with their name.
function greetUser(name) {
  // Concatenate the name with the greeting message.
  const greeting = "Hello, " + name + "!"

  // Print the greeting to the console.
  console.log(greeting)
}

// Call the greetUser function and pass the userName variable as an argument.
greetUser(userName)