JavaScript Programming Labs

Your Task: Create and manipulate an array of fruits to learn essential array operations in JavaScript.

Detailed Requirements:

1. Create an array called fruits - Initialize it with at least 3 fruits: "apple", "banana", "orange". Arrays in JavaScript are created using square brackets [] and can hold any type of data. Arrays are zero-indexed, meaning the first element is at index 0.

2. Print the original array - Use console.log(fruits) to see your starting array. You can also print the length with fruits.length.

3. Add an element using push() - The push() method adds one or more elements to the END of an array and returns the new length. Example: fruits.push("mango") adds "mango" at the end.

4. Remove the last element using pop() - The pop() method removes the LAST element from an array and returns that element. This modifies the original array. You can store the removed item: const removed = fruits.pop().

5. Access an element by index - Use bracket notation to access elements: fruits[0] gets the first element, fruits[1] gets the second, etc. Print a specific element with console.log(fruits[0]).

6. Find an element using indexOf() - The indexOf() method returns the first index at which a given element is found, or -1 if not found. Example: fruits.indexOf("banana") returns 1 if banana is the second element.

💡 Pro Tips:
• Arrays are reference types - assigning an array to another variable creates a reference, not a copy
• unshift() adds to the beginning, shift() removes from the beginning
• includes() returns true/false if an element exists (simpler than indexOf for checking existence)
• slice() returns a shallow copy of a portion of an array
• splice() can add/remove elements at any position

⚠️ Common Mistakes to Avoid:
• Forgetting that arrays are zero-indexed (first element is index 0, not 1)
• Confusing slice() (non-destructive) with splice() (destructive)
• Comparing arrays with === (compares references, not contents)

Expected Output:
Original array: [ 'apple', 'banana', 'orange' ] Array length: 3 After push: [ 'apple', 'banana', 'orange', 'mango' ] Popped element: mango First fruit: apple Index of banana: 1

Your Task: Create different types of functions to understand function declarations, expressions, arrow functions, and parameters.

Detailed Requirements:

1. Create a function declaration called greet - Function declarations use the function keyword followed by a name. This function should take a name parameter and return a greeting string like "Hello, [name]!". Function declarations are hoisted, meaning they can be called before they're defined in the code.
function greet(name) { return "Hello, " + name + "!"; }
2. Create a function expression called multiply - Function expressions assign an anonymous function to a variable. This function should take two parameters a and b and return their product. Unlike declarations, function expressions are NOT hoisted.
const multiply = function(a, b) { return a * b; };
3. Create an arrow function called square - Arrow functions provide a shorter syntax introduced in ES6. This function should take a number n and return its square (n * n). Arrow functions don't have their own this binding.
const square = (n) => n * n; // Or with braces: const square = (n) => { return n * n; };
4. Create a function with a default parameter - Default parameters allow you to set default values if no argument is provided. Create sayHello that takes a name with default value "World".
const sayHello = (name = "World") => `Hello, ${name}!`;
5. Call each function and print the results - Use console.log() to display the output of each function call.

💡 Pro Tips:
• Arrow functions with a single expression can omit return and curly braces
• Single parameter arrow functions can omit parentheses: n => n * 2
• Use template literals for string interpolation: `Hello, ${name}!`
• Functions are first-class objects - they can be passed as arguments and returned from other functions

⚠️ Common Mistakes to Avoid:
• Forgetting return statement (function returns undefined by default)
• Using this inside arrow functions (they don't bind their own this)
• Calling a function expression before it's defined (not hoisted)

Expected Output:
Greeting: Hello, Alice! Product: 12 Square of 5: 25 Default greeting: Hello, World! Custom greeting: Hello, JavaScript!

Your Task: Create and manipulate JavaScript objects to understand properties, methods, and object operations.

Detailed Requirements:

1. Create an object called person - Objects are collections of key-value pairs enclosed in curly braces {}. Create a person object with properties: name (string), age (number), city (string), and isEmployed (boolean).
const person = { name: "John Doe", age: 30, city: "New York", isEmployed: true };
2. Access properties using dot notation - The most common way to access object properties. Use person.name to get the name. Print at least two properties using dot notation.

3. Access properties using bracket notation - Useful when property names are dynamic or contain special characters. Use person["age"]. Bracket notation accepts strings or variables: const key = "city"; person[key].

4. Add a new property - Objects are mutable. Add a new property like person.email = "john@example.com" or person["phone"] = "555-1234".

5. Add a method to the object - Methods are functions stored as object properties. Add a greet method that returns a greeting using this.name. The this keyword refers to the current object.
person.greet = function() { return `Hello, my name is ${this.name}`; };
6. Use Object.keys() to list all properties - Object.keys(obj) returns an array of the object's own property names. Useful for iteration and inspection.

💡 Pro Tips:
• Object.values(obj) returns an array of property values
• Object.entries(obj) returns an array of [key, value] pairs
• Use shorthand property names: { name, age } instead of { name: name, age: age }
• Destructuring: const { name, age } = person;
• Spread operator: const copy = { ...person };

⚠️ Common Mistakes to Avoid:
• Using arrow functions for methods when you need this (arrows don't bind their own this)
• Forgetting that objects are reference types
• Using reserved words as property names without quotes

Expected Output:
Person object: { name: 'John Doe', age: 30, city: 'New York', isEmployed: true } Name (dot notation): John Doe Age (bracket notation): 30 After adding email: john@example.com Greeting: Hello, my name is John Doe Object keys: [ 'name', 'age', 'city', 'isEmployed', 'email', 'greet' ]