Quartz 4

Javascript By Example lead magnet

6 min read

Created: August 7, 2020 2:12 PM Tags: lead magnets Updated: August 9, 2020 7:56 PM

Variables

var url = 'raddevon.com';
//  ☝️- Function scoped, can be reassigned
const name = 'Devon';
//    ☝️- Block scoped, no reassignment
let age = 37;
//  ☝️- Block scoped, can be reassigned
 
// More on scope later

Comments

// This is a comment.
// It can be alone on a line like this
1 + 1; // or it can start to the right of an expression.
/* Use this syntax to write comments
that span multiple lines. */

Common Data Types

// Boolean
const summerIsHot = true;
const winterIsHot = false;
const averageJanTemp = 45;
const averageAugTemp = 73;
const januaryIsHotter = averageJanTemp > averageAugTemp;
//          ☝️ This is false.
const augustIsHotter = averageJanTemp < averageAugTemp;
//          ☝️ This is true.
// undefined
let futureValue; // declared but not assigned; is undefined
const badFutureValue; // can't do this; throws an exception
 
// null
const foreverEmptyValue = null; // will always be null
let emptyValue = null; // can assign a value later

Objects

// Object
const user = {
  name: 'Devon',
  age: 37,
  now: 'Watching my wife play Animal Crossing',
  email: 'devon@raddevon.com',
};
 
// Access data by key (word before colon)
user.name; // 'Devon'
user['name']; // 'Devon'
// ☝️ When using square brackets, key name must be a string
 
// Assign new values to individual keys
user.now = 'Discussing a freelance project';
// ☝️ also works with square brackets: user['now'] = ...
user; // {name: 'Devon',
//        age: 37,
//        now: 'Discussing a freelance project',
//        email: 'devon@raddevon.com'}
 
// Add key/value pair after creation by assigning a value
user.themeColor = '#b70d74';
user; // {name: 'Devon',
//        age: 37,
//        now: 'Discussing a freelance project',
//        email: 'devon@raddevon.com',
//        themeColor: '#b70d74'}
 
// Delete key/value pair using the `delete` operator
delete user.age;
// ☝️ also works with square brackets: delete user['age']
user; // {name: 'Devon',
//        now: 'Discussing a freelance project',
//        email: 'devon@raddevon.com',
//        themeColor: '#b70d74'}

Functions

// Function declaration
//       👇-name  👇-parameters
function shout(phrase) {
  //                  ☝️-start of function code
  // 👇 returned value is passed back to the calling code
  return phrase.toUpperCase();
} // 👈-end of function
// Function declarations are hoisted.
// Can declare anywhere and call anywhere.
// Function expression with an arrow function
//      👇-name   👇-parameters
const whisper = (phrase) => {
  //                       ☝️-start of function code
  // Alternative: `const whisper = function(phrase) {…}`
  // ☝️-Avoid inheriting this (see comments below function)
  // 👇 returned value is passed back to the calling code
  return phrase.toLowerCase();
}; // 👈-end of function
// Function expressions are not hoisted.
// Can only be called after the expression.
// Arrow functions have no this.
// Instead, they use this from the surrounding context.
// Calling functions
const shoutedPhrase = shout('turn it up');
//                    ☝️-name    ☝️-arguments
shoutedPhrase; // 'TURN IT UP'
 
const whisperedPhrase = whisper('TURN IT DOWN');
whisperedPhrase; // 'turn it down'
// Calling works the same no matter how it was created
 
//           👇-executed 1st
console.log(shout('taking this to the console!'));
//      ☝️-executed 2nd
// Nested functions: they are executed from the inside out
// Inner function return value becomes argument in outer.

Mathematical Operators

1 + 1; // 2
1 - 1; // 0
2 * 4; // 8
8 / 2; // 4
 
9 % 2; // 1; The modulo operator gives the remainder
// ☝️- 9 / 4 is 2 with a remainder of 1
// 1 is the result of the modulo operation
 
2 ** 4; // 16; This is the exponentiation operator
// ☝️- This is two raised to the fourth power
 
1++; // 2; This is the increment operator (adds 1)
1--; // 0; This is the increment operator (subtracts 1)

Conditions

// Each condition produces a boolean: `true` or `false`
1 < 2; // true
2 < 2; // false
2 <= 2; // true
 
1 > 2; // false
2 > 2; // false
2 >= 2; // true
 
1 === 1; // true
1 === 2; // false
1 !== 1; // false
1 !== 2; // true
 
//    👇- strict equality
false === 0; // false; values are not equal
//    👇- equality
false == 0; // true; values are equal after type conversion
// Use strict unless you have a good reason not to.

If Statements

if (userAge > myAge) {
  console.log("Looks like you're older than me.");
} else if (userAge < myAge) {
  console.log("Looks like you're younger than me.");
} else {
  console.log("Hey! We're the same age!");
}

Logical Operators

// And: produces true if both sides are true
true && true; // true
false && true; // false
true && false; // false
false && false; // false
 
// Or: produces true if either side is true
true || true; // true
true || false; // true
false || true; // true
false || false; // false
 
// Not: Flips the truthy/falsey value
!true; // false
!false; // true
 
// Test two conditions in an if statement
if (age >= 13 || hasParentConsent) {
  createAccount();
} else if (age < 13 && hasParentConsent) {
  alert('You must be over 13 or have parent consent');
}
 
// Test for the opposite of a condition
if (!hasParentConsent) {
  alert('This platform requires parent consent');
}

Loops

// For
//  👇-1       👇-2    👇-3
for (let i = 1; i < 11; i++) {
  // Three things happening in the parens, separated by ;
  // 1. Initializes a variable
  // 2. Sets the condition for breaking out of the loop
  // 3. What to do after each iteration
  console.log(i);
} // Logs numbers 1-10
 
// While
let name;
while (!name) {
  //     ☝️- Condition for continuing the loop
  name = prompt('Enter your name:');
}
 
// If you want to ensure the loop code runs at least once…
let name;
do {
  name = prompt('Enter your name:');
} while (!name);

Scope

if (userAge < 13) {
  var userIsOfAge = false;
  //  ☝️- var is scoped to function
  // Since it's not inside a function, it's global
  const userRequiresParentalConsent = true;
  //   ☝️- const is scoped to the block.
  // Only exists inside this block.
  let userHasAccess = false;
  // ☝️- let is scoped to the block.
  // Only exists inside this block.
} else {
  var userIsOfAge = true;
  const userRequiresParentalConsent = false;
  let userHasAccess = true;
}
 
console.log(userIsOfAge);
// ☝️- This works because the variable is global.
console.log(userRequiresParentalConsent);
// ☝️- Throws an exception
/* Uncaught ReferenceError: userRequiresParentalConsent is not defined */
console.log(userHasAccess);
// ☝️- Throws an exception
// Uncaught ReferenceError: userHasAccess is not defined
 
// Let's try another scenario
function checkAge() {
  if (userAge < 13) {
    var userIsOfAge = false;
    const userRequiresParentalConsent = true;
    let userHasAccess = false;
  } else {
    var userIsOfAge = true;
    const userRequiresParentalConsent = false;
    let userHasAccess = true;
  }
}
checkAge(); // 👈 Calls the function above
 
console.log(userIsOfAge);
console.log(userRequiresParentalConsent);
console.log(userHasAccess);
/* ☝️- Each of these will throw an exception since the userIsOfAge variable is now declared inside a function.*/

Graph View

Backlinks