JavaScript Grunder

Den här artikeln förklarar grunderna i JavaScript.

YouTube Video

Kör Hello World!

Översikt över JavaScript

JavaScript är ett av de mest använda programmeringsspråken inom webbutveckling. Det används främst för att lägga till dynamiska element till webbsidor, möjliggöra användargränssnittsmanipulation, datatransmission och skapande av animationer. Det kan köras på klientsidan (i en webbläsare) och på serversidan med hjälp av teknologier som Node.js. På grund av dess enkelhet och flexibilitet är det lätt för nybörjare att lära sig och används i stor utsträckning av professionella utvecklare.

Variabler i JavaScript

Variabler i JavaScript är som behållare som används för att lagra och återanvända data. Genom att använda variabler kan du hantera och manipulera värden i ditt program.

Variabeldeklaration

I JavaScript finns det tre nyckelord för att deklarera variabler.

• var: En gammal metod för att deklarera variabler, men dess scope-hantering är komplicerad och kräver försiktighet. Den är baserad på funktionsscopet.

1var x = 10;

• let: Introducerades i ES6, det är ett sätt att deklarera variabler med blockscope. Den kan tilldelas nytt värde men kan inte deklareras om i samma scope.

1let y = 20;

• const: Används för att deklarera variabler som är oföränderliga (konstanter). Den har blockscope och kan inte tilldelas om eller deklareras om efter deklaration.

1const z = 30;

Scope

Variabler har konceptet 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 är åtkomliga var som helst. Variabler deklarerade med var har globalt eller funktionsscope, men let och const har blockscope.

Blockscope

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

• Blockscope: Variabler deklarerade med let eller const är bara giltiga inom {} (klammerparenteser).

• Ett fel inträffar när man försöker att komma åt utanför {} (klamrar).

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 och funktioner definierade inuti en funktion kan inte åtkommas utanför funktionen. Variabler som deklareras inuti en funktion med var tillhör detta scope.

• I det här exemplet kan variabeln functionVar nås utanför {} (klammerparenteser) så länge den är inom funktionsomfånget. Å andra sidan leder åtkomst till variabeln functionScoped utanför funktionsomfånget till ett fel.

Således har variabler deklarerade med var endast funktionsscope och inget blockscope, vilket utgör en risk för att användas i oväntade områden. Det är att föredra att använda const för variabler som inte ändras och vanligtvis använda let för att undvika användningen av var så mycket som möjligt.

Datatyper

JavaScript-variabler kan lagra värden av olika datatyper. Det finns string för att hantera text och number för att hantera numeriska värden.

De huvudsakliga datatyperna är följande:.

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

• Primitiva typer:
  • number: Hanterar numeriska värden (heltal och flyttal).
  • string: Hanterar textsträngar.
  • boolean: Hanterar booleanvärden true eller false.
  • null: Representerar uttryckligen värdet 'ingenting'.
  • undefined: Ett värde som automatiskt tilldelas till variabler som inte har initialiserats.
  • Symbol: En datatyp som används för att skapa unika värden.

 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 flera egenskaper.
  • Array: En lista som innehåller flera värden.
  • Function: Ett funktionellt objekt.

Tilldelning och omtilldelning av variabler

Variabler som deklareras med let eller var kan tilldelas om, men const kan inte tilldelas om efter att ha deklarerats.

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

Variabellyftning

I JavaScript finns det ett fenomen där variabeldeklarationer 'lyfts' till toppen av deras räckvidd. Variabler som deklareras med var lyfts, men att använda let eller const innan deklaration orsakar ett fel.

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

• I detta fall lyfts variabler deklarerade med var upp och deras värden skrivs ut.

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

• Variabler deklarerade med let lyfts inte upp, vilket resulterar i ett fel.

Korrekt användning av variabler

Tänk på följande punkter för korrekt användning av variabler.

• Föredra att använda const och undvik att använda var.
• Följ namngivningskonventioner för variabler.
  • Använd camelCase, till exempel userName eller totalPrice.
  • Undvik tvetydiga namn som data eller value, och använd meningsfulla namn för att förbättra läsbarheten.
  • Ett variabelnamn kan inte börja med en siffra, så namn som 1variable är inte tillåtna.
• Överdriven användning av globala variabler kan orsaka oklarheter i scope och leda till buggar, så undvik att använda dem när det är möjligt.

Sammanfattning

• var: En äldre metod för variabeldeklaration som har funktionsräckvidd.
• let: En blockbegränsad variabel som kan tilldelas om.
• const: En blockbegränsad variabel som inte kan tilldelas om (konstant).
• Det är viktigt att använda variabler enligt deras datatyper och att vara medveten om deras räckvidd.

Vad är flykttecken i JavaScript?

Flykttecken är en metod som används för att representera tecken med speciella betydelser inom vanliga strängliteraler. I JavaScript introduceras flykttecken med ett omvänt snedstreck \ för att ge en sträng specialeffekter eller inkludera kontrolltecken. Flykttecken är användbara för att inkludera element som radbrytningar, tabbar eller citattecken i en sträng.

Exempel på användning av flykttecken

Nedan visas några exempel på kod som använder flykttecken.

Flykta dubbla och enkla citattecken

Använd flykttecken för att representera dubbla eller enkla citattecken inom en sträng.

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

Flykta omvända snedstreck

För att inkludera ett omvänt snedstreck i en sträng, flykta det med \.

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

Flykta radbrytningar och tabbar

Du kan infoga radbrytningar och tabbar för att göra långa strängar mer läsbara.

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

Flykta Unicode-tecken

Genom att använda Unicode-flyktsekvenser kan du representera specifika tecken med hexadecimala koder.

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

Anteckningar

Överdriven användning av flykttecken kan skada läsbarheten

Överdriven användning av flykttecken kan minska läsbarheten i din kod. Det är särskilt viktigt att använda flykttecken på ett genomtänkt sätt i långa strängar.

Överväg att använda mönstersträngar (template literals)

I JavaScript kan mönstersträngar (template literals) som använder bakåtvända apostrofer inkludera radbrytningar eller inbäddade uttryck utan flykttecken.

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

Sammanfattning

Flykttecken är viktiga för att representera speciella eller kontrolltecken inom strängar. Genom att flykta enkla eller dubbla citattecken och lägga till radbrytningar eller tabbar kan du skapa mer flexibla strängar. Emellertid kan överdriven användning av flykttecken göra koden svårare att läsa, så överväg att använda mönstersträngar (template literals) där det passar.

JavaScript-versioner

JavaScript har en standard specifikation som kallas ECMAScript (ES). JavaScript har utvecklats utifrån denna standard. Nedan finns en kort beskrivning av dess huvudversioner.

• ES3 (1999)

  Den första versionen som blev allmänt använd. Grundläggande syntax och funktioner fastställdes.

• ES5 (2009)

  Introduktion av strict mode och nya funktioner som Array.prototype.forEach, Object.keys, etc. lades till.

• ES6 / ES2015 (2015)

  En större uppdatering av JavaScript har gjorts. Många funktioner grundläggande för modern JavaScript, såsom let, const, arrow functions, klasser, promises, moduler, etc., introducerades.

• ES7 / ES2016 (2016)

  Array.prototype.includes och Exponentiation Operator (**) lades till.

• ES8 / ES2017 (2017)

  async/await introducerades, vilket gjorde det enklare att skriva asynkrona processer.

• ES9 / ES2018 (2018)

  Asynkrona iteratorer och Rest/Spread Properties lades till.

• ES10 / ES2019 (2019)

  flatMap och Object.fromEntries lades till.

• ES11 / ES2020 (2020)

  Optional Chaining (?.) och Nullish Coalescing Operator (??) lades till, vilket möjliggör att skriva kod enklare och säkrare.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll och Promise.any, bland annat, lades till.

• ES13 / ES2022 (2022)

  Array.prototype.at och klassens private-fält (#field), bland annat, lades till.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted och Symbol.prototype.description, bland annat, lades till.

• ES15 / ES2024 (2024)

  Promise.withResolvers för enklare hantering av Promise och justerbar ArrayBuffer, bland annat, lades till.

Nuvarande JavaScript uppdateras varje år, och nya funktioner läggs till även i den senaste versionen.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video