Tester si une variable est définie avec JavaScript

Publié le 04/06/2020 • Mis à jour le 04/06/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

Dans ce bout de code nous allons voir comment tester si une variable est définie avec JavaScript. Pour bien comprendre le code suivant, nous devons faire la différence entre "déclarée" et "définie". Une variable peut être déclarée sans être définie, c'est ce que montre le deuxième cas. L'exécution du code du premier cas va lever une erreur puisque nous essayons d'utiliser une variable qui n'a pas encore été déclarée. Dans le troisième cas, nous testons si une variable a été déclarée à l'aide de l'instruction in window. Dans le quatrième cas, nous utilisons typeof pour vérifier si la variable n'est pas déclarée ou n'est pas définie. Finalement, dans le cinquième cas, nous vérifions que nous avons bien le même résultat que le quatrième cas même si la variable est définie. Ouvrez votre la console JavaScript de votre navigateur, puis cliquez sur les différents boutons pour vérifier les résultats. Veuillez noter que j'ai du désactiver eslint pour le code correspondant au premier cas ou ma build GitHub actions aurait été cassée. Comme quoi les analyseurs statiques de code sont très utiles ! 😊


Démo HTML du snippet

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  methods: {
    /**
     * Case 1) foo is not declared
     * This code throws "ReferenceError: foo is not defined"
     */
    snippet94Case1 () {
      // eslint-disable-next-line
      if (foo === undefined) {
      }
    },
    /**
     * Case 2) foo is declared, test with undefined
     */
    snippet94Case2 () {
      let foo
      if (foo === undefined) {
        console.log('Case 2: foo is declared but undefined.')
      }
    },
    /**
     * Case 3) foo is not declared, test with "in" on the window object
     */
    snippet94Case3 () {
      if ('foo' in window) {
        console.log("We don't go here as foo wasn't declared.")
      } else {
        console.log('Case 3: foo is not declared, no error with the "in window" test.')
      }
    },
    /**
     * Case 4) foo is not declared, test with "typeof".
     */
    snippet94Case4 () {
      if (typeof foo === 'undefined') {
        console.log('Case 4: foo is not declared, test with "typeof".')
      }
    },
    /**
     * Case 5) foo is declared, test with "typeof".
     */
    snippet94Case5 () {
      let foo
      if (typeof foo === 'undefined') {
        console.log('Case 5: foo is declared but it is undefined.')
      }
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire