Giter Club home page Giter Club logo

js-hof-callbacks's Introduction

Higher Order Functions & Callbacks

Getting Started

  1. Fork this repo and git clone it down to your computer
  2. Create two files index.html and script.js
  3. Include script.js in index.html using a <script> tag
  4. Open index.html in your web browser and open the console
  5. After answering each section below, git commit your work
  6. When you're finished or when time is up, push your work to your remote repo, and file a Pull Request

Callback Drills

Follow these steps:

  1. Create a function that takes a parameter and logs it
  2. Create a second function that logs 'hi'
  3. Call the first function, passing in the second function as an argument
  4. You should see a function reference being logged
  5. Alter the first function so that it calls its parameter
  6. If you did these steps correctly, you should get a log of 'hi'

Guess the Log

Write your guesses as a comment in script.js. Run the code after you guess to see if you were correct.

  1. Guess what this will log:

    const foo = (param, param2) => {
      param(param2)
    }
    
    const bar = (param) => {
      console.log(param)
    }
    
    foo(bar, 'hi')
  2. Guess what this will log:

    const foo = (param1, param2) => {
      param1(param2)
    }
    
    const baz = (param) => {
      console.log(param.toUpperCase())
    }
    
    foo(baz, 'hello')
  3. Guess what this will log:

    const foo = (param, param2) => {
      param(param2, 'hello')
    }
    
    const bar = (param, param2) => {
      console.log(param2)
    }
    
    foo(bar, 'hi')

Electric Mixer

electric mixer

A callback is like an electric mixer attachment. Each mixer attachment does something different: slice, dice, spiralise, and all sorts of fancy things depending on the attachment.

The electric mixer also does something: it uses the mixer attachment.

  1. Write a function electricMixer that takes one parameter named attachment. The electricMixer function should console log "This mixer is now: _____" plus the return value of the attachment.

  2. Write at least 3 attachments for the electric mixer. Each attachment is a function that returns what it's doing.

    i.e.

    const spiraliser = () => {
      return "spiralising"
    }
  3. Call electricMixer 3 or more times, passing in each of your attachments as arguments.

Example:

electricMixer(spiraliser)
electricMixer(dicer)
electricMixer(grinder)

// Console should show:
// "This mixer is now: spiralising"
// "This mixer is now: dicing"
// "This mixer is now: grinding meat"

js-hof-callbacks's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.