Javascript

Data

It's all about that data

Variables

Variables are our primary

mechanism for storage

Variables

declaration

var data;

data

Variables

assignment

var data = 7;

data

7

7

Variables

retrieval

data;

data

7

Variables

use

x + data;
"Hello" + greeting

data

7

x

10

greeting

"my friend"

Variables

combination

var num = x + data;

data

7

x

10

num

?

Variables

copy

var data = x;

data

?

x

10

Data types

var num = 7; //number
var num2 = 3.222; //number

var string = "abcdefgxyz"
var string2 = 'abcdefgxyz'

var boolean = true;
var boolean = false;

var nothing = null;
var nothing2 = undefined; 
var nothing3 = 77 / "words";  
// NaN - Not a number

Variable naming rules

• must start with $, _, or a letter
• can use any number, $ or _ after first letter
• no whitespace
• cannot be a reserved keyword

Good

data

x

person32

favorite_food

_favoriteFood

$favoriteFood

food$

Bad

7foods

two monkeys

a-variable-name

really!cool!variable

360degrees

var

Comparing values

Equality

Triple equals

age === 18;
age === 21;

Double equals

age == 18;
age == 21;

var age = 18;

Triple equals

age === 18;
age === 21;

Double equals

age == 18;
age == 21;

var age = 18;

== vs ===

var age = 18;
age == 18;  //true
age === 18; //true

var age = "18";
age == 18;  //true
age === 18; //false

Comparing values

Operators

Operators

var quantity = 5;

quantity === 5;
quantity === 6;

quantity < 5;
quantity <= 5;

quantity > 5;
quantity >= 5;

quantity !== 5;
quantity !== 10;

Combining Operators

And / Or

&& - Both must be true

var state = "UT";
var isPhysicalItem = true;

state === "UT" && isPhysicalItem === true

state === "UT" && isPhysicalItem === false

state === "AZ" && isPhysicalItem === true

state === "AZ" && isPhysicalItem === true

&& - Both must be true

var state = "UT";
var isPhysicalItem = true;

state === "UT" && isPhysicalItem === true

state === "UT" && isPhysicalItem === false

state === "AZ" && isPhysicalItem === true

state === "AZ" && isPhysicalItem === false

|| - One must be true

var state = "UT";
var isPhysicalItem = true;

state === "UT" || isPhysicalItem === true

state === "UT" || isPhysicalItem === false

state === "AZ" || isPhysicalItem === true

state === "AZ" || isPhysicalItem === true

|| - One must be true

var state = "UT";
var isPhysicalItem = true;

state === "UT" || isPhysicalItem === true

state === "UT" || isPhysicalItem === false

state === "AZ" || isPhysicalItem === true

state === "AZ" || isPhysicalItem === true

Conditional Operators

if / else / else if / switch

if

if ( ... ) { }

var color = "red"

if ( color === "red" ) {

    console.log("You like red")

}


if ( color === "blue") { 

    console.log("You like blue")

}

if

if ( ... ) { }

if ( count < 10 ) { //code }

if ( count + 3 / 7 >= 4 ) { //code }

if ( name === "John Doe" ) { //code }

if ( phone < 9999999999 ) { //code }

if ( glucoseLevel > safeGlucose 
     || heartRate > safeHeartRate) { //code }

if ( score > opposingScore 
     && timeOnClock <= 0) { //winner found` }

else

if ( ... ) { } else { }

var color = "red"

if ( color === "red" ) {
    console.log("You like red")
} else {
    console.log("You don't like red")
}


if ( color === "blue") { 
    console.log("You like blue")
} else {
    console.log("You don't like blue")
}

else

if ( count < 10 ) { 
    //count is less than 10
} else { 
    //count 10 or greater
}

if ( name === "John Doe" ) { 
//name is John Doe 
} else {
    //name is not "John Doe"
}

if ( glucoseLevel > safeGlucose 
     || heartRate > safeHeartRate) { 
    // glucose is high or heart rate is high
} else {
    // glucose and heart rate are both safe
}

if ( score > opposingScore 
     && timeOnClock <= 0) { 
    //winner found` 
} else {
    //You lost OR the game is still going
}

else if

if ( timeOnClock > 0 ) { 
    //Game is still going
} else if ( score > opposingScore ) {
    // game is over, you win
} else {
    // game is over, you lose
}

switch

var numberOfCats = 4;

switch(numberOfCats) {
    case 0:
        console.log("You don't like cats");
        break;
    case 1:
        console.log("You're okay with cats");
        break;
    case 2:
        console.log("You really like cats");
        break;
    case 3:
        console.log("You're officially a cat person");
        break;
    default:
        console.log("You're probably half cat");
        break;
}

Truthy & Falsey

when everything is a boolean

To a boolean

• if / else if / switch

if ( 7 ) {}
if ( "words" ) {}
if ( false ) {}
if ( null ) {}
if ( myVar ) {}

• &&  +  ||

7 && 3
7 && "Steve"
true && James
isAdmin && isDave

• ! operator

!isAdmin
if(!name){}

To a boolean

• falsey

"" or ''
0
false
null
undefined
NaN

• truthy

Everything else
Numbers > or < 0
Non-empty strings (including whitespace)
functions, objects, arrays, etc

Examples

if ( isAdmin === true ) { }
if ( isAdmin ) {}

if ( count > 0 || count < 0 ) {}
if ( count ) {}

if ( name !== "" ) {}
if ( name ) {}

var isEmpty = !count;