Actions in JavaScript (75 mins)

Objectives

These objectives are crafted using Bloom's Taxonomy
Please refer to this action verb list when adding or updating objectives

• Use and create functions in JavaScript

Functions (15 mins)

Why use functions?

• [ ] :speaking_head: Tell students when we write lines of code, each line does a specific thing, it completes an action for us
• [ ] :speaking_head: Tell students that when we group these together we can declare a function and add them all to the block
• [ ] :speaking_head: Tell students another reason to write a function is if we are writing the same code multiple times
• [ ] :speaking_head: Tell students that if we find ourselves doing this we might group that code together and give it a name to make it more readable
• [ ] :speaking_head: Tell students that named functions are blocks of code that we can give a name and access again later
• [ ] :exclamation: Advise students that naming functions is an art, keep it simple and descriptive for now

:question: Where can we get functions from?
A: In-built functions, libraries, custom

• [ ] :speaking_head: Tell students there are 3 ways functions are available to us!
• [ ] :speaking_head: Tell students the first are built in functions
• [ ] :speaking_head: Tell students that these are the ones that are so fundamental to a programming language they come built into its core
• [ ] :grey_question: Ask students to name some in-built functionality they've seen so far
• [ ] :exclamation: Advise students that there are lots of built-in functions that we can call on the data types we've seen and these are called methods
• [ ] :speaking_head: Tell students the next source is libraries
• [ ] :speaking_head: Tell students that libraries are collections of code that so many people want to use developers have grouped them together into a reusable package
• [ ] :grey_question: Ask students to name some libraries they've seen so far
• [ ] :grey_question: Have students recall a way they can bring in a library to a html doc in the browser (script in the head with src pointing to a CDN)
• [ ] :grey_question: Have students recall a way they can bring in a library to a node application (npm install <package-name>)
• [ ] :exclamation: Tell students that anyone can publish a library and we will make a small one today!
• [ ] :speaking_head: Tell students that if the functionality we need doesn't exist, we'll need to make our own functions

Crafting a Function (35 mins)

Anatomy of a Function (10 mins)

• [ ] :computer: Write a basic outline of function badgeMaker(){}
• [ ] :grey_question: Highlight the function keyword and ask what it is for (function declaration keyword)
• [ ] :grey_question: Highlight badgeMaker and ask what it is for (the name of the function, for access later)
• [ ] :grey_question: Highlight the () and ask what they are for (defining any parameters)
• [ ] :grey_question: Highlight the {} and ask what they are for (defining the expressions and statements within the function)
• [ ] :computer: Add let firstName = "Bob"; return firstName.toUpperCase(); and ask what the return value of this function is ("BOB")
• [ ] :grey_question: Ask students how we can invoke this function badgeMaker()
• [ ] :exclamation: Have students recall the phrase 'execution context' from the Data session
• [ ] :grey_question: Ask students when the variable of firstName will be created (When the function is invoked, creating a new execution context)

Parameters & Arguments (5 mins)

• [ ] :computer: Add function params of: (firstName, lastName, role) and return ${role}: ${firstName} ${lastName}
• [ ] :grey_question: Ask students what firstName and lastName are (parameters)
• [ ] :computer: Invoke the function with badgeMaker("Bob", "Ross", "Exhibitor")
• [ ] :grey_question: Ask students what ("Bob", "Ross", "Exhibitor") are (arguments)

Default Parameters (5 mins)

• [ ] :computer: Invoke the function with badgeMaker("Bob", "Ross") and note the return value
• [ ] :computer: Update the params to (firstName, lastName, role = "Attendee")
• [ ] :grey_question: Ask students what this will do
• [ ] :computer: Invoke the function again with badgeMaker("Bob", "Ross") and note the return value
• [ ] :computer: Invoke the function with badgeMaker("Bob", "Ross", "Exhibitor") and note the return value

Return Values (5 mins)

• [ ] :speaking_head: Tell students we often want a function to give us a value back once it has completed its job
• [ ] :speaking_head: Tell students that usually this value is used in the next step of the program
• [ ] :computer: Show students the translator and pigLatiniser functions in pigLatin.js
• [ ] :grey_question: Ask students what they think will happen when you run translate()
• [ ] :computer: Run the file and note the half-baked result
• [ ] :grey_question: Ask students what the problem is here (pigLatiniser does not return anything)
• [ ] :computer: add return translation on line 20 and re-run
• [ ] :exclamation: Tell students you don't want certain words translated
• [ ] :grey_question: Ask students what they think could go on line 10 to resolve this (return word)

ES6 Arrow Function (10 mins)

• [ ] :speaking_head: Tell students that in ES6 we got an alternative syntax for functions - arrows!
• [ ] :computer: Write an empty arrow function () => {} and walkthrough the anatomy of each part
• [ ] :speaking_head: Explain that we can't name these functions but we can store them in variables
• [ ] :exclamation: Have students recall the term 'hoisting' from the Data session
• [ ] :grey_question: Ask students what impact the way they choose to store a function might have on where they place their functions in their file/execution context (function declarations are hoisted so could be lexically underneath where they are invoked, not so for functions stored in variables)
• [ ] :exclamation: Point out that you can also store function(){} in a variable too if you want
• [ ] :speaking_head: Tell students that arrow functions can also be used as one-liners, simply to return a simple value
• [ ] :computer: Show students firstName => `Hello, ${firstName}`;
• [ ] :grey_question: Ask students what they think the return value of this is (the formatted string)
• [ ] :computer: Show students the same function but with a code block firstName => { `Hello, ${firstName}` };
• [ ] :grey_question: Ask students what they think the return value of this is (no return value defined)
• [ ] :computer: Update the return value and show the result eg. firstName => { return `Hello, ${firstName}` };
• [ ] :computer: Remove the code block again and try to return an object eg. firstName => {message: `Hello, ${firstName}`};
• [ ] :grey_question: Ask students what they think will happen when you run this? (error)
• [ ] :exclamation: Advise students that it can't tell that the {} are delimiting an object and not a code block
• [ ] :speaking_head: Tell students that if returning an object, we must wrap it in () eg. firstName => ({message: `Hello, ${firstName}`});
• [ ] :exclamation: Advise students that we will find out a bit more on arrow functions soon

Recursion (5 mins)

:question: What is recursion?
A: When we call a function from within itself

• [ ] :grey_question: Ask students if any of the code in pigLatin.js is recursive (no, it repeats but does not call itself)
• [ ] :grey_question: Show students search.js and ask if any of this code is recursive (yes, see line 12)
• [ ] :grey_question: Ask students to explain what is happening in the search function
• [ ] :exclamation: See if any students can name this as a binary search
• [ ] :grey_question: Ask students how they think this compares in efficiency to an Array.prototype.find (find is linear search, starts at beginning so if the name starts with 'A', find is more efficient but in average and worst case, our custom search actually wins)
• [ ] :exclamation: Advise students that we will talk a bit more about efficiency in the next LAP but it's worth having it in the back of their minds

Putting it All Together (20 mins)

Publishing an NPM package

• [ ] :speaking_head: Tell students that you'd like to work on the Pig Latiniser, make it a bit more user friendly and publish it
• [ ] :speaking_head: Tell students that we will first need to start a new package
• [ ] :grey_question: Have students recall how to initialise an npm package (npm init)
• [ ] :exclamation: Advise students that the package.json will be the heart of the package
• [ ] :speaking_head: Tell students that this file contains all the metadata, required scripts and dependencies
• [ ] :grey_question: Ask students what they think we should add, especially if the public are going to rely on it... (tests!)
• [ ] :computer: Install jest as a dev dependency and write a few short tests (see 'completed' branch if need inspiration)
• [ ] :speaking_head: Tell student that you would like users to be able to import the library and use the translate function
• [ ] :computer: Export translate from pigLatin.js
• [ ] :computer: In package.json add "main": "pigLatin.js"
• [ ] :computer: Set your version npm version 1.0.0
• [ ] :computer: Publish with npm publish and visit https://www.npmjs.com/package/<your-package-name>
• [ ] :computer: In a new project folder, run npm init and npm install <the-package-name>
• [ ] :computer: In a new file in the new folder, const pigLatin = require("<package-name">) & pigLatin.translate('nix on the stupid')

Adding an executable to an NPM package

• [ ] :speaking_head: Tell students you'd really like users to be able to install this globally and run it directly from their command line - use ha as an example, they will have installed it during pre-work
• [ ] :speaking_head: Tell students that users could install globally as is but they couldn't run it directly in that way
• [ ] :exclamation: Tell students that we need to define an 'executable' or 'binary' to do this
• [ ] :speaking_head: Tell students it's not as hard as it sounds!
• [ ] :speaking_head: Tell students we'll first extend our code a bit to make it interactive
• [ ] :computer: Create an index.js and tell students that this will be our entry point
• [ ] :computer: Install meow and require it in index.js
• [ ] :computer: Add the following code to index.html, go through it line by line and test with node index.js --help / node index.js 'Hi there' etc.

const meow = require("meow");
const translate = require("./pigLatiniser").translate;

const cli = meow(`
    Usage
      $ pigLatinise <input>

    Examples
      $ pigLatinise 'nix on the stupid'
      In Pig Latin that's: "ixnay on the upidstay"
`);

console.log(translate(cli.input[0]))

Adding the bin command

• [ ] :speaking_head: Tell students we need to define what command our user will use to execute our app
• [ ] :computer: In package.json add "bin": { "pigLatinise": "index.js" }
• [ ] :speaking_head: Tell students the final step is to give instructions as to the environment this needs to be run in
• [ ] :computer: Add #! /usr/bin/env node to the top of index.js and explain what it will do

Publishing a new version of a package

• [ ] :speaking_head: Tell students it's time to publish our new version
• [ ] :computer: Set your new version npm version 1.0.1
• [ ] :computer: Publish new version npm publish
• [ ] :computer: Check out the update page including dependencies
• [ ] :computer: Install the package globally and test it out with pigLatinise --help pigLatinise "Hey there" etc.
• [ ] :exclamation: Advise students that we should really add error handling (and maybe some colour!) to our app but this is a great start

Questions (5 mins)