Ας μιλήσουμε για ερωτηματικά σε JavaScript

Για να τα χρησιμοποιήσετε ή να μην τα χρησιμοποιήσετε…

Τα ερωτηματικά στο JavaScript χωρίζουν την κοινότητα. Μερικοί προτιμούν να τις χρησιμοποιούν πάντα, ανεξάρτητα από το τι. Άλλοι αρέσει να τους αποφεύγουν.

Έκανα μια δημοσκόπηση στο Twitter για να δοκιμάσω τα νερά και βρήκα πολλούς υποστηρικτές ερωτηματικών:

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

Τώρα θεωρώ φυσικό να αποφεύγω τα ερωτηματικά και νομίζω ότι ο κώδικας φαίνεται καλύτερος και καθαρότερος για ανάγνωση.

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

Αυτό ονομάζεται Αυτόματη εισαγωγή ερωτηματικού .

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

Οι κανόνες της αυτόματης εισαγωγής ερωτηματικού JavaScript

Το πρόγραμμα ανάλυσης JavaScript θα προσθέσει αυτόματα ένα ερωτηματικό όταν, κατά την ανάλυση του πηγαίου κώδικα, εντοπίσει αυτές τις συγκεκριμένες καταστάσεις:

  1. όταν η επόμενη γραμμή ξεκινά με κώδικα που σπάει την τρέχουσα (ο κώδικας μπορεί να γεννηθεί σε πολλές γραμμές)
  2. όταν η επόμενη γραμμή ξεκινά με ένα }, κλείνοντας το τρέχον μπλοκ
  3. όταν φτάσει το τέλος του αρχείου πηγαίου κώδικα
  4. όταν υπάρχει μια returnδήλωση στη δική της γραμμή
  5. όταν υπάρχει μια breakδήλωση στη δική της γραμμή
  6. όταν υπάρχει μια throwδήλωση στη δική της γραμμή
  7. όταν υπάρχει μια continueδήλωση στη δική της γραμμή

Παραδείγματα κώδικα που δεν κάνουν αυτό που νομίζετε

Με βάση αυτούς τους κανόνες, ακολουθούν ορισμένα παραδείγματα.

Πάρε αυτό:

const hey = 'hey'const you = 'hey'const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Θα λάβετε το σφάλμα, Uncaught TypeError: Cannot read property 'forEach' of undefinedεπειδή βάσει του κανόνα 1, το JavaScript προσπαθεί να ερμηνεύσει τον κώδικα ως

const hey = 'hey';const you = 'hey';const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Αυτό το κομμάτι κώδικα:

(1 + 2).toString()

εκτυπώσεις "3".

const a = 1const b = 2const c = a + b(a + b).toString()

Αντίθετα, δημιουργεί μια TypeError: b is not a functionεξαίρεση, επειδή η JavaScript προσπαθεί να την ερμηνεύσει ως

const a = 1 const b = 2 const c = a + b(a + b).toString()

Ένα άλλο παράδειγμα που βασίζεται στον κανόνα 4:

(() => { return { color: 'white' }})()

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

Αντίθετα, πρέπει να βάλετε το βραχίονα ανοίγματος αμέσως μετά return:

(() => { return { color: 'white' }})()

Πιστεύετε ότι αυτός ο κώδικας εμφανίζει το "0" σε μια ειδοποίηση:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

αλλά δείχνει 2 αντ 'αυτού, επειδή το JavaScript (ανά κανόνα 1) το ερμηνεύει ως:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

συμπέρασμα

Να είστε προσεκτικοί - ορισμένοι άνθρωποι έχουν πολύ γνώμη για τα ερωτηματικά. Δεν με νοιάζει, ειλικρινά. Το εργαλείο μας δίνει την επιλογή να μην το χρησιμοποιούμε, έτσι μπορούμε να αποφύγουμε τα ερωτηματικά αν θέλουμε.

Δεν προτείνω τίποτα από τη μία ή την άλλη πλευρά. Απλώς πάρτε τη δική σας απόφαση με βάση αυτό που σας ταιριάζει.

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

Διαλέξτε μερικούς κανόνες:

  • Να είστε προσεκτικοί με τις returnδηλώσεις. Αν επιστρέψετε κάτι, προσθέστε στην ίδια γραμμή με την επιστροφή (ίδιο για break, throw, continue)
  • Ποτέ μην ξεκινάτε μια γραμμή με παρενθέσεις, καθώς αυτές θα μπορούσαν να συνδυαστούν με την προηγούμενη γραμμή για να σχηματίσουν μια συνάρτηση κλήσης ή μια αναφορά στοιχείου πίνακα

Και τελικά, δοκιμάστε πάντα τον κωδικό σας για να βεβαιωθείτε ότι κάνει αυτό που θέλετε.

Δημοσιεύω 1 δωρεάν σεμινάριο προγραμματισμού ανά ημέρα στο flaviocopes.com, δείτε το!

Αρχικά δημοσιεύθηκε στο flaviocopes.com.