Data Types

Back

Learning Goals

  • Identify and use 3 basic Data Types
  • Assign and reassign variables in JavaScript
  • Comfortably use the Chrome Dev Tools

Vocabulary

  • assignment operator
  • Boolean
  • Console
  • Data Type
  • Dev Tools
  • Number
  • String
  • string interpolation
  • variable

Where To Run Code

By the end of this session, you’ll be able to use a feature of the Chrome browser called the Dev Tools, specifically a tool within it called Console, to run and check your code. This is a great tool for a beginner, as well as a seasoned software developer, to have. This Console will allow you to explore and learn JavaScript and test out code you’ve written in a low stakes environment. It is quick and easy to open up Chrome and run your code immediately.

Chrome Dev Tools Console: Tips & Tricks

  • Open and close the Dev Tools with keyboard shortcut cmd + opt + i or cmd + opt + j. There are other ways to do this but this is strongly recommended as using keyboard shortcuts is most efficient and the norm in the industry
  • The Dev Tools “drawer” can be readjusted to take up more or less of the entire browser window. Depending on the nature of your work, you may want to readjust this
  • The Dev Tools can be “docked” on the left, bottom, or right sides of the browser window. To adjust, click the small 3 dot icon, then select your desired “Dock side”
  • The Dev Tools can be displayed with Dark Mode or Light Mode. Adjustments can be made to that in the “Settings” of the Dev Tools which can be found by clicking the small gear icon
  • When you open the Dev Tools console, depending on the site you are on, you might see warnings or errors. You can type clear() and hit return at anytime to clear those out

Screenshot of Chrome Dev Tools with 3 dot icon and gear icon circled

You Do: Chrome Dev Tools

  • Open the Dev Tools in the Chrome browser using the keyboard shortcut.
  • Practice adjusting the size of the Dev Tools.
  • Practice changing the Dock side - leave it on a side you prefer. You can always change your mind later!
  • If you'd like to change to Dark or Light mode, do that in the Settings.
  • Open up the Dev Tools in 5 different tabs; each tab should be on a different site. If you see any errors or warnings in the console, use clear(); or keyboard shortcut cmd + k.
  • Close the Dev Tools in all tabs using the same keyboard shortcut.
  • Reopen the Dev Tools in one tab; it should have kept the previously selected settings in regards to size, Dock side, and Dark or Light mode.

Data Types

In this lesson, we will use 3 of JavaScript’s Data Types. A Data Type classifies each piece of data in a JavaScript program.

  • String - Any series of characters (alpha, numeric, or symbol) between quotation marks
  • Number - Any positive or negative number, including 0, whole or decimal
  • Boolean - true or false

To connect to how these data types are used in an application we all have some experience with, consider the steps you took to enroll at Turing in the Populi application:

  • String - You provided your email address and it was stored as a string, for example: "helloworld@gmail.com"
  • Number - You provided your date of birth and the program calculated your age, for example: 37
  • Boolean - Once you paid your deposit, the “paid deposit” field said true

Deciding on a Data Type

For each of the items listed below, determine which Data Type seems most appropriate to store it as. If you are unsure of any, start a discussion in your Slack small group.

  • Username/handle
  • Date of Birth
  • Age
  • Number of Likes
  • Balance on a bank account
  • Currently online
  • Daily countdown to a big event
  • Caption for an image

Variables

Pieces of data in the various types we’ve discussed so far are valid JavaScript code just as they are. We can demonstrate that by typing "helloworld@gmail.com" or 37 or false into the Chrome Dev Tools Console. We know they are valid because we don’t get an error. If helloworld@gmail.com is typed in, we will get an error, and possibly a helpful suggestion!

However, if we ever want to reference that email address ever again in our code, the only way would be to read that part of the screen and manually type it out again - and that’s not going to make for a very efficient application.

Variables are what allow us to store data in a JavaScript program. We can think of them as storage containers that hold items we care about and want to keep track of. The label on top of that container is what we can compare to a variable name. Variables can store any of the Data Types we’ve learned today as well as others that you’ll learn about in upcoming lessons.

Variable Syntax

In JavaScript, we define variables by starting with the keyword var, typing the name of the variable we wish to create, the assignment operator, then the value being stored.

var email = "helloworld@gmail.com"
var startingAge = 37
var depositPaid = true

To describe the first line of code in the previous example, one might say “This line of code declares a variable named email and assigns it to the String of helloworld@gmail.com”.

If our JavaScript program has data stored in variables, we are able to reference those variables at any time to access the data. This can be demonstrated in the Chrome Dev Tools Console.

Screenshot of Chrome Dev Tools with variables declared and called

Best Practices for Naming Variables

Naming can be hard, but is important to be thoughtful about and follow conventions of the language you are working with so that your code is easily accessible and readable for those you are collaborating with. A few key points:

  • All JavaScript variables should use camelCase - all characters in the first word should be lower cased; in multi-word variables, the firt character of the second word should be capitalized.
  • Variable names should describe the type of data they hold without being overly verbose or specific (examples: name, email, etc. non-examples: x, ftga23, nameOfIncomingMod1FrontEndStudent).

Naming Conventions

In your notebook, write down each of the following variable names and classify it as a strong variable name that follows JavaScript conventions or a poor variable name. Be ready to explain why you deemed any variable name a poor one.

  • isHungry
  • z
  • user_id
  • is_hungry
  • lastdateofcontact
  • depositHasBeenPaid
  • status
  • 1st_class


Reassigning Variables

We often need to write code that changes the data stored in a variable. Consider this Populi example:

  • When a student first creates a profile, the depositPaid variable is automatically assigned to false.
  • Once the student pays their deposit, some code is triggered to change that value to true.

To do that, we use the exact same syntax that we used to make the original assignment. We can run the code that follows, or code like it, in irb to demonstrate that the value has changed.

var depositPaid = false
depositPaid # false

depositPaid = true
depositPaid # true

Variables Practice

  • Open the Chrome Dev Tools Console using the keyboard shortcut.
  • Declare 3 variables; a String, Number, and Boolean.
  • Call each variable to confirm it was stored correctly.
  • Reassign each variable to a new value, then call it again to confirm it does indeed store the new value.
  • Close the Chrome Dev Tools Console using the keyboard shortcut.

String Interpolation

A common situation in web development is wanting to infuse data stored in a variable, into a static string. For example, when viewing a “cart” on an e-commerce site, a user may expect to see “4 items in cart” when they have 4 items in their cart. The "items in cart" part of the sentence was only typed into the code one time. This is achieved through string interpolation. The code snippet that follows demonstrates the syntax:

var itemCount = 4;
var sentence = `${itemCount} items in cart`;
// pay close attention to the character that wraps the sentence; it is not a single quote, but a back tick 
console.log(sentence);

Dev Tools Console vs. Atom

When Atom was introduced in a previous lesson, it was shared that Atom (or the text editor of choice) is where JavaScript code should be written. That is true. So, why did this lesson ask the reader to write JavaScript code in the Chrome Dev Tools Console?

  • JavaScript can run in the browser. Sometimes developers find it easier and quicker to run small pieces of code in the Dev Tools Console, rather than create an entire file and open the text editor, etc.
  • When building actual applications, a text editor is necessary. This allows us to write large code files, save them with version control (Git), and more.

This lesson exposed the reader to the Chrome Dev Tools Console as an option and resource for a place to write and run JavaScript code.

One difference to note, at this stage in knowledge and learning, and being able to see the output.

  • In the Chrome Dev Tools Console, one can type the name of a variable to call it, and after pressing the return key, the Console will display the value of that variable.
  • When writing code in Atom, simply typing the name of a variable will not result in showing the human the value of the variable. Two steps need to be taken:
    1. Instruct the program to print out the value of the variable. console.log(depositPaid) is an example of a console.log statement that will print out the value of the depositPaid variable.
    2. Run the code. In the Terminal, while navigated to the directory that the file containing the code you want to run, run node filename.js. And console.log statements should print out. Additionally, any errors in the code may produce an error message at this time. The Check For Understanding will provide a practice opportunity for this section.

Check For Understanding

Complete this CFU after you’ve done the live GitHub lesson.

Use everything you’ve learned with Atom, Git, GitHub, Data Types and variables, complete this challenge:

  1. Create a new directory called variablePractice.
  2. Inside that directory, create a file called variables.js.
  3. Initialize git inside of the directory.
  4. Commit your work (Think about what message should you use here).
  5. Go to GitHub and create a repository with the same name - variablePractice.
  6. Push your local directory to GitHub by following the instructions.
  7. In your variables.js file, add a few variables that are assigned to Strings.
  8. In your variables.js file, add a few variables that are assigned to Numbers.
  9. In your variables.js file, add a few variables that are assigned to Booleans.
  10. Commit your work.
  11. In your variables.js file, use string interpolaltion to write a sentence, using one of the variables that stores a String.
  12. Commit your work.
  13. In your variables.js file, leave the original String variables as declared, but add some code to reassign them to different values.
  14. Write several console.log statements.
  15. NEW Run your code by going to the Terminal and running node variables.js - make sure you are inside the variablePractice directory when doing so.
  16. Commit your work.
  17. Push your changes to GitHub.

Please submit the link to your GitHub repository in the submission form.




Back