JavaScript Arrays, Objects and Logic

🎯Learning Objectives

• Level 14 calculated one workshop’s remaining seats.
• Real pages often manage a collection of workshops.
• This lesson groups values into arrays and objects, derives useful fields, selects matching records, orders the results and calculates a summary.

• You will explain which methods return new arrays, which operations mutate data, and why a new outer array does not necessarily contain newly copied objects.
• You will also test empty collections, full workshops and equal sort values instead of assuming every collection has a matching first item.

🗺️Model the Task Before Choosing a Method

• Our task is a workshop catalog.
• Each record needs a stable ID, title, capacity and reserved count.
• The collection has an order, and a learner may search it or choose only workshops with available places.
• A record’s identity should not depend on its current display position.

• Use an array when a sequence or collection is useful.
• Use an object to group named properties of one record.
• An array of objects combines these roles without forcing capacity, title and reserved values into several separate arrays that must stay synchronized.

• State the data contract before calculating: capacity and reserved are small non-negative integers, reserved does not exceed capacity, and each workshop has a unique ID.
• This lesson’s lab supplies trusted, predefined records; a real external data source would need its own validation.

📚Arrays — Positions, Length and Access

• An array is an object designed for indexed collections.
• Ordinary array indexes start at zero.
• An array with three consecutive items has indexes 0, 1 and 2, while its length is 3.
• The final index in that dense array is length - 1.

• Reading a missing ordinary index produces undefined.
• It does not magically create a valid workshop.
• Checking the collection length or finding a record explicitly is safer than assuming records[0] exists.

• Length and the number of explicitly present elements can differ for sparse arrays.
• Our examples use dense arrays to avoid hiding a beginner logic error behind empty slots.
• Avoid assigning far beyond the current end just to represent a workshop ID.

const topics = ["HTML", "CSS", "JavaScript"];
console.log(topics[0]); // HTML
console.log(topics.length); // 3
console.log(topics[3]); // undefined
console.log(Array.isArray(topics)); // true

• Typeof topics is "object".
• Array.isArray is the useful test when the task requires an actual array.
• A numeric ID such as 103 is a property of a record, not a requirement to store it at array index 103.

✏️Changing Arrays — Know the Mutation

• Push appends items and returns the new length.
• Pop removes and returns the last item, or undefined for an empty array.
• Unshift and shift operate at the beginning.
• These methods change the array they are called on.

• Splice can remove, replace or insert items in place; it returns an array of removed items.
• Slice returns a shallow copy of a selected range and does not remove those elements from the original.
• Similar names do not imply identical behavior.

• A const binding can still refer to a mutable array.
• Const prevents rebinding the name to a different array; it does not disable push, splice or other allowed changes to the existing array.

const topics = ["HTML", "CSS"];
const length = topics.push("JavaScript"); // 3
const preview = topics.slice(0, 2); // ["HTML", "CSS"]
const removed = topics.splice(1, 1); // ["CSS"]
// topics is now ["HTML", "JavaScript"]

• Write down both the return value and the array after the method call.
• Do not write const topics = topics.push(...) and expect push to return the collection.

🔁Iteration — Indexes or Values?

• A traditional for loop is useful when the index is part of the task.
• For...of visits values from an iterable such as an array.
• For...in enumerates property keys and can include inherited enumerable properties; it is not the default choice for reading array values.

• ForEach calls a callback for present array elements and returns undefined.
• It is suitable for a deliberate side effect, such as logging.
• It does not build the transformed output array that map builds, and a return inside its callback does not break the surrounding iteration.

• For these synchronous beginner examples, a for...of loop can use break when the task should stop.
• Do not assume an asynchronous callback supplied to forEach will be awaited in sequence.

const topics = ["HTML", "CSS", "JavaScript"];
for (let index = 0; index < topics.length; index += 1) {
  console.log(index, topics[index]);
}
for (const topic of topics) {
  console.log(topic);
}

• The first loop exposes both index and value.
• The second directly names the value.
• Choose the clearer version for the job instead of using an index when it contributes nothing.

🗃️Object Literals and Named Properties

• An object literal groups related fields.
• Dot notation reads a property with a suitable literal name.
• Bracket notation can use a variable key or a property name that does not fit ordinary dot notation.
• Missing properties generally read as undefined unless inheritance supplies them.

• Property names and values have separate roles.
• In workshop.title, title names the field; "HTML" is the stored value.
• Keep numeric fields as numbers after validation rather than storing display strings such as "30 seats" and expecting arithmetic to work.

• Use a stable ID when matching or updating records.
• A title can change and two titles can be the same.
• The array index can change when the collection is filtered or sorted.

const workshop = {
  id: "w1", title: "HTML", capacity: 30, reserved: 12
};
console.log(workshop.title); // HTML
const key = "capacity";
console.log(workshop[key]); // 30
console.log(workshop.missing); // undefined

🧰Object Updates, Methods and Inspection

• Assigning workshop.reserved = 15 changes that property on the referenced object.
• Object.keys and Object.entries can help inspect an object’s own enumerable string-keyed fields.
• They do not promise to expose every inherited or non-enumerable property.

• An object can contain a function-valued property, often used as a method.
• A regular method can access this when called with the expected receiver.
• This depends on how a function is invoked; it is not permanently the name of the object where the function was first written.

• Arrow functions do not create their own this binding.
• For a beginner catalog calculation, a pure helper that takes a record argument is usually easier to test than relying on an invocation-dependent receiver.

function remainingSeats(workshop) {
  return workshop.capacity - workshop.reserved;
}
const workshop = { id: "w1", title: "HTML", capacity: 30, reserved: 12 };
console.log(remainingSeats(workshop)); // 18
console.log(Object.keys(workshop));
// ["id", "title", "capacity", "reserved"]

• The helper assumes the record already meets the data contract.
• Inspecting keys or subtracting two fields is not a substitute for validating an external record.

🧵References, Identity and Shallow Copies

• Assigning another binding to an array or object does not automatically clone it.
• The two bindings can refer to the same object.
• An update through one is then observable through the other.
• Strict equality between objects checks identity, not a deep comparison of their fields.

• Spread can copy the outer array or an object’s own enumerable properties.
• The copy is shallow: nested objects remain shared unless you deliberately copy those nested levels too.
• Array methods that return new arrays can still retain references to the original item objects.

• Our catalog uses flat records.
• The lab derives a new object for each record before doing later work and sorts a copied array.
• Do not generalize that approach into a promise that arbitrary nested data has been deeply cloned.

const original = [{ title: "HTML", meta: { room: "A" } }];
const outerCopy = [...original];
outerCopy[0].title = "Updated"; // changes original[0].title too

const recordCopy = { ...original[0] };
recordCopy.title = "Local"; // independent top-level field
recordCopy.meta.room = "B"; // nested meta remains shared

A new outer container and a new nested object are different claims. Explain exactly which levels are copied.

🎁Destructuring, Spread and Defaults

• Destructuring gives local names to selected array positions or object properties.
• Object patterns match property names, not their order in the literal.
• A default initializer applies when the extracted value is undefined; it does not replace null or zero.

• Spread collects existing values or properties into a new outer container.
• In an object literal, later properties can replace an earlier property with the same name.
• A remaining field written after ...workshop becomes the derived value we intended.

const workshop = { title: "HTML", capacity: 30, reserved: 12 };
const { title, capacity, reserved = 0 } = workshop;
const enriched = { ...workshop, remaining: capacity - reserved };
const [first, second] = ["HTML", "CSS"];

• Default reserved = 0 is a language behavior, not always the right data policy.
• If an external catalog requires reserved to be present, silently replacing a missing field could hide a data error.
• The lab’s predefined records always include it.

🔄map — Build a Derived Collection

• Map creates a new array from the callback’s returned values for present elements.
• For our dense array, it produces one output item per input item.
• It is the right fit when every workshop needs a derived remaining field.

• Return a new record object to preserve the original flat record.
• Mutating a record inside a map callback would still mutate that referenced record even though map returns a new outer array.

• An arrow function that directly returns an object literal wraps it in parentheses.
• Without the intended return, a block-bodied callback can produce undefined output elements.

const enriched = workshops.map(workshop => ({
  ...workshop,
  remaining: workshop.capacity - workshop.reserved
}));

• Each dense input record produces a new object with the original fields plus remaining.
• Verify the source records still have their original fields and values after the transformation.

🧲filter and find — Collection or First Match?

• Filter returns a new array containing the elements whose predicate passes.
• It can return several matches, one match or an empty array.
• It does not create new record objects by itself.

• Find returns the first matching element, or undefined if none matches.
• A found object still refers to an existing item; it is not automatically a detached copy.
• Check the no-match result before reading a property.

• Includes is convenient for checking a primitive value such as an ID in an array of IDs.
• Passing a newly written object with the same fields does not make it match an existing object by structural equality.

const available = enriched.filter(workshop => workshop.remaining > 0);
const chosen = enriched.find(workshop => workshop.id === "w2");
if (chosen === undefined) {
  console.log("Workshop not found");
}

• The predicate must return its decision.
• A callback with braces but no return can unintentionally select no workshops.
• An empty filtered array is still truthy; test length when the question is whether results exist.

✅some and every — Ask a Collection Question

• Some asks whether at least one present element passes its predicate.
• Every asks whether all present elements pass.
• Both can stop once the answer is determined.
• They return booleans rather than a record or a collection.

• On an empty array, some returns false and every returns true.
• That every result follows the universal-test rule: there is no failing item.
• It does not prove that an actual full workshop exists in the collection.

• If the interface means “there are records and all are full,” combine a non-empty check with every.
• The lab shows the raw every result and explains it for an empty selection.

const anyAvailable = enriched.some(w => w.remaining > 0);
const allFull = enriched.every(w => w.remaining === 0);
const nonEmptyAndFull = enriched.length > 0 && allFull;

• For three available workshops, anyAvailable is true and allFull is false.
• For an empty selection, the raw values are false and true respectively, while nonEmptyAndFull is false.

🧮reduce — Summarize with an Initial Value

• Reduce combines present elements using an accumulator.
• For an available-seat total, start the accumulator at numeric zero and add each remaining count.
• The callback must return the next accumulator value.

• Providing an initial value makes the empty case meaningful: an empty collection’s total is zero.
• Reduce without an initial value on an empty array throws TypeError.
• A safe summary should not rely on there always being a first element.

• Reduce can also build richer summaries, but readability matters.
• A short loop is a good alternative when it explains the task more clearly.
• Do not use reduce simply to make every algorithm a one-line expression.

const totalRemaining = enriched.reduce(
  (total, workshop) => total + workshop.remaining,
  0
);
// [] with this initial value gives 0

• In the normal catalog, the remaining values are 18, 0, 30 and 12.
• Their total is 60.
• The total after filtering is the total for the selected workshops, not necessarily the whole catalog.

↕️Sorting — Comparator, Mutation and Ties

• Sort rearranges its array in place and returns that same array.
• Without a comparator, ordinary values are compared using string forms in UTF-16 code-unit order, which is unsuitable for many numeric tasks.
• Copy first if the source order must be preserved.

• A numeric ascending comparator can return a - b.
• A negative return places the first value before the second; a positive return places it after; zero treats their order as equal for sorting.
• The comparator must describe a consistent ordering, not just return true or false.

• Modern JavaScript specifies stable sort, but an explicit tie rule can also make the intended ranking visible.
• Our catalog sorts equal remaining counts by its stable ID using a simple comparison.
• This is a teaching policy, not a general locale-aware name-sorting solution.

const numbers = [2, 10, 3];
[...numbers].sort(); // [10, 2, 3]
[...numbers].sort((a, b) => a - b); // [2, 3, 10]

const bySeats = [...enriched].sort((a, b) =>
  b.remaining - a.remaining || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
);

• The original enriched array keeps its order because the sort receiver is a new outer array.
• The items remain references to the derived records; sorting alone does not deep-copy them.

🔗A Clear Pipeline — Derive, Select, Order, Summarize

• A useful pipeline gives each step one job.
• First derive remaining for every trusted workshop record.
• Then select records by title and availability.
• Next order the selected records without changing the source.
• Finally summarize the records that are actually displayed.

• Normalize a search phrase deliberately: the lab trims it and uses lowercase matching for its fixed English titles.
• An empty search phrase matches all titles.
• It is a simple substring search, not fuzzy matching or a multilingual search engine.

• Keep intermediate collections inspectable while learning.
• A compact chain is useful only if you can explain which value each stage receives and returns.
• The lab displays the source, selected records and summary separately.

• Filtering by available seats removes the full CSS workshop in the normal dataset.
• Sorting the remaining records from most seats to fewest gives JavaScript, HTML, Accessibility.
• Mapping their titles supplies those three display labels; reduction totals 60 available seats.

🧪Premium Interactive — Catalog Logic Lab

• Choose a normal catalog, an empty catalog, an all-full catalog or equal-seat records.
• Search the title, select an availability filter and choose the result order.
• The lab executes fixed array/object operations on trusted predefined data; it does not evaluate arbitrary code or accept an external dataset.

• Inspect the original records, the selected derived records, their title list and the summary.
• A no-match selection is reported explicitly.
• The raw every-full result is true for an empty selection and is explained rather than presented as proof that workshops exist.

• Equal remaining counts use the ID as a tie rule.
• The fixed titles use simple lowercase comparison; this lab is not a general locale-aware sorting service.
• Each run begins from the chosen source dataset, so one run does not silently mutate the next run’s input.

🛠️Debugging — Inspect Shape, Return and Mutation

• If map yields undefined entries, inspect the callback’s return path.
• If filter returns no records, inspect the predicate and the data types it compares.
• If a numeric sort gives 10 before 2, check whether a numeric comparator is missing.
• If an empty result crashes, look for a missing initial accumulator or unchecked records[0].

• A changed source title after a copy can indicate shared item references.
• A changed source order can indicate sort was called directly on the source.
• Use targeted snapshots or known assertions to inspect the actual contract, rather than assuming every method that returns an array is deeply non-mutating.

• For this lab, normal/available/descending yields three records and a total of 60.
• Empty/all yields zero records and total zero.
• Full/available yields no matches.
• Ties/available/descending keeps the ID tie rule explicit.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Explain the Collection

💻Extra Practice — Test Specific Collection Cases

📌Quick Revision

📖Glossary — Flip to Learn

🏆Final Challenge — A Catalog Query Function

• Write a pure query function that accepts a trusted flat workshop collection and options for title search, availability and order.
• Return derived selected records, their title list, a count and total remaining seats.
• Preserve the source fields and order.
• State the required input contract.

• Use map to create new derived record objects, filter for the query, and copy before sort.
• Choose an explicit tie rule.
• Provide an initial zero to reduction.
• Check a missing find result before reading it, and keep an empty query result distinct from an invalid source record.

• Test the four predefined scenarios, a title match and a no-match phrase.
• Snapshot the input before a query and compare it afterward.
• Verify 60 selected remaining seats for the normal available query, zero for an empty selection and 30 for the tie dataset.
• Explain the raw empty every result in plain language.

• Success criterion: explain each method’s input and return shape, prove source preservation for these flat records and report empty results clearly.
• Level 16 will connect these data results to DOM and browser programming.