JS Notes

JS Notes

This Document outlines some notes I took while doing the Web Dev Simplified Course. I will write down the stuff from each chapter, that I personally think is important. Plus learning purposes and stuff.

Chapters:

1. Setup
2. Functions and scoping
3. Advanced Variables
4. Basic DOM

Setup

1. Download and install Node.js
   • If the PowerShell script that installs the additional modules get stuck, check in the VS Installer whether or not the VS Build tools got installed. Also check if python got installed.
2. Install the VSCode Extension Prettier and set it as your default Code Formatter

Functions and scoping

Arrow Functions

They're basically a shorthand for declaring functions They're somewhat similar declared to variables. They're especially nice when doing a callback.

let sum = (a, b) => {return a + b}; // This a valid
let square = a => a * a; // This is also valid (I wouldn't recommend tho)

function func(x, callback) {
    callback(x);
}

func(10, variable => {
    console.log(variable)  // This is a nice shorthand for callbacks
});

Hoisting

Unlike some languages (looking at you C) functions will get hoisted. This means a function that is called before it's definition can still be executed. This is not true for arrow functions though, so watch out!

func("Hello"); // This will execute
arrowFunc("Hello"); // This won't execute

function func(msg) { console.log(msg); } // This function will get hoisted
let arrowFunc = msg => console.log(msg); // This won't get hoisted

Advanced variables

Constants

const

Var

Var will always declare a variable as global. Meaning it will ignore scoping and get hoisted. It is recommended to not use it.

Comparing values

Using == to compare between to values will trigger Type Coercing, meaning console.log(0 == false); will print true. If you want it to be strict use ===. This won't work for NaN types though, so use isNaN(variable) for NaNs.

Arrays

Will start counting at 0 (obviously).

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // This is how you declare your array

console.log(myArray[0]); // This is how to access a single element
myArray.push(11); // This will concat an Element
myArray.push(["amogus", "sus"]); // We can even mix types and nest Arrays

Objects

They are similar to structs in C. Properties are accessed by using dots.

let person = {    // This one is hard to instance
	name: "John",
	age: 30,
	favouriteNumber: 3,
        adress: {
            street: "Main St",
            city: "Boston"
        },
        sayHi(){
            console.log("Hi");
        },   // You technically don't need trailing commas
};

console.log(person.adress.city); // Boston
person.age = 31; // Happy Birthday

function createPerson(name, age) {    // This will return a new Object, but without a type
    return { name: name, age: age, human: true }
}

function Person(name, age) {    // Big first letter to signify that this is a constructor
    this.name = name;
    this.age = age;
    this.human = true;
}

let perry = createPerson("Perry", 7);
let fred = new Person("Fred", 15);    // Instances the Object of Type User

But it's probably better to just use classes.

References and values

Function calls are always call by reference!

let a = 10;
let b = a; // This will copy the value
let c = [1, 2];
let d = c; // This is a reference!
d.push(3); // Both c and d will now have 3 as third element

Array functions

myArray.forEach((number, index) => {
    console.log(number + " " + index);
});

const newArray = myArray.map(number => {   // Returns a new array with doubled values
    return number * 2
});

const filteredArray = myArray.filter(number => {
    return number <= 2; // Only values <= 2 will end up in the new array
});

const n = myArray.find(number => {
    return number > 2; // Returns the first Element with the value > 2
});

const containsLargerTwo = a.some(number => {
    return number > 2; // Returns true, if at least one Element > 2 exists within the array
});

const containsGreaterTwo = a.every(number => {
    return number > 2; // Returns true, if all Elements are > 2 within the array
});

const s = myArray.reduce((sum, number) => {
    return sum + number; // Returns all values summarized
}, 0);

const doesInclude = myArray.includes(6); // Returns true if the Array contains a given value

String Template Literals

let a = "Hello";
let b = "World";

// These print the same thing
console.log(a + " " + b);
console.log(`${a} ${b}`);

Classes

You should probably use Classes instead of Objects.

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.human = true;
    }
    printName() {
        console.log(this.name);
    }
}

let user = new User("Fred", 15);

Basic DOM

• Load your scripts in the Head and use the defer tag to wait for the document to be parsed.
• You can select Elements by using document.getElementById("myId") and similar methods, but the query selector is much more flexible.
  • You can select elements by using CSS selectors with the query selector.
  • Using data attributes is preffered when using the query selector, to prevent clashes with css

const dataAttributeElement = document.querySelector("[data-test]");
const divsWithClass = document.querySelectorAll(".div-class");
const input = document.querySelector("body > input[type='text']");

divsWithClass.forEach((div) => (div.style.color = "red")); // This is NOT an array!
const array = Array.from(divsWithClass); // This is an array

Event listeners

Adding a event listener is easy, just select the element and add the Listener:

const form = document.querySelector(`[data-form]`);

form.addEventListener("submit", (e) => {
	e.preventDefault();
	console.log("submitted form");
});

There are different kinds of events: click, mouseenter, mouseleave, mouseover, focus, blur(losing focus), submit(for forms), rezise. When using Event listeners there is a big difference in this between arrow and normal functions:

• Arrow function: this is global scope
• Normal function: this is local scope, the scope of the element