Fàilte

Welcome

Is mise Cory

I'm Cory

'S e innleadair bathar bog aig Aumni a th' ann

I am a software engineer at Aumni

Tha mi an dòchas gu bheil sibh deiseil airson seo.

Y'all  ready for this?

The Incredible P{}J{}

# Objects in JS

Nearly everything in JavaScript is an object.

  • {} instanceof Object // true

  • [] instanceof Object // true

  • new Class() instanceof Object // true

  • new Func() instanceof Object // true

  • new Map() instanceof Object // true

  • new WeakMap() instanceof Object // true

  • new Set() instanceof Object // true

  • new WeakSet() instanceof Object // true

  • new WeakRef() instanceof Object // true

  • class {} instanceof Object // true

  • function () {} instanceof Object // true

  • Function instanceof Object // true

  • () => {} instanceof Object // true

  • Map instanceof Object // true

  • WeakMap instanceof Object // true

  • WeakSet instanceof Object // true

  • WeakRef instanceof Object // true

# Objects in JS

Except
Primitives

 'hello'
 0
 0n
 false
 undefined
Symbol('hello')
 null

Not Even
Excepting
Primitives

('hello').at(0) // 'h'
(0).toFixed(0) // '0.00'
(0n).valueOf() // '0n'
(false).toString() // 'false'
(undefined).toString() // 'undefined'
Symbol('hello').description // 'hello'
(null).toString() // 'null'
Object Construction

Object construction

Strap on your work boots, put on your saftey glasses and grab your hard hats, cuz we're going object constructing.

Object Construction

Ways to make an object

  • literal
  • function factory
  • function constructor
  • classes
Object Construction

Ways to make an object of a given shape

  • literal
  • function factory
  • function constructor
  • classes
{ name: 'fabulous' }
Object Construction

Ways to make an object of a given shape

  • literal
  • function factory
  • function constructor
  • classes
class FabClass {
  name = fabulous;
}
Object Construction

Ways to make an object of a given shape

  • literal
  • function factory
  • function constructor
  • classes
FabConstructor () { 
  this.name = 'fabulous';
}
Object Construction

Ways to make an object of a given shape

  • literal
  • function factory
  • function constructor
  • classes
const fabFactory = () => ({ name: 'fabulous' })
Object Construction

Ways to make an object of a given shape

  • literal
  • function factory
  • function constructor
  • classes

{}

Plain Old JavaScript Object

() => ({})

POJO Factory

Epic Battle of awesome! 

Classes

JavaScript Class Constructor

class BeautifulObjectClass {
  isMagnificent = true

  constructor(marvelousness = 11) {
    this.marvelousness = marvelousness
  }
}

const myBeautifulObject = new BeautifulObjectClass()

myBeautifulObject.isMagnificent // true
myBeautifulObject.marvelousness // 11
Class Constructor

JavaScript Factory Function

const beautifulFactory = (marvelousness = 11) => ({
  marvelousness,
  isMagnificent: true
})
  
const myBeautifulObject = beautifulFactory()

myBeautifulObject.isMagnificent // true
myBeautifulObject.marvelousness // 11
Class Constructor

All the things

// Base "class"
const superFactory = (name) => ({

  // Any propery on the "super" object will be a part of the final object
  superProp: '🦸',

  // Same for methods.
  someSuperMethod() {
    console.log(`I'm ${name}!`)
  },

  // We can implement methods meant to be overridden (but should we?)
  someOverrideMethod() {
    throw new Error('Not Implemented')
  }
});

// Function arguments are like constructor arguments
const finalFactory = (configProp) => {
  // private things live outside the return value
  const privateProp = '🔐';

  // internal state
  let accessCount = 0
  let history = [configProp]


  return {
    // We mimic inheritance by spreading the result of the pseudo base class
    ...superFactory('super'),

    // override a method from the pseudo base class
    someOverrideMethod() {
      console.log(`I override the method of the same name in superFactory`)
    },

    // regular object property
    finalProp: '🪦',

	// regular object method
    someMethod() {
      console.log(`I'm only a member of the finalFactory object`);
    },

    // a property with just a getter cannot be overridden
    get finalProp() {
      return privateProp;
    },
    
    // a properties with a getter and a setter can perform side effects
    get configProp() {
      accessCount++
      return configProp;
    },

    // It can also keep state.
    set configProp(newVal) {
      history.push(newVal)
      configProp = newVal;
    },
    
    // We can have dynamic keys.
    get [finalFactory.historyKey]() {
      return history;
    }

  }
}

// Static methods and properties are a thing too.
finalFactory.historyKey = Symbol('history');
# JS POJO

The POJO is a many splendored thing

const object = {};

const factory = () => ({});

const language = {
  name: 'JavaScript'
};

const languageFactory = () => ({
  name: 'JavaScript'
});

const languageFactory = (name) => ({ name });
const js = languageFactory('JavaScript') // { name: 'JavaScript' }

# JS POJO

Embed Editable Code from CodePen

# PRESENTING CODE
// This slide uses Auto-Animate to animate between
// two different code blocks
const distanceBetween = ( p1, p2 ) => {
 // TODO
}

distanceBetween([10,10], [50,50])
# PRESENTING CODE

Code Transitions

// Measure the distance between two points
const distanceBetween = ( p1, p2 ) => {
  const dx = p1[0]-p2[0];
  const dy = p1[1]-p2[1];

  return Math.sqrt( dx*dx + dy*dy );
}

distanceBetween([10,10], [50,50])
# PRESENTING CODE

Code Transitions

# CHAPTER 2

Our Services

We offer a variety of services and plans tailored to business needs of any kind and of any size.

Process

Ideation

During the ideation phase, expect to discuss the project in depth to clearly understand the goals and requirements.

1.

2.

Build

Our team makes each part of the build phase seamless with regular check-ins and deliverables.

3.

Launch

It's time to take the product live - the end if the build phase but the beginning of being in market.

# CHAPTER 2
# CHAPTER 2

Team & Background

Our design team has a collective 75 years of experience in crafting digital products. Our diverse backgrounds offer a thorough mix of points of view.

Meet the Team

COO

George

CEO

Elaine

Advisor

Susan

With built-in \( \LaTeX \) typesetting, you can include math formulas like this:

f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi
  • Conceptualization
  • Product Design
  • Development
  • UI/UX Testing
  • Branding

Our Services

SOLO

Price $149 /mo

One project

Two designs

7-day turnaround

Premium support

PRO

Price $299 /mo

Up to three projects

Three designs/project

7-day turnaround

Premium support

NEW

PREMIUM

Price $599 /mo

Up to five projects

Five designs/project

3-day turnaround

24/7 support

Services & Pricing

Available 24/7

Contact us at +01 555 0194

1

Discovery of requirements for a project.

2

Research into the project space, competitors and the market.

3

Creating a Plan that sets the requirements for the design and build phases.

5

Review and Iterate on the designs with testing of ideas, client feedback and prototypes.

4

Design a number of iterations that capture the plans and requirements.

6

Build the project to an MVP to test and evaluate. Iterate using these learnings.

ACME Offices

Country City Contact
USA Los Angeles +1 555 0194
USA New York +1 555 0142
Sweden Stockholm +46 555 0077
UK London +44 555 0211
South Korea Seoul +82 555 0138

Get in touch

Our team is ready to hear about your project. We're available by email or phone 24/7

+1 555 0194

The Incredible POJO

By Cory Brown

The Incredible POJO

  • 84