Javascript Basics

Janyl Jumadinova

March 14, 2025

Values, Types, and Operators

• JavaScript is a dynamic, weakly typed language.
• Supports numbers, strings, booleans, objects, functions.

console.log(4 + 5 * 2);  // Outputs: 14
console.log("Hello" + " World!"); // Outputs: Hello World!

Program Structure

• Variables: let, const, var(legacy)
• Conditionals: if, else if, else

let x = 10;
if (x > 5) {
  console.log("x is greater than 5");
} else {
  console.log("x is 5 or less");
}

• Loops: for, while, do...while

Functions

• Functions allow code reuse and modularity.

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Janyl"));

• Arrow functions: const square = x => x * x;

Data Structures - Objects & Arrays

Arrays

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers.length);  // Outputs: 6

Objects

let person = {
  name: "Janyl",
  stars: 5,
  greet: function() { console.log("Hi!"); }
};
console.log(person.name); // Outputs: Janyl

Higher-Order Functions

Functions as Values

• Functions can be assigned to variables, passed as arguments, and return other functions.
• Example: The repeat function calls fn function times number of times

function repeat(fn, times) {
  for (let i = 0; i < times; i++) {
    fn(i);
  }
}

repeat(console.log, 3);

Functions as Values

• Functions can be assigned to variables, passed as arguments, and return other functions.

function greet(name) {
  return `Hello, ${name}!`;
}
let sayHello = greet;
console.log(sayHello("Alice"));

Functions as Values

• Functions can be assigned to variables, passed as arguments, and return other functions.

function makeMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

let multiplyBy2 = makeMultiplier(2);
console.log(multiplyBy2(5)); // 10

Array Methods: map, filter, reduce

• map: Transforms an array by applying a function to each element.
• filter: Returns a new array with elements that pass a test.
• reduce: Combines elements into a single value.

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

Array Methods: map, filter, reduce

• map: Transforms an array by applying a function to each element.
• filter: Returns a new array with elements that pass a test.
• reduce: Combines elements into a single value.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4]

Array Methods: map, filter, reduce

• map: Transforms an array by applying a function to each element.
• filter: Returns a new array with elements that pass a test.
• reduce: Combines elements into a single value.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Prototypes & Classes

• JavaScript uses prototypes for inheritance.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

Modules in JavaScript

Importing and Exporting

• Modules allow code to be organized and reused.
• Example:

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";
console.log(add(2, 3));

Asynchronous Programming

Callbacks, Promises, and Async/Await

• Callbacks: Functions passed into other functions.
• Promises: Handle async operations.
• Async/Await: Modern syntax for handling promises.

async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}
fetchData();

Callbacks, Promises, and Async/Await

• Callbacks: Functions passed into other functions.
• Promises: Handle async operations.
• Async/Await: Modern syntax for handling promises.

function getData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Data received
});

JSON: JavaScript Object Notation

• JSON is a lightweight format for storing and exchanging data; it is commonly used to send data between a server and a client in web applications.

// JavaScript Object
let person = {
  name: "JJ",
  age: Infinity/Infinity,
  city: "Meadville"
};

// Convert JavaScript Object to JSON
let jsonString = JSON.stringify(person);
console.log(jsonString); // {"name":"Janyl", "age": NaN, "city":"Meadville"}

// Convert JSON back to JavaScript Object
let parsedObject = JSON.parse(jsonString);
console.log(parsedObject); // { name: 'Janyl', age: NaN, city: 'Meadville' }

JavaScript in Web Pages

• JavaScript interacts with web pages via the DOM (Document Object Model).
• Can dynamically update content, handle user interactions, and modify styles.

document.querySelector("button").addEventListener("click", function() {
  alert("Button clicked!");
});

• document.querySelector() selects elements.
• addEventListener() attaches event handlers.