Fundamenty Javascript – zmienne

Cześć, w tym wpisie przedstawię zagadnienie, które stanowi podstawę niemal każdej aplikacji. Nie ma chyba ani jednej aplikacji, która by nie korzystała ze zmiennych.

Czym są zmienne?

Zmienne w programowaniu służą do przechowywania jakiejś porcji danych. Dane te mogą zawierać proste informacje np.:  wiek(cyfra), imię(napis), lub bardziej skomplikowane np.: blok kodu odpowiedzialny za sprawdzenie pełnoletności osoby(funkcja).

Tworzenie zmiennych w JS jest bardzo proste i składa się z dwóch etapów.

var age;  // deklaracja zmiennej
age = 18; // inicjalizacja zmiennej

Proces ten możemy uprościć w do jednej instrukcji.

var age = 18; // deklaracja + inicjalizacja = definicja zmiennej

Powyższy kod tworzy zmienną age o wartości 18. Każde wyrażenie w JS musi zostać zakończone średnikiem. Teraz możemy wyświetlić jej zawartość w konsoli przeglądarki

console.log(age); // 18

Jeśli natomiast będziemy próbować wykorzystać zmienną, której nie zadeklarowaliśmy, zostanie wyrzucony błąd:

console.log(name); // Uncaught ReferenceError: name is not defined

Hoisting zmiennych

W niektórych przypadkach zmienne w JS zachowują się w dosyć nietypowy sposób.

Przyjrzyjmy się poniższemu przykładowi

console.log(myName); // undefined
var myName = 'Emil';

Pomimo tego, że zmienną zadeklarowaliśmy póżniej niż ją użyliśmy, kod działa i nie wyrzuca błędu. Zamiast tego wyświetla wartość undefined. Dzieje się tak za sprawą windowania(ang. hoisting) zmiennych. Jak napisałem powyżej proces definiowania zmiennych składa się z dwóch etapów(deklaracji i inicjalizacji). Tak naprawdę proces deklaracji zmiennych jest przenoszony na górę funkcji lub bloku. Czyli poprzedni kod jest równoznaczny z poniższym.

var myName;          // deklaracja
console.log(myName); // undefined
myName = 'Emil';     // inicjalizacja

Typy zmiennych

W Javascript wyróżnia się kilka typów zmiennych:

• boolean – wartość prawda lub fałsz
• null – odniesienie do niestniejącego obiektu w pamięci
• undefined – wartość niezdefiniowana
• number – liczba np.: 54, 5.78, -19
• string – ciąg znaków, napis np.: „Euro 2016”
• object – jest strukturą danych(obiekt, tablica), która może w sobie zawierać pozostałe typy zmiennych

Przykład użycia typów zmiennych.

var booleanType = true;
var nullType = null;
var undefinedType;
var numberType = 30.5;
var stringType = 'EURO 2016';
var objectType = {
    property1: 'hello',
    property2: 45
};

console.log(booleanType);
console.log(nullType);
console.log(undefinedType); 
console.log(numberType);
console.log(stringType); 
console.log(objectType);
console.log(objectType.property1);

 

Jak sprawdzić typ zmiennej?

W sytuacji, gdy nie wiemy jakiego typu mamy zmienną, z pomocą przychodzi operator typeof.  Jego użycie jest bardzo proste. Spójrzmy.

console.log(typeof 45);             // => number
console.log(typeof 'Lublin');       // => string
console.log(typeof true);           // => boolean
console.log(typeof [12, 45, 56]);   // => object
console.log(typeof new Date());     // => object
console.log(typeof null);           // => object
console.log(typeof undefined);      // => undefined
console.log(typeof alert);          // => function

Jak widzimy większość działań zwraca przewidywany wynik. Jednak dla wartości null zwracana jest wartość ‚object’.

Zasięg zmiennych

Zasięg zmiennych jest to termin, który oznacza, z jakiego miejsca w naszym kodzie mamy dostęp do danej zmiennej. W Javascript nowy zasięg(ang. scope) jest tworzony za pomocą funkcji. Jeśli zdefiniujemy zmienną wewnątrz funkcji, nie będziemy mieć do niej dostępu na zewnątrz.

function test() {
    var a = 'zmienna a';
}

console.log(a); // Uncaught ReferenceError: a is not defined

Inaczej ma się sprawa z instrukcjami blokowymi takimi jak if czy for.

Przyjrzyjmy się zatem następnemu przykładowi.

if( 5 > 3) {
    var a = 'zmienna a';
}

console.log(a); // 'zmienna a'

Jeśli instrukcja warunkowa spełni warunek, to wewnątrz bloku tworzona jest zmienna a. Następnie wyświetlamy zawartość zmiennej a. W innych językach programowania taki przykład spowodowałby błąd, gdyż zmienna utworzona w ten sposób byłaby zmienną blokową( jest dostępna tylko w tym bloku, między klamrami). Natomiast w Javascript kod wykona się bez problemu. Dzieje się tak, gdyż bloki w JS nie tworzą nowego zasięgu dla zmiennych. Błąd ten naprawiono w nowszej wersji Javascript, wprowadzając nowy sposób deklarowania zmiennych.

• let – deklaruje zmienna blokową
• const – deklaruje stała (nie można zmienić jej wartości)

if( 5 > 3) {
   let a = 'zmienna a';
}

console.log(a); // Uncaught ReferenceError: a is not defined

Jak widzimy, słowo kluczowe let tworzy rzeczywiście zmienną blokową, która nie jest dostępna na zewnątrz bloku. Jednak najnowsze funkcje języka Javascript nie są wspierane przez wszystkie przeglądarki. Aby móc z nich korzystać, należy używać kompilatora JS takiego jak np.: Babel.

Operacje na zmiennych

Zmienne w naszej aplikacji możemy poddawać różnym operacjom min. matematycznym.

Wykonywanie tych rzeczy jest proste, choć należy pamiętać o kilku wyjątkach.

Operatory w JS:

• + dodawanie
• – odejmowanie
• / dzielenie
• * mnożenie
• % module (wyznacza resztę z dzielenia)

var a = 10;
var b = 5;
var c = 3; 
var d = '6'; 

console.log(a + b); // 15
console.log(b - c); // 2
console.log(a / b); // 2
console.log(a % c); // 1
console.log(a + d); // 106  UWAGA!
console.log(d + a); // 610 UWAGA!
console.log(a - d); // 4
console.log(d - c); // 3

Jak widzimy większość przykładów działa prawidłowo, jednak gdy chcemy dodać jedną cyfrę do drugiej, króra jest napisem, robi się coś dziwnego. Zamiast 16, w obu pzypadkach wychodzi ‚sklejenie’ dwóch liczb. Dzieje się tak dlatego, że cyfra zamieniana jest na napis, a napis jest póżniej łączony. Natomiast przy odejmowaniu następuje zamiana napisu na cyfrę i wynik jest prawidłowy.

Do zamiany napisu na liczbę służą dwie funkcje

• parseInt(liczba, podstawa)
• parseFloat(liczba)

Funkcja parseInt jako pierwszy parametr przyjmuje napis, jako drugi podstawę systemu liczbowego(np.: dla liczby 5 w systemie dziesiętnym podstawa będzie 10, a dla liczby 0xF w systemi szesnastkowym bedzie to liczba 16)

Funkcja parseFloat zamienia napis na liczbę zmiennoprzecinkową.

console.log(parseInt('12', 10) + 6); // 18
console.log(parseInt('0xF', 16) ); // 15
console.log(parseFloat('1.57')) // 1.57

Jeśli do funkcji przekażemy napis, który nie jest cyfrą(np.: EURO2016), zostanie zwrócona wartość NaN(Not a Number)

console.log(parseInt('EURO2016', 10)); // NaN

 

To już koniec. Mam nadzieję, że wpis się podobał. Zachęcam do komentowania.

Narazie!