Data Abstraction!
How Data Abstraction is used in Programming
1. Reference Guide
Here is a clean, well-structured version of your Data Abstraction guide in Markdown. I’ve corrected typos (like “combinantion” and missing “a” in “structured manner”), balanced the formatting, and aligned the definitions so they are clear and readable for your students.
Levels of Data Abstraction in JavaScript
1. Simplifying Complex Code
Focuses on grouping code into reusable, structured patterns.
| Level | Description |
|---|---|
| Functions | Complex systems can be wrapped inside functions or modules to keep the interface clean and concise. |
| Objects | Organizes related values and behavior using data structures like Arrays and Plain JavaScript Objects. |
| Classes | A combination of functions and objects designed for Object-Oriented Programming (OOP). |
2. Simplifying Complex Systems
Focuses on providing a high-level interface while hiding internal system complexity.
| Level | Description |
|---|---|
| Physical Level | Describes how raw data is stored directly on memory or hardware (e.g., memory pointers, binary storage). |
| Logical Level | Defines data structures and relationships while hiding physical storage details (e.g., standard JS object schemas). |
| View Level | Displays only the data necessary for the user or interface, hiding all non-essential background details. |
PICKING A TYPE:
COUNTING THINGS = INT
MONEY, MEASUREMENTS = DOUBLE
YES/NO QUESTIONS= BOOLEAN
SEQUENCE OF CHARACTERS = STRING
2. LxD Cycle Process
EMPATHIZE: Data abstraction helps students identify what information is necessary and what can be left out. It reduces complexity by hiding unnecessary details and focusing only on important data. This helps prevent cognitive overload, especially when working with large projects and lots of code.
Data abstraction is used when you are building a game/anything and you want to keep what the users see to what’s needed, not all unneeded background data. when playing a game you dont need to know how it works only what it does, that’s what data abstraction does.
Define: Choosing data types (int, double, boolean, string) is part of abstractions because the type describes what the data means and what operations make sense, while hiding the value stored internally. Using “final” is abstraction because it tells the program “this value never changes” simplifying how others parts of the program interact with it. “string as a reference type fits abstraction because you work with the idea of a text value, while the actual object and memory details are hidden.
IDEATE: QUESTIONS: How might we help students ask “what does the user actually need to see?” before they write any code? QUESTION: How might we help students see that abstraction makes programs easier to change later?
ACTIVITY: Go into the javascript lessons, click on data abstractions and try out the rounding numbers and adding two numbers examples.
3 LESSON PLAN
LEARNING OBJECTIVE: In this lesson, students should learn how to understand what code is necessary in a line of code. The students should be able to understand how to use the concepts of data abstraction like boolean string double int they should understand how to implement a code. Students should be able to show only necessary points in a game. They should be able to take lines of code and simplify it down.
SUCCESS CRITERIA: Able to take lines and simplify Able to take code and decide whether it is boolean, int, string, or double. Able to understand when someone says “clean up this code”.
TECHTALK: (2 MINUTES)
Code Runner Challenge
Try out Data Abstraction with Math.round()
View IPYNB Source
%%js
// CODE_RUNNER: Try out Data Abstraction with Math.round()
// Abstraction in Action: Math.round()
// The Complex Data (Input)
const messyNumber = 7.84236;
// We call the built-in function.
// We don't care *how* it calculates the rounding
// only that it *does* the rounding
const roundedResult = Math.round(messyNumber);
// The Simple Result (Output)
console.log(`The original messy number was: ${messyNumber}`);
console.log(`The simplified, rounded result is: ${roundedResult}`);
// Expected output: 8
What’s hidden:
The internal logic the JavaScript uses to look at the decimal part (.84236), determine it’s >= 0.5, and then round the integer part (7 -> 8). All of this is abstracted away!
CODE EXAMPLES:
BOOLEAN:
const isDarkMode = true;
if (isDarkMode) {
console.log("Applying the dark theme."); // This will run
}
INTEGER:
let itemsInCart = 3;
const itemPrice = 15;
// Numbers allow mathematical operations
let totalCost = itemsInCart * itemPrice;
console.log(totalCost); // Outputs 45
STRING:
const userName = "Alex";
// Combining strings using backticks (Template Literals)
const greeting = `Hello, ${userName}!`;
console.log(greeting); // Outputs: Hello, Alex!
// Note: Treating numbers as strings prevents math
const ageAsString = "25";
// ageAsString + 5 would result in "255" instead of 30 because JS glues them together!
POPCORN HACK (IN CLASS): Adding two numbers
4 MINUTES
The user should be able to call addNumbers(a, b) and trust it works without needing to see the math inside.
YOUR JOB:The code below is “broken”. Complete the function so that it successfully returns the sum of the two inputs.
hint:use the return keyword inside the function
Code Runner Challenge
Display two numbers, and add them!
View IPYNB Source
%%js
// CODE_RUNNER: Display two numbers, and add them!
// The Abstraction (The Function)
function addNumbers(num1, num2) {
// Add code here
}
let a = 2
let b = 3
// Use the abstraction to get the result
let result = addNumbers(a, b);
console.log(result);
Data Abstraction with Classes
Secondly, Data Abstraction can be seen in Object Oriented Programming, specifically with Classes and Objects . Classes are essential tools for simplifying how we handle data.
POPCORN HACK (IN CLASS): Checking Account Balance
5 minutes classwork
Code Runner Challenge
Use the abstraction to deposit $200
View IPYNB Source
%%js
// CODE_RUNNER: Use the abstraction to deposit $200
class BankAccount {
constructor() {
this.balance = 500;
}
deposit(amount) {
this.balance = this.balance + amount;
console.log("💰 Deposited: $" + amount);
}
}
const myAccount = new BankAccount();
// Write code here
// Hint: myAccount.______();
// 3. Check the result
console.log("Final Balance: $" + myAccount.balance);
Code Runner Challenge
Use the inherited methods to make a call and take a photo
View IPYNB Source
%%js
// CODE_RUNNER: Use the inherited methods to make a call and take a photo
class Phone {
makeCall() {
console.log("Making a phone call");
}
}
// Child class
class SmartPhone extends Phone {
takePhoto() {
console.log("Taking a photo");
}
}
const myNewPhone = new SmartPhone();
// Hint: const_name.method();
HOMEWORK HACK
- This is a code of a calculator. Please read through the code first to try and understand what it does. There are many unnecessary lines within the code. Please identify the unnecessary lines and delete them. Also make the first 2 number result in a even number over 5000. The last 2 number make them odd numbers and make sure they are over 6000.
Code Runner Challenge
Homework for data abstraction
View IPYNB Source
%%js
// CODE_RUNNER: Homework for data abstraction
function calculator(num1, num2, operator) {
let nothing = 0;
let randomText = "calculator running";
let temp = null;
nothing = nothing + 0;
nothing = nothing * 1;
let result;
if (randomText === "calculator running") {
temp = "still running";
}
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
} else {
result = "Invalid operator";
}
for (let i = 0; i < 3; i++) {
nothing += 0;
}
result = result;
return result;
}
console.log(calculator(10, 5, "+"));
console.log(calculator(10, 5, "-"));
console.log(calculator(10, 5, "*"));
console.log(calculator(10, 5, "/"));
- Below a pet class is given. Your Job is to add a new subclass, Dog, that inherits from the Pet Class
Code Runner Challenge
Add a Dog subclass
View IPYNB Source
%%js
// CODE_RUNNER: Add a Dog subclass
class Pet {
eat() {
console.log("Nom nom nom");
}
}
// Create the Dog class that extends Pet
// We would also like you to create a method like eat() but called bark() that prints "Woof woof!"
// Refer back to the syntax of the classes examples such as phone and smartphone if you need help!
// Write your code here
7 LESSON REVISION:
The revisions we made were adding examples, key terms and LxD process
8 FEEDBACK EVIDENCE:
add lesson plan, examples and make tables/cleaner
9 REFERENCES:
these are the sites we used to find all of our info. https://www.w3schools.com/java/java_abstract.asp
https://www.geeksforgeeks.org/dbms/what-is-data-abstraction-in-dbms/
these sites were super helpful when trying to understand how data abstraction works and why you would need it in a game.
Submit Assignment
Self-Assessment
Rate your work on this assignment, then add a short reflection. All 5 fields are required before you can submit.
Need to update a submission later? Open the submissions dashboard.