Super A is for Abstraction
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.
