History and Significance of JavaScript

1// Welcome to the world of JavaScript!
2// Learning the history and significance of the language
3
4console.log("Welcome to the JavaScript Jurassic Park!");
5
6// 1. JavaScript through different periods - language evolution
7console.log("\n=== JavaScript Evolution ===");
8
9// ES5 (2009) - basic array methods
10const dinosaurNames = ["Tyrannosaurus", "Triceratops", "Velociraptor", "Stegosaurus"];
11
12// map method - data transformation
13const dinosaursWithTitle = dinosaurNames.map(function(name) {
14  return "Dr. " + name;
15});
16console.log("ES5 map:", dinosaursWithTitle);
17
18// filter method - data filtering
19const longNames = dinosaurNames.filter(function(name) {
20  return name.length > 10;
21});
22console.log("ES5 filter (long names):", longNames);
23
24// 2. ES6/ES2015 - modern features
25console.log("\n=== ES6+ Modern JavaScript ===");
26
27// Arrow functions
28const modernDinosaurs = dinosaurNames.map(name => `${name}`);
29console.log("ES6 arrow functions:", modernDinosaurs);
30
31// Template literals
32const favoriteDinosaur = "Tyrannosaurus Rex";
33const description = `My favorite dinosaur is ${favoriteDinosaur}.
34It is the king of all dinosaurs!`;
35console.log("Template literals:", description);
36
37// Destructuring
38const [first, second, ...rest] = dinosaurNames;
39console.log("Destructuring - first:", first);
40console.log("Destructuring - second:", second);
41console.log("Destructuring - rest:", rest);
42
43// 3. Dinosaur objects - different creation methods
44console.log("\n=== Creating objects ===");
45
46// ES5 way
47function createDinosaurES5(name, period, diet) {
48  return {
49    name: name,
50    period: period,
51    diet: diet,
52    roar: function() {
53      return this.name + " says: ROAAR!";
54    }
55  };
56}
57
58const trex = createDinosaurES5("T-Rex", "Cretaceous", "Carnivore");
59console.log("ES5 object:", trex);
60console.log("ES5 method:", trex.roar());
61
62// ES6+ way - shorthand object syntax
63function createDinosaurES6(name, period, diet) {
64  return {
65    name,
66    period,
67    diet,
68    roar() {
69      return `${this.name} says: ROAAR!`;
70    },
71    getInfo() {
72      return `${this.name} lived in the ${this.period} period and was a ${this.diet}`;
73    }
74  };
75}
76
77const velociraptor = createDinosaurES6("Velociraptor", "Cretaceous", "Carnivore");
78console.log("ES6 object:", velociraptor);
79console.log("ES6 info:", velociraptor.getInfo());
80
81// 4. ES6 Classes
82console.log("\n=== ES6 Classes ===");
83
84class Dinosaur {
85  constructor(name, period, diet, weight) {
86    this.name = name;
87    this.period = period;
88    this.diet = diet;
89    this.weight = weight;
90  }
91
92  roar() {
93    return `${this.name} lets out a mighty roar!`;
94  }
95
96  getDetails() {
97    return {
98      name: this.name,
99      period: this.period,
100      diet: this.diet,
101      weight: `${this.weight} kg`,
102      sound: this.roar()
103    };
104  }
105
106  // Static method
107  static compareDinosaurs(dino1, dino2) {
108    if (dino1.weight > dino2.weight) {
109      return `${dino1.name} is heavier than ${dino2.name}`;
110    } else if (dino1.weight < dino2.weight) {
111      return `${dino2.name} is heavier than ${dino1.name}`;
112    } else {
113      return `${dino1.name} i ${dino2.name} have similar weight`;
114    }
115  }
116}
117
118const stegosaurus = new Dinosaur("Stegosaurus", "Jurassic", "Herbivore", 5000);
119const allosaurus = new Dinosaur("Allosaurus", "Jurassic", "Carnivore", 4000);
120
121console.log("Stegosaurus:", stegosaurus.getDetails());
122console.log("Comparison:", Dinosaur.compareDinosaurs(stegosaurus, allosaurus));
123
124// 5. Promises and async/await - simulating data loading
125console.log("\n=== Asynchronicity ===");
126
127// Promise
128function loadDinosaurData(name) {
129  return new Promise((resolve, reject) => {
130    setTimeout(() => {
131      const dinosaurDB = {
132        "Tyrannosaurus": { period: "Cretaceous", discovered: 1905 },
133        "Triceratops": { period: "Cretaceous", discovered: 1889 },
134        "Stegosaurus": { period: "Jurassic", discovered: 1877 }
135      };
136
137      if (dinosaurDB[name]) {
138        resolve({ name, ...dinosaurDB[name] });
139      } else {
140        reject(new Error(`Dinosaur ${name} was not found in the database!`));
141      }
142    }, 1000);
143  });
144}
145
146// Async/await
147async function getDinosaurInfo(name) {
148  try {
149    console.log(`Searching for info about ${name}...`);
150    const data = await loadDinosaurData(name);
151    console.log(`Found: ${name} from the ${data.period}, discovered in ${data.discovered} year`);
152    return data;
153  } catch (error) {
154    console.log("Error:", error.message);
155  }
156}
157
158// Test different functions
159getDinosaurInfo("Tyrannosaurus");
160getDinosaurInfo("Brontosaurus"); // This one doesn't exist in the database
161
162// 6. Modules - export and import (simulation)
163console.log("\n=== Modules (simulation) ===");
164
165// Simulating export/import
166const DinosaurModule = {
167  // Exported functions
168  createHerbivore(name, weight) {
169    return new Dinosaur(name, "Unknown", "Herbivore", weight);
170  },
171
172  createCarnivore(name, weight) {
173    return new Dinosaur(name, "Unknown", "Carnivore", weight);
174  },
175
176  // Exported constant
177  PERIODS: ["Triassic", "Jurassic", "Cretaceous"],
178
179  // Default export
180  default: Dinosaur
181};
182
183// Using "imported" functions
184const brachiosaurus = DinosaurModule.createHerbivore("Brachiosaurus", 80000);
185const spinosaurus = DinosaurModule.createCarnivore("Spinosaurus", 7000);
186
187console.log("Brachiosaurus:", brachiosaurus.getDetails());
188console.log("Available periods:", DinosaurModule.PERIODS);
189
190// 7. Demonstration of all data types
191console.log("\n=== Data types in JavaScript ===");
192
193const dataTypes = {
194  // Primitive types
195  string: "Tyrannosaurus Rex",
196  number: 68000000, // Age in years
197  boolean: true, // Whether it's a carnivore
198  undefined: undefined,
199  null: null,
200  symbol: Symbol("unique-dinosaur-id"),
201  bigint: 999999999999999999999n,
202
203  // Objects
204  object: { name: "Triceratops", horns: 3 },
205  array: ["T-Rex", "Velociraptor", "Triceratops"],
206  function: function() { return "I am a function!"; },
207  date: new Date(),
208  regexp: /dinosaur/gi
209};
210
211console.log("All data types:");
212for (const [key, value] of Object.entries(dataTypes)) {
213  console.log(`${key}: ${typeof value} = ${String(value)}`);
214}
215
216console.log("\nCongratulations! You've learned the history and basics of JavaScript!");