JavaScript Grunnleggende

Denne artikkelen forklarer grunnleggende konsepter i JavaScript.

YouTube Video

Utfører Hello World!

Oversikt over JavaScript

JavaScript er et av de mest brukte programmeringsspråkene innen webutvikling. Det brukes hovedsakelig til å legge til dynamiske elementer på websider, muliggjør manipulering av brukergrensesnitt, dataoverføring og oppretting av animasjoner. Det kan operere på klientsiden (i en nettleser) og på serversiden ved hjelp av teknologier som Node.js. På grunn av sin enkelhet og fleksibilitet er det lett for nybegynnere å lære, og det er mye brukt av profesjonelle utviklere.

Variabler i JavaScript

Variabler i JavaScript er som beholdere som brukes til å lagre og gjenbruke data. Ved å bruke variabler kan du opprettholde og manipulere verdier i programmet ditt.

Variabeldeklarasjon

I JavaScript er det tre nøkkelord for å deklarere variabler.

• var: En gammel metode for å deklarere variabler, men håndtering av dens omfang er komplisert og krever forsiktighet. Det er basert på funksjonsomfang.

1var x = 10;

• let: Introdusert i ES6, det er en måte å deklarere variabler med blokkens omfang på. Den kan tildeles nye verdier, men kan ikke deklareres på nytt i samme omfang.

1let y = 20;

• const: Brukes til å deklarere variabler som er uforanderlige (konstanter). Den har blokk-scope og kan ikke tildeles en ny verdi eller deklareres på nytt etter at den er deklarert.

1const z = 30;

Omfang

Variabler har konseptet omfang.

Globalt Omfang

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"

• Variabler med globalt omfang er tilgjengelige fra hvor som helst. Variabler deklarert med var har globalt eller funksjonsomfang, men let og const har blokk-omfang.

Blokk-Omfang

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);

• Blokk-omfang: Variabler deklarert med let eller const er kun gyldige innenfor {} (krøllparenteser).

• En feil oppstår når man prøver å få tilgang fra utsiden av {} (krøllparenteser).

Funksjonsomfang

 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);

• Funksjonsomfang: Variabler og funksjoner definert inni en funksjon kan ikke nås utenfor funksjonen. Variabler deklarert inni en funksjon med var tilhører dette omfanget.

• I dette eksempelet kan variabelen functionVar nås utenfor {} (krøllparantesene) så lenge den er innenfor funksjonens omfang. På den annen side vil forsøk på å få tilgang til variabelen functionScoped utenfor funksjonens omfang resultere i en feil.

Dermed har variabler deklarert med var kun funksjonsomfang og ikke blokk-omfang, noe som utgjør en risiko for at de brukes i uventede områder. Det er å foretrekke å bruke const for variabler som ikke endres og vanligvis bruke let, samtidig som man unngår bruk av var så mye som mulig.

Datatyper

JavaScript-variabler kan lagre verdier med forskjellige datatyper. Det finnes string for håndtering av tekst og number for håndtering av numeriske verdier.

De viktigste datatypene 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);

• Primitive Typer:
  • number: Håndterer numeriske verdier (heltall og flyttall).
  • string: Håndterer strenger av tegn.
  • boolean: Håndterer boolske verdier true eller false.
  • null: Representerer eksplisitt verdien 'ingenting'.
  • undefined: En verdi som automatisk tildeles variabler som ikke har blitt initialisert.
  • Symbol: En datatype som brukes til å opprette unike verdier.

 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:
  • Object: En datastruktur med flere egenskaper.
  • Array: En liste som inneholder flere verdier.
  • Function: Et funksjonsobjekt.

Tildeling og omfordeling til variabler

Variabler deklarert med let eller var kan tildeles på nytt, men const kan ikke tildeles på nytt etter deklarasjon.

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

Variabelheving

I JavaScript er det et fenomen der variabeldeklarasjoner blir 'hevet' til toppen av sitt omfang. Variabler deklarert med var blir hevet, men bruk av let eller const før deklarasjon fører til en feil.

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

• I dette tilfellet blir variabler deklarert med var hevet, og deres verdier vises.

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

• Variabler deklarert med let blir ikke hevet, noe som resulterer i en feil.

Korrekt bruk av variabler

Vurder følgende punkter for korrekt bruk av variabler.

• Foretrekk å bruke const og unngå å bruke var.
• Følg konvensjoner for variabelnavngiving.
  • Bruk camelCase, som for eksempel userName eller totalPrice.
  • Unngå tvetydige navn som data eller value, og bruk meningsfulle navn for å forbedre lesbarheten.
  • Et variabelnavn kan ikke starte med et tall, så navn som 1variable er ikke tillatt.
• Overdreven bruk av globale variabler kan skape tvetydighet i omfang og føre til feil, så unngå bruken av dem når det er mulig.

Sammendrag

• var: En eldre metode for variabeldeklarasjon som har funksjonsomfang.
• let: En blokkavgrenset variabel som kan tildeles på nytt.
• const: En blokkavgrenset variabel som ikke kan tildeles på nytt (konstant).
• Det er viktig å bruke variabler i henhold til deres datatyper og være oppmerksom på deres omfang.

Hva er escape-tegn i JavaScript?

Escape-tegn er en metode brukt for å representere tegn med spesielle betydninger i vanlige strengliteraler. I JavaScript blir escape-tegn introdusert ved en skråstrek \ for å tilføre spesialeffekter til en streng eller for å inkludere kontrolltegn. Escape-tegn er nyttige for å inkludere elementer som linjeskift, tabulatorer eller anførselstegn i en streng.

Eksempler på bruk av escape-tegn

Nedenfor er noen eksempler på kodesnutter som bruker escape-tegn.

Escape av doble og enkle anførselstegn

Bruk escape-tegn for å representere doble eller enkle 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 av skråstreker

For å inkludere en skråstrek i en streng, bruk escape-tegnet \.

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

Escape av linjeskift og tabulatorer

Du kan sette inn linjeskift og tabulatorer for å gjøre lange strenger mer lesbare.

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 av Unicode-tegn

Ved å bruke Unicode escape-sekvenser kan du representere spesifikke tegn med heksadesimale koder.

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

Notater

Overdrevet bruk av escape-tegn kan skade lesbarheten

Overbruk av escape-tegn kan redusere lesbarheten til koden din. Det er spesielt viktig å bruke escape-tegn med omhu i lange strenger.

Vurder å bruke templatelitteraler

I JavaScript lar templatelitteraler, som bruker omvendte apostrofer, deg inkludere linjeskift eller innebygde uttrykk uten 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 essensielle for å representere spesialtegn eller kontrolltegn i strenger. Ved å bruke escape på enkle eller doble anførselstegn og legge til linjeskift eller tabulatorer kan du lage mer fleksible strenger. Dog kan overdrevet bruk av escape-tegn gjøre koden vanskeligere å lese, så vurder å bruke templatelitteraler der det er passende.

JavaScript-versjoner

JavaScript har en standardspesifikasjon kalt ECMAScript (ES). JavaScript har utviklet seg basert på denne standarden. Nedenfor er en kort beskrivelse av de viktigste versjonene.

• ES3 (1999)

  Den første utbredte versjonen. Grunnleggende syntaks og funksjoner ble etablert.

• ES5 (2009)

  Introduksjon av strict mode, og nye funksjoner som Array.prototype.forEach, Object.keys, osv. ble lagt til.

• ES6 / ES2015 (2015)

  En større oppdatering til JavaScript har blitt gjort. Mange funksjoner som er grunnleggende for moderne JavaScript, som let, const, pilfunksjoner, klasser, løfter, moduler, etc., ble introdusert.

• ES7 / ES2016 (2016)

  Array.prototype.includes og eksponentieringsoperatoren (**) ble lagt til.

• ES8 / ES2017 (2017)

  async/await ble introdusert, noe som gjorde det enklere å skrive asynkrone prosesser.

• ES9 / ES2018 (2018)

  Asynkrone iteratorer og Rest/Spread Properties ble lagt til.

• ES10 / ES2019 (2019)

  flatMap og Object.fromEntries ble lagt til.

• ES11 / ES2020 (2020)

  Valgfri kjeding (?.) og Nullish Coalescing Operator (??) ble lagt til, noe som gjør det mulig å skrive kode enklere og tryggere.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll og Promise.any med flere ble lagt til.

• ES13 / ES2022 (2022)

  Array.prototype.at og klasse private-felt (#field) med flere ble lagt til.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted og Symbol.prototype.description med flere ble lagt til.

• ES15 / ES2024 (2024)

  Promise.withResolvers for enklere Promise-håndtering og resizable ArrayBuffer med flere ble lagt til.

Gjeldende JavaScript oppdateres hvert år, og nye funksjoner legges til selv i den nyeste versjonen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video