Scribd
Upload
45 views

1 - JSHP - Callbacks and Higher Order Functions

The document provides an overview of the 5 capacities that candidates are assessed on during the Codesmith interview process. It also outlines some of the principles and expectations at Codesmith, including engineering empathy. The document then discusses the key topics that will be covered, including functional programming concepts like higher-order functions and callbacks. It explains how JavaScript executes code and handles function calls using an execution context and call stack. Examples are provided to illustrate concepts like pure functions, generalization of functions, and how callbacks and higher-order functions allow for asynchronous code execution and keep code DRY. Completing a "Hard Parts Challenge Code" guarantees an interview for Codesmith.

Uploaded by

edo jarror
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

1 - JSHP - Callbacks and Higher Order Functions

The document provides an overview of the 5 capacities that candidates are assessed on during the Codesmith interview process. It also outlines some of the principles and expectations at Codesmith, including engineering empathy. The document then discusses the key topics that will be covered, including functional programming concepts like higher-order functions and callbacks. It explains how JavaScript executes code and handles function calls using an execution context and call stack. Examples are provided to illustrate concepts like pure functions, generalization of functions, and how callbacks and higher-order functions allow for asynchronous code execution and keep code DRY. Completing a "Hard Parts Challenge Code" guarantees an interview for Codesmith.

Uploaded by

edo jarror
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

The 5 capacities we look for in candidates

1. Analytical problem solving with code


2. Technical communication (can I implement your
approach just from your explanation)
3. Engineering best practices and approach (Debugging,
code structure, patience and reference to documentation)
4. Non-technical communication (empathetic and
thoughtful communication)
5. Language and computer science experience
Our expectations

— Support each other - engineering empathy is the


critical value at Codesmith
— Work hard, Work smart
— Thoughtful communication
JavaScript the Hard Parts -
Callbacks and Higher Order
Functions
Or how to become a functional programming star
Principles of JavaScript

In JSHP we start with a set of fundamental principles

These tools will enable us to problem solve and


communicate almost any scenario in JavaScript

— We'll start with an essential approach to get


ourselves up to a shared level of understanding
— This approach will help us with the hard parts to
come
What happens when javascript executes (runs) my code?

const num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const name = "Will"

As soon as we start running our code, we create a global execution


context

— Thread of execution (parsing and executing the code line after line)
— Live memory of variables with data (known as a Global Variable
Environment)
Running/calling/invoking a function

This is not the same as defining a function

const num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const name = "Will"

const output = multiplyBy2(num);


const newOutput = multiplyBy2(10);

When you execute a function you create a new execution context comprising:

1. The thread of execution (we go through the code in the function line by line)
2. A local memory ('Variable environment') where anything defined in the function is stored
We keep track of the functions being called in JavaScript
with a Call stack

Tracks which execution context we are in - that is, what


function is currently being run and where to return to
after an execution context is popped off the stack

One global execution context, multiple function


contexts
Functional Programming
Functional programming core features

1. Pure functions (no side effects)


2. 'Higher order functions' - highly valuable tool &
often part of the Codesmith interview
Create a function 10 squared

Takes no input

Returns 10*10

How do we do it?
tensquared

function tensquared(){
return 10*10;
}
tensquared(); // 100
Now let's create a function that returns 9 squared

function ninesquared(){
return 9*9;
}
ninesquared(); // 81

Now 8 squared...and so on

...

We have a problem - it's getting repetitive, we're breaking our DRY principle

What could we do?


We can generalize the function

function squareNum(num){
return num*num;
}
squareNum(10); // 100
squareNum(9); // 81
We’ve generalized our function

Now we're only deciding what data to apply our


multiplication functionality to when we run our
function, not when we define it

We're going to see later on that our higher order


functions follow this same principle - that we may not
want to decide exactly what our functionality is until we
run our function
Pair Programming

Answer these:

— I know what a variable is


— I've created a function before
— I've added a CSS style before
— I have implemented a sort algorithm (bubble, merge etc)
— I can add a method to an object’s prototype
— I understand the event loop in JavaScript
— I understand 'callback functions'
— I’ve implemented filter from scratch
— I can handle collisions in hash tables
Now suppose we have a function copyArrayAndMultiplyBy2. Let's diagram it out

function copyArrayAndMultiplyBy2(array) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(array[i] * 2);
}
return output;
}
const myArray = [1,2,3]
const result = copyArrayAndMultiplyBy2(myArray)
What if want to copy array and divide by 2?

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

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

What principle are we breaking?


We're breaking DRY
What could we do?
We could generalize our function so that we pass in our
specific instruction only when we run the
copyArrayAndManipulate function!

function copyArrayAndManipulate(array, instructions) {


const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}

function multiplyBy2(input) {
return input * 2;
}

const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);


Back to pairing
How was this possible?
Functions in javascript = first class objects

They can co-exist with and can be treated like any other
javascript object

1. assigned to variables and properties of other objects


2. passed as arguments into functions
3. returned as values from functions
Callback vs. Higher-order function

function copyArrayAndManipulate(array, instructions) {


const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}

function multiplyBy2(input) {
return input * 2;
}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

Which is our callback function?

Which is our higher order function?


Callback vs. Higher-order function

function copyArrayAndManipulate(array, instructions) {


const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}

function multiplyBy2(input) {
return input * 2;
}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

The function we pass in is a callback function

The outer function that takes in the function (our callback) is a higher-order function
Higher-order functions

Takes in a function or passes out a function

Just a term to describe these functions - any function


that does it we call that - but there's nothing different
about them inherently
So callbacks and higher order
functions simplify our code and
keep it DRY
And they do something even more powerful

They allow us to run


asynchronous code
The Hard Parts Challenge Code
!"#
— We created the Hard Parts Challenge code to
guarantee an interview for the Hard Parts community
members
— We invite ~35% of regular online applications to
interview. Completion of the Hard Parts challenge
code guarantees interview for Codesmith
— It builds upon the content you worked on today
— Drinks now

You might also like