JavaScript Functions, Arrays, and Objects

JavaScript Functions

A function is a named, reusable block of code that performs a specific task. Defining a function does not run it; you must invoke (call) it separately. The most common syntax uses the `function` keyword:

```js

function greet(name) {

return 'Hello, ' + name + '!';

}

console.log(greet('Maria')); // Hello, Maria!

```

The value inside the parentheses is a parameter — a placeholder for data the function receives. When you call the function and supply an actual value, that value is called an argument. The `return` statement sends a result back to wherever the function was called; without it the function returns `undefined`.

Arrow Functions

ES6 introduced a shorter syntax called an arrow function:

```js

const double = (n) => n * 2;

console.log(double(5)); // 10

```

Arrow functions work the same way for most everyday uses. If the body is a single expression, the result is returned automatically (implicit return). For multi-line bodies, use curly braces and an explicit `return`.

Parameters, Arguments, and Return Values

Functions can accept multiple parameters separated by commas. Always include an explicit `return` statement when you expect a value back — this is a habit that prevents hard-to-find bugs. Test every function with at least three different inputs in the browser console before considering it complete.

---

JavaScript Arrays

An array is an ordered list of values stored in a single variable. Each item has a numeric index starting at zero.

```js

const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits[1]); // banana

```

Arrays have a `.length` property and many built-in methods that make common tasks easier.

Iterating with a for Loop

A classic `for` loop gives you full control:

```js

for (let i = 0; i < fruits.length; i++) {

console.log(fruits[i]);

}

```

Key Array Methods

| Method | What it does | Returns |

|---|---|---|

| `forEach` | Runs a function on each element; used for side effects | `undefined` |

| `map` | Transforms each element | New array, same length |

| `filter` | Keeps elements that pass a test | New array, same or shorter |

| `find` | Returns the first element that passes a test | Single element or `undefined` |

Example using a product dataset:

```js

const products = [

{ name: 'Keyboard', price: 45 },

{ name: 'Monitor', price: 320 },

{ name: 'Mouse', price: 25 }

];

// Filter products under $50

const budget = products.filter(p => p.price < 50);

// Map to a list of names only

const names = products.map(p => p.name);

// Find a specific item

const monitor = products.find(p => p.name === 'Monitor');

```

None of these methods modify the original array — they return a new one (except `forEach`). Always consult the MDN Array reference when you are unsure of a method's exact behavior; MDN is the authoritative, free documentation for web APIs.

---

JavaScript Objects

An object groups related data and behavior under one name. You define an object literal using curly braces, with key–value pairs (also called properties):

```js

const student = {

name: 'Jordan Lee',

courses: ['HTML', 'CSS', 'JavaScript'],

gpa: 3.7,

isEnrolled: true

};

```

Access a property with dot notation (`student.name`) or bracket notation (`student['name']`). Bracket notation is required when the key is stored in a variable or contains special characters.

Getter-Style Functions

A getter-style function reads object data and formats it for output. It is a regular function — not a built-in JavaScript getter — that accepts an object as an argument and returns a formatted string or computed value:

```js

function getStatus(s) {

return s.name + ' — GPA: ' + s.gpa + ', Enrolled: ' + s.isEnrolled;

}

console.log(getStatus(student));

```

JSDoc Comments

JSDoc is a standard comment format that describes what a function does, its parameters, and its return value. It improves readability and is recognized by many editors for auto-complete hints:

```js

/**

• Returns a formatted status string for a student record.
• @param {Object} s - The student object.
• @param {string} s.name - Full name of the student.
• @param {number} s.gpa - Grade point average.
• @returns {string} Formatted status string.

*/

function getStatus(s) {

return s.name + ' — GPA: ' + s.gpa;

}

```

---

Working Safely in a Development Environment

Although web development does not involve heavy physical hazards, professional practices still protect you and your work:

• Save frequently and use version control. Lost code due to a crash is a real productivity hazard. Commit to Git before major changes.
• Never run untrusted code in your browser console or Node.js — malicious scripts can access local files or credentials.
• Protect sensitive data. Do not place real personal information (SSNs, passwords) in exercise files or public repositories. Use placeholder data in all labs.
• Ergonomics. Position your monitor at eye level, keep wrists neutral, and take short breaks to avoid repetitive strain injury — a recognized occupational hazard for programmers.
• Screen time. Follow the 20-20-20 rule: every 20 minutes, look at something 20 feet away for 20 seconds to reduce eye strain.

Keeping these habits from day one builds professionalism that employers notice.