JavaScript the Hard Parts 07-18


Pure Functions

Functional Programming core categories

  • Functional Programming is a paradigm : it is a means of structuring and thinking about how we write our code at scale
    • ‘Scale’ : “Can other developers see my code and quickly add features to it bc it was written in clean, standardized manner
    • Popular paradigm : Object Oriented Programming
    • Alternative way of structuring code such that is easy to think about, reason about and understand… and add features for other developers
  • Are First Class Citizens
  • Are Immutable : Once a variable with data is created, you cannot change it.
  • Pure Functions : Functions will have No side effects except one consequence which gets determined only by the return value. (Not mutating any global value)
const num = 3;
function multiplyBy2(inputNumber){
  const result = inputNumber * 2;
  return result;
const output = multiplyBy2(4);
const newOutput = multiplyBy2(10);
  • multiplyBy2(4) only has one consequence : return value 8

Higher Order Functions

Why do we have Higher Order Functions? (metaphor)

  • ex) Create a function for 10 squared
    • no input, returns 10*10
function tensquared(){
    return 10 * 10;
tensquared(); // 100
  • Only write out the functionality once
  • 9 squared, 8 squared… will all be separate functions
function ninesquared(){
	return 9 * 9; 
ninesquared(); // 81
  • Repetitive

How can we clean up repetitive code?

We can Generalize our function

function squareNum(num){
    return num * num;
squareNum(10); // 100
squareNum(9); // 81
  • By leaving a placeholder(parameter), we Generalize our function
    • We may not want to decide exactly what our functionality is until we run our function

Pair Programming

Learning diagram

  • At some point, a Spoon-fed approach(Easier learning) will create a plateau in your learning
  • To become autonomous, you need to dive into Harder learning…
    • Try building a project
    • Solving code problems
    • Begin an online course
    • At some point, you’ll hit a block with Harder learning
      • You grow as a communicator
      • You grow as a problem-solver
      • But… you tend to give up
    • While through Harder learning, you can hit
      • The Researcher Trap : You’re doing Hard learning but you’re not actually doing it
      • The Stack Overflow Approach : You copy and paste S/O snippets to just make stuff work
    • Pair Programming will help avoid the traps above:
      • You come up with an approach, and your partner will interpret your pseudocode and create actual code
        • You are forced to learn materials and have the ability to explain while walking through them
      • Stages:
        • Two ‘Researcher stage’ : Partners research a topic
        • ‘Driver-Navigator stage’ : Driver talks through an approach(communication), Navigator executes it
          • Do not be double Driver-Navigator
        • Debug as a pair

Const and Let

  • Use const for everything:
    • objects, arrays, numbers, strings …
  • Unless we know we are specifically gonna take what data’s in there right now and replace it
    • use let

Parameterizing Functions

function copyArrayAndMultiplyBy2(array) {  
	let output = [];  
	for (let i = 0; i < array.length; i++) { 
 		output.push(array[i] * 2); } 
 			return output; 
const myArray = [1,2,3];
let result = copyArrayAndMultiplyBy2(myArray);

What if we want to copy the array and divide it by 2?

function copyArrayAndDivideBy2(array) {
  let output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] /2);
  return output;
const myArray = [1,2,3]
let result = copyArrayAndDivideBy2(myArray);

Or add 3?

function copyArrayAndAdd3(array) {
  let output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] +3);
  return output;
const myArray = [1,2,3]
let result = copyArrayAndAdd3(myArray);

We are breaking a rule : DRY (Don’t Repeat Yourself) The DRY principle is stated as “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system” 1

Generalizing Functions, Passing Functions

  • We could generalize our function so that we pass in our specific instruction only when we run the copyArrayAndManipulate() function.
function copyArrayAndManipulate(array, instructions) {
  let output = [];
  for (let i = 0; i < array.length; i++) {
  return output;
function multiplyBy2(input) {
  return input * 2;
let result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
  • Add a parameter that specifies a non-repetitive part from a repetitive function

First-Class Object

How can instructions above be a function? Why can we pass a function as a parameter in JS?

  • Functions in JavaScript are First Class Objects
    • They behave like objects
    • They can co-exist with and can be treated like any other JS object
    • How?
      • They can be assigned to variables and properties of other objects(method)
      • They can be passed as arguments into functions
        • A **Parameter** is variable in the declaration of function. myFunction(param){}
        • An **Argument** is the actual value of this variable that gets passed to function. myArg = 'this is an argument'; myfunction(myArg);
      • They can be returned as values from functions
        • Returning functions from a function : Closure