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
Frontend Masters
Javascript the Hard Parts -
Object-oriented JavaScript
OOP - an enormously popular paradigm for structuring our
complex code
— Easy to add features and functionality
— Easy for us and other developers to reason about (a
clear structure)
— Performant (efficient in terms of memory)
We need to organize our code as it gets more complex
so it's not just an endless series of commands
Let's suppose we're building a quiz game with users
Some of our users
Name: Phil
Score: 4
Name: Julia
Score: 5
Functionality
+ Ability to increase score
What would be the best way to store this data and
functionality?
Objects - store functions with their associated data!
const user1 = {
name: "Phil",
score: 4,
increment: function() {
[Link]++;
}
};
[Link](); //[Link] => 4
This is the principle of encapsulation.
Let's keep creating our objects
Note we would in reality have a lot of different relevant
functionality for our user objects
— Ability to increase score
— Ability to decrease score
— Delete user
— Log in user
— Log out user
— Add avatar
— get user score
— … (100s more applicable functions)
What alternative
techniques do we have for
creating objects?
Creating user2 user 'dot notation'
const user2 = {}; //create an empty object
[Link] = "Julia"; //assign properties to that object
[Link] = 5;
[Link] = function() {
[Link]++;
};
Creating user3 using [Link]
const user3 = [Link](null);
[Link] = "Eva";
[Link] = 9;
[Link] = function() {
[Link]++;
};
Our code is getting repetitive, we're breaking our DRY principle
And suppose we have millions of users!
What could we do?
Solution 1. Generate objects using a function
function userCreator(name, score) {
const newUser = {};
[Link] = name;
[Link] = score;
[Link] = function() {
[Link]++;
};
return newUser;
};
const user1 = userCreator("Phil", 4);
const user2 = userCreator("Julia", 5);
[Link]()
Problems:
Each time we create a new user we make space in our
computer's memory for all our data and functions. But
our functions are just copies
Is there a better way?
Benefits:
It's simple and easy to reason about!
Solution 2:
Store the increment function in just one object and
have the interpreter, if it doesn't find the function on
user1, look up to that object to check if it's there
How to make this link?
Using the prototype chain
const functionStore = {
increment: function(){[Link]++;},
login: function(){[Link]("You're loggedin")}
};
const user1 = {
name: "Phil",
score: 4
}
[Link] // name is a property of user1 object
[Link] // Error! increment is not!
Link user1 and functionStore so the interpreter, on not finding .increment,
makes sure to check up in functionStore where it would find it
Make the link with [Link]() technique
const user1 = [Link](functionStore)
user1 // {}
[Link] // function....
Interpreter doesn't find .increment on user1 and
looks up the prototype chain to the next object and
finds .increment 1 level up
Solution 2 in full
function userCreator (name, score) {
const newUser = [Link](userFunctionStore);
[Link] = name;
[Link] = score;
return newUser;
};
const userFunctionStore = {
increment: function(){[Link]++;},
login: function(){[Link]("You're loggedin");}
};
const user1 = userCreator("Phil", 4);
const user2 = userCreator("Julia", 5);
[Link]();
Problem
No problems! It's beautiful
Maybe a little long-winded
const newUser = [Link](functionStore);
...
return newUser
Write this every single time - but it's 6 words!
Super sophisticated but not standard
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
Object Oriented JavaScript Pair Programming Challenges
[Link]
— Unit 6: Object Oriented Programming
— Gives you tests to check your answers
[Link]/OOP
— No login needed
Solution 3 - Introducing the keyword that automates the
hard work: new
const user1 = new userCreator("Phil", 4)
When we call the constructor function with new in front we automate 2 things
1. Create a new user object
2. return the new user object
But now we need to adjust how we write the body of userCreator - how can we:
— Refer to the auto-created object?
— Know where to put our single copies of functions?
The new keyword automates a lot of our manual work
function userCreator(name, score) {
const newUser = [Link](functionStore);
newUser [Link] = name;
newUser [Link] = score;
return newUser;
};
functionStore [Link] // {};
functionStore [Link] = function(){
[Link]++;
}
let user1 = new userCreator("Phil", 4);
Interlude - functions are both objects and functions :/
function multiplyBy2(num){
return num*2
}
[Link] = 5
multiplyBy2(3) // 6
[Link] // 5
[Link] // {}
We could use the fact that all functions have a default property
on their object version, ’prototype’, which is itself an object - to
replace our functionStore object
Complete Solution 3
function UserCreator(name, score){
[Link] = name;
[Link] = score;
}
[Link] = function(){
[Link]++;
};
[Link] = function(){
[Link]("login");
};
const user1 = new UserCreator(“Eva”, 9)
[Link]()
Benefits
— Faster to write
— Still typical practice in professional code
— 99% of developers have no idea how it works and
therefore fail interviews
— We have to upper case first letter of the function so
we know it requires ‘new’ to work!
What if we want to organize our code inside one of our
shared functions - perhaps by defining a new inner
function
function UserCreator(name, score){
[Link] = name;
[Link] = score;
}
[Link] = function(){
function add1(){
[Link]++;
}
// const add1 = function(){[Link]++;}
add1()
};
[Link] = function(){
[Link]("login");
};
const user1 = new UserCreator(“Eva”, 9)
[Link]()
We need to introduce arrow functions - which bind this
lexically
function UserCreator(name, score){
[Link] = name;
[Link] = score;
}
[Link] = function(){
const add1 = ()=>{[Link]++}
add1()
};
[Link] = function(){
[Link]("login");
};
const user1 = new UserCreator(“Eva”, 9)
[Link]()
Solution 4
We’re writing our shared methods separately from our
object ‘constructor’ itself (off in the [Link]
object)
Other languages let us do this all in one place. ES2015
lets us do so too
The class ‘syntactic sugar’
class UserCreator {
constructor (name, score){
[Link] = name;
[Link] = score;
}
increment (){
[Link]++;
}
login (){
[Link]("login");
}
}
const user1 = new UserCreator("Eva", 9);
[Link]();
Benefits:
— Emerging as a new standard
— Feels more like style of other languages (e.g. Python)
Problems
— 99% of developers have no idea how it works and
therefore fail interviews
You won't be one of them!
JavaScript uses this proto link to give objects, functions
and arrays a bunch of bonus functionality. All objects by
default have __proto__
const obj = {
num : 3
}
[Link] // 3
[Link]("num") // ? Where's this method?
[Link] // {hasOwnProperty: FUNCTION}
— With [Link] we override the default __proto__ reference to
[Link] and replace with functionStore
— But functionStore is an object so it has a __proto__ reference to
[Link] - we just intercede in the chain
Arrays and functions are also objects so they get access to
all the functions in [Link] but also more
goodies
function multiplyBy2(num){
return num*2
}
[Link]() //Where is this method?
[Link] // {toString : FUNCTION, call : FUNCTION, bind : FUNCTION}
[Link]("score") // Where's this function?
[Link].__proto__ // [Link] {hasOwnProperty: FUNCTION}
Object Oriented JavaScript Pair Programming Challenges
[Link]
— Unit 6: Object Oriented Programming
— Gives you tests to check your answers
[Link]/OOP
— No login needed
Subclassing
We can achieve this in
JavaScript in Solution 2, 3
and 4
Interlude - We have another way of running a function that
allow us to control the assignment of this
const obj = {
num: 3,
increment: function(){[Link]++;}
};
const otherObj = {
num: 10
};
[Link](); // [Link] now 4
[Link](otherObj); // [Link] now 11
// [Link](otherObj);
this always refers to the object to the left of the dot on which the function (method) is
being called - unless we override that by running the function using .call()
or .apply() which lets us set the value of this inside of the increment function
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
