Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

M2 revisions #343

Merged
merged 8 commits into from
Oct 23, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add notes with Ruby differences and example of bracket notation using…
… a parameter
Heather Faerber committed Oct 23, 2024
commit 5fc5af0354d3bdd8a772bd3f496dbb46f07908f6
75 changes: 58 additions & 17 deletions module2/lessons/js_fundamentals.md
Original file line number Diff line number Diff line change
@@ -35,7 +35,10 @@ _Note_: ES6 is the most current version of the ECMA Script Spec. We will be usin

In any programming language, variables are what we use to store data values so that we can access and reuse those values throughout our code. The name "variables" drives home the point that the stored data can change (or *vary*) along the way. Variables can start off holding one value and later be reassigned to hold a different value.

In Ruby, you declare a variable simply by assigning a value to it (`person_age = 21`, `country_name = "Spain"`). In JavaScript, you declare the variable using a keyword of either `var`, `let`, or `const`. You do not specify the data type.
<section class="note">
In Ruby, you declare a variable simply by assigning a value to it (`person_age = 21`, `country_name = "Spain"`).
In JavaScript, you must declare the variable using a keyword of either `var`, `let`, or `const`.
</section>

Go to the [js_fundamentals file](https://github.com/turingschool-examples/mod2-sandbox/blob/main/lessons/js_fundamentals.js) of your Mod 2 Sandbox repo. Check out the JS syntax in the code there. Run it, break it, get weird with it.
<section class="dropdown">
@@ -64,8 +67,9 @@ let jobTitle;
### Data Types

We can see each of the 7 data types we'll be working with in JavaScript in the syntax examples above. Let's identify each as we go through them.

The basic (primitive) data types we'll work with are BUNNS:

<section class="dropdown">
### JS Basic (primitive) Data Types - BUNNS:
* **Boolean**
* a `true` or `false` value (*not* in quotation marks)

@@ -83,14 +87,42 @@ The basic (primitive) data types we'll work with are BUNNS:
* **String**
* text data - any characters wrapped in quotation marks (including letters, numbers, symbols, spaces)
* in JS you can use 'single quotes' or "double quotes"
</section>

<section class="dropdown">
### JS Complex Data Types:

The complex data types we'll work with are:
* **Objects**
* like hashes in Ruby - groupings of related data in key-value pairs
* **Arrays**
* like, well, arrays in Ruby
</section>

We access data in objects and arrays similarly to how we would do so in Ruby - using dot notation or bracket notation.
### Rules for Naming Variables
- Variables must begin with a letter, dollar sign, or an underscore. They cannot begin with a number.
- Variables can contain any of the above characters plus a number, but you cannot use a dash (-) or a period (.) within the name.
- You cannot use any JS keywords or reserved words (such as `var` or `for`) as a variable name.
- Variables are case sensitive. `dog` is different than `Dog`
- Use names that describe the kind of information you plan to assign the variable.
- If your variable is made up of more than one word, then use camelCase. Capitalize every word AFTER the first word, which is lower case: `thisIsMyVariableName`.

<!-- </section> -->

## Accessing Data Within an Object - JS

<section class="note">
### JS vs Ruby - Key Differences

- In Ruby, you use bracket notation to access data within a hash.
- In JS, you can bracket notation. But you can also use **dot notation**.

Using the policeSketchDescription object above, I can access the hair property's value two different ways:

`policeSketchDescription.hair`

`policeSketchDescription["hair"]`

</section>

### Your Turn (in your js fundamentals file)

@@ -99,26 +131,35 @@ We access data in objects and arrays similarly to how we would do so in Ruby - u
* Use console.log and bracket notation to print first element in the favoriteFoods array - 'pizza'
* Use console.log and bracket notation to print last element in the favoriteFoods array - 'sushi'

<section class="call-to-action">
### Dot or Bracket?

### Rules for Naming Variables
- Variables must begin with a letter, dollar sign, or an underscore. They cannot begin with a number.
- Variables can contain any of the above characters plus a number, but you cannot use a dash (-) or a period (.) within the name.
- You cannot use any JS keywords or reserved words (such as `var` or `for`) as a variable name.
- Variables are case sensitive. `dog` is different than `Dog`
- Use names that describe the kind of information you plan to assign the variable.
- If your variable is made up of more than one word, then use camelCase. Capitalize every word AFTER the first word, which is lower case: `thisIsMyVariableName`.
Dot notation is simple and clean. We use it when we are typing the exact property we want to access.

A common use case for using bracket notation to access data with a JS object is when the data point you care about is being passed into a function as an argument. You would then use the function's **parameter** within the bracket notation to access whichever data point is passed. This makes it dynamic, it can access a different value each time depending what is passed as the argument.

```js
function getData(datapoint) {
return policeSketchDescription[datapoint]
}

console.log( getData('hair') )
// passing 'hair' as the arg means the bracket notation will be pulling the 'hair' value from the object


console.log( getData('isTall') )
// passing 'isTall' as the arg means the bracket notation will be pulling the 'isTall' value from the object
```

<br>

</section>

## Using Variables Together

### Your Turn (in your js fundamentals file)

* Declare 2 variables, one named "quantity" and one named "mythicalCreature".
* Declare a variable named "creatureCount" but don't assign it a value quite yet. If you console log it, it should give you "undefined"

## Using Variables Together

Let's make the value to our "creatureCount" variable be our "quantity" `+` our "mythicalCreature".
<section class="dropdown">

@@ -157,7 +198,7 @@ let creatureCount = `<p>I have ${quantity} very fancy ${mythicalCreature}</p>`
<section class="dropdown">
### Key Points So Far

That was a lot of information. Let's go over the most important things we need to know.
That was a lot of information. Here's a recap of the most important things we need to know.

<section class="dropdown">
### What are JavaScript's primitive data types? Complex data types?