JavaScript Konsepter

Konsepter som er unike eller spesielle for JavaScript.

let, const og var

Tre måter å deklarere variabler.

let name = "Ola";       // Can be changed, block scope
const PI = 3.14159;     // Cannot be changed
var old = "avoid";      // Old way, function scope

	`let`	`const`	`var`
Kan endres	Ja	Nei	Ja
Scope	Blokk	Blokk	Funksjon
Hoisting	Nei	Nei	Ja

Tip

Bruk const som standard, let når verdien må endres.

=== vs ==

JavaScript har to typer likhet.

// == (loose equality) - converts types
5 == "5"      // true
0 == false    // true

// === (strict equality) - no conversion
5 === "5"     // false
0 === false   // false

Warning

Bruk alltid === og !== for å unngå uventede resultater.

Arrow Functions

Kortere syntaks for funksjoner.

// Regular function
function add(a, b) {
    return a + b;
}

// Arrow function
const add = (a, b) => {
    return a + b;
};

// Short version (one line, implicit return)
const add = (a, b) => a + b;

// One parameter - parentheses optional
const double = x => x * 2;

Array-metoder

forEach - gjør noe med hvert element

const fruits = ["apple", "banana", "orange"];

fruits.forEach(fruit => {
    console.log(fruit);
});

map - lag ny array med endrede verdier

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
// [2, 4, 6, 8, 10]

filter - lag ny array med utvalgte elementer

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(x => x % 2 === 0);
// [2, 4, 6]

find - finn første element som matcher

const numbers = [1, 2, 3, 4, 5];
const first = numbers.find(x => x > 3);
// 4

reduce - reduser til én verdi

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, x) => total + x, 0);
// 15

Andre nyttige metoder

const arr = [1, 2, 3];

arr.push(4);         // Add to end → [1,2,3,4]
arr.pop();           // Remove last → [1,2,3]
arr.includes(2);     // true
arr.indexOf(2);      // 1
arr.length;          // 3
arr.slice(1, 3);     // [2, 3] (new array)
arr.join("-");       // "1-2-3"
arr.reverse();       // [3, 2, 1]

Objekter

Samling av egenskaper (key-value pairs).

const person = {
    name: "Ola",
    age: 25,
    city: "Oslo"
};

// Access
console.log(person.name);        // "Ola"
console.log(person["age"]);      // 25

// Change/add
person.age = 26;
person.job = "Developer";

Destructuring

const person = { name: "Ola", age: 25, city: "Oslo" };

// Extract values
const { name, age } = person;
console.log(name);  // "Ola"

// With arrays
const [first, second] = ["a", "b", "c"];
console.log(first);  // "a"

Template Literals

Strenger med innebygde uttrykk (backticks).

const name = "Ola";
const age = 25;

// Old way
const message1 = "Hi, " + name + "! You are " + age + " years old.";

// Template literal
const message2 = `Hi, ${name}! You are ${age} years old.`;

// Multi-line text
const html = `
    <div>
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;

DOM-manipulering

Endre HTML fra JavaScript.

Velge elementer

// One element
const title = document.getElementById("title");
const button = document.querySelector(".my-button");

// Multiple elements
const allP = document.querySelectorAll("p");

Endre innhold og stil

const el = document.getElementById("title");

el.textContent = "New text";              // Text only
el.innerHTML = "<em>Italic</em> text";    // HTML
el.style.color = "blue";                  // Style
el.classList.add("active");               // Class

Opprette elementer

const newDiv = document.createElement("div");
newDiv.textContent = "Hello!";
document.body.appendChild(newDiv);

Events

Reagere på brukerhandlinger.

const button = document.querySelector("button");

button.addEventListener("click", () => {
    console.log("Clicked!");
});

// With event object
button.addEventListener("click", (event) => {
    console.log(event.target);
});

Vanlige events

Event	Beskrivelse
`click`	Mouse click
`mouseover`	Mouse over element
`keydown`	Key pressed
`submit`	Form submitted
`change`	Input value changed
`load`	Page loaded

Spread og Rest

Spread (...) - utvide arrays/objekter

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };  // { a: 1, b: 2, c: 3 }

Rest (...) - samle argumenter

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4, 5);  // 15

Asynkron JavaScript

setTimeout og setInterval

// Run after 2 seconds
setTimeout(() => {
    console.log("2 seconds have passed");
}, 2000);

// Run every second
const id = setInterval(() => {
    console.log("Tick");
}, 1000);

clearInterval(id);  // Stop

async/await

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