JS-101-Fundamentals
  • JavaScript Library
  • 1-JavaScript Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-JS-Fundamentals
      • 1-Grammar and Types
        • Comments
        • Declarations
        • Scope
        • Hoisting
        • Types
        • Literals
      • 2-Control Flow and Error Handling
        • if
        • if else
        • switch
        • try catch
        • throw
      • 3-Loops
        • For Loops
        • For In Loops
        • For Of Loops
        • Do While
        • While Loops
      • 4-Functions
        • Declarations
        • Expressions
        • Calling Functions
        • Scope
        • Parameters
        • Arguments
        • Closures
        • Closures Challenge
        • Arrow Functions
        • Predefined
      • 5-Expressions and Operators
        • Assignment
        • Comparison
        • Ternary
        • Typeof
        • Left Hand Side
        • Spread
      • 6 Numbers and Dates
        • Numbers
          • Numbers Enhanced
        • Math
        • Dates
      • 7 String Methods
        • String Literals
        • Methods
      • 8 Regular Expressions
        • Basic Intro
      • 9 Arrays
        • Array Review
        • Populating/Referring
        • Length
        • Iterating
        • Methods
      • 10 Objects
        • About Objects
        • Properties
        • Enumeration
        • Initializers
        • Constructor Functions
        • this
        • create
        • Methods
      • 11 ES6 Intro
        • ES6 Intro
        • let
        • const
Powered by GitBook
On this page
  • new
  • super
  • File Location
  • Practice
  1. 1-JavaScript Fundamentals
  2. 1-JS-Fundamentals
  3. 5-Expressions and Operators

Left Hand Side

In JavaScript, you may hear the expressions "left side" or "right side" when talking about declarations. These refer to evaluations or comparisons, and to which side the particular expression is on. (eg let x /*left side*/ = 12 /*right side*/) Here we will focus on the left hand side, and specifically the keywords new and super.

new

new is a keyword that lets a user create an object based off of a user-designed model. The model must be created first as a function, like this:

function Game(score, winner, loser) {
    this.score = score;
    this.winner = winner;
    this.loser = loser;
}

this.score refers to the property of the object being created, while score refers to the parameter being passed into the function. We can create a new Game object with the following:

let SBLII = new Game(41-33, "Philadelphia Eagles", "New England Patriots");

console.log(SBLII.loser); //"New England Patriots"

super

Sometimes the information inside of an object is so large that we store it inside another object within the first. This is called "nesting". Think of it like a news program:

let news = {
    story 1: "headline",
    story 2: "important",
    weather: {
        tomorrow: "sunny",
        wednesday: "rain"
    },
    sports: {
        baseball: "Home run!"
        football: "Touchdown!",
        ...
    },
    function throwToCommercial(segment, time) {
        console.log("We'll be back with " + segment + " in " + time + "minutes after this short break.");
    }
    ...
}

news is the parent object, whereas sports and weather are the child objects. Unfortunately for our news program, the commercial break function lies in the parent object, meaning that the children can't go to commercial. We use the super keyword in these situations to allow the child objects to access properties of the parent. The newscasters can just call the method themselves (this.throwToCommercial('weather', 3)), but if the weatherman tried to use this, he'd get an error. The weatherman has to go to break like this:

super.throwToCommercial('sports', 2);

File Location

We will be working in the following file:

    javascript-library
        └── 0-PreWork
        └── 1-Fundamentals
            └── 1-Grammar-and-Types
            └── 2-ControlFlow-and-ErrorHandling
            └── 3-Loops
            └── 4-Functions
            └── 5-Expressions-and-Operators
                01-assignment.js 
                02-comparision.js 
                03-ternary.js
                04-typeof.js 
                05-this.js 
                06-left-hand-side.js <----You will be working in this file.

Practice

  1. Create a function to be used as a model for today's date, then use that model to create an object called today.

  2. Add a property to the today object called tomorrow (let today.tomorrow = ...).

  3. Using the news example from above, add the propery localNews to the object, then have the sportscaster go to commercial, teasing the local news coming up in 3 minutes.

PreviousTypeofNextSpread

Last updated 7 years ago