7.5 Ο τελεστής typeof στην JavaScript

Η typeof είναι ένας τελεστής στην JavaScript που χρησιμοποιείται για να επιστρέψει τον τύπο δεδομένων μιας μεταβλητής ή ενός αντικειμένου. Είναι ιδιαίτερα χρήσιμος για να ελέγξετε τον τύπο μιας μεταβλητής πριν να εκτελέσετε συγκεκριμένες ενέργειες πάνω της.

Η σύνταξη του typeof είναι:

typeof value

όπου value είναι η μεταβλητή ή το αντικείμενο για το οποίο θέλουμε να βρούμε τον τύπο.

Οι διαφορετικοί τύποι δεδομένων που μπορούν να επιστραφούν από το typeof είναι:

• "undefined": Όταν η μεταβλητή δεν έχει ανατεθεί τιμή ή δεν υπάρχει.
• "boolean": Όταν η μεταβλητή περιέχει μια λογική τιμή true ή false.
• "number": Όταν η μεταβλητή περιέχει έναν αριθμό.
• "string": Όταν η μεταβλητή περιέχει ένα κείμενο (string).
• "object": Όταν η μεταβλητή περιέχει ένα αντικείμενο, έναν πίνακα ή έναν null.
• "function": Όταν η μεταβλητή περιέχει μια συνάρτηση (function).

Ας δούμε μερικά παραδείγματα:

const x = 5;
console.log(typeof x); // "number"

const y = "Hello";
console.log(typeof y); // "string"

const z = true;
console.log(typeof z); // "boolean"

const person = { name: "John", age: 30 };
console.log(typeof person); // "object"

const func = function() {};
console.log(typeof func); // "function"

const nothing;
console.log(typeof nothing); // "undefined"

Στο παράδειγμα αυτό, το typeof χρησιμοποιείται για να ελέγξει τον τύπο της κάθε μεταβλητής και εμφανίζει τον αντίστοιχο τύπο δεδομένων στην κονσόλα.

Σωστά! Στην JavaScript υπάρχουν 5 διαφορετικοί τύποι δεδομένων που μπορούν να περιέχουν τιμές:

1. Συμβολοσειρά (string)
2. Αριθμός (number)
3. Λογική τιμή (boolean)
4. Αντικείμενο (object)
5. Συνάρτηση (function)

Επίσης, υπάρχουν 6 τύποι αντικειμένων (object) στην JavaScript:

1. Αντικείμενο (Object)
2. Ημερομηνία (Date)
3. Πίνακας (Array)
4. Συμβολοσειρά (String)
5. Αριθμός (Number)
6. Λογική τιμή (Boolean)

Επιπλέον, υπάρχουν δύο τύποι δεδομένων που δεν μπορούν να περιέχουν τιμές:

1. null
2. undefined

Αυτοί οι τύποι είναι σημαντικοί για να κατανοήσετε την κατανομή των τιμών στην JavaScript και να κατανοήσετε τη σημασία των τύπων δεδομένων κατά την ανάπτυξη των προγραμμάτων σας.

[adinserter block=”2″]

Μπορείτε να χρησιμοποιήσετε τον τελεστή typeof για να βρείτε τον τύπο δεδομένων μιας μεταβλητής στην JavaScript.

Όπως δείχνετε στο παράδειγμά σας:

typeof "John"                 // Επιστρέφει "string"
typeof 3.14                   // Επιστρέφει "number"
typeof NaN                    // Επιστρέφει "number"
typeof false                  // Επιστρέφει "boolean"
typeof [1,2,3,4]              // Επιστρέφει "object"
typeof {name:'John', age:34}  // Επιστρέφει "object"
typeof new Date()             // Επιστρέφει "object"
typeof function () {}         // Επιστρέφει "function"
typeof myCar                  // Επιστρέφει "undefined"
typeof null                   // Επιστρέφει "object"

Η typeof είναι ένα χρήσιμο εργαλείο για να εξετάσετε τον τύπο δεδομένων μιας μεταβλητής και να αντιμετωπίσετε τον κώδικά σας δυναμικά, ανάλογα με τον τύπο δεδομένων που έχει η μεταβλητή.

Σωστά! Τα πρωτογενή δεδομένα είναι μονοαπλά δεδομένα χωρίς πρόσθετες ιδιότητες και μεθόδους. Στην JavaScript, υπάρχουν πέντε τύποι δεδομένων που θεωρούνται πρωτογενή:

1. Συμβολοσειρά (string)
2. Αριθμός (number)
3. Λογική τιμή (boolean)
4. Κενό (null)
5. Απροσδιόριστο (undefined)

Αυτά τα πρωτογενή δεδομένα είναι απλές τιμές και όχι αντικείμενα. Συνεπώς, δεν έχουν πρόσθετες ιδιότητες ή μεθόδους. Αντίθετα, όταν χρησιμοποιούμε αντικείμενα, όπως πίνακες ή συναρτήσεις, μπορούμε να έχουμε πρόσβαση σε διάφορες ιδιότητες και μεθόδους που ανήκουν στο αντικείμενο.

Η διάκριση ανάμεσα σε πρωτογενή και αντικειμενοστραφή δεδομένα είναι σημαντική καθώς αντικειμενοστραφή δεδομένα μπορούν να επεξεργαστούν με μεγαλύτερη πολυπλοκότητα, ενώ τα πρωτογενή δεδομένα είναι απλά και άμεσα προσβάσιμα.

Παρακάτω έχουμε ένα παράδειγμα χρήσης του typeof για να επιστρέψουμε τον τύπο δεδομένων για μερικές μεταβλητές που περιέχουν πρωτογενή δεδομένα:

let name = "John";
let age = 30;
let isMarried = false;
let height; // undefined
let salary = null;

console.log(typeof name);      // "string"
console.log(typeof age);       // "number"
console.log(typeof isMarried); // "boolean"
console.log(typeof height);    // "undefined"
console.log(typeof salary);    // "object" (Προσοχή: Το null θεωρείται αντικείμενο)

Εδώ βλέπουμε τη χρήση του typeof για να εξετάσουμε τον τύπο των πρωτογενών μεταβλητών μας. Η τιμή του typeof επιστρέφεται ως συμβολοσειρά και μας δείχνει τον τύπο δεδομένων για κάθε μεταβλητή. Όπως βλέπουμε, η μεταβλητή salary που έχει τιμή null επιστρέφει "object", παρόλο που είναι πρωτογενές δεδομένο. Αυτό είναι ένα κοινό χαρακτηριστικό στην JavaScript και πρέπει να το λάβετε υπόψη σας κατά την αξιολόγηση των τύπων δεδομένων.

Το typeof μπορεί να επιστρέψει δύο σύνθετους τύπους: “function” και “object”.

Όταν χρησιμοποιείτε το typeof για να αξιολογήσετε μια συνάρτηση, θα επιστρέψει τον τύπο “function”. Εδώ είναι ένα παράδειγμα:

function greet() {
  console.log("Hello!");
}

console.log(typeof greet); // "function"

Ωστόσο, πρέπει να προσέχετε το γεγονός ότι το typeof επιστρέφει επίσης τον τύπο “object” για αντικείμενα, πίνακες και την τιμή null. Εδώ έχουμε ένα παράδειγμα:

let obj = { name: "John" };
let arr = [1, 2, 3];
let nullValue = null;

console.log(typeof obj);        // "object"
console.log(typeof arr);        // "object"
console.log(typeof nullValue);  // "object"

Για να διαχωρίσουμε μεταξύ αντικειμένων και πινάκων από συναρτήσεις και να αποφύγουμε την επιστροφή “object” για την τιμή null, μπορούμε να χρησιμοποιήσουμε επιπλέον ελέγχους, όπως για παράδειγμα:

function isFunction(value) {
  return typeof value === "function";
}

function isObject(value) {
  return value !== null && typeof value === "object";
}

let obj = { name: "John" };
let greetFunction = function() {
  console.log("Hello!");
};
let nullValue = null;

console.log(isFunction(greetFunction)); // true
console.log(isObject(obj));             // true
console.log(isObject(greetFunction));   // false
console.log(isObject(nullValue));       // false

Με τις παραπάνω συναρτήσεις, μπορούμε να διαχωρίσουμε συναρτήσεις από αντικείμενα και να αποφύγουμε το λάθος επιστροφής “object” για την τιμή null.

Το typeof είναι ένας τελεστής (operator) και όχι μια μεταβλητή. Οι τελεστές (όπως + – * /) πράγματι δεν έχουν καμία δική τους τύπο δεδομένων.

[adinserter block=”3″]

Ωστόσο, το typeof πάντα επιστρέφει μια συμβολοσειρά (string) που περιέχει τον τύπο του τελεστή που χρησιμοποιήθηκε. Αυτό είναι αυτό που το κάνει να φαίνεται ότι “έχει” μια συγκεκριμένη τιμή (string).

Επομένως, όταν γράφουμε κάτι όπως:

console.log(typeof "John"); // Επιστρέφει τη συμβολοσειρά "string"

Η typeof επιστρέφει μια συμβολοσειρά “string” που υποδηλώνει τον τύπο της τιμής "John" που περνάμε ως τελεστή. Επειδή πάντα επιστρέφει μια συμβολοσειρά, μπορούμε να περιγράψουμε το typeof ως έναν “τελεστή που επιστρέφει συμβολοσειρές”.

Στην JavaScript, οι αντικείμενοι έχουν ένα ενσωματωμένο ιδιότητα που ονομάζεται constructor. Αυτή η ιδιότητα δείχνει τη συνάρτηση κατασκευής (constructor function) που χρησιμοποιήθηκε για να δημιουργήσει το αντικείμενο.

Πιο συγκεκριμένα, αν δημιουργήσουμε ένα αντικείμενο χρησιμοποιώντας μια συνάρτηση κατασκευής, η ιδιότητα constructor θα αντιστοιχεί σε αυτήν τη συνάρτηση κατασκευής. Για παράδειγμα:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const john = new Person("John", 30);

console.log(john.constructor); // Εκτυπώνει τη συνάρτηση Person

Στο παραπάνω παράδειγμα, το αντικείμενο john δημιουργήθηκε χρησιμοποιώντας τη συνάρτηση κατασκευής Person, οπότε η ιδιότητα constructor του αντικειμένου δείχνει στην Person συνάρτηση.

Είναι σημαντικό να σημειώσουμε ότι η ιδιότητα constructor μπορεί να αλλάξει, αν δηλαδή αλλάξουμε τη συνάρτηση κατασκευής ενός αντικειμένου. Αν χρησιμοποιήσουμε τον τελεστή new για να δημιουργήσουμε ένα αντικείμενο χωρίς τη λέξη-κλειδί function, τότε η ιδιότητα constructor θα αντιστοιχεί στην Object συνάρτηση, καθώς η Object είναι η προεπιλεγμένη συνάρτηση κατασκευής για αντικείμενα στην JavaScript.

Μπορούμε να ελέγξουμε την ιδιότητα constructor ενός αντικειμένου για να διαπιστώσουμε αν είναι ένας πίνακας (Array). Όπως αναφέρθηκε προηγουμένως, αν το αντικείμενο είναι ένας πίνακας, η ιδιότητα constructor θα αντιστοιχεί στην συνάρτηση κατασκευής Array. Μπορούμε να χρησιμοποιήσουμε αυτήν την ιδιότητα για να ελέγξουμε αν ένα αντικείμενο είναι ένας πίνακας ως εξής:

const myArray = [1, 2, 3];

if (myArray.constructor === Array) {
  console.log("Το myArray είναι ένας πίνακας.");
} else {
  console.log("Το myArray δεν είναι ένας πίνακας.");
}

Η παραπάνω εκτύπωση θα εμφανίσει το μήνυμα “Το myArray είναι ένας πίνακας”, καθώς η constructor του myArray αντιστοιχεί στην συνάρτηση κατασκευής Array.

Ωστόσο, είναι σημαντικό να σημειώσουμε ότι αντικείμενα σε JavaScript μπορούν να έχουν τη δική τους προσαρμοσμένη συνάρτηση κατασκευής, η οποία μπορεί να μην είναι η προεπιλεγμένη συνάρτηση Array. Για παράδειγμα, αν έχουμε το εξής αντικείμενο:

const myObject = {
  name: "John",
  age: 30
};

Και αντιστοιχήσουμε μια δική μας προσαρμοσμένη συνάρτηση κατασκευής:

function CustomObject(name, age) {
  this.name = name;
  this.age = age;
}

const myCustomObject = new CustomObject("Jane", 25);

Στην περίπτωση αυτή, το αντικείμενο myCustomObject δεν είναι πίνακας, αλλά αν ελέγξουμε την constructor, θα δούμε ότι αντιστοιχεί στην συνάρτηση κατασκευής CustomObject.

if (myCustomObject.constructor === Array) {
  console.log("Το myCustomObject είναι ένας πίνακας.");
} else if (myCustomObject.constructor === CustomObject) {
  console.log("Το myCustomObject είναι ένα δικό μας προσαρμοσμένο αντικείμενο.");
} else {
  console.log("Το myCustomObject δεν είναι ούτε πίνακας ούτε δικό μας προσαρμοσμένο αντικείμενο.");
}

Η παραπάνω εκτύπωση θα εμφανίσει το μήνυμα “Το myCustomObject είναι ένα δικό μας προσαρμοσμένο αντικείμενο”.

Στη JavaScript, η τιμή undefined αντιστοιχεί σε μια μη ορισμένη τιμή ή μια μη υπαρκτή τιμή. Όταν δημιουργούμε μια μεταβλητή και δεν της δίνουμε καμία τιμή, η μεταβλητή αυτή θα έχει την τιμή undefined. Επίσης, αν προσπαθήσουμε να αποκτήσουμε πρόσβαση σε μια μη υπάρχουσα ιδιότητα ή δείκτη σε ένα αντικείμενο, η τιμή που θα επιστρέψει θα είναι undefined.

Εδώ είναι μερικά παραδείγματα:

let x; // Δημιουργία μιας μεταβλητής x χωρίς να δίνουμε τιμή
console.log(x); // Θα εμφανίσει: undefined

const person = {
  name: "John",
  age: 30
};

console.log(person.name); // Θα εμφανίσει: "John"
console.log(person.address); // Θα εμφανίσει: undefined, διότι η ιδιότητα address δεν υπάρχει

Το undefined δεν είναι το ίδιο με το null. Όταν μια μεταβλητή δεν έχει οριστεί, έχει τιμή undefined. Αντίθετα, το null χρησιμοποιείται για να δηλώσει ότι ένα αντικείμενο ή μια μεταβλητή δεν έχει κάποια έγκυρη τιμή ή αντιπροσωπεύει μια “κενή” τιμή.

[adinserter block=”4″]

Στη JavaScript, υπάρχουν δύο τύποι κενών τιμών: το null και το undefined.

1. null: Χρησιμοποιείται για να δηλώσει ότι ένα αντικείμενο ή μια μεταβλητή δεν έχει κάποια έγκυρη τιμή ή αντιπροσωπεύει μια “κενή” τιμή. Συνειδητά αντιστοιχίζουμε την τιμή null σε μια μεταβλητή ή ιδιότητα όταν δεν υπάρχει έγκυρη τιμή για αυτήν.

let x = null;
console.log(x); // Θα εμφανίσει: null

const person = {
  name: "John",
  age: null // Η ηλικία δεν έχει οριστεί, οπότε της δίνουμε την τιμή null
};

2. undefined: Χρησιμοποιείται για να δηλώσει μια μη ορισμένη τιμή ή μια μη υπαρκτή τιμή. Όταν δημιουργούμε μια μεταβλητή και δεν της δίνουμε καμία τιμή ή όταν προσπαθούμε να αποκτήσουμε πρόσβαση σε μια μη υπάρχουσα ιδιότητα ή δείκτη σε ένα αντικείμενο, η τιμή που θα επιστρέψει θα είναι undefined.

let y; // Δημιουργία μιας μεταβλητής y χωρίς να δίνουμε τιμή
console.log(y); // Θα εμφανίσει: undefined

const person = {
  name: "John",
  age: 30
};

console.log(person.address); // Θα εμφανίσει: undefined, διότι η ιδιότητα address δεν υπάρχει

Επομένως, και τα δύο null και undefined αντιπροσωπεύουν κενές τιμές, αλλά χρησιμοποιούνται σε διαφορετικές περιπτώσεις, όπως αναφέρθηκε παραπάνω.

Στη JavaScript, το null είναι ένας πρωτογενής τύπος δεδομένων που χρησιμοποιείται για να αντιπροσωπεύσει μια “κενή” τιμή ή μια μη υπαρκτή τιμή. Όταν μια μεταβλητή ή ιδιότητα έχει την τιμή null, σημαίνει ότι δεν έχει κάποια έγκυρη τιμή.

Ο τύπος δεδομένων null μπορεί να χρησιμοποιηθεί για διάφορους σκοπούς:

1. Να δηλώσει ότι μια μεταβλητή δεν έχει κάποια τιμή ή δεν έχει οριστεί ακόμη.

let age = null; // Δηλώνουμε μια μεταβλητή age χωρίς τιμή

2. Να δηλώσει ότι μια μεταβλητή ή ιδιότητα δεν έχει κάποια έγκυρη τιμή ή δεν έχει ακόμη αρχικοποιηθεί.

const person = {
  name: "John",
  age: null, // Η ηλικία δεν έχει ακόμη οριστεί, οπότε της δίνουμε την τιμή null
};

Σημείωση: Το null είναι ένας τύπος δεδομένων και έχει μια μοναδική τιμή, που είναι ακριβώς το null. Όταν ελέγχουμε μια μεταβλητή ή μια ιδιότητα αντιστοιχίζοντας την με το null, πρέπει να είμαστε προσεκτικοί να χρησιμοποιήσουμε τον τελεστή === (ταυτότητα) αντί του == (ίσος), διότι ο τελευταίος θα επιστρέψει true όταν συγκρίνουμε null με τις τιμές null ή undefined.

let age = null;

console.log(age == null); // Εκτυπώνει: true
console.log(age === null); // Εκτυπώνει: true
console.log(age == undefined); // Εκτυπώνει: true
console.log(age === undefined); // Εκτυπώνει: false

Συνοψίζοντας, το null αντιπροσωπεύει μια κενή τιμή ή μια τιμή που δεν υπάρχει, και χρησιμοποιείται όταν δεν υπάρχει έγκυρη τιμή που να αντιπροσωπεύει την κατάσταση ή την τιμή μιας μεταβλητής ή μιας ιδιότητας.

Στη JavaScript, το null είναι ένας πρωτογενής τύπος δεδομένων που χρησιμοποιείται για να αντιπροσωπεύσει μια “κενή” τιμή ή μια μη υπαρκτή τιμή. Όταν μια μεταβλητή ή ιδιότητα έχει την τιμή null, σημαίνει ότι δεν έχει κάποια έγκυρη τιμή.

Ο τύπος δεδομένων null μπορεί να χρησιμοποιηθεί για διάφορους σκοπούς:

1. Να δηλώσει ότι μια μεταβλητή δεν έχει κάποια τιμή ή δεν έχει οριστεί ακόμη.

let age = null; // Δηλώνουμε μια μεταβλητή age χωρίς τιμή

2. Να δηλώσει ότι μια μεταβλητή ή ιδιότητα δεν έχει κάποια έγκυρη τιμή ή δεν έχει ακόμη αρχικοποιηθεί.

const person = {
  name: "John",
  age: null, // Η ηλικία δεν έχει ακόμη οριστεί, οπότε της δίνουμε την τιμή null
};

Σημείωση: Το null είναι ένας τύπος δεδομένων και έχει μια μοναδική τιμή, που είναι ακριβώς το null. Όταν ελέγχουμε μια μεταβλητή ή μια ιδιότητα αντιστοιχίζοντας την με το null, πρέπει να είμαστε προσεκτικοί να χρησιμοποιήσουμε τον τελεστή === (ταυτότητα) αντί του == (ίσος), διότι ο τελευταίος θα επιστρέψει true όταν συγκρίνουμε null με τις τιμές null ή undefined.

let age = null;

console.log(age == null); // Εκτυπώνει: true
console.log(age === null); // Εκτυπώνει: true
console.log(age == undefined); // Εκτυπώνει: true
console.log(age === undefined); // Εκτυπώνει: false

Συνοψίζοντας, το null αντιπροσωπεύει μια κενή τιμή ή μια τιμή που δεν υπάρχει, και χρησιμοποιείται όταν δεν υπάρχει έγκυρη τιμή που να αντιπροσωπεύει την κατάσταση ή την τιμή μιας μεταβλητής ή μιας ιδιότητας.

[adinserter block=”5″]

Ο τελεστής instanceof είναι ένας τελεστής σύγκρισης που χρησιμοποιείται για να ελέγξει αν ένα αντικείμενο ανήκει σε έναν συγκεκριμένο τύπο ή κλάση. Αναφέρεται στην παρακολούθηση της ιεραρχικής αλυσίδας προτύπων ενός αντικειμένου.

Η σύνταξη του τελεστή instanceof είναι:

object instanceof constructor

όπου object είναι το αντικείμενο που ελέγχουμε και constructor είναι η συνάρτηση κατασκευής ή η κλάση προτύπου που θέλουμε να ελέγξουμε αν το αντικείμενο ανήκει σε αυτήν.

Ο τελεστής instanceof επιστρέφει true αν το αντικείμενο ανήκει στην κλάση που προσδιορίζεται από τον constructor, διαφορετικά επιστρέφει false.

Ας δούμε ένα παράδειγμα:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog("Buddy", "Labrador");

console.log(dog instanceof Dog); // Εκτυπώνει: true, διότι το αντικείμενο dog ανήκει στην κλάση Dog
console.log(dog instanceof Animal); // Εκτυπώνει: true, διότι το αντικείμενο dog ανήκει στην κλάση Animal (η οποία είναι υπερκλάση της κλάσης Dog)
console.log(dog instanceof Object); // Εκτυπώνει: true, διότι όλα τα αντικείμενα στη JavaScript ανήκουν στην κλάση Object

Σημειώστε ότι ο τελεστής instanceof αναζητά την ιεραρχία προτύπων του αντικειμένου και αν το αντικείμενο ανήκει σε μια από αυτές τις κλάσεις ή υπερκλάσεις, τότε επιστρέφει true. Εάν το αντικείμενο δεν ανήκει σε καμία από αυτές τις κλάσεις, τότε επιστρέφει false.

Ο τελεστής void είναι ένας μοναδικός τελεστής στη JavaScript που μπορεί να χρησιμοποιηθεί για να καταστήσει μια έκφραση undefined. Ο τελεστής void δεν εκτελεί κάποια πράξη ή αλλαγή στην έκφραση που παρέχεται ως όρισμα, απλά κάνει την έκφραση να αξιολογείται ως undefined.

Η σύνταξη του τελεστή void είναι:

void expression

όπου expression είναι η έκφραση που θέλουμε να αξιολογηθεί ως undefined.

Ας δούμε μερικά παραδείγματα:

void 0; // Επιστρέφει: undefined
void (5 + 2); // Επιστρέφει: undefined
void "Hello"; // Επιστρέφει: undefined

Μπορεί να φαίνεται περίεργο να χρησιμοποιείτε τον τελεστή void για να αξιολογήσετε μια έκφραση ως undefined, αλλά υπάρχουν κάποιες περιπτώσεις που μπορεί να χρησιμοποιηθεί. Μια από αυτές είναι όταν θέλουμε να αποτρέψουμε τον φυλλομετρητή να φορτώσει μια νέα σελίδα όταν κάνουμε κλικ σε έναν σύνδεσμο. Για παράδειγμα:

<a href="https://www.example.com" onclick="void(0);">Click Me</a>

Στο παραπάνω παράδειγμα, ο τελεστής void χρησιμοποιείται στο onclick για να αποτρέψει τον φυλλομετρητή να φορτώσει τη διεύθυνση που περιέχεται στον σύνδεσμο, επιτρέποντας μας να εκτελέσουμε ένα συγκεκριμένο κομμάτι κώδικα αντί για τη φόρτωση μιας νέας σελίδας.