Day 2: Functions and Objects

Tuesday, May 16, 2017

Lecture Videos





  • Function Expressions
  • Function Declarations
  • Functions as Object properties (methods)
  • Variable Scope (var, const, let)


  • Object literals
  • Property Naming
  • Retrieving property values
  • Setting property values



  • Creating elements with document.createElement
  • Setting style properties with
  • Appending child elements with someElement.appendChild
  • Form.elements

Git and GitHub



  // function declaration - use 'function' keyword
  function aMostExcellentFunction() {
    console.log('This function is great!')

  aMostExcellentFunction() // => 'This function is great!'

  // function expression - defines a function as part of a larger expression syntax
  // (usually assignment to a variable)
  const anotherExcellentFunction = () => {
    console.log('This function is also great!')

  anotherExcellentFunction() // => 'This function is also great!'

  // functions as object properties (also known as 'methods')
  const myObject = {
    myMethod() {
      console.log('I am a method!')

  myObject.myMethod() // => 'I am a method!'

Variable Scope

The biggest difference between var and let is that var variables are scoped to the function in which they are declared, while let variables are scoped to the block in which they are declared. One of the easiest examples to see this behavior is in a simple for loop.

function loopStuff() {
  for (var i = 0; i < 5; i++) {
    // do stuff in the loop

loopStuff() // => 5

function loopMoreStuff() {
  for (let i = 0; i < 5; i++) {
    // do stuff in the loop

loopMoreStuff() // => Uncaught ReferenceError: i is not defined

In the function loopStuff, var i is still available outside the for loop so it can be logged to the console. It is scoped to the function itself.

In the function loopMoreStuff, let i is not available outside the block it is scoped to (the for loop).

The main difference between const and var/let is that const cannot be reassigned.

let variableOne = 4
variableOne = 5

var variableTwo = 4
variableTwo = 5

const variableThree = 4
variableThree = 5 // => Uncaught TypeError: Assignment to constant variable

Default to using const

Always use const as your default way to declare variables, unless you know specifically that you will need to reassign it, in which case use let. You should rarely, if ever, use var. For further reading, check out this article


Almost everything in JavaScript is an Object. The easiest way to create new Objects is with the object initializer, more commonly known as ‘object literal’ syntax. Basically, use curly braces to make an object {} and fill in the properties that you want.

Objects contain key/value pairs that allow you to set and retrieve values from them.

// create a new object and assign some properties
const myObject = {
  prop1: 'Hello there',
  prop2: 42

// access the values in several ways, usually 'dot' or 'square bracket' notation
myObject.prop1 // => 'Hello there'
myObject['prop1'] //=> 'Hello there'

// new key/value pairs can also be assigned with these notations
myObject.prop3 = 'New Value!'
myObject['prop4'] = 'Newest Value!'

// { 
//   prop1: 'Hello there',
//   prop2: 42,
//   prop3: 'New Value!',
//   prop4: 'Newest Value!'
// }


Arrays are extremely useful data structures in JavaScript, as they can be easily iterated and transformed through methods like map, filter, and reduce. Sometimes, you may have an ‘array-like’ collection (like a NodeList or function arguments) that you would need to convert to an actual Array before you could use these methods. This can be done using Array.from

let paragraphs = document.querySelectorAll('p') => {
  p.textContent = "This won't work because paragraphs is a NodeList, not Array!"
// => Uncaught TypeError: is not a function

let actualArrayOfParagraphs = Array.from(paragraphs) => {
  p.textContent = "This totally does work because we created an Array from our NodeList!"

Requirements for 'Array.from'

What objects can you convert to an Array using ‘Array.from’?

  • Any array-like object with a ‘length’ property and indexed elements
  • Iterable objects (like Map or Set)

For more info, check out this article on MDN.


If we start with the following markup:

<div id="my-div"></div>

We can add additional markup to it programmatically using JavaScript. One way is to create new HTMl elements using document.createElement, and adding them by using appendChild. Styling of the element can even be changed by manipulating the element’s style property.

// create an h1 and modify text content and color
const heading = document.createElement('h1')
heading.textContent = "This is the best heading I've ever seen" = "red"

// get a reference to the existing div and add the heading as a child element
const div = document.querySelector('#my-div')

This will produce the following markup:

<div id="my-div">
  <h1 style="color: red;">This is the best heading I've ever seen</h1>



People Factory

Morning | Afternoon



Create a new project from scratch that adds students to a class roster and meets the following requirements:

Baseline Goal

  • User can enter a name to be added to the roster.
  • Name will be added to the end of a list.

Bonus Credit

  • Create at most one global variable.

Mega Bonus Credit

  • Add names to the top of the list instead of the bottom.

Super Mega Bonus Credit

  • Add a delete button to every list item that removes the name from the list when clicked.

Super Mega Bonus Credit Hyper Fighting

  • Add a promote button to every list item that changes the appearance(e.g. changes the background color, adds a border, etc.) of that item when clicked.