Operators and Variables

Operators

Let's make stuff happen!!!

Operator Types

Mathematical
  • Addition - ( + )
  • Subtraction - ( - )
  • Multiplication - ( * )
  • Division - ( / )
  • Modulus - ( % )
  • Increment - ( ++ )
  • Decrement - ( -- )
  • Greater than - ( >, >= )
  • Less than - ( <, <= )
Access/Assign
  • Brackets - ( [ ] )
  • dot - ( . ) 
  • Assignment - ( = )
  • Assignment - ( += )
  • Assignment - ( -= )
Comparison
  • Equality ( === )
  • Not equal ( !== )
Logical
  • And - ( && )
  • Or - ( || )
  • Not - ( ! )
Ignore
  • ( == )
  • ( != )
Other
  • Grouping - ( )
  • Ternary - ( ? )
Keywords
  • var
  • function
  • for
  • in
  • typeof
  • this
  • new

I quit!!!

Operator Types

Mathematical
  • Addition - ( + )
  • Modulus - ( % )
Access/Assign
  • Brackets - ( [ ] )
  • dot - ( . ) 
  • Assignment - ( = )
Comparison
  • Equality ( === )
  • Not equal ( !== )
Ignore
  • ( == )
  • ( != )
Keywords
  • typeof

Current concerns...

remember,
don't worry about:

Phew!!!

Operator Types

// Mathematical

JavaScript Memory

"I would walk 500 miles..."

"I want to ride my BICYCLE!!!"

9

// Review the slides on numbers if necessary
> 5 + 4; // Self explanatory
> 15 % 4; // Modulus, gets the remainder
// One more thing...
'I want to ride my' 
// What about...
'I would walk ' + 500 + ' miles...' //???

3


+ ' BICYCLE!!!'; // ???
String 'concatenation'
For more complex operations, read the docs!

Operator Types

// Comparison (equality)

JavaScript Memory

true
// Are these the same? (in terms of ASCII)
> 1000 === 1000; // ???
> 5000 !== 5000; // ???
// And these...?
> 'Basketball' !== 'and Mr. Curtis Blow'; // ???
> 'Sussudio' === 'Sussudio'; // ???
// What about types?
typeof 'Do the Beat Street Strut!'; // ???
typeof { starlight: 'startbright'}; // ???
typeof 8675309; // ??? 
typeof function() {}; // ???
false
true
true
"object"
"string"
"number"
"function"
Again,  DO NOT use '!=' or '=='

Operator Types

// Assignment and Access

// 'Assignment Operator' (NOT EQUALS!)
> var planet = 'rock!'; // (see variables)
// Arrays [bracket notation only]
['Don\'t', 'stop', 'the', planet][3]; // ???
['do', 'the', 'conga'][3] = 'beat'; // ???
// Objects
> { }['first'] = 'Gloria'; // ???
> { first: 'Gloria' }.last = 'Estefan'; // ???
> { music: 'is gonna get you!' }['music']; // ???

Just a quick intro, more on these later.

JavaScript Memory

"rock!"
"rock!"
{ "first":"Gloria" }

['do', 'the', 'conga', 'beat']

"is gonna get you!"
{ 
  "first":"Gloria",
  "last":"Estefan" 
}
Key Takeaways
  • There is no shortage of operators
  • Read the docs for your specific use case
  • Know the difference between = and ===

Operators

Remember:

'==' | '!='

'===' | '!=='

Variables

Oh wait, I need to use that again

Variables

  • Declaration and assignment
  • Referencing primitive values
  • Variables rules
  • Good naming conventions
  • Bad naming conventions
  • Example use cases
What we'll cover:

Variables

// Variable declaration

'Stevie Nicks'

'Edge of Seventeen'

001

002

Slot

JavaScript Memory

// Proper Declaration
> var name = 'Stevie Nicks'; 
> var song = 'Edge of Seventeen'; 
// Don't use (for now)
> window.newerName = 'Charlie Parker';
> window.newerSong = 'Early in the Morning';
// NEVER USE
> newName = 'Eddie Money';
> newSong = 'Take me home tonight';

Bad convention: 'new___'

'declaration'
'assigment'

Variables

// Rules and Conventions

// Declare and assign at the top of your scope/code
2 > var favBand = 'Earth Wind and Fire';
3 > var favSong = 'Fantasy';
4 >
5 > console.log(favBand, favSong);
// Good Examples (declarations only)
> var songsArray;     // Descriptive of the reference
> var artistName;     // Single word
> var templeOfTheDog; // 'camelCase': hungryHungryHungry
// Words not to use (your code will break):
// > var new, var, in, function, String, Number, break, typeof...
// Basically, If your editor highlights the word, don't use it!
// Bad Examples (declarations only)
> var SongTitles;  // Start with lowercase
> var tracknumber; // Use camelCase
> var newArray;    // Of what?
> var &no$yb@ls;   // Code will break

Use 'console.log' to check values

Variables

// Variable declaration

'David'

'Bowie'

001

002

Slot

JavaScript Memory

> firstNameAgain;
> var firstNameAgain = firstName;
// What is Javascript doing?
> firstName = 001;
> lastName = 002;
// Proper Declaration
> var firstName = 'David';
> var lastName = 'Bowie';

003

'David'

 = 003;

Variables

// Variable Usage

'StevieWonder'

'Stevie Wonder'

'Stevie'

'Wonder'

// Proper Declaration
> var firstName = 'Stevie';
> var lastName = 'Wonder';
// We want his full Name
> firstName + lastName; 
// 'Stevie' + 'Wonder'
// Fix the formatting
> firstName + ' ' + lastName; 
// 'Stevie' + ' ' + 'Wonder'
JavaScript Memory

Variables

// Variable Usage

'Stevie Wonder'

'Stevie'

'Wonder'

Reference Error

// Proper Declaration
> var firstName = 'Stevie'; // 001
> var lastName = 'Wonder'; // 002
// Print the fullName
console.log(fullName); // ???
// Fix the formatting
> firstName + ' ' + lastName; // 003
// 'Stevie' + ' ' + 'Wonder'

001

002

Slot

003

JavaScript Memory
JavaScript Console

Variables

// Variable Usage

'Scott Weiland'

'Scott'

JavaScript Memory

undefined

'Scott Weiland'

'Scott'

JavaScript Console

'Scott Weiland'

Makes a copy for 'primitive' types.

// Declare before using
> var fullName = 'Scott Weiland';
> var firstName = fullName.split(' ')[0];
> console.log(fullName); // ???
> console.log(firstName); // ???
34 // What's gonna happen?
35 > console.log(stoneTemplePilots); // ???
36 > var stoneTemplePilots = fullName; // ???
// Overwriting
> fullName = 'Stone Temple Pilots'; // ???
> console.log(fullName); // ???

'Declared' or 'namespaced' but not 'defined' before it's used. Hence 'undefined'

001

002

Slot

003

// 001
// 002

'Stone Temple Pilots'

004

'Stone Temple Pilots'

// 004
// 003
// 001
// 002
// 004
Key Takeaways
  • Variables allow us to re-use values
  • They just point to a value in memory
  • Values don't depend on them, we do
  • Use good, descriptive names
  • What is an 'undefined' variable?

  • Declare variables before using them
  • Always use the 'var' keyword when declaring

Variables

Vocabulary:

  • Declaration
  • Assignment
  • Hoisting
  • Namespace

Operators and Variable

By telegraphprep

Operators and Variable

An introduction to variables and operators

  • 944