JS 001 — Functions

function, parameter, invoking function, argument

Introduction

I got into coding because my friends were software engineers, and they showed me how they were building projects. It was very similar to my art/music practice. I attended Flatiron during the pandemic, then worked for PowerSchool and taught at the College of Staten Island CUNY.

I have worked with Women Who Code and written articles for JS in plain English. I have been teaching new developers to code ever since I joined Flatiron Coding School as a full-time instructor.

One of my favorite things about teaching software engineering is how many different ways I’ve seen people use this knowledge to express their personalities.

They build projects that celebrate their individual passions, hobbies, and ambitions. I’m excited for the journey with all of you and to see what you build.

When you look back on how you felt and what you did in the first weeks of the program and compare it to what you did at the end, it’s mind-blowing to see what you are able to achieve. I’m excited to meet all of you.

function, parameter, invoking function, argument

1) hello function

function hello(param1, param2){ //JS key word, function, function name, param
  return `hello world ${param1} + ${param2}` //function body
}
hello("arg1", "arg2") //invoking a function hello with arguments

// -----> in the google developer console
hello("1","2")         ////invoking
'hello world 1 + 2'    ////returned value

function hello(param1, param2){
 console.log(`hello world ${param1} + ${param2}`)
}
hello("arg1", "arg2")

//-----> in the google developer console
hello world arg1 + arg2 //hello function being invoked on line 93, 
                        //console logging line 91.
hello("1","2")          ////invoking
hello world 1 + 2       //// console logging
undefined               //// returning undefined because there was 
                        // no return statement

null: it’s an empty value. but someone actually assigned it as null.

undefined: it’s a value that has not been assigned yet.

function hello(param1, param2){
 return `hello world ${param1} + ${param2}`
}
console.log(hello("arg1", "arg2"))

//-----> in the google developer console
hello world arg1 + arg2     //hello function is being invoked on line 120, 
                            //and being console logged. 

function hello(param1, param2){
 return `hello world ${param1} + ${param2}`
}
const printHello = hello("arg1", "arg2")
console.log(printHello)

//-----> in the google developer console
hello world arg1 + arg2     //hello function is being invoked on line 132, 
                            ///being saved in a variable then being console logged 
                            //on the line 133.

2) create a formatPrice(price) function that accepts a price(number) as an argument and returns the price formatted as a String.

formatPrice(price) => $10.00

//write a function and see it in the google developer's tool console
function formatPrice(price){
}
console.log("formatPrice(10)", formatPrice(10)) 
//formatPrice(10) undefined

1. invoke the function

2. console.log the function so we can see it

3. go to browser and point at the console, which is “undefined”

4. Ask yourself which datatype you are working with.

5. go to MDN number

6. We will see all the built in JS data types, one of them is number.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

//learn JS built-in methods
function formatPrice(price){
  return Number.parseFloat(price).toFixed(2)
}
console.log("formatPrice(10)", formatPrice(10))
//formatPrice(10) 10.00

7. (Number.MAX_VALUE, …) properties: values, stored on the object.

8. (Number.parseFloat(), …) methods: functions that are stored on the object

9. (Number.prototype.toFixed()) .prototype: means, if you work with the actual number, then you can call the `.toFixed()` method. It’s callable on any examples.

//string interpolation with backticks to get the $ sign 

function formatPrice(price){
  return `$${Number.parseFloat(price).toFixed(2)}`
}
console.log("formatPrice(10)", formatPrice(10))
//formatPrice(10) $10.00

//concatenation, adding a string 
function formatPrice(price){
  return "$" + Number.parseFloat(price).toFixed(2)
}
console.log("formatPrice(10)", formatPrice(10))
//formatPrice(10) $10.00

Blurb function

Create a blurb() function that accepts a book as an argument and logs a message in the following format:

‘Eloquent JavaScript: A Modern Introduction to Programming by Marjin Haverbeke is on sale for $10.00’

1. save a variable called book with the first object of the inventory data

const book = inventory[0]

function blurb(book){ //define the function. //declaration phase
  const title = book.title
  const author = book.author
  const price = `$${book.price}.00`
  return `${title} by ${author} is on sale for ${price}`
}

console.log(blurb(inventory[0])) //invoke the function