Computer Science & Software Engineering
Data Abstraction!
What is Data Abstraction??
IMAGINESimply driving a steering wheel without understanding how the parts inside work. This is exactly what Data Abstraction is.
Data Abstraction simplifies complex systems by showing only the essential features and hiding complex details, so users can easily understand and interact with systems or apps!
It focuses on *what* something does rather than *how* it does it.Example #1: Rounding numbers
One example is built-in functions in JavaScript, because they allow you to use one simple, clear command to run a type of function, but don’t show how the built-in function was coded.
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!
Example #2: Adding two numbers
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.
Example #3: Checking Account Balance
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);
Inheritance
In programming, Inheritance allows one class (called a subclass / child class) to "borrow" features (properties and methods) from another class (the adult).
Real World Example: SmartphoneThe Parent Class: A basic phone that can make calls
The Child Class: An iPhone that inherits the ability to make phone calls, but adds its own features
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
- 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.
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