FEWDRemote

Lecture 10: DataTypes

-

Welcome to Lecture 10!

foo

-

Learning Objectives

-

Agenda

  1. What are datatypes?
  2. Supported Javascript Datatypes
  3. Declaring Variables in Javascript
  4. Datatypes and supported operators
  5. Arrays and array ops

Datatypes

In programming languages, a data type is a classification identifying one of various types of data.

-

From a data type, we can determine:

-

Most programming languages have the following data types.

👇👇👇

-

Strings

-

Numbers

-

NB

-

Booleans

-

Arrays / Lists

-

Dictionary / Hash-map

-

Objects / Classes

Supported JavaScript Datatypes

👇👇👇

-

In JavaScript, we have five primitive types:

-

Strings

"hello!" // double quotes
'hi' // single quotes
`testing` // template literal - very useful, as we will see

-

Numbers

5
3.14159
4. // yes, this is valid. 
   // no, do not ever do this in actual code

-

Boolean

true // lower case, always
false

-

undefined

undefined

By itself, this datatype is quite meaningless. However when we get to variables we will see that it is essentially used to check if a variable has been declared

-

null

null

Same as above, the main difference being that null is used convey that a variable has been declared but it is still empty

-

Symbol

Symbol('description')

-

Out of scope of this class, but feel free to read up on them on MDN!

-

Determining the Type

We can determine the type of a variable or value using typeof() (which returns a string).

typeof 10
=> 'number' // note the quotations, typeof yields a string

typeof {}
=>  'object'

typeof 'Hello World' 
=> 'string'

Due to how JavaScript was first implemented, typeof(null) returns 'object'

-

Before exploring each individual data type and the operations we can apply to them, let’s see how we can declare variables

Variables

👇👇👇

-

Variables are used to store data into a computer’s memory so we can reference them later. We will always use the const/let keywords to declare a variable.

-

const vs let

const a = 1;
let b = 1;

-

If we declare a variable without assigning it a value, its value is undefined:

let a;
a
=> undefined

Question: what would happen if we tried the above with const?

-

Naming

By convention, all names should be camelCased, whether they’re for variables or functions.

const myScore = 100;

const myString = "Hello World!";

-

Good variables are descriptive. Bad variables are ambiguous.

NOTE: $ and _ are also valid variables.

There are certain reserved words we can’t/shouldn’t use for names, e.g. var, function, class, etc.

Do not use reserved keywords!

-

Assignment Operators

Values are assigned to a variable using =:

const num = 1;
num;
=> 1

-

JavaScript also has compound assignment operators, +=, -=, /=, and *=:

num;
=> 1

num += 5;
=> 6

NOTE: these usually only apply to the number datatype, however the += will also work for strings

-

We can use ++ and -- to increment and decrement by 1 respectively as postfix or prefix operators:

const num = 5;
num;
=> 5

num++;
=> 5
num;
=> 6

++num;
=>7

-

Number to String

Use the toString() method on a number by itself, or on a variable that’s storing the number:

const num = 1;
num.toString();
=> "1"

(1).toString();
=> "1"

// what does this return?
1.toString();

-

String to Number

Use the Number() method, and pass in the string. It will return NaN, or not-a-number for anything that’s not parseable:

Number("5");
=> 5

Number(":)");
=> NaN

QUESTION what is NaN? How can we prove to ourselves definitively his datatype?

-

Now, we will explore some of the javascript specific datatypes in further detail

Numbers

👇👇👇

-

In JavaScript, we only have floating point numbers, which results in cases like these:

0.1 + 0.2
=> 0.30000000000000004

3.0 === 3
=> true

-

Arithmetic Operators

We use operators to work with data in JavaScript. The standard arithmetic operators are available:

1 + 2
=> 3

2 - 5
=> -3

5 / 2
=> 2.5

6 * 2
=> 12

-

Additional Math Operators

For additional math operators, e.g. power, we can use the Math object

// 3^2 becomes
3 ** 2
=> 9

// square root of 4 becomes
4 ** 0.5
=> 2

// random number between 0 and 1 exclusive
Math.random()
=> 0.3156855241316119
// hopefully, you got a different random number!

// rounding a number to an integer
Math.round(3.99)
=> 4

Strings

Strings are a collection of characters. We’ll use this type for words and text, e.g. 'John Doe'. We can combine, or concatenate strings together, using the + operator:

// notice the space in "Hello "
"Hello " + "World!"
=> "Hello World!"

-

If we try adding a number and a string, the number gets converted to a string:

"3" + 3
=> "33"

"5" + 6
=> "56"

-

Template Literals

Template literals are string literals that allow you to embed and splice expressions in a more flexible way.

-

We use backticks to indicate the start of a template literal:

// multi-line strings
`Hello, this is Line 1!
...and here is Line 2!
`

-

Placeholders and more complex expressions can also be used:

const firstName = 'Foo';
const lastName = 'Bar';
`Hello, ${firstName}`
=> "Hello, Foo"

`Bye, ${firstName + lastName}`
=>"Bye, FooBar"

-

Note that you need to end the string with whatever type of quote you started out with:

"Greetings y'all!"
=> 'Greetings y\'all!'

Depending on the environment, the quote may appear as escaped or unescaped.

-

You can escape a quote manually using a \

'John\'s a JavaScript developer!'
=> 'John\'s a JavaScript developer!'

NOTE: this is not necessary if using string literals

Practice

Basic Vars Review LIVE Instructor Version

-

Mad Libs

Let’s create a simple mad libs program.

  1. Create three variables, noun, verb, adjective.
  2. By default all three should be set equal to ”———“ (essentially a blank line)
  3. When the values of those variables are swapped with an actual noun, verb, adjective, display the following string:
"The [NOUN] [VERB] [ADJECTIVE]"