Skip to content

deck.mdx

Latest commit

 

History

History
524 lines (316 loc) · 7.88 KB

deck.mdx

File metadata and controls

524 lines (316 loc) · 7.88 KB

export { comic as theme } from 'mdx-deck/themes' import { Head } from 'mdx-deck' import Footer from 'components/Footer' import Img from 'components/Img'

Hello MagnoliaJS!

Master the JS Interview

Tyler Clark

👋 Nice to meet ya

Full stack software engineer: @pluralsight

Video courses: @eggheadio

Twitter: @iamtylerwclark

This talk won't get you an instant pay raise 🤞

My hope is to help prepare you for common buzzword questions

Be prepared. Be proactive. Believe in yourself. 💪

Be prepared to back it up.

I don’t care if a candidate knows the word “closure” or the technical definition. I want to find out if they understand the basic mechanics. If they don’t, it’s usually a clear indicator that the developer does not have a lot of experience building actual JavaScript applications.

-Eric Elliott

Look more into these concepts afterwards

We simply just don't have the time to go over pros, cons, & implementations

1.) What is a closure?

  • An inner function enclosed by another function
  • A data privacy technique for objects
  • A stateful function

At the core, a closure is a inner function within another function

function parent(a, b) {
  return function closure() {
    const c = 5
    return a + b + c
  }
}

What does that mean about closures?

  • Access to global, parent, and self scope (data privacy)
// ES6
const example = (a, b) => c => a + b + c

Closure Recap

  • Inner function has access to at least three scopes
  • Can hide values within it's own scope

2.) What are curried functions?

Currying: Function that takes multiple arguments one at a time

Curried functions

const func = (a, b) => a + b

func(1, 2) //3

Curried functions takes one argument at a time

const curriedFunction = a => b => a + b

curriedFunction(1)(2) //3

3.) What are partially applied functions?

  • Happens when only some of it's arguments have been applied.

Partially applied functions

const curriedFunction = a => b => a + b

const partiallyApplied = curriedFunction(1)

partiallyApplied is now a closure function with a fixed value of 1

Partially applied functions

const curriedFunction = a => b => a + b

const partiallyApplied = curriedFunction(1)

partiallyApplied(2) // 3

No longer partially applied, the function is complete

Closures, Curried, Partially Applied functions

❤️ ❤️ ❤️

TL&DR

  • Closure: enclosed function within another function with access to at least three scopes
  • Curried: Functions that apply one argument at a time returning another function until final value
  • Partially applied: Returned function with fixed value(s) waiting to be resolved

4.) What is a Pure Function?

Pure Functions

Given the same input, returns same output.

const addFive = (a) => a + 5

addFive(2) // 7
addFive(2) // 7
addFive(2) // 7

! Pure Functions

const addFive = (a) => Math.random()

addFive(2) // 0.796
addFive(2) // 0.484
addFive(2) // 0.433

Pure Functions produce no side effects

const state = { a: 1 }

const addFive = (a) => {
    state.a = a
    return a + 5
}

addFive(2) // 7
addFive(2) // 7

Bullets on Pure Functions

  • Deterministic, testable
  • Legos, building blocks, should be favored over other options
  • Independent of outside state. Foundation of functional programming

5.) What is Recursion?

A function that directly or indirectly calls itself_

Recursion

const counter = (n) => {
    for (let i = n; i <= 10; i++) {
        console.log(i)   // 0,1,2,3... 10
    }
}

counter(0)

Recursion

const counter = (n) => {
    console.log(n)   // 0,1,2,3... Infinity
    return counter(n+1)
}

counter(0)

Recursion

  • Works on a call stack, first in is last out
  • Always needs a base case or it will throw an error / lock up (stack overflow)

Recursion

const counter = (n) => {
    console.log(n)  // 0,1,2,3... 10
    if (n === 10) return // base case
    return counter(n+1)
}

counter(0)

What is the difference between class and prototypal inheritance?

Answer: Class inheritance is a parent / child relationship. Protoypes are objects linking to other objects

What is inheritance?

  • Code reuse pattern (Gorilla/banana scenario)
  • For example [].map(), [].filter(), [].reduce() work

Class Inheritance

  • Classes are like blueprints
  • Involve the new keyword, constructors, instances from blueprints
  • Parent / Child relationships

Prototypal Inheritance

  • Prototypes are Objects
  • All Objects have an auto created property (__proto__)
  • ES6 JS classes still use prototypal inheritance

Recap 👊

  • Closures
  • Curried functions
  • Partially applied functions
  • Pure functions
  • Recursion
  • Class vs. Prototypal Inheritance

Links