JavaScript Grundlæggende

Denne artikel forklarer de grundlæggende principper i JavaScript.

YouTube Video

Udfører Hello World!

JavaScript Oversigt

JavaScript er et af de mest udbredte programmeringssprog indenfor webudvikling. Det bruges primært til at tilføje dynamiske elementer til websider, hvilket muliggør brugergrænseflademanipulation, datatransmission og oprettelse af animationer. Det kan fungere på klientsiden (i en browser) og på serversiden ved hjælp af teknologier som Node.js. På grund af sin enkelhed og fleksibilitet er det nemt for begyndere at lære og bliver bredt anvendt af professionelle udviklere.

Variabler i JavaScript

Variabler i JavaScript er som beholdere, der bruges til at gemme og genbruge data. Ved at bruge variabler kan du vedligeholde og manipulere værdier i dit program.

Variabeldeklaration

I JavaScript er der tre nøgleord til at erklære variabler.

• var: En gammel metode til at deklarere variabler, men dets rækkevidde er kompleks og kræver forsigtighed. Den er baseret på funktionsrækkevidde.

1var x = 10;

• let: Introduceret i ES6, det er en måde at erklære variabler med blok-rækkevidde på. Det kan tildeles en ny værdi, men kan ikke erklæres igen i samme rækkevidde.

1let y = 20;

• const: Bruges til at deklarere variabler, der er uforanderlige (konstanter). Den har blok-scope og kan ikke genassigneres eller genoprettes efter deklaration.

1const z = 30;

Scope

Variabler har begrebet scope.

Globalt Scope

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Globalt scope-variabler kan tilgås fra enhver placering. Variabler, der erklæres med var, har globalt eller funktionsscope, men let og const har blok-scope.

Blok-scope

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Blok-scope: Variabler, der erklæres med let eller const, er kun gyldige inden for {} (krøllede parenteser).

• Der opstår en fejl, når der tilgås uden for {} (krøllede parenteser).

Funktionsscope

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Funktionsscope: Variabler og funktioner defineret inde i en funktion kan ikke tilgås fra udenfor funktionen. Variabler erklæret inden i en funktion med var tilhører dette scope.

• I dette eksempel kan variablen functionVar tilgås uden for {} (krøllede parenteser), så længe den er inden for funktionsområdet. På den anden side resulterer adgang til variablen functionScoped uden for funktionsområdet i en fejl.

Derfor har variabler erklæret med var kun funktionsscope og ikke blok-scope, hvilket udgør en risiko for at blive brugt i uforudsete områder. Det er at foretrække at bruge const for variabler, der ikke ændres, og normalt bruge let, mens brugen af var undgås så meget som muligt.

Datatyper

JavaScript-variabler kan gemme værdier af forskellige datatyper. Der er string til håndtering af tekst og number til håndtering af numeriske værdier.

De vigtigste datatyper er som følger:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Primitivetyper:
  • number: Håndterer numeriske værdier (heltal og decimaltal).
  • string: Håndterer strenge af tegn.
  • boolean: Håndterer boolske værdier true eller false.
  • null: Repræsenterer eksplicit værdien 'ingenting'.
  • undefined: En værdi, der automatisk tildeles variabler, der ikke er initialiseret.
  • Symbol: En datatype, der bruges til at skabe unikke værdier.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Objekttyper:
  • Objekt: En datastruktur med flere egenskaber.
  • Array: En liste, der indeholder flere værdier.
  • Function: Et funktionsobjekt.

Tildeling og omfordeling til variabler

Variabler deklareret med let eller var kan omfordeles, men const kan ikke omfordeles, når den først er deklareret.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Variabel løftning

I JavaScript er der et fænomen, hvor variabeldeklarationer bliver 'løftet' til toppen af deres scope. Variabler, der er deklareret med var, bliver løftet, men brug af let eller const før deklaration medfører en fejl.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• I dette tilfælde bliver variabler, der er erklæret med var, hoistet, og deres værdier bliver outputtet.

1console.log(b); // ReferenceError
2let b = 20;

• Variabler, der er erklæret med let, bliver ikke hoistet, hvilket resulterer i en fejl.

Korrekt brug af variabler

Overvej følgende punkter for korrekt brug af variabler.

• Foretræk at bruge const og undgå at bruge var.
• Følg konventioner for variabelnavngivning.
  • Brug camelCase, såsom userName eller totalPrice.
  • Undgå tvetydige navne som data eller value, og brug meningsfulde navne for at forbedre læsbarheden.
  • Et variabelnavn kan ikke starte med et tal, så navne som 1variable er ikke tilladt.
• Overdreven brug af globale variabler kan forårsage scope-tvetydighed og føre til fejl, så undgå at bruge dem, når det er muligt.

Sammendrag

• var: En gammel variabeldeklarationsmetode, der har funktionsscope.
• let: En blokafgrænset variabel, der kan omfordeles.
• const: En blokafgrænset variabel, der ikke kan omfordeles (konstant).
• Det er vigtigt at bruge variabler i henhold til deres datatyper og være opmærksom på deres scope.

Hvad er escape-tegn i JavaScript?

Escape-tegn er en metode, der bruges til at repræsentere tegn med specielle betydninger inden for almindelige strenglitteraler. I JavaScript indledes escape-tegn med en omvendt skråstreg \ for at give en streng specielle effekter eller inkludere kontroltegn. Escape-tegn er nyttige til at inkludere elementer som linjeskift, tabulatorer eller anførselstegn i en streng.

Eksempler på brug af escape-tegn

Nedenfor er nogle eksempler på kode, der bruger escape-tegn.

Escape af dobbelte og enkelte anførselstegn

Brug escape-tegn til at repræsentere dobbelte eller enkelte anførselstegn i en streng.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escape af omvendte skråstreger

For at inkludere en omvendt skråstreg i sig selv i en streng, skal du bruge escape-tegnet \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escape af linjeskift og tabulatorer

Du kan indsætte linjeskift og tabulatorer for at gøre lange strenge mere læsbare.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escape af Unicode-tegn

Brug af Unicode escape-sekvenser giver dig mulighed for at repræsentere specifikke tegn med hexadecimale koder.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Noter

Overdreven brug af escape-tegn kan skade læsbarheden

Overdreven brug af escape-tegn kan reducere læsbarheden af din kode. Det er især vigtigt at bruge escape-tegn med omtanke i lange strenge.

Overvej at bruge template-litteraler

I JavaScript giver template-litteraler med backticks dig mulighed for at inkludere linjeskift eller indlejrede udtryk uden brug af escape-tegn.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Sammendrag

Escape-tegn er essentielle for at repræsentere specielle eller kontroltegn inden for strenge. Ved at escape enkelte eller dobbelte anførselstegn og tilføje linjeskift eller tabulatorer kan du skabe mere fleksible strenge. Dog kan overdreven brug af escape-tegn gøre koden sværere at læse, så overvej at bruge template-litteraler, når det er passende.

JavaScript-versioner

JavaScript har en standard specifikation kaldet ECMAScript (ES). JavaScript har udviklet sig baseret på denne standard. Nedenfor er en kort beskrivelse af dets væsentligste versioner.

• ES3 (1999)

  Den første bredt anvendte version. Grundlæggende syntaks og funktioner blev etableret.

• ES5 (2009)

  Indførelse af strict mode, og nye funktioner som Array.prototype.forEach, Object.keys, osv. blev tilføjet.

• ES6 / ES2015 (2015)

  En større opdatering af JavaScript er blevet lavet. Mange funktioner, der er grundlæggende for moderne JavaScript, såsom let, const, arrow functions, classes, promises, modules osv., blev introduceret.

• ES7 / ES2016 (2016)

  Array.prototype.includes og Exponentiation Operator (**) blev tilføjet.

• ES8 / ES2017 (2017)

  async/await blev introduceret, hvilket gjorde det lettere at skrive asynkrone processer.

• ES9 / ES2018 (2018)

  Asynkrone iteratorer og Rest/Spread Properties blev tilføjet.

• ES10 / ES2019 (2019)

  flatMap og Object.fromEntries blev tilføjet.

• ES11 / ES2020 (2020)

  Optional Chaining (?.) og Nullish Coalescing Operator (??) blev tilføjet, hvilket muliggør, at kode kan skrives mere simpelt og sikkert.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll og Promise.any blev tilføjet, blandt andre.

• ES13 / ES2022 (2022)

  Array.prototype.at og klasse private felter (#field) blev tilføjet, blandt andre.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted og Symbol.prototype.description blev tilføjet, blandt andre.

• ES15 / ES2024 (2024)

  Promise.withResolvers til lettere Promise-håndtering og resizable ArrayBuffer blev tilføjet, blandt andre.

Nuværende JavaScript opdateres hvert år, og nye funktioner tilføjes også i den nyeste version.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video