Values

A value is a location in computer memory that stores DATA.

There are many kinds of values, including String, Number, Array, Date, ...

Different kinds of values are called types.

We will be focusing on the most common types in this course

Numbers

A number is what it sounds like -- any integer or decimal.

10
-12
3.14

Strings

A string is an object that's a collection of characters, like a word or a sentence.

"apple"
"banana"
"Cherry Pie"

Booleans

A boolean is a value that is either true or false.

(It's named after George Boole, a 19th-century mathematician who invented Boolean algebra.)

Operators

Values can be combined or manipulated using operators, like...

An operator sends a message to the value

Dot is a special operator that sends arbitrary messages; we will learn more about her later.

Comments

When reading JavaScript code, if you ever see two slashes in a row, that means "everything after these slashes is a comment".

2 + 2    // makes four

A comment is a message for humans. JavaScript ignores everything to the right of the slashes, so you can explain what the nearby code does, or why it does it.

In these lessons, we often use comments to explain the result of executing the nearby code. In this case, we sometimes add an arrow to the comment:

2 + 2  //=> 4
3 + 5 // -> 8

JavaScript also has multi-line comments via /* ... */ but those are less common. They can also be used to comment out a section within a line:

/* This is
  a multiline
  comment! */

 console.log(x /*some variable from earlier*/);

Variables

let color = "blue"
let fruit = "berry"
color + fruit       // "blueberry"
fruit.toUpperCase() // "BERRY"

The Warehouse Metaphor

Think of memory as a giant warehouse.

Warehouse from Raiders of the Lost Ark

Like this warehouse from the movie Raiders of the Lost Ark, computer memory is vast and filled with boxes of various sizes.

The Warehouse Metaphor Explained

If memory is a giant warehouse...

...and memory locations are boxes in that warehouse

...then a value is the contents of a box

...and a variable is a label you stick on the outside of the box

Let there be confusion

Don't let me down

Unfortunately, in JavaScript you can only use let once per variable name (in a given scope), otherwise you will get an error:

Identifier 'x' has already been declared

That means that when you're in the JavaScript console, if you see this error then try again without the let

> let x = 1
undefined
> let x = x + 2
SyntaxError: Identifier 'x' has already been declared
> x = x + 2
3

String Literals

"My dog has fleas."
'Vermonters have a hundred words for "snow".'

String Escapes

console.log("Roses are red,\nViolets are blue;\nCandy is sweet,\nAnd so are you.")

String Messages

A string understands lots of messages. Here are a few:

"drive" + "way"
'Java' + "Script"

"Bert's pal Ernie" + ' sings "Rubber Duckie"'

"titanic".toUpperCase()
"QUIETLY".toLowerCase()

"Java".repeat(10)

"banana".length

"berry".charAt(1)
"berry".charAt(0)
"apple"[3]

"banana".includes("nan")
"banana".endsWith("ana")

"blueberry".replace("blue", "black")

Try all of these out in node or the browser console!

Check out MDN String docs for more.

Slicing and Dicing

Every string is made of lots of other strings.

You can pull out parts of a string with the slice message.

// this means "slice from character 0 to character 4"
"blueberry".slice(0, 4) 

// this means "slice from character 4 to the end
"blueberry".slice(4)

These start and end numbers are called indexes (or indices if you're feeling fancy).

MDN: slice

String Indexing Explained

Humans like to start counting at 1, but computers like to start counting at 0.

This can be confusing, so here's a visualization to help explain it.

Think of the indexes as pointing at the spaces between characters, as in this diagram:

| B | L | U | E | B | E | R | R | Y |
0   1   2   3   4   5   6   7   8   9

So with this picture in your mind, slice...

Try various start and end values in the console and see what happens!

Number

MDN Docs for Number

Order of operations

Q: What is 1 plus 2 times 3?

A: It depends!

(1 + 2) * 3 == 9
1 + (2 * 3) == 7

Parentheses Are Free

When in doubt, use parentheses!

(or, when there's any doubt, make your assumptions explicit)

LAB: one nation, divisible

One number is divisible by another if you divide them and the remainder is 0.

Write code in node to figure out if...

Strings vs. Numbers

Hmmm....

1 + 2
"1" + "2"
"1 + 2"

Strings plus Numbers

Hmmm again...

"1" + 2

Even though Strings and Numbers are different TYPES, JavaScript converts one to the other.

But when two types meet, which one wins?

Type Conversion

The clearest answer is that you, the programmer, explicitly declare which type you want to win.

Converting a Number to a String

(12).toString() // "12"

Converting a String to a Number

There are many ways to convert a string to a number in JavaScript.

The easiest and cleanest is unary +:

expression value
+"12" 12
+"012" 12
+"0.2" 0.2
+"cheese" NaN
+"0" 0
+"" 0
+" " 0

(Other ways can give bizarre results if the string contains letters or begins with a 0.)

Type Coercion

If you don't explicitly do type conversion then JavaScript will "helpfully" convert the types for you.

This is called type coercion and just like with people, coercion is stressful and often backfires.

For instance, if you ask the user their age, and read it from a web form or keyboard input, it will be in a string. If you forget to explicitly convert that to a number before using it in a calculation, the results can be unexpected...

  > "30" - 1              // "30" is coerced into a number
  29            
  > "30" + 1              // 1 is coerced into a string
  '301'

(You Don't Know JS has way more information than you wanted to know on this subject.)

Randomize it!

Math.random is your way to make things unpredictable!

Calling Math.random() returns a random decimal number between 0 and 1.

If you want a random integer you can multiply that decimal by a range, like this:

function randomInteger(min, max) {
  let range = max - min + 1; 
  return min + Math.floor(Math.random() * range);
}

console.log(randomInteger(1, 3));

Arrays

What makes an array an array

Creating an array

["apple", "banana", "cherry"]

square brackets on their own mean "please go create an array now"

and put these 3 other values inside it

Array Indexes

let fruits = ["apple", "banana", "cherry"];
fruits[1]

...but which fruit? See next slide!

LAB: Array Indexes Exercise

Try this in node:

let fruits = ["apple", "banana", "cherry"]
fruits[1]

Did you get the result you expected?

Why or why not?

Start At Zero

When counting,

humans start at one,

but computers start at zero.

So the first item in an array is number zero, not number one.

Length

Every array has a property named length

let fruits = ["apple", "banana", "cherry"]
fruits.length //=> 3

Q: How can you get the last item in an array... even if you don't know its index beforehand?

The End

let fruits = ["apple", "banana", "cherry"]
fruits[fruits.length - 1]

After The End

Try this:

fruits[99]

Did you get the result you expected?

Why or why not?

Undefined means 🤷

by returning undefined, the computer is answering the question

"What is the 99th item?"

with the answer

"There is no 99th item."

 Previous Next 

Outline

[menu]

/