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. While JavaScript has automatic semicolon insertion, it's good practice to include semicolons explicitly to avoid unexpected behavior.

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)

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

	let	const	var
scope	Block	Block	globally/locally
updated	✅	❌	✅
redeclared	❌	❌	✅

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 differet 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!";

var

Var is globally/locally scoped and can be redeclared and updated

var greeter = "hey"; //gloablly scoped
 
frunction newFucntion(){
    var hello = "hello"; //locally scoped
}
 
console.log(hello); // error: hello is not defined
console.log(greeter); // hey
 
var greety = "hi";
console.log(greety); // hi
 
greety = "hey again";
console.log(greety); // hey again

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:
const person = {firstName: "John", lastName: "Doe"};
 
// Array object
const communites = ["Hack", "AI", "Cyber", "Design"];
 
// Date object:
const date = new Date("10-18-2023");

Exercise 1: Javascript Syntax Quiz

Create a variable called firstName, that has your first name as it's value. Then, create a variable called lastName, that has your last name as it's value. Using the console.log() function, print the two variables together.

Operators

Operators in JavaScript perform actions on values and variables. These include arithmetic, comparison, logical, and assignment operators.

let x = 4;
let y = 2;
let a = 5;
let b = 3;

Basic arithmetic operations:

test1 = x + y; // 6
test2 = x - y; // 2
test3 = x * y; // 8
test4 = x / y; // 2
test5 = a / b; // 1.6666666666666667
test6 = x % y; // 0
test7 = a % b; // 2
test8 = x**y;  // 16

Logical operations:

console.log('++x = ', ++x)  // x is now 5
console.log('x++ = ', x++)  // prints 5 and then increased to 6
console.log('x = ', x)      // x is now 6
 
console.log('--x = ', --x)  // x is now 5
console.log('x-- = ', x--)  // prints 5 and then decreased to 4
console.log('x = ', x)      // x is now 4

Operations with different data types:

test1 = 8 + 5;          // 13
test2 = 8 + '2';        // 82
test3 = 8 + 5 + 'x';    // 13x
test4 = 8 + 'x' + 5;    // 8x5
test5 = 2 - '1.5';      // 0.5
test6 = 8 * '-2';       // -16
test7 = 5 + true;       // 6

Equality

JavaScript offers strict equality (===) and loose equality (==) operators for comparison. It's recommended to use strict equality to avoid unexpected type conversions. Strict equaltiy 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 acess properties of an object either through the dot notaion 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 whileand 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 fucntion 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 fucntion to myFunction
arg1 and arg2 specify the argumetns 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.

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

async and await are used to simplify asynchronous programming in JavaScript, async functions return promises

Example:

async function fetchUser() {
  let search = new Promise((resolve, reject) => {
    // calls function after 1000 milliseconds
    setTimeout(() => resolve("found"), 1000);
  });
 
  // await makes the function wait til the promise is resolved
  let isFound = await search;
  console.log(isFound);
}
 
fetchUser();

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 findUser() {
  return new Promise((resolve, reject) => {
    // Math.random returns a random number [0, 1)
    const randomNum = Math.random();
    // Resolves user data
    if (randomNum < 0.5) {
      resolve({ name: "Charvi", age: 20 });
    }
    // Rejects with error
    else {
      reject(new Error("Error: Unable to find user."));
    }
  });
}

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

findUser()
  .then((userData) => {
    console.log("Username:", userData.name);
    return userData.age;
  })
  .then((age) => {
    console.log("Age:", age + 5);
  })
  .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