Lesson: Reviewing the Basics of JavaScript

Introduction

In this lesson, we will review the basics of JavaScript, covering essential concepts like variables, control flow, loops, arrays, objects, functions, classes, scope, closure, pass by value vs. pass by reference, and DOM manipulation. We will culminate the lesson by building a simple web application that demonstrates these concepts in action.

Terminal Objectives

By the end of this lesson, students should be able to:

Basics of JS Reviewed
Understand the importance of clean code in JavaScript.
Apply JavaScript Standard Style guidelines to their code.
Refactor existing code to follow the JavaScript Standard Style.

Lesson Outline

Variables
- Declare variables using let, const, and var
- Assign values to variables
- Data types: string, number, boolean, null, undefined, and object
Control Flow: if-else
- Write conditional statements using if, else if, and else
- Understand truthy and falsy values in JavaScript
Loops
- for loop
- while loop
- do-while loop
- for...of loop
- for...in loop
Arrays
- Create arrays
- Access array elements
- Add, remove, and modify elements
- Array methods: push, pop, shift, unshift, splice, slice, concat, forEach, map, filter, and reduce
Objects
- Create objects
- Access and modify object properties
- Object methods
Functions
- Declare functions
- Function expressions
- Arrow functions
- Function parameters and arguments
- Return values
Classes & Object-Oriented Programming
- Create classes
- Instantiate objects using classes
- Inheritance and extends keyword
- Constructors and methods
Scope
- Global and local scope
- Block scope
- Lexical scope
Closures
- Understand closure concept
- Practical use cases for closures
Pass by Value vs. Pass by Reference
- Understand the difference between pass by value and pass by reference
- Know which data types are passed by value and which are passed by reference
DOM Manipulation
- Select DOM elements
- Modify DOM elements
- Create and append elements
- Add event listeners
JS Standard Style

By the end of this lesson, students should have a solid understanding of the fundamentals of JavaScript and be able to apply these concepts to build simple web applications.

Variables

// // LOGGING OUTPUT
alert('Hello World') // Do not use for debugging. Stops script and only strings
console.log('Hello World')
console.error('This is an error')
console.warn('This is a warning')

// // VARIABLES - var, let, const
let age = 30

// // let can be re-assigned, const can not
age = 31

// // DATA TYPES - String, Number, Boolean, null, undefined
const name = 'Arthur'
const age = 37
const rating = 3.5
const isCool = true
const x = null
const y = undefined
let z // undefined

let message = "Hello, World!" 
const pi = 3.14159

If else control flow

let age = 18 

if (age >= 18) {
  console.log("You are an adult") 
} else {
  console.log("You are a minor") 
}

Loops

// For loop
for (let i = 0;  i < 5; i++) {
  console.log(i) 
}

// While loop
let j = 0 
while (j < 5) {
  console.log(j) 
  j++ 
}

Arrays

let fruits = ["apple", "banana", "orange"] 
fruits.push("grape") 
console.log(fruits[1])  // Output: "banana"

Objects

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name) 
  }
} 
person.greet()  // Output: "Hello, John"

Functions

function add(a, b) {
  return a + b 
}
console.log(add(3, 4))  // Output: 7

Classes & OOP

class Animal {
  constructor(name) {
    this.name = name 
  }
  speak() {
    console.log(this.name + " makes a noise.") 
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.") 
  }
}

let dog = new Dog("Rex") 
dog.speak()  // Output: "Rex barks."

Scope

function exampleFunction() {
  const localVariable = "I'm local!"  // Local scope
}
const globalVariable = "I'm global!"  // Global scope

Closure

function outer() {
  let count = 0 
  function inner() {
    count++ 
    console.log(count) 
  }
  return inner 
}
const counter = outer() 
counter()  // Output: 1
counter()  // Output: 2

Pass by value vs pass by reference

// Pass by value (primitives)
let a = 10 
let b = a 
a = 20 
console.log(b)  // Output: 10

// Pass by reference (objects)
let obj1 = { value: 10 } 
let obj2 = obj1 
obj1.value = 20 
console.log(obj2.value)  // Output: 20

DOM manipulation

// Select an element
const element = document.querySelector("#example") 

// Change the content
element.textContent = "New content" 

// Add a class
element.classList.add("new-class") 

// Create a new element and append it
const newElement = document.createElement("div") 
newElement.textContent = "I am a new element" 
document.body.appendChild(newElement)

JS Standard Style

1. Explanation

Clean code is essential for maintainability, readability, and collaboration in software development. JavaScript Standard Style is a set of rules that ensure your JavaScript code is consistent and easy to read. By following these rules, you can make your code more accessible to others and reduce potential errors.

Key principles of JavaScript Standard Style include:

Using 2 spaces for indentation.
Using single quotes for strings except to avoid escaping.
No unused variables.
Adding a space after keywords (if, else, for, etc.) and before the opening brace.
Adding a space before a function declaration's parentheses.
Always using strict equality (=== and !==).
Infix operators must be spaced.
No semicolons at the end of statements.

2. Demonstration

Let's take a look at a simple example of code that is not following JavaScript Standard Style and refactor it to meet the guidelines:

// Non-standard style
function add(x,y){
return x+y;
};
console.log("The sum is "+add(5, 10));

Refactored using JavaScript Standard Style:

// JavaScript Standard Style
function add (x, y) {
  return x + y
}
console.log('The sum is', add(5, 10))

3. Imitation

Now that you've seen an example of refactoring code to follow JavaScript Standard Style, try to refactor the following code snippet on your own:

function greet(name){
console.log("Hello, "+name+"!");
};
greet("Alice");

4. Practice

To practice applying JavaScript Standard Style, refactor the code below to meet the guidelines:

function calculateBMI(weight_kg,height_m){
var bmi=weight_kg/(height_m*height_m);
return bmi.toFixed(1);
};
console.log("Your BMI is: "+calculateBMI(75, 1.78));

Remember to keep the guidelines in mind as you work through the imitation and practice sections. Ensure you follow the rules, such as using two spaces for indentation, single quotes for strings, and no semicolons at the end of lines.