Skip to content

Javascripts Notes

Basics

Operator Meaning

<   Less than
>   Greater than
<=  Less than or Equal to
>=  Greater than or Equal to
==  Equal to
!=  Not Equal to

Escaping

Code    Character
\\  \ (backslash)
\"  '' (double quote)
\'  ' (single quote)
\n  newline
\t  tab

Logical

Operator    Meaning Example How it works
&&  Logical AND value1 && value2    Returns true if both value1 and value2 evaluate to true.
||  Logical OR  value1 || value2    Returns true if either value1 or value2 (or even both!) evaluates to true.
!   Logical NOT !value1 Returns the opposite of value1. If value1 is true, then !value1 is false.
  • Comment: // comment and /* */
  • String + --> Concatenation
  • String index from zero: s[0]
  • String can be compared
  • Escaping: \"
  • Variable var greeting = 'x'
  • null: data type "value of nothing" -- means have a value, but value is "nothing"
  • undefined: data type "absence of value"
  • NaN: not a number
  • Equality comparison is a mess
  • ternary operator conditional ? (if condition is true) : (if condition is false)
  • SCOPE:
    • Shadowing: global variable value is overwritten locally
    • Hoistering: before any Javascript is executed, all function declarations are "hoisted" to the top of their current scope
      • JavaScript hoists function declarations and variable declarations to the top of the current scope.
      • Variable assignments are not hoisted.
      • Declare functions and variables at the top of your scripts, so the syntax and behavior are consistent with each other.
    • Global variables
  • Function expression (take care of hoistering)
  • Array: var donuts = ["glazed", "powdered", "jelly"]; (indexing from 0)
    • methods from MDN
    • length: donuts.length()
    • push: donuts.push('new')
    • pop:var top = donuts.pop()
    • slice:donuts.splice(1, 1, "chocolate cruller", "creme de leche"); // removes "chocolate frosted" at index 1 and adds "chocolate cruller" and "creme de leche" starting at index 1
      • array.splice(start, deleteCount, item1, item2, ...)
    • forEach: donuts.forEach(function(donut) {})
      • array.forEach(function(element, index, array){})
    • map: array.map(function(element){ element = element + 10; return element})
  • Array in Array: a[i][j]
  • type of: typeof(variable)
  • Object: key: value pairs

To print out the total with a dollar sign ( $ ) use string concatenation. To round total up by two decimal points use the toFixed() method. To use toFixed() pass it the number of decimal points you want to use. For example, if total equals 3.9860, then total.toFixed(2) would return 3.99.

if (condition) {
} else if {
} else {
}

switch (option) {
  case 1:
    console.log("You selected option 1.");
  case 2:
    console.log("You selected option 2.");
  case 3:
    console.log("You selected option 3.");
  case 4:
    console.log("You selected option 4.");
  case 5:
    console.log("You selected option 5.");
  case 6:
    console.log("You selected option 6.");
}

while (condition){

}

for ( start; stop; step ) {
  // do this thing
}

x++ or ++x // same as x = x + 1 
x-- or --x // same as x = x - 1
x += 3 // same as x = x + 3
x -= 6 // same as x = x - 6
x *= 2 // same as x = x * 2
x /= 5 // same as x = x / 5

function reheatPizza(arg1, arg2 ) {
  // code that figures out reheat settings!
}

function sayHello() {
  var message = "Hello!"
  return message; // returns value instead of printing it
}

# function expression (anonymous function)
var catSays = function(max) {
  var catMessage = "";
  for (var i = 0; i < max; i++) {
    catMessage += "meow ";
  }
  return catMessage;
};

#named function expression
var doSomething = function addOne(y) {
  return y + 1;
};

trusy and falsy

A value is falsy if it converts to false when evaluated in a boolean context. For example, an empty String "" is falsy because, "" evaluates to false. You already know if...else statements, so let's use them to test the truthy-ness of "".

Here’s the list of all of the falsy values:

  • the Boolean value false
  • the null type
  • the undefined type
  • the number 0
  • the empty string ""
  • the odd value NaN (stands for "not a number", check out the NaN MDN article)

A value is truthy if it converts to true when evaluated in a boolean context. For example, the number 1 is truthy because, 1 evaluates to true.

Essentially, if it's not in the list of falsy values, then it's truthy!

At first, it can be a bit tricky to know when something is either a parameter or an argument. The key difference is in where they show up in the code. A parameter is always going to be a variable name and appears in the function declaration. On the other hand, an argument is always going to be a value (i.e. any of the JavaScript data types - a number, a string, a boolean, etc.) and will always appear in the code when the function is called or invoked.

callback: A function that is passed into another function is called a callback. Let's say you had a helloCat() function, and you wanted it to return "Hello" followed by a string of "meows" like you had with catSays. Well, rather than redoing all of your hard work, you can make helloCat() accept a callback function, and pass in catSays.

// function expression catSays
var catSays = function(max) {
  var catMessage = "";
  for (var i = 0; i < max; i++) {
    catMessage += "meow ";
  }
  return catMessage;
};

// function declaration helloCat accepting a callback
function helloCat(callbackFunc) {
  return "Hello " + callbackFunc(3);
}

// pass in catSays as a callback function
helloCat(catSays);

Inline function expressions

A function expression is when a function is assigned to a variable. And, in JavaScript, this can also happen when you pass a function inline as an argument to another function. Take the favoriteMovie example for instance:

// Function expression that assigns the function displayFavorite 
// to the variable favoriteMovie
var favoriteMovie = function displayFavorite(movieName) {
  console.log("My favorite movie is " + movieName);
};

// Function declaration that has two parameters: a function for displaying
// a message, along with a name of a movie
function movies(messageFunction, name) {
  messageFunction(name);
}

// Call the movies function, pass in the favoriteMovie function and name of movie
movies(favoriteMovie, "Finding Nemo");

// Anonymous 

// Function declaration that takes in two arguments: a function for displaying
// a message, along with a name of a movie
function movies(messageFunction, name) {
  messageFunction(name);
}

// Call the movies function, pass in the function and name of movie
movies(function displayFavorite(movieName) {
  console.log("My favorite movie is " + movieName);
}, "Finding Nemo");

objects

object-literal (notice comma) don't use [number, space, -] for property name

var umbrella = { 
  color: "pink",
  isOpen: false,
  open: function() { 
    if (umbrella.isOpen === true) {
      return "The umbrella is already opened!";
    } else {
      umbrella.isOpen = true;
      return "Julia opens the umbrella!";
    }
   }
};

read information in object

sister["parents"] // returns [ "alice", "andy" ]
sister.parents // also returns ["alice", "andy"]