JavaScript: DataTypes, Variables, and Control Flow

Lesson Structure

Terminal Objectives
Variables, DataTypes, DRY Principle, and Control Flow Explained
Demonstration of Strings, Numbers, Booleans, Arrays, Objects
Demonstration of IF, Else, Else If
Demonstration of While Loops, Do While and For Loops
Frequently Asked Questions

Terminal Objectives (5 minutes)

Understand basic JavaScript DataTypes (String, Number, Boolean, Array, Object)
Learn how to declare and use variables
Grasp the DRY (Don't Repeat Yourself) principle
Master basic control flow: Conditional statements and loops

1. Intro to JavaScript

Atwood's Law:
"Any application that can be written in JavaScript will eventually be written in JavaScript."
- Jeff Atwood, co-founder of Stack Overflow

Languages on GitHub - Percentage of Monthly Active Users:

The popularity of JavaScript has grown with the growth of web-based applications because it is the only language included in web browsers.

NOTE: The WebAssembly specification allows the browser to execute code from other languages such as C & C++, however, JavaScript is still required for WebAssembly to work. In other words, WebAssembly does not replace JavaScript.

JavaScript's Role

The primary responsibility of JavaScript is to allow developers to implement behavior in web applications via client-side script that runs in the browser.

The popularity of a technology known as Node.js has made JavaScript popular outside the browser as well.

A Few Facts About JavaScript:

Created in 10 days in 1995 by Brendan Eich
Not to be confused with Java (although both have syntaxes based upon the "C" programming language)
JavaScript is an implementation of ECMAScript, a standard maintained by the European Computer Manufacturers Association)
Modern browsers have fully implemented version ES2015 (formerly named ES6) This website reports the implementation status in all major browsers. ES2015 was a major update that added numerous new features which we'll cover in SEI

2. Variables, DataTypes, DRY Principle, and Control Flow Explained (15 minutes)

Variables: Temporary storage for data.
DataTypes: The kind of data. Examples are Strings, Numbers, Booleans, Arrays, and Objects.
DRY Principle: "Don't Repeat Yourself", a software development concept aimed at reducing duplication.
Control Flow: The order in which individual statements are executed.

Purpose

The purpose of a variable in computer programming is to hold or reference data.

`var`, `let` or `const`?

Variables are declared using the var, let or const keywords.

Until ES2015 came along, var was our only option and has been for the past 25+ years - so obviously, it does the trick!

Why was let and const added to the language then?

scope

The difference between var and let/const is what we call scope. Scope involves the accessibility of variables & functions at a given point in the code.

var has function scope (also known as local scope) and let/const have more limited block scope, which in computer programming, is considered a better practice because it reduces the chance of accidentally changing a variable's value.

`let` vs. `const`

The difference between let and const is that a const variable cannot be re-assigned to - you can assign data to it once, and that's it:

let x = 25;
x = 100;  // no problem

const z = 25;
z = 100;  // Uncaught TypeError: Assignment to constant variable

As we'll learn later, objects (or an object sub-type like array, function, etc.) is a reference type.

Objects are reference types because, if we assign an object to a variable, that variable does not actually hold the object, rather it holds a "reference" that points to the object in memory. As such, when you assign an object to a const, you can make changes to the object itself, you just can't re-assign to the const:

const person = {name: 'Fred'};
person.age = 25;  // no error
person = {name: 'Barney'}  // Uncaught TypeError: Assignment to constant variable

Identifiers & Defining Variables

Identifiers are used to name variables, as well as named functions:

let points;  // the identifier is "points" and names the variable "points"

We can also assign a value to a variable at the time we declare it by using the = (assignment) operator:

let name = "Fred Flintstone";  // two birds with one stone!

and change it's value later...

name = "Barney";  // note that we only declare a variable once

Multiple variables can be defined in a single statement, separated by commas:

let name = 'Wilma', age, town = 'Bedrock';

// above is equivalent to
let name = 'Wilma';
let age;
let town = 'Bedrock';

Identifier Naming Rules

In JavaScript, when naming variables, the convention is to name the identifiers using lowerCamelCase, e.g., numActivePlayers.

Identifiers in JS:

Are case-sensitive!
Cannot begin with a number
Can contain letters, digits, underscores, and dollar signs

❓ Is car-3 a valid variable identifier?

Any questions regarding variables?

Dynamic vs. Static Typed Languages

Dynamically-typed languages such as JavaScript, Python and Ruby allows variables to be assigned different types of data during runtime (as the program executes).

For example, in JavaScript we can do this:

// Declare variable named data and initialize with a number
var data = 123;

// Reassigning a different type of data is allowed
data = 'Hello';

However, statically-typed languages such as Java and C++ required a variable's type to be declared and cannot be changed:

// Declare variable as an integer and initialize
int data = 123;

// Assigning anything other than an integer raises an error
data = "Hello";  // NOT ALLOWED

There is a newer language called TypeScript you might hear about - this language is a superset of JS and adds strong typing to JS. Many developers agree that strong typing makes code less error prone and is worth the extra effort to code in.

Exploring JavaScript's Data Types

JavaScript has seven main data types:

Six primitive data types which represent a single value
One Object (reference) type that can contain any number of primitive values and/or other objects

Note that an object can be one of JavaScript's built-in object sub-types such as:

Array
Function (yes, functions are objects in JavaScript!)
RegExp
Date
Error
BigInt

KEY POINT: If a variable does not hold one of the six primitive values, it is an object!

Okay, let's briefly go through the data types...

3. Demonstration of Strings, Numbers, Booleans, Arrays, Objects (20 minutes)

Strings: Text data.
```
const name = "Arthur";
```
Numbers: Numeric data.
```
const age = 35;
```
Booleans: True or false.
```
const isOnline = true;
```

Arrays: Ordered collections.

const colors = ["red", "green", "blue"];

Objects: Key-value pairs.
```
const user = {name: "Arthur", age: 35};
```

4. Demonstration of IF, Else, Else If (15 minutes)

IF Statement: Basic condition.
```
if (age > 18) {
    // Code here
}
```
Else Statement: What to do when IF condition is false.
```
else {
    // Code here
}
```

Else If Statement: Additional conditions.

else if (age === 18) {
    // Code here
}

5. Demonstration of While Loops, Do While and For Loops (20 minutes)

Basic Types of Control Flow

Sequence:
- Statements execute one at a time in sequence.
Branching:
- Different code paths are executed based upon a conditional expression.
Looping:
- Code is repeatedly executed while a condition is truthy.

Conditional Expressions

In JavaScript, what is considered to be True/Truthy & False/Falsey?
Comparison Expressions

What is True/Truthy & What is False/Falsey?

To test what is truthy and what is falsey, let's type the following code into script.js inside our repl.it:
```
if (true) {
  console.log('truthy!');
} else {
  console.log('falsey!');
}
```
We can "run" this code using repl.it's built in JavaScript Engine by pressing the [ run ] button
Now we can easily test expressions by typing it in the place of true
Why this truthy and falsey business? Why not just use true and false?
Answer: Truthy and falsey are conceptual and an attempt to treat non-boolean expressions as booleans (true or false) during runtime. The concept of truthiness/falseyness will often allow us to write code that is more concise
For example, the number 3, is considered to be truthy - test it out

What is True/Truthy & What is False/Falsey? (cont)

Most things in JS are truthy, so it's easier to remember what's falsey...
There are two data types that are always falsey: null and undefined
There are four values that are falsey: false, 0 (zero), NaN (special value of number), and an empty string (FYI, a string with a value of a space is not empty)
Everything else is truthy!
Take a couple of minutes to test a few of the above

The Not Operator

The not operator (!), also known as the "bang" operator, "flips" a true or truthy expression to the boolean value of false, and vice-versa.

For example, test the following expressions:

!false === true // true
!null === true // true
!3 === false // true
!'' === true // true

A double ! operator is a great way to force an expression into its actual boolean value of true or false:
```
console.log(!!3); // outputs true
```

Boolean Logic Comparison Operators

Let's review these Comparison Operators that you saw in the pre-work:
- === strict equality - best practice
- == performs type conversion (called coercion) if necessary
- !== strict inequality
- != inequality
- < less than
- > greater than
- <= less than or equal
- >= greater than or equal
The logical operators || and && are more powerful than meets the eye
The logical || (OR) operator always returns the first operand if it is truthy, otherwise the second operand is returned:
```
'hello' || 'goodbye'  // evaluates to 'hello'
0 || null  // evaluates to null
```
The logical && (AND) operator always returns the first operand if it is falsey, otherwise the second operand is returned:
```
'hello' && 'goodbye'  // evaluates to 'goodbye'
0 && null  // evaluates to 0
```

Conditional Expressions

The if, for and while statements all require a conditional expression. For example:
```
let x = 1;
while (x <= 10) {
  var msg = 'Item ' + x;
  console.log(msg);
  x++;
}
```
Where, x <= 10 is the conditional expression.
❓ If x <= 10 was replaced with just x, would it still be considered a valid conditional expression?

While Loops: Loop based on a condition.
```
while (condition) {
    // Code here
}
```

Do While Loop: Executes at least once.

do {
    // Code here
} while (condition);

For Loops: Loop with initializer, condition, and iteration expression.
```
for (let i = 0; i < 10; i++) {
    // Code here
}
```

6. Frequently Asked Questions (15 minutes)

Q1: Can a variable's DataType change?
- A1: Yes, JavaScript is dynamically typed.
Q2: What is hoisting?
- A2: JavaScript's behavior of moving variable and function declarations to the top of their scope before execution.
Q3: Why use '===' instead of '=='?
- A3: '===' checks both value and type, while '==' only checks value.

Key Takeaways

You've learned essential building blocks of JavaScript: DataTypes and Variables.
You've seen how control flow structures your code.
These fundamental skills pave the way for more advanced JavaScript tasks.

JavaScript: DataTypes, Variables, and Control Flow

Lesson Structure

Terminal Objectives (5 minutes)

1. Intro to JavaScript

JavaScript's Role

A Few Facts About JavaScript:

2. Variables, DataTypes, DRY Principle, and Control Flow Explained (15 minutes)

Purpose

var, let or const?

scope

let vs. const

Identifiers & Defining Variables

Identifier Naming Rules

Dynamic vs. Static Typed Languages

Exploring JavaScript's Data Types

3. Demonstration of Strings, Numbers, Booleans, Arrays, Objects (20 minutes)

4. Demonstration of IF, Else, Else If (15 minutes)

5. Demonstration of While Loops, Do While and For Loops (20 minutes)

Basic Types of Control Flow

Conditional Expressions

What is True/Truthy & What is False/Falsey?

What is True/Truthy & What is False/Falsey? (cont)

The Not Operator

Boolean Logic Comparison Operators

Conditional Expressions

6. Frequently Asked Questions (15 minutes)

Key Takeaways

`var`, `let` or `const`?

`let` vs. `const`