Group: Penguins

tux

Who is teaching

Role Name
📋 Assistant Scrum/Engineer Jonah Larsson
🧪 Tester Aarush Bandi
💻 Engineer/Finisher Sri Rohit Varma Datla

Download homework:

As a prerequisite, download the homework ipynb and put it in your portfolio repo so you can work along with the lesson.

The download link will send you to a github page with the ipynb, click the download button in the top right corner of the text box to download the ipynb.

Download Homework

JS Data Abstraction Lesson

What is Data Abstraction?

Data abstraction is a concept in programming that focuses on hiding the full implementation of something with a simpler interface, making this thing reusable and easier to use. Examples:

  • Classes
  • Abstract classes
  • Abstract methods
  • Inheritance
  • Functions
  • Much more

Different types of data abstraction

Example #1: Functions

function declareWinner(winner){
  winnerMsg.textContent = `${winner} Wins!`;
  running = false;
}

Take, for example, this function found in the pong game. Inside the curly braces (“{}”) resides the implementation of the function. Put simply, this function prints out who won the game on screen. Then, it ends the game by setting the “running” boolean to false. The part where data abstraction starts is actually in the function declaration; Instead of having to write the code inside the function every time you want to end the game, a function is declared with a parameter called “winner”. Now, when you want to declare a winner you can simply write:

declareWinner(player1);

Note: The variable “player1” can be replaced with any other variable that satisfies the function.

In Short: This is data abstraction due to the fact that the code inside of the function is hidden and instead interfaced with a simple function call.

Popcorn hack 1

Try completing popcorn hack 1 on the homework page: Homework Page

Example #2: Classes

There is a nice analogy for classes: think of them as blueprints. A class simply outlines the different elements of something, then later in code you can make an object of that class.

Example scenario:

  • Class -> Blueprint for a house
  • Object -> A house made from that blueprint


An example of classes in code

class Game {

  // constructor of the class, initialize the object
  constructor(game, creator, year) {
    this.game = game;
    this.creator = creator;
    this.year = year;
  }

  // displays what game is
  displayInfo() {
    console.log('This game is ${this.game}, made by ${this.creator}, and made in ${this.year}`);
  }
}

// making an object of the class
let videoGame = new Game("Tetris", "Alexey Pajitnov", "1992");

// calling a function on the object
videoGame.diplayInfo(); // outputs "This game is Tetris, made by Alexey Pajitnov, and made in 1992"


Line by line:

Code block Meaning
class Game creating the blueprint for a game
constructor(game, creator, year) a constructor simply allows you to do some initialization steps the moment you create an object of a class
displayInfo() this is simply a function, but typically functions that are members of classes are called "methods"
let videoGame = new Game("Tetris", "Alexey Pajitnov", "1992"); this defines a variable "videoGame" and creates an object of the class with "new Game". Notice that the `("Tetris", "Alexey Pajitnov", "1992") is the constructor being called
videoGame.diplayInfo(); calls the displayInfo method on the videoGame object


One very important thing to realize is that the class is just a blueprint. The class will never have any operations done on it, only the objects of the class can do this. (You can’t drive a blueprint of a car) This also means that objects are separate, so each object has its own data. Meaning that if you call “displayInfo()” on one object, it will only call it on that object, not any others.


In Short: This is data abstraction because all of the variables and functions inside the class are being hidden, and instead are used by interacting with objects of the class.

Popcorn hack 2

Try completing popcorn hack 2 on the homework page: Homework Page

Example #3: Inheritance

Inheritance is one of the more advanced OOP topics:

Essentially, inheritance allows a class to get access to the elements of a parent class.

// base (parent) class
class Shape
{
	constructor(_size)
	{
		this.size = _size;
	}

	Show()
	{
		// code for creating shape
	}
}

// inherited (child) class
class Square extends Shape
{
	constructor(_size, _color)
	{
		super(_size);
		this.color = _color;
	}

	ShowSquare()
	{
		this.Show();
	}
}

So, we have a base class called Shape. Shape has these members:

  • variable ‘size’
  • method ‘Show()’

We also have the class Square which inherits Shape using the keyword ‘extends’. Square has these members:

  • variable ‘size’
  • variable ‘color’
  • method ‘Show()’
  • method ‘ShowSquare()’

The Square class “inherits” all of the Shape class’s members. So, not only does it have its own members, but it also has its parent class’s members too.

Then, Square accesses its members it inherited using “super” and “this”. To use the parent constructor, square calls “Super(_size)”, which sends this parameter to the parent constructor. Also, Square calls the original “Show()” function by using “this.Show()”.

Homework

Homework download:

Put this .ipynb file into your portfolio repository, follow the instructions on the .ipynb to finish the homework.

The download link will send you to a github page with the ipynb, click the download button in the top right corner of the text box to download the ipynb.

Make sure to submit your homework deployed link onto the global homework submission google sheet

Homework Page
Download Homework
Submission Google Form for Homework