Dev 3

docs/javascript/data-types/non-primitive-types/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Non Primitive Types",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Non-primitive types are more complex data types in JavaScript. In this tutorial, you'll learn about non-primitive types in JavaScript, such as object, array, function, and more."
+  }
+}

docs/javascript/data-types/non-primitive-types/object/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Object",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "Objects are complex data types in JavaScript. In this tutorial, you'll learn about objects in JavaScript, how to create objects, and how to access object properties."
+  }
+}

docs/javascript/data-types/non-primitive-types/object/creating-objects.md

@@ -0,0 +1,279 @@
+---
+id: creating-objects
+title: "Creating Objects in JavaScript"
+sidebar_label: "Creating Objects"
+sidebar_position: 2
+tags: [javascript, data type, non-primitive type, object]
+description: Learn how to create objects in JavaScript using object literals, constructors, and classes.
+---
+
+<AdsComponent />
+
+<br />
+
+In JavaScript, objects are a fundamental part of the language and are used to represent complex data structures. There are multiple ways to create objects in JavaScript, including using object literals, constructors, and classes. In this tutorial, you will learn how to create objects using these different methods.
+
+## Using Object Literals
+
+One of the simplest ways to create an object in JavaScript is by using an **object literal**. An object literal is a comma-separated list of key-value pairs enclosed in curly braces `{}`. Each key-value pair in an object literal represents a property of the object.
+
+### Syntax:
+
+```javascript title="app.js"
+let objectName = {
+  key1: value1,
+  key2: value2,
+  // ...
+};
+```
+
+### Example:
+
+```javascript title="app.js"
+// Create an object using an object literal
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 30,
+  isEmployed: true,
+};
+
+console.log(person);
+```
+
+In the example above, the `person` object is created using an object literal with four properties: `firstName`, `lastName`, `age`, and `isEmployed`. Each property is separated by a comma, and the entire object is enclosed in curly braces `{}`.
+
+### Advantages:
+
+- **Simplicity:** Object literals are easy to write and understand.
+- **Flexibility:** Properties can be added or removed dynamically.
+- **Readability:** Object literals provide a clear structure for defining objects.
+
+### When to Use:
+
+- For creating simple objects with a fixed set of properties.
+- Useful for configuration objects, static data, and small, simple objects.
+
+<AdsComponent />
+
+<br />
+
+## Using Constructors
+
+The `object`constructor is a built-in function that allows you to create new objects programmatically. It's more flexible than object literals but is less commonly used for creating basic objects.
+
+### Syntax:
+
+```javascript title="app.js"
+let objectName = new Object();
+objectName.key1 = value1;
+objectName.key2 = value2;
+// ...
+```
+
+### Example:
+
+```javascript title="app.js"
+// Create an object using the Object constructor
+let person = new Object();
+person.firstName = "John";
+person.lastName = "Doe";
+person.age = 30;
+person.isEmployed = true;
+
+console.log(person);
+```
+
+In the example above, the `person` object is created using the `Object` constructor, and properties are added to the object using dot notation.
+
+### Advantages:
+
+- **Flexibility:** You can create `objects` and then define properties dynamically.
+- **Compatibility:** The `Object` constructor is well-supported and can be useful in certain contexts where object literals might not be suitable.
+
+### When to Use:
+
+- Less frequently used for creating basic objects; better suited for situations where objects need to be constructed dynamically.
+- Useful when creating objects from external data sources or when the object's structure is not predefined.
+
+<AdsComponent />
+
+<br />
+
+## Constructor Functions
+
+In JavaScript, you can define your own **constructor functions** to create objects with a predefined structure. Constructor functions are like regular functions but are used with the `new` keyword to create instances of objects.
+
+### Syntax:
+
+```javascript title="app.js"
+function ConstructorName(param1, param2, ...) {
+  this.key1 = param1;
+  this.key2 = param2;
+  // ...
+}
+
+let objectName = new ConstructorName(value1, value2, ...);
+```
+
+### Example:
+
+```javascript title="app.js"
+// Define a constructor function for creating Person objects
+function Person(firstName, lastName, age, profession) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+  this.age = age;
+  this.profession = profession;
+}
+
+// Create a new Person object using the constructor function
+let person1 = new Person("Alice", "Smith", 28, "Engineer");
+let person2 = new Person("Bob", "Jones", 35, "Designer");
+
+console.log(person1);
+console.log(person2);
+```
+
+In the example above, the `Person` constructor function is defined with parameters for `firstName`, `lastName`, `age`, and `profession`. Two `Person` objects (`person1` and `person2`) are created using the constructor function.
+
+### Advantages:
+
+- **Reusability:** Constructor functions allow you to create multiple instances of objects with the same structure.
+- **Encapsulation:** Constructor functions can encapsulate object creation logic and behavior.
+
+### When to Use:
+
+- When you need to create multiple objects with the same structure.
+- Useful for defining custom object types with specific properties and methods.
+
+<AdsComponent />
+
+<br />
+
+## Using ES6 Classes
+
+With the introduction of ES6 (ECMAScript 2015), JavaScript introduced a more modern way to create objects using **classes**. Classes provide a cleaner syntax for defining object blueprints and are more similar to class-based languages like Java or C#.
+
+### Syntax:
+
+```javascript title="app.js"
+class ClassName {
+  constructor(param1, param2, ...) {
+    this.key1 = param1;
+    this.key2 = param2;
+    // ...
+  }
+}
+
+let objectName = new ClassName(value1, value2, ...);
+```
+
+### Example:
+
+```javascript title="app.js"
+// Define a class for creating Person objects
+class Person {
+  constructor(firstName, lastName, age, profession) {
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.age = age;
+    this.profession = profession;
+  }
+}
+
+// Create a new Person object using the class
+let person1 = new Person("Alice", "Smith", 28, "Engineer");
+let person2 = new Person("Bob", "Jones", 35, "Designer");
+
+console.log(person1);
+console.log(person2);
+```
+
+In the example above, the `Person` class is defined with a constructor method that initializes the object's properties. Two `Person` objects (`person1` and `person2`) are created using the class.
+
+### Advantages:
+
+- **Simplicity:** Classes provide a cleaner and more structured way to define object blueprints.
+- **Inheritance:** Classes support inheritance, allowing you to create subclasses with shared properties and methods.
+- **Encapsulation:** Classes encapsulate object creation logic and behavior.
+- **Modern Syntax:** Classes are a more modern approach to object-oriented programming in JavaScript.
+- **Constructor Method:** The `constructor` method is used to initialize object properties.
+
+### When to Use:
+
+- When working with modern JavaScript applications or frameworks.
+- Useful for defining object blueprints with a clear structure and behavior.
+- Supports inheritance and other object-oriented programming concepts.
+
+<AdsComponent />
+
+<br />
+
+## `Object.create()` Method
+
+The `Object.create()` method is another way to create objects in JavaScript. It allows you to create a new object with a specified prototype object. This method is useful when you want to create objects that inherit properties from a shared prototype.
+
+### Syntax:
+
+```javascript title="app.js"
+let objectName = Object.create(prototypeObject, {
+  key1: {
+    value: value1,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  key2: {
+    value: value2,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  // ...
+});
+```
+
+### Example:
+
+```javascript title="app.js"
+// Create a prototype object
+let personPrototype = {
+  greet: function () {
+    return `Hello, my name is ${this.firstName} ${this.lastName}.`;
+  },
+};
+
+// Create a new object using the prototype
+let person = Object.create(personPrototype, {
+  firstName: { value: "John" },
+  lastName: { value: "Doe" },
+  age: { value: 30 },
+});
+
+console.log(person.greet());
+```
+
+In the example above, the `personPrototype` object defines a `greet` method that returns a greeting message. A new `person` object is created using `Object.create()` with the `personPrototype` as the prototype object.
+
+### Advantages:
+
+- **Prototype Inheritance:** Objects created with `Object.create()` inherit properties and methods from a shared prototype.
+- **Flexible Property Definition:** Properties can be defined with configurable options like `writable`, `enumerable`, and `configurable`.
+- **Separation of Concerns:** Allows you to separate object creation from property definition.
+- **Prototype-Based Programming:** Useful for prototype-based programming in JavaScript.
+
+### When to Use:
+
+- When you need to create objects that inherit properties from a shared prototype.
+- Useful for prototype-based programming and separating object creation from property definition.
+- Provides more control over property configuration and inheritance.
+- Can be used to implement inheritance patterns in JavaScript.
+
+<AdsComponent />
+
+<br />
+
+## Conclusion
+
+In this tutorial, you learned how to create objects in JavaScript using object literals, constructors, classes, and the `Object.create()` method. Each method has its advantages and use cases, depending on the complexity and structure of the objects you need to create. Understanding these different methods will help you work with objects effectively in JavaScript.

docs/javascript/data-types/non-primitive-types/object/intro.md

@@ -0,0 +1,88 @@
+---
+id: introduction-to-objects
+title: "Introduction to Objects in JavaScript"
+sidebar_label: "Introduction to Objects"
+sidebar_position: 1
+tags: [javascript, data type, non-primitive type, object]
+description: Learn about objects in JavaScript, how to create objects, and common operations with objects.
+---
+
+<AdsComponent />
+
+<br />
+
+In this tutorial, you will learn about objects in JavaScript, how to create objects, and common operations with objects.
+
+## What is an Object in JavaScript?
+
+In JavaScript, an **object** is a non-primitive data type that represents a collection of key-value pairs. Objects are used to store and organize data in a structured way. Each key-value pair in an object is called a property, where the key is a string (or symbol) that identifies the property, and the value can be any data type, including other objects.
+
+Objects in JavaScript are dynamic, meaning you can add, update, or delete properties from an object at any time. Objects are commonly used to represent complex data structures, such as user profiles, products, or configurations.
+
+Objects in JavaScript are fundamental to how the language works. Many built-in features and APIs in JavaScript are implemented using objects, making them an essential part of the language.
+
+**Example of a Basic Object:**
+
+Here is an example of a basic object in JavaScript:
+
+```javascript title="app.js"
+// Create an object representing a person
+let person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 30,
+  isEmployed: true,
+};
+
+console.log(person);
+```
+
+In this example, `person` is an object with four properties:
+
+- `firstName` is a property with the value `"John"`.
+- `lastName` is a property with the value `"Doe"`.
+- `age` is a property with the value `30`.
+- `isEmployed` is a property with the value `true`.
+
+Each property is composed of a key (e.g., `firstName`) and a value (e.g., `"John"`). The properties are separated by commas, and the entire object is enclosed in curly braces `{}`.
+
+<AdsComponent />
+
+<br />
+
+## Importance of Objects in JavaScript
+
+Objects are everywhere in JavaScript. They are used to create, manipulate, and manage complex data structures. Whether you're handling user information, managing configurations, or even dealing with the Document Object Model (DOM) in a web page, objects are integral.
+
+### Key Features of Objects
+
+- **Dynamic nature:** Objects can have properties added, modified, or removed dynamically at runtime.
+- **Reference type:** Objects are reference types, meaning that when you assign an object to another variable, you're assigning a reference to the same object, not a copy of it.
+- **Collection of key-value pairs:** Objects store data in key-value pairs, making them highly flexible for modeling real-world entities.
+
+<AdsComponent />
+
+<br />
+
+## Real-World Example
+
+Consider an online shopping cart. You might represent a shopping cart as an object where each property is an item, and the value is the quantity of that item:
+
+```javascript title="app.js"
+// Create a shopping cart object
+let shoppingCart = {
+  apple: 2,
+  banana: 3,
+  orange: 1,
+};
+
+console.log(shoppingCart);
+```
+
+In this example, `shoppingCart` is an object representing a shopping cart with three items: `apple`, `banana`, and `orange`. The quantity of each item is stored as the value of the corresponding property.
+
+Objects are versatile and can be used to model a wide range of real-world entities and data structures.
+
+## Conclusion
+
+In this tutorial, you learned about objects in JavaScript, how to create objects, and the importance of objects in JavaScript programming. Objects are a fundamental part of JavaScript and are used to represent complex data structures in a flexible and dynamic way.