Super A is for Abstraction

Photo by Pixabay from Pexels

Source code is written in a programming language as instructions to be executed by a computer to perform a task. In JavaScript, a popular programming language, a single line of code could be:

document.getElementById(“grad”).innerHTML = “<div>Wendy Raven McNair, you are awarded this certificate of completion as a Software Engineer for successfully completing all certification requirements.</div>”

This line of code could be used to print out a Software Engineer certificate for me. Which is great, if I’m the only person to ever complete a Flatiron program and Software Engineering was the only program it offered. Spoiler, I’m not and it’s not.

Hard coding my name and program would require repeating the code snippet above and hard coding each student and their program in place of mine.

This is where abstraction comes into play. Rather than hard coding information, we can create a function that will abstract the specific name and program out and treat them like variables. The function parameters could be name and program and they would reside inside the declaration parenthesis ( ) and the curly braces { } as shown below:

function printCertificate(name, program) {
document.getElementById(“grad”).innerHTML = `<div>${name}, you are awarded this certificate of completion as a ${program} for successfully completing all certification requirements.</div>`

Note that instead of quotation marks, back ticks are necessary along with using the dollar sign and curly braces that wrap the variable in order to interpolate or print out the specific name of each student and their specific program.

To invoke the function, the function name printCertificate would be used with the specified arguments inside of the invocation operator ( ). The order matters so the student’s actual name would have to line up with the parameter name and the student’s actual program would line up with the parameter program as indicated below:

correct => printCertificate(“Abraham Jackson”, “Data Scientist”)

incorrect => printCertificate(Data Scientist”, “Abraham Jackson”)

When the invocation or function call is made, it will print out a certificate with Abraham’s name and program. This abstraction enables us to print out a variety of certificates for graduates using a single function and the printCertificate call.

React allows the process to be abstracted even more, updating the real DOM (Document Object Model), responsible for the views users see in their computer browser, with changes made to a Virtual DOM. React is a front end JavaScript library that automatically re-renders what’s seen in the computer browser without programmers explicitly writing things like document.getElementById into the code.

React maintains a Virtual DOM which is like a template or blueprint of the real DOM. Whenever there is a change to the Virtual DOM, React compares it to a snapshot of the real DOM. Then it figures out the minimal change necessary to update the real DOM and only updates the specific changes.

React compiles the JSX ( XML/HTML-like syntax used by React; JSX allows us to put HTML into JavaScript) into React.createElement( ). This frees Programmers from writing extra code listing these instructions because React has abstracted these processes away.

Abstraction is very powerful so it should be understood and used only for good.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing Smart Contracts with Ownable Inheritance in Typescript & Hardhat

RootMe (TryHackMe)Room

Recap Javascript Fundamental Concept

CQRS From Scratch With TypeScript

Creating a Peer-to-Peer Web App with OrbitDB and StencilJS (Part 3)

Journeying To Codeland 2019

How I Build My First Jamstack Website

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wendy Raven McNair

Wendy Raven McNair

More from Medium

Phase 3 — Ruby with a Little React

Building a Messaging Feature in Rails & React

Old Habits Die Hard, But Getting New Ones is Essential. Tips on Getting the Most Out of TypeScript

ESlint, Prettier, EditorConfig and Husky For react typescript Project