Javascript!

Lexical Structure

• Javascript is written in unicode, which ultimately means that you can code with english, french, german, norwegian, hindi, tagalok, mandarin, and even emoji.

• Semicolons:

  • Do you need them? No.
  • Should you use them? 🤷‍♀️
  • Semicolons dictate the end of each line, but the engines in which we run javascript are often intelligent enough to figure out what you mean.
  • Whitespace is meaningless. Scope is determined by curly braces.
  • Javascript is case sensitive.

Literals:

• Integer: 5
• String: "I am a string" or 'I am a string'
• Boolean: true or false
• Array: [1, 2]
• Object: { firstname: 'matt', lastname: 'lane '}

Variables.

When do you mutate, when do you not (hint: NEVER MUTATE ANYTHING)

• Naming variables/constants/functions can be done with almost any unicode character. (100% recommend using the naming conventions you're comfortable with)
• Reserved words exist in javascript.
• Just like any other language

Variable Initialization

Using nothing: In javascript, it is possible to assign a value to a variable.

• MUTABLE
• Most modern environments have a strict mode enabled, which will result in an error. strict mode is not enabled in a repl:

xxxxxxxxxx
4
1
> a = 5
2
5
3
> a
4
5

Variable Initialization

var: Variables can be declared with var.

• MUTABLE

  • When declared with nothing, the variable is undefined
  • Multiple variables can also be declared at the same time.
  • If declared outside of a function, var will be attached to the global object.

• Not block scoped, but function scoped.

xxxxxxxxxx
5
1
> var b = "hello"
2
undefined
3
> b
4
'hello'
5
​

Variable Initialization

let: A newer ES6 variable that acts almost the exact same as var:

• MUTABLE
• When declared outside of a function, the variable is not attached to the global object.
• Block scoped, not function scoped.

xxxxxxxxxx
6
1
> let c = 42
2
undefined
3
> c
4
42
5
> c = 'whatever'
6
'whatever'

Variable Initialization

const: Once initialized, a const's value can never be changed.

• IMMUTABLEish

  • const means that the reference to the identifier can't be changed.
  • Objects with sub-references can allow for a potential option of mutability.
  • Block scoped.
  • In order to avoid errors in complex projects, developers often tend to choose const for declaring their variables.

xxxxxxxxxx
7
1
> const d = "Stay gold"
2
undefined
3
> d
4
'Stay gold'
5
> d = 3
6
Thrown:
7
TypeError: Assignment to constant variable.

Variables: Scoping

• Function scoping means that variables can all see each other so long as they're within the same function.
• Block scoping means that variables are scoped within the code block (that is, anything inside {}s)

xxxxxxxxxx
13
1
function mycoolFunction(){
2
    if(true){
3
        var funkyVar = 'rhombus'       //exist in function scope
4
        const blockyConst = 'cube'     //exist in block scope
5
        let blockyLet = 'rectangular prism'   //exist in block scope
6
​
7
    }
8
    console.log(funkyVar)
9
    console.log(blockyConst)
10
    console.log(blockyLet)
11
}
12
​
13
mycoolFunction()

Types:

Primitives:

• Numbers
• Strings
• Boolean

Primitives - Numbers:

Number encompasses both floating points and integers

Primitives - String:

A sequence of characters. Strings can be enclosed in both single and double quotes, as well as ticks. As of ES6, template strings now exist (those with the ticks). Template stings allow for mid-string variable interpolation

xxxxxxxxxx
7
1
const doubleHello = "HELLO"
2
    const singleHello = 'Hello'
3
const templateStringHello = `The above two sentences say 
4
    ${doubleHello}
5
and 
6
    ${singleHello}
7
    `

Primitives - Boolean:

Booleans are true and false.

• Javascript also distinguishes between truthy and falsey values.

  • falsey:
  • 0
  • Nan
  • '' (empty string)
  • null: Indicates the lack of a value
  • undefined: a variable that has not been initialized, or does not exist.

• truthy: Everything else!

Example!

xxxxxxxxxx
13
1
    a = 5
2
    var b = 'whatever'
3
    let c = 32.6
4
    const d = false
5
    const e = "stuff"
6
​
7
console.log(`a: `, typeof a)
8
console.log(`b: `, typeof b)
9
console.log(`c: `, typeof c)
10
console.log(`d: `, typeof d)
11
console.log(`e: `, typeof e)
12
​
13
​

Types:

Object Types

• All non-primitive types are object types.

  • Objects: A key value pairing. The keys can be paired to variables of any type (including functions)
  • Arrays: Lists.
  • Functions: Can be invoked (discussed in detail later)

Objects:

An object is a datatype that contains key-value pairings.

xxxxxxxxxx
8
1
const someObject = {
2
    keyNameOne: "SomeValue", 
3
    keyNameTwo: 23, 
4
    keyNameArray: [1,2,"three"]
5
    keyNameFour: {
6
        subObjectKey: 3.2
7
    }
8
}

To access these elements, you need only to use dot notation:

xxxxxxxxxx
1
1
console.log(someObject.keyNameFour.subObjectKey)

Classes:

• ES6 introduced the idea of classes in the traditional sense:

xxxxxxxxxx
18
1
    class SpiceGirl {
2
        constructor(spice){
3
        this.spice = spice
4
        this.name = spice + ' spice'
5
        }
6
        
7
        getSpicy() {
8
            return "SPICE UP YOUR LIFE with " + this.spice
9
        }
10
        
11
        get name(){
12
            return this.name
13
        }
14
        
15
        set spice(value){
16
            this.spice = value
17
        }
18
    }

Exceptions

Just like other languages try catch blocks exist to handle errors gracefully.

xxxxxxxxxx
6
1
try {
2
    // do something bad
3
    const notPossible = 1/0
4
} catch (error) {
5
    console.error("There's an error!", error)
6
}

Arrays:

Arrays are lists.

xxxxxxxxxx
7
1
    const myList = [1,2,3,4,5]
2
    const otherList = ['one','two','three']
3
    const thirdList = [1,'three', 23.4, otherList]
4
​
5
    console.log(myList)
6
    console.log(otherList)
7
    console.log(thirdList)

Functions!

• Functions are objects. Function Objects. In order to use a function, it must be invoked with () . Otherwise, simply typing the function name with no parentheses refers to the object's reference.

  • Functions in Javascript are first class functions. This means that functions can be passed as parameters to other functions.

Functions - Syntax

Function Declarations (older):

xxxxxxxxxx
3
1
function doStuff1(thing) {
2
    console.log("We're doing stuff!", thing)
3
}

Functions - Syntax

Function Expressions: assignment to a variable

xxxxxxxxxx
3
1
    const doStuff2 = function(thing){
2
        console.log("We're doing stuff!", thing)
3
    }

Functions - Syntax

Named Function Expressions: (these play well with stack traces)

xxxxxxxxxx
3
1
    const doStuff3 = function doStuff(thing){
2
        console.log("We're doing stuff!", thing)
3
    }

Functions - Syntax

Arrow Functions: As of ES6, arrow functions have been introduced.

xxxxxxxxxx
3
1
    const doStuff4 = (thing) => {
2
        console.log("We're doing stuff!", thing)
3
    }

Arrow functions allow for an implicit return for one line statements! This means that you don't have to write return variableName in specific instances.

xxxxxxxxxx
3
1
const returnsHelloWorld = () => "helloWorld"
2
const returnedString = returnsHelloWorld()
3
console.log(returnedString)

When implicitly returning an object from an arrow function, the object needs to be wrapped in parentheses:

xxxxxxxxxx
14
1
const formatSomeObject = (someObject, someParameter) => ({
2
  name: someObject.coolThing,
3
  date: someObject.time,
4
  hobby: someParameter
5
})
6
​
7
const myNeatObject = {
8
  coolThing: 'Mr Potato Head',
9
  time: '1996',
10
}
11
​
12
const whatDoYouDo = "Jam eyes and things into a potato"
13
​
14
const returnedObject = formatSomeObject(myNeatObject, whatDoYouDo)

Functions - Parameters:

• As of ES6 functions can now have default parameters:

xxxxxxxxxx
5
1
    const doStuff5 = (thing='regularCoolThing', otherThing='superCoolThing') => {
2
        
3
        const stuff = thing + otherThing
4
        console.log("We're doing stuff!", stuff)
5
    }

Functions - Parameters:

• If you have just one variable in your parameter list, you don't need to wrap it in parentheses:

xxxxxxxxxx
3
1
    const doStuff6 = thing => {
2
        console.log("We're doing stuff!", thing)
3
    }

Functions - Parameters:

• Functions can take in a spread array as a list of parameters:

xxxxxxxxxx
9
1
const doStuff7 = (thing='regularCoolThing', otherThing='superCoolThing') => {
2
    
3
    const stuff = thing + otherThing
4
    console.log("We're doing stuff!", stuff)
5
}
6
​
7
const argumentsArray = ['one', 'two']
8
​
9
doStuff7(...argumentsArray)

Functions - Parameters:

• Functions can destructure an object to pass in arguments:

  xxxxxxxxxx
  13
  1
  const doStuff8 = ({ thing ='regularCoolThing', 
  2
                      otherThing='superCoolThing' }) => {
  3
      
  4
      const stuff = thing + otherThing
  5
      console.log("We're doing stuff!", stuff)
  6
  }
  7
  ​
  8
  const argumentsObject = {
  9
      thing: 'Stuff', 
  10
      otherThing: ' and things', 
  11
  }
  12
  ​
  13
  doStuff8(argumentsObject)
  

Return Values:

• Javascript cannot return more than one value, however, it can return particular data structures that can be desctructured!

Return Values: Destructuring Arrays

xxxxxxxxxx
5
1
    const returnAnArrayToDestructure = () => {
2
        return ["Thing","other",3,4]
3
    }
4
​
5
    const [ first, second, third, fourth ] = returnAnArrayToDestructure()

Return Values: Destructuring Objects

xxxxxxxxxx
9
1
    const returnAnObjectToDestructure = () => {
2
        return { 
3
    one: 2, 
4
        buckle: 'my', 
5
    shoe: "¯\_(ツ)_/¯", 
6
        }
7
    }
8
    
9
    const {one, buckle, shoe} = returnAnArrayToDestructure()

Function Nesting:

• It is possible to nest one function within another. However, it should be noted that if you do nest functions inside of each other, the most internal function's scope will be limited to the outer function.

Function Nesting:

xxxxxxxxxx
13
1
    const externalFunction = () => {
2
        const internalFunction = something => {
3
        return something + " nothing"
4
        }
5
​
6
        const stringToReturn = internalFunction("Something is not")
7
        
8
        return stringToReturn
9
    }
10
​
11
    console.log(externalFunction())
12
​
13
    console.log(internalFunction())

Functions in Objects:

xxxxxxxxxx
1
1
- Because objects can have anything as a key value pairing, objects can have functions  paired with a key: 

Functions in Objects:

xxxxxxxxxx
12
1
const vampire = {
2
    firstName: 'David', 
3
lastName: 'Boreanas', 
4
    pseudonym: 'Angel/Angelus',
5
printFullName: function() {
6
    console.log(this.firstName + ' ' + this.lastName)
7
    }
8
}
9
​
10
console.log(vampire.firstName + ' is a name')
11
console.log('His full name is ')
12
vampire.printFullName()

Functions in Objects

• This is a good time to discuss the differences between a function and an anonymous function

Functions in Objects

xxxxxxxxxx
19
1
    var human = {
2
        firstName: 'Sarah',
3
    middleName: 'Michelle', 
4
        lastName: 'Gellar', 
5
    pseudonym: 'Buffy Summers',
6
        sobriquet: 'The Vampire Slayer',
7
        printFullName: function() {
8
        console.log(this.firstName + ' ' + this.middleName + ' ' + this.lastName)
9
        },
10
        printSobriquet: () => {
11
            console.log(this.pseudonym + " " + this.sobriquet)
12
        }
13
    }
14
    
15
    console.log(human.firstName + ' is a name')
16
    console.log('Her full name is ')
17
    human.printFullName()
18
    console.log('Her character name is ')
19
    human.printSobriquet()

Functions in Objects

• The difference between the two function declarations is that the this keyword interacts differently with each:

  • function() { ... }: Refers to the object's enclosing object reference
  • () => { ... } refers to to the enclosing function context ()

First Class Functions

• Essentially, first class functions are functions that can be passed back and forth to other functions as parameters.

First Class Functions : Passing Functions

xxxxxxxxxx
9
1
    const doStuff = () => {
2
        console.log("I'm doing stuff!")
3
    }
4
​
5
    const doSomething  = something => {
6
        something()
7
    }
8
​
9
    doSomething(doStuff)

First Class Functions : Passing Functions

xxxxxxxxxx
10
1
    const doStuffAgain = somethingCool => {
2
        console.log("I'm doing ", somethingCool)
3
    }
4
​
5
    const doSomethingAgain  = something => {
6
        const someVariable = "really neat!"
7
        something(someVariable)
8
    }
9
​
10
    doSomethingAgain(doStuffAgain)

First Class Functions : Returning Functions

xxxxxxxxxx
11
1
    const functionsReturningFunctions = () => {
2
        const someFunction = () => {
3
            console.log("RETURN TO ME!")
4
        }
5
​
6
        return someFunction
7
    }
8
​
9
    const returnedFunction = functionsReturningFunctions()
10
​
11
    returnedFunction()

First Class Functions : Returning Functions

xxxxxxxxxx
11
1
    const functionsReturningFunctions = () => {
2
        const someFunction = () => {
3
            console.log("RETURN TO ME!")
4
        }
5
​
6
        return someFunction
7
    }
8
​
9
    const returnedFunction = functionsReturningFunctions()
10
​
11
    returnedFunction()

First Class Functions : Returning Functions

xxxxxxxxxx
12
1
    const functionsDoingCrazyStuff = () => {
2
        const someOtherFunction = someVariable => {
3
            console.log(`Some other function calls: `, someVariable)
4
        }
5
​
6
        return someOtherFunction
7
    }
8
​
9
    const returnedOtherFunction = functionsDoingCrazyStuff()
10
​
11
    const someString = "HOW CRAZY!"
12
    returnedOtherFunction(someString)

First Class Functions : Returning Functions

xxxxxxxxxx
9
1
    const crazyFunctionAgain = () => {
2
        const crazyOtherFunc = someVariable => {
3
            console.log(`Some other function calls: `, someVariable)
4
        }
5
​
6
        return crazyOtherFunc
7
    }
8
​
9
    crazyFunctionAgain()("DOUBLE PARENS!?")

Closures

When a function is run, it's executed within the scope of where it was defined, and not where it was run. (This ends up being incredibly helpful in the world of React):

xxxxxxxxxx
9
1
const createAFunction = word => {
2
  const wordsToSay = "Well, I say " + word
3
  
4
  return () => console.log(wordsToSay)
5
}
6
​
7
const newFunction = createAFunction()
8
​
9
newFunction()