Week 2: JavaScript

What is JavaScript?

JavaScript is a versatile programming language used for adding interactivity, dynamic content, and logic to web pages. It enables developers to create engaging user experiences and enhance the functionality of web applications.

Printing

The console.log() function is used to print output to the browser's console. It's a valuable tool for debugging code and inspecting variables and values.

Example:

console.log("Hello, world!");

Semicolons

In JavaScript, semicolons are used to terminate statements. Unlike most programming languages, adding semicolons is optional — however, it's good practice to include them in your code.

Comments

Comments in JavaScript provide explanatory notes within the code. Single-line comments use //, while multi-line comments use /* */.

Example:

// This is a single-line comment.
 
/*
   This is a
   multi-line comment.
*/

Variables

Variables are used to store and manage data in JavaScript. There are three ways to declare variables: let, const, and var.

let is used for variables that can change value
const is used for constants
var is used to declare variables before ES6 (newer version)

In general, only use let and const in your code.

let age = 25;
const name = "Alice";
var count = 10;

let

Let is block scoped, can be updated but not redeclared

let greeting = "say Hi";
let greeting = "say Hello instead";
// error: Identifier 'greeting' has already been declared
 
if (true) {
    let greeting = "say Hello instead";
    console.log(greeting); // "say Hello instead"
    //no error because different scope
}
 
console.log(greeting); // "say Hi"

const

Const is block scoped, cannot be updated or redeclared

const greeting = "say Hi";
 
greeting = "hello";
// error: Assignement to constant variable
 
const greeting = "hey";
// error: Identifier 'greeting' has already been declared
 
//can update object properties
const greet = {
    message: "say Hi",
    times: 4
}
greet.message = "hello!";

Data Types

JavaScript has various data types, including numbers, strings, booleans, arrays, and objects. The language uses dynamic typing, allowing variables to change their type during runtime.

// Numbers:
let workshopNum = 2;
let length = 120;
 
// Strings:
let color = "Blue";
let name = "ACM";
 
// Booleans:
let x = true;
let y = false;
 
// Object:
let person = {firstName: "John", lastName: "Doe"};
 
// Array object
let communities = ["Hack", "AI", "Cyber", "Design"];

Equality

JavaScript offers loose equality (==) and strict equality (===) operators for comparison. It's recommended to always use strict equality to avoid unexpected type conversions. Strict equality checks for both value and type while loose equality checks only value.

Example:

console.log(5 == '5'); // true
console.log(5 === '5'); // false

Objects

Objects in JavaScript are collections of key-value pairs. They are versatile and widely used for organizing and managing data.

Creating an object:

const organization = {
    name: "ACM UCSD", 
    age: 5,
    hackschool: () => {
        console.log("JavaScript Workshop");
    }
}

We can access properties of an object either through the dot notation or the bracket notation

Accessing properties (dot notation):

const myName = organization.name;
console.log(myName); // prints "ACM UCSD"

Accessing properties (bracket notation):

const myName = organization[age];
console.log(myName); // prints 5

Similarly we can modify properties using both the dot and bracket notation

Modifying properties (dot notation):

organization.name = "HACK";
console.log(organization.name); // prints "HACK"

Modifying properties (bracket notation):

organization[age] = 6;
console.log(organization[age]); // prints 6

To call methods stored in an object use dot notation

organization.hackschool(); // prints "JavaScript Workshop"

Exercise 2: Creating and Manipulating Objects

Create an object representing a UCSD student. Include properties such as name, college, year, and favorite subject. Then, write a function that updates the student's favorite subject.

Loops

Loops allow you to execute a block of code repeatedly. Common loop types are while and for loops.

While Loop:

let ind = 0;
while (ind < 4) {
    console.log(ind);
    ind ++;
}
// prints 0-3 (0, 1, 2, 3)

For Loop:

for (let i = 0; i < 4; i ++){
    console.log(i)
}
// prints 0-3 (0, 1, 2, 3)

For each Loop:

let colleges = ["Revelle", "Muir", "Marshall", "Warren", "ERC", "Sixth", "Seventh", "Eight"]
for (i of colleges) {
    console.log(i);
}
// prints each college in list

let acm = "ACM UCSD"
for (i of acm) {
    console.log(i);
}
// prints A C M   U C S D

Arrays

Arrays are ordered collections of data in JavaScript. They are commonly used for storing lists of items.

Example:

const emptyArr = []; //empty arrray
const numArr = [1, 2, 3, 4];
const strArr = ["ACM", "UCSD", "HACK"];
const diffArr = [8, "JS Workshop", true, 16.16];

Common Array Operations:

Accessing Elements: Use index notation to access individual elements in an array.

const diffArr = [8, "JS Workshop", true, 16.16];
console.log(diffArr[2]); // true

Adding Elements: push(): Adds one or more elements to the end of an array. unshift(): Adds one or more elements to the beginning of an array.

const diffArr = [8, "JS Workshop", true, 16.16];
console.log(diffArr); // 8, "JS Workshop", true, 16.16
diffArr.push("adding")
console.log(diffArr); // 8, "JS Workshop", true, 16.16, "adding"
diffArr.unshift("front")
console.log(diffArr); // "front", 8, "JS Workshop", true, 16.16, "adding"

Removing Elements: pop(): Removes the last element from an array and returns it. shift(): Removes the first element from an array and returns it. splice(): Removes elements from a specific index with optional insertion of new elements.

const diffArr = ["front", 8, "JS Workshop", true, 16.16, "adding"];
console.log(diffArr); // "front", 8, "JS Workshop", true, 16.16, "adding"
pop = diffArr.pop()
console.log(pop) // "adding"
console.log(diffArr); // "front", 8, "JS Workshop", true, 16.16
shift = diffArr.shift()
console.log(shift) // "front"
console.log(diffArr); // 8, "JS Workshop", true, 16.16

Concatenating Arrays: concat(): Combines two or more arrays to create a new array.

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

Slicing: slice(): Creates a new array by extracting a portion of an existing array based on start and end indices.

let numbers = [1, 2, 3, 4, 5];
let sliced = numbers.slice(1, 4);
console.log(sliced); // [2, 3, 4]

There are many more operations like reversing, sorting, searching and filtering, more can be found at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array (opens in a new tab)

Functions

Functions are reusable blocks of code that can be called with arguments and can return values. They promote code organization and reusability.

Example:

let collegesUCSD = ["Revelle", "Muir", "Marshall", "Warren", "ERC", "Sixth", "Seventh", "Eight"]
function getColleges(collegesList) {
    let size = 0;
    for (i of collegesList) {
        console.log(i);
        size += 1;
    }
    return size;
}
 
const numColleges = getColleges(collegesUCSD);
// prints every colleges in collegesUCSD
console.log(numColleges);
// prints 8

Arrow functions

Arrow functions provide a concise way to write functions in JavaScript. They are considred anonymous functions and allows the function to refer to the object that defined it.

Syntax:

const myFunction = (arg1, arg2) => {
    // stuff the function does
};

const myFunction declares a constant named "myFunction"
= assigns the function to myFunction
arg1 and arg2 specify the arguments the function accepts

Difference:

// Regular function
function add_nums(num1, num2) {
    return num1 + num2;
}
// Arrow function
let add_nums = (num1, num2) => num1 + num2;
 
console.log(add_nums(5, 9)) // both would print 9

Example:

function regularFunction() {
    console.log(this);
}
 
const arrowFunction = () => {
    consoloe.log(this);
};
 
const obj = {
    hello: regularFunction,
    greeting: arrowFunction
};
 
obj.hello();
// prints obj
 
obj.greeting();
// prints window

Exercise 3: Creating Functions

Create your own array of food items. Then, write a function findFood() that takes in the array and a food item. It will loop through the array and return true if the item exists in the array, and false otherwise.

Callbacks

Callbacks are functions passed as arguments to other functions. They are commonly used for asynchronous programming and event handling.

Example:

function greet(name, callback) {
    console.log('Hello' + ' ' + name);
    callback();
}
 
// callback function
function callMe() {
    console.log('Call me back!');
}
 
// passing function as an argument
greet('Nikhil', callMe);
// Output:
// Hello Nikhil
// Call me back!

Promises

Promises are used to handle asynchronous operations in JavaScript. They provide a structured way to handle success and error cases.
A promise has a parameter that is known as the Executor function. This function takes in two parameters: resolve and reject.

resolve: This function is called when the asynchronous operation completes successfully. It accepts a single argument, which is the value the promise will be resolved with.

reject: This function is called when the asynchronous operation fails. It accepts a single argument, which is the reason (error) for the rejection.

text-formatting-example

let checkLength = new Promise((resolve, reject) => {
  let sentence = "Hack is the best";
  // Resolve is like return
  if (sentence.length < 10) {
    resolve("Valid sentence!");
  }
  // Reject produces error
  else {
    reject(new Error("Too long!"));
  }
});

Async/Await

An async function always returns a promise. If the function returns a value, the promise will be resolved with that value. If the function throws an error, the promise will be rejected with that error.

Example:

 
async function fetchData() {
  // Start an asynchronous fetch request to the given URL
  let response = await fetch('https://examplewebsite.com/data');
 
  // Wait for the response and parse it
  let data = await response.json();
 
  // Log the parsed data to the console
  console.log(data);
}
 
// Call the async function to execute the fetch operation
fetchData();

Then/Catch

The then() and catch() methods are fundamental to working with Promises. then() is used to specify what to do when a Promise is resolved where the catch() is used to handle errors that occur during Promise execution.

Example:

function checkRandomNumber() {
  return new Promise((resolve, reject) => {
    // Math.random returns a random number [0, 1)
    const randomNum = Math.random();
 
    if (randomNum < 0.5) {
      resolve(randomNum);
    }
    // Rejects with error
    else {
      reject(new Error("Error: The random number is too high."));
    }
  });
}

Using then and catch which can also be chained for successive events

findUser()
  .then((data) => {
    console.log("Our number:", data);
    return data;
  })
  .catch((error) => console.error("Error:", error.message));

Exercise 4: Async await practice

Create an async function fetchData that simulates an API call to fetch user data. The function should return a promise that resolves after 2 seconds with a user object containing name and email.

Then, write another async function displayUser that uses await to call fetchData and logs the user's information to the console.

Week 1: CSS Week 3: React