JavaScript Fundamentals

Introduction

A review of the basics of JavaScript.

Objectives

By the end of this lesson, students should be able to:

• Explain variables, literals, and their differences.
• Explain the results of simple expressions.
• Evaluate simple JavaScript by inspection.

Fundamentals

To start

In your browser open https://github.com/ga-wdi-boston/js-fundamentals-08 and fork the repository. We'll find the link in slack.

Then in a terminal window at the shell prompt:

~$ cd wdi
~/wdi$ git clone git@github.com:ga-wdi-boston/js-fundamentals-08.git
~/wdi$ cd js-fundamentals-08
~/wdi/js-fundamentals-08$ subl .
~/wdi/js-fundamentals-08$ npm install

These will be standard beginning steps we'll take for repository links sent in slack. In future lesson plans these instructions will be condensed to Fork, clone, and npm install.

Variables and literals

What are the differences between these two ideas?

We'll explore them using a REPL.

REPL

• Read
• Evaluate
• Print
• Loop

~/wdi/js-fundamentals-08$ node
>

What other tools could we use as a JavaScript REPL?

Are there benefits to using one or the other?

JavaScript primitives

• Boolean
• Number
• String
• null
• undefined

JavaScript operators and precedence

We'll look at a subset of the available operators.

Type	Operators
member access	. []
negation, increment, and type	! - + ++ -- typeof
multiplication and division	* / %
addition and subtraction	+ -
equality	=== !===
logical and	&&
logical or	||
conditional	?:
assignment	= += -= *= /= %= |=
comma	,

Operators come in three classes, unary, binary (the most common), and ternary (there is only one).

Expressions

An expression is a combination of literals, variables, operators, and functions that are interpreted and produce a value.

The simplest expression is a variable or literal followed by a semicolon.

> age;

Variables need to be declared.

More complicated expressions are formed by combining simpler expressions using operators.

An expression with all of the variables replaced with literals that are equal to the variables values will produce the same result.

Assignment

> var age;
> age = 45;
> var name;
> name = "Antony";
> age + 2;

Number

Compare: =, +=, ++

Remainder: %

String

> var firstName = "Antony";
> var lastName = "Donovan";
> console.log(firstName + " " + lastName);

JavaScript variables are untyped.

> var age = 45;
> age = "Antony";

Although it doesn't cause an error, avoid confusing code like the above.

Converting numbers to strings and strings to numbers.

Numbers are converted to strings when added to strings.

> 10 + "7";
> typeof(10 + "7");

Strings are converted to number when the unary + is applied.

> 10 + +"7";
> typeof(10 + +"7");

What's different about 3 + 5 + "string"; and "string" + 3 + 5;?

Boolean

What do you think of when you here "truthy" and "falsy"?

> var age = 17;
> age === 35;
> age > 21;
> age = 45;
> age > 21;

How would you check if a variable contained an odd number?

falsy list (everything else in JavaScript is truthy),

• false
• undefined
• null
• 0 // and -0
• NaN
• "" // and '' - the empty string

Note: The negation of a truthy value is false and the negation of a falsy value is true.

var truthy = "A non-empty string";
var falsy = 0;
!truthy === false;
!falsy === true;

Conditional and loops

The if statement:

var name = ask("What's your name? ");
if (name === 'Antony') {
  console.log('Hi, Antony!');
} else if (name === 'Matt') {
  console.log('Hi, Matt!');
} else {
  console.log('Hi, stranger.');
}

The while loop:

var count = 0;
var answer = '';

while (answer !== 'Antony') {
  answer = ask("Guess my name? ");
  count = count + 1;
}
console.log("You got it in " + count + " tries!");

The for loop:

for (var i = 0; i < 10; i++) {
  console.log(i);
}

which is equivalent to:

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

Nesting conditionals in loops:

for (var i = 0; i < 10; i++) {
  if (i===5) {
    console.log("five!");
  }
}

Assessment

Please follow the instructions at https://github.com/ga-wdi-boston/js-fundamentals-08-solo-assessment

Additional Resources

See the following sections at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

• Grammar and types
• Control flow and error handling
• Loops and iteration
• Expressions and operators
• Number and dates
• Text formatting

Note, sections marked with lab flasks are part of ECMAScript 6 (just adopted) or later and should be skipped for now.