JavaScript Developer Roadmap: A Comprehensive Guide with Code Examples by DHANIAN @e_opore on X

// Example: Basic Syntax
console.log("Hello, World!"); // Output: Hello, World!

// Example: Variables and Data Types
let name = "John"; // String
const age = 25; // Number
let isStudent = true; // Boolean
let person = { name: "John", age: 25 }; // Object
let colors = ["red", "green", "blue"]; // Array
let nothing = null; // Null
let notDefined; // Undefined

// Example: Operators
let x = 10;
let y = 5;

console.log(x + y); // Addition: 15
console.log(x > y); // Comparison: true
console.log(x === 10 && y === 5); // Logical AND: true

// Example: If-Else
let temperature = 30;

if (temperature > 25) {
  console.log("It's hot outside!");
} else {
  console.log("It's cool outside.");
}

// Example: Switch
let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the week!");
    break;
  default:
    console.log("It's another day.");
}

// Example: Loops
for (let i = 0; i < 5; i++) {
  console.log(i); // Output: 0, 1, 2, 3, 4
}

let count = 0;
while (count < 3) {
  console.log(count); // Output: 0, 1, 2
  count++;
}

// Example: Function Declaration
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

// Example: Arrow Function
const greetArrow = (name) => `Hello, ${name}!`;
console.log(greetArrow("Bob")); // Output: Hello, Bob!

// Example: Arrays
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // Output: banana

fruits.push("orange"); // Add an item
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

fruits.forEach((fruit) => console.log(fruit)); // Iterate over the array

// Example: Objects
let person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

console.log(person.name); // Output: John
person.greet(); // Output: Hello, my name is John

// Example: Try-Catch
try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Division by zero!");
  }
} catch (error) {
  console.log(error.message); // Output: Division by zero!
}

// Example: Destructuring
let [a, b] = [1, 2];
console.log(a); // Output: 1

// Example: Spread Operator
let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5]

// Example: Promises
let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});

promise.then((result) => console.log(result)); // Output: Done!

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

// Example: DOM Manipulation
document.getElementById("myButton").addEventListener("click", () => {
  document.getElementById("myText").innerText = "Button Clicked!";
});

// Example: Fetch API
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

// Example: JSON
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: John

let newJsonString = JSON.stringify(obj);
console.log(newJsonString); // Output: {"name":"John","age":30}

// Example: Local Storage
localStorage.setItem("name", "John");
console.log(localStorage.getItem("name")); // Output: John

// Example: Regular Expressions
let text = "Hello, world!";
let pattern = /world/;
console.log(pattern.test(text)); // Output: true

// Example: Singleton Pattern
let Singleton = (function () {
  let instance;

  function createInstance() {
    return { message: "I am the instance" };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

let instance1 = Singleton.getInstance();
let instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // Output: true

// Example: Debouncing
function debounce(func, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), delay);
  };
}

window.addEventListener("resize", debounce(() => console.log("Resized!"), 300));

// Example: Unit Testing with Jest
function sum(a, b) {
  return a + b;
}

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

// Example: React Component
function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById("root"));

// Example: Node.js Server
const http = require("http");

const server = http.createServer((req, res) => {
  res.end("Hello, Node.js!");
});

server.listen(3000, () => console.log("Server running on port 3000"));

// Example: Webpack Configuration
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
};