MAD 2 Revision Session - Quiz-1

Summary

The video is an exam-focused revision session covering JavaScript and Vue.js. The instructor reviews core concepts, demonstrates examples from a shared code repository, and encourages students to practise with the code and documentation rather than rely only on memorized definitions.

JavaScript

typeof

• Use typeof to check a value’s type, such as "string", "number", "boolean", or "object".
• JavaScript represents both integers and decimals as "number".
• An undeclared or unassigned variable may produce "undefined".
• The instructor recommends testing examples in the browser console and consulting MDN.

Working with the DOM

• The browser represents HTML as the Document Object Model (DOM). JavaScript can change page content and styling after the HTML has loaded.
• document.getElementById(...) selects an element by its ID. Its innerText or style can then be changed.
• document.querySelectorAll(...) selects multiple matching elements. In the example, .forEach(...) adds click listeners to buttons and changes text colour based on the clicked button.
• addEventListener("click", ...) responds to user interaction. The event’s target can provide the clicked button’s text.

Functions and arrow functions

• Defining a function is not enough; it must be called for its code to run.
• Functions can receive parameters and return values. Without an explicit return, a regular function returns undefined.
• Arrow functions can use an implicit return for a single expression. If the body uses curly braces, an explicit return is needed to return a value.
• Parentheses around a single arrow-function parameter may be omitted in some cases. The instructor recommends recognizing the common forms used in code and exam questions.
• Pay close attention to spaces and exact output formatting in code-tracing questions.

Variable declarations and scope

• var is function-scoped (or global when declared outside a function) and permits redeclaration, which can cause unexpected changes to values.
• let and const are block-scoped. let can be reassigned but not redeclared in the same scope.
• const cannot be reassigned. For objects or arrays, the binding is constant, though their contents may still be mutable.
• The instructor advises testing scope examples—especially those involving blocks, if statements, and nested declarations—instead of relying on a one-line definition.

Array methods

• forEach runs a callback once for each array item. It is useful for actions such as printing or updating the UI, but does not create a transformed array.
• map applies a function to each item and returns a new array of the same length, such as an array of squared values.
• filter returns the items that satisfy a condition, such as values greater than a given number.
• sort:
  • Without a comparator, JavaScript sorts values as strings, which can produce surprising results for numbers.
  • A numeric comparator such as (a, b) => a - b sorts numbers in ascending order. Reversing the subtraction gives descending order.
  • The session emphasizes understanding the comparator’s effect rather than trying to infer the sorting algorithm’s internal comparison sequence.
• slice(start, end) returns a shallow copy of part of an array. The end index is excluded, and the original array is not changed.
• length gives the number of items in an array.

Timers, asynchronous work, and callbacks

• setTimeout schedules a function to run after a specified delay. It returns a timer identifier; the callback runs later.
• The instructor distinguishes a known delay, such as setTimeout, from waiting for an operation with an uncertain completion time, such as an API request.
• An async function and await allow code to wait for a promise, such as an API response, before continuing with subsequent steps.
• A callback is a function passed into another function so it can be run at an appropriate point, often after another task finishes.

apply and bind

These methods control the value of this when calling or preparing a function.

• apply calls a function immediately, supplying a chosen this value and arguments as an array-like list.
• bind creates a new function with this fixed to a chosen object. That function can be called later and is often useful when passing methods as callbacks.
• The example uses a user object and a greeting function that reads this.name.

Vue.js

Components and communication

• Vue components are reusable pieces of an interface and can be nested. A parent component can pass data to a child through props.
• A child communicates back to its parent by emitting an event with $emit. The parent listens for that event and calls a handler.
• In the worked example, the parent passes a student name to the child. When the child’s delete button is clicked, it emits a removal event; the parent handles it and updates the student data.
• The instructor stresses tracing the full chain: child action → emitted event → parent listener → parent method → updated data/UI.

Common directives

• v-if conditionally renders an element, adding it to or removing it from the DOM depending on the condition.
• v-show keeps the element in the DOM and toggles its visibility, generally through CSS. It can suit frequently toggled visibility; v-if is appropriate when conditional creation or removal is desired.
• v-for renders a list of items and can provide an index.
• v-bind connects data to an HTML attribute or component prop. Its shorthand is :.
• v-model provides two-way binding, commonly for form inputs, connecting the displayed value and the component’s data.
• v-on attaches event handlers. Its shorthand is @.

Vue lifecycle

• The session describes the broad progression from component creation to mounting in the DOM, updates, and finally unmounting.
• These stages help explain when data and DOM elements are available and when changes trigger rendering. The instructor notes that some lifecycle hook names differ between Vue versions; newer terminology uses “unmount” where older material may say “destroy.”
• A notes-app example demonstrates data-driven rendering: adding and removing notes updates the list, while lifecycle hooks log when creation, mounting, or updates occur.

Exam preparation and practice

• Review the assignments, previous question papers, and code in the shared repository.
• Practise running the examples yourself and tracing what each line does. Exam questions may use different wording or examples while testing similar concepts.
• Consult MDN for definitions and examples, especially for JavaScript behavior that is easy to misremember.
• The instructor cautions students not to assume the quiz will repeat prior questions exactly and recommends becoming familiar with the code before the exam.

Speakers and sources featured

• Instructor: Unnamed presenter leading the revision and demonstrating JavaScript and Vue.js examples.
• Students: Multiple unnamed participants asking and answering questions.
• Sources and materials referenced: The instructor’s shared GitHub repository and course code; MDN documentation; browser developer tools and console; and a brief Google/AI lookup during the sorting discussion.