

> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
Let's start with variables and the data types that populate them!
Let's start with variables and the data types that populate them!
## Variables
## Variables
Variables store values that can be used and changed throughout your code.
Variables store values that can be used and changed throughout your code.
Creating and **declaring** a variable has the following syntax **[keyword] [name]**. It's made up of the two parts:
**Creating** and **declaring** a variable has the following syntax **[keyword] [name]**. It's made up of the two parts:
- **Keyword**. Keywords can be `let` or `var`.
- **Keyword**. Keywords can be `let` or `var`.
> Note, They keyword `let` was introduced in ES6 and gives your variable a so called _block scope_. It's recommended that you use `let` over `var`. We will cover block scopes more in depth in future parts.
> Note, They keyword `let` was introduced in ES6 and gives your variable a so called _block scope_. It's recommended that you use `let` over `var`. We will cover block scopes more in depth in future parts.
- **The variable name**, this is a name you choose yourself.
- **The variable name**, this is a name you choose yourself.
### Task - working with variables
### Task - working with variables
@ -42,7 +44,7 @@ Creating and **declaring** a variable has the following syntax **[keyword] [name
> Note: the use of `=` in this lesson means we make use of an "assignment operator", used to set a value to a variable. It doesn't denote equality.
> Note: the use of `=` in this lesson means we make use of an "assignment operator", used to set a value to a variable. It doesn't denote equality.
`myVariable` has now been *initialized* with the value 123.
`myVariable` has now been _initialized_ with the value 123.
1. **Refactor**. Replace your code with the following statement.
1. **Refactor**. Replace your code with the following statement.
@ -74,6 +76,7 @@ Constants are similar to variables, with two exceptions:
- **Must have a value**. Constants must be initialized, or an error will occur when running code.
- **Must have a value**. Constants must be initialized, or an error will occur when running code.
- **Reference cannot be changed**. The reference of a constant cannot be changed once initialized, or an error will occur when running code. Let's look at two examples:
- **Reference cannot be changed**. The reference of a constant cannot be changed once initialized, or an error will occur when running code. Let's look at two examples:
- **Simple value**. The following is NOT allowed:
- **Simple value**. The following is NOT allowed:
```javascript
```javascript
@ -85,7 +88,7 @@ Constants are similar to variables, with two exceptions:
```javascript
```javascript
const obj = { a: 3 };
const obj = { a: 3 };
obj = { b: 5 } // not allowed
obj = { b: 5 }; // not allowed
```
```
- **Object value is not protected**. The following IS allowed:
- **Object value is not protected**. The following IS allowed:
✅ Why does `1 + 1 = 2` in JavaScript, but `'1' + '1' = 11?` Think about it. What about `'1' + 1`?
✅ Why does `1 + 1 = 2` in JavaScript, but `'1' + '1' = 11?` Think about it. What about `'1' + 1`?
@ -162,7 +164,7 @@ let myString1 = "Hello";
let myString2 = "World";
let myString2 = "World";
`${myString1} ${myString2}!` //Hello World!
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello World!
`${myString1}, ${myString2}!`; //Hello World!
```
```
You can achieve your formatting goals with either method, but template literals will respect any spaces and line breaks.
You can achieve your formatting goals with either method, but template literals will respect any spaces and line breaks.
@ -185,6 +187,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?