Nous allons découvrir les concepts JavaScript qui pourraient vous aider de manière significative à obtenir votre prochain travail – des fermetures aux méthodes de tableau, vous apprendrez quels concepts JavaScript vous devez maîtriser pour décrocher un nouveau travail.
Dans cet article , nous allons en savoir plus sur les principes fondamentaux de JavaScript que vous devez connaître avant de postuler pour votre prochain emploi. Ces outils tireront parti de vos compétences JavaScript existantes pour améliorer votre code, faisant de vous un meilleur développeur. Nous allons couvrir quelques notions de base comme les types de valeur et de référence, et passer à quelques concepts plus avancés, tels que les fonctions de haut niveau.
Que vous travailliez déjà avec JavaScript ou que vous étudiez toujours et en apprenant plus sur ce fantastique langage de programmation, vous avez peut-être remarqué quelque chose: il y a toujours quelque chose de nouveau à apprendre.
JavaScript est l'un des langages de programmation les plus importants depuis quelques années maintenant, et le nombre de développeurs et d'emplois disponibles grandissent très vite jour après jour. Cela conduit à plus de code écrit, à plus de cadres et bibliothèques créés, à plus de modèles et de concepts créés par les développeurs, et aussi à plus de choses à étudier chaque jour. En fait, l'une des compétences les plus requises pour être un développeur à succès est la capacité d'apprendre quelque chose de nouveau chaque jour.
Il n'y a pas de recette ou de guide que chaque développeur JavaScript devrait suivre pour être un maître de ce langage de programmation, mais nous peut passer en revue certains concepts ou principes fondamentaux qui sont largement utilisés aujourd'hui et commencer à les apprendre, avec l'intention de les maîtriser et de devenir un meilleur développeur JavaScript. Commençons et découvrons ces principes fondamentaux.
Types de valeur et de référence
Certaines des choses les plus importantes de JavaScript, et que beaucoup de développeurs ne peuvent pas distinguer, sont les types de valeur et de référence. En JavaScript, nous avons cinq types primitifs: String, Number, Boolean, null et undefined. Lorsque nous créons une variable et transmettons l'un de ces types à cette variable, nous transmettons ce type à cette variable par valeur.
var myName = "Leonardo";
var myAge = 22;
Lorsque nous transmettons cette variable à une autre variable, nous la copions par valeur.
var myName = "Leonardo";
nom var = myName;
Comme vous le savez peut-être, JavaScript est un langage de programmation orienté objet, donc tout ce qui est en JavaScript est un objet sauf s'il s'agit de l'un des types de données primitifs ci-dessus. La différence entre les types valeur et référence est la suivante: Les types de données primitifs sont transmis par valeur, tandis que les objets sont transmis par référence.
Cela signifie donc que lorsque vous créez une variable par valeur et que vous modifiez cette variable valeur, vous modifiez la valeur réelle stockée dans cette variable. Et lorsque vous modifiez un objet, vous modifiez la référence à cet objet, pas l'objet réel lui-même.
var person = {
nom: "Leonardo"
};
var otherPerson = personne;
Dans l'exemple ci-dessus, nous avons un objet appelé personne qui contient un objet, et nous avons créé un nouvel objet appelé otherPerson auquel nous avons affecté l'objet personne. Maintenant, les deux variables font référence au même objet, ce qui signifie que si nous modifions la valeur de l'objet, les deux variables changeront.
Fonctionnement du DOM
Les navigateurs sont l'un des éléments les plus centraux du développement Web. Nous avons toujours voulu créer, modifier et améliorer nos méthodes de développement d'applications Web, afin de pouvoir exécuter une application plus légère et plus rapide, au bénéfice de notre utilisateur. Pour ce faire, vous devez savoir comment le DOM fonctionne sous le capot, et ce qui se passe dans votre navigateur lorsque vous entrez sur un site Web.
Nous pouvons utiliser JavaScript pour manipuler le DOM, et avant l'invention de certains cadres impressionnants et les bibliothèques que nous avons aujourd'hui comme React, Vue et Angular, nous avons utilisé beaucoup de JavaScript vanilla ou même jQuery pour faire ce travail pour nous. Par exemple, si nous avons un div avec id = "container" nous exécuterons le code suivant pour obtenir cet élément spécifique:
var myDiv = document.getElementById ("container");
L'une des choses que vous devez savoir clairement est: JavaScript est simplement le langage que nous utilisons pour manipuler le DOM; le DOM est l'arborescence des éléments que notre navigateur crée lorsqu'il charge une page.
Ce n'est qu'une des nombreuses façons que nous pouvons parcourir le DOM avec du JavaScript vanille. Avant, nous disposions de tant d'outils et de support pour les technologies de développement Web comme jQuery et MooTools.
Méthodes de tableau (mapper, filtrer, réduire)
Dans vos applications, vous aurez certainement affaire à un grand nombre de tableaux, donc itérer avec eux ne devrait pas vous poser de problème. Vous devez au moins savoir comment les itérer en utilisant des méthodes de tableau puissantes telles que mapper, filtrer et réduire. Ces méthodes de tableau particulières sont très puissantes car, étant donné un tableau initial, nous pouvons le changer en quelque chose d'autre tout en gardant la liste d'origine intacte. C'est un très bon point et l'une des raisons pour lesquelles ils sont largement utilisés, alors apprenons les différences entre eux.
.map
Cette méthode prend un tableau et crée un nouveau tableau avec les résultats de l'appel d'un fourni fonction sur chaque élément du tableau appelant. Par exemple, imaginons que nous avons un tableau de nombres, et que nous voulons renvoyer un nouveau away multipliant tous les nombres par 2. Voici comment nous le ferions:
const arr = [10, 20, 30, 40, 50];
const newArr = arr.map (nombre => nombre * 2);
console.log (newArr)
// [20, 40, 60, 80, 100]
.filter
Cette méthode est assez similaire à la méthode .map. Il retourne également un nouveau tableau avec la même liste de tableaux d'origine intacte, mais la différence ici est juste ceci: il supprime les éléments basés sur une condition. Par exemple, imaginons que nous avons un tableau de noms et que nous voulons supprimer et renvoyer l'élément égal à "Leonardo". Voici comment nous procéderions:
const names = ["Ramon", "Renato", "Jason", "Leonardo"];
const newNames = names.filter (name => name === "Leonardo");
console.log (newNames)
// ["Leonardo"]
.reduce
Des trois méthodes, celle-ci est la plus complexe et celle que beaucoup de développeurs ne comprennent pas, mais lorsque vous y prêtez attention et que vous l'utilisez une fois, vous ne l'oublierez jamais. Cette méthode applique simplement une fonction à l'ensemble du tableau et renvoie une seule valeur.
const arr = [10, 20, 30, 40, 50];
const newArr = arr.reduce ((précédent, curr) => précédent + curr);
console.log (newArr)
// 150
Fermetures
Chaque fois que nous déclarons une nouvelle fonction en JavaScript, nous créons une nouvelle étendue de fonction.
Par exemple, imaginons que nous ayons une fonction appelée sayMyAge et à l'intérieur de cette fonction, nous avons une variable year qui fait référence à l'année réelle et une variable appelée myAge c'est l'âge calculé.
fonction sayMyAge (yearOfBirth: number) {
année const = 2020;
const myAge = year - yearOfBirth;
return `Votre âge est: $ {myAge}`;
};
Puisque cette fonction a sa propre portée, et comme nous le savons en JavaScript, toutes les variables et fonctions que nous avons à l'intérieur d'une fonction appartiendront à cette fonction, si nous essayons de l'appeler en dehors de notre fonction, nous allons recevez une erreur.
console.log (année); // ReferenceError
console.log (myAge); // ReferenceError
Nous recevons cette erreur car ces variables ne sont pas disponibles pour l'étendue globale, uniquement pour une étendue de fonction, dans notre cas, l'étendue de fonction sayMyAge . Fondamentalement, une fermeture vous donne accès à la portée d'une fonction externe à partir d'une fonction interne.
.apply, .call et .bind
À ce stade, vous savez peut-être que les fonctions sont des objets en JavaScript, nous pouvons donc bénéficier de les utilisant ces trois méthodes pour contrôler l'invocation d'une fonction. Les méthodes apply et call sont assez similaires – nous pouvons les utiliser pour les méthodes " emprunter " et pour définir explicitement la cette valeur.
.call
const me = {
nom: "Leonardo"
};
fonction d'accueil (param1, param2) {
retour `Bonjour $ {param1}, vous avez $ {param2} ans`;
}
console.log (salutation.call (moi, "Leonardo", "22"));
Ce qui se passe ici, c'est que le premier paramètre de la méthode d'appel définit la valeur cette qui est l'objet moi que nous avons créé en premier. Les autres paramètres sont les arguments de la fonction réelle que nous avons créée.
.apply
Bien que similaire à la méthode call, la méthode apply, au lieu de transmettre les paramètres dans un format séparé par des virgules, les transmet comme un tableau après l'objet contextuel. Voici un exemple de la méthode apply:
const me = {
nom: "Leonardo"
};
fonction d'accueil (param1, param2) {
retour `Bonjour $ {param1}, vous avez $ {param2} ans`;
}
console.log (salutation.apply (moi, ["Leonardo","22"]));
.bind
Normalement, nous utilisons la méthode bind pour appeler une fonction avec cette valeur définie explicitement. Il nous permet facilement de définir quel objet spécifique sera " lié " à la cette valeur lorsqu'une fonction est invoquée.
const me = {
nom: "Leonardo"
};
fonction d'accueil (param1, param2) {
retour `Bonjour $ {param1}, vous avez $ {param2} ans`;
}
const myBind = salutation.bind (moi);
console.log (myBind ("Leonardo", "22"));
Fonctions d'ordre élevé
Il s'agit d'un concept que certains développeurs ont du mal à apprendre, même s'ils l'utilisent très souvent dans leur code – ils pourraient ne pas être en mesure d'expliquer exactement comment cela fonctionne. Fondamentalement, une fonction d'ordre supérieur est une fonction qui peut accepter une autre fonction comme paramètre ou une fonction qui renvoie une fonction comme résultat.
Par exemple, les méthodes de mappage, de filtrage et de réduction que nous avons apprises il y a quelques instants sont des fonctions intégrées de haut niveau en JavaScript. Imaginons que nous ayons un tableau de nombres, et nous voulons multiplier chaque numéro de ce tableau par deux.
const arr = [1, 2, 3, 4]
const newArr = arr.map (nombre => nombre * 2);
Comme nous le savons, la méthode map reçoit une fonction en tant que paramètre – c'est toute la définition d'une fonction d'ordre élevé. Vous les avez peut-être utilisés tous les jours dans votre code sans même vous en rendre compte.
Hissage
C'est l'une des beautés de JavaScript, une chose que nous n'avons pas dans beaucoup de langages de programmation, mais nous le faisons ont en JavaScript et cela fait beaucoup de différence dans nos applications, sans que nous le remarquions. Le levage en JavaScript est un mécanisme dans lequel nos variables et fonctions sont déplacées en haut de leur portée locale si elles ont été déclarées à l'intérieur d'une fonction, ou en haut de leur portée globale si elles ont été déclarées en dehors d'une fonction. Cela se produit après que JavaScript a compilé tout votre code.
Donc, par exemple, imaginons que nous avons une variable appelée nom, qui est une chaîne, et avant la déclaration de cette variable, nous voulons consoler cette variable. Quelle serait la réponse?
console.log (nom) // non défini
const name = "Leonardo";
Il nous renvoie undefined car l'astuce est la suivante: la seule chose qui est déplacée en haut de la portée est la déclaration de variable, pas la valeur de la variable, donc quand nous essayons d'accéder à la valeur de la variable, elle renvoie undefined .
Ceci est assez puissant et change beaucoup de choses dans notre code, et vous devez savoir comment cela peut affecter votre code et comment y faire face. Il existe également quelques astuces liées aux variables var, let et const que vous devez savoir, par exemple, les déclarations var sont accessibles depuis l'extérieur de leur portée initiale, tandis que les déclarations faites avec let et const ne le sont pas.
Conclusion
Dans cet article, nous avons appris certains principes fondamentaux, concepts et modèles JavaScript qui sont largement utilisés de nos jours par de nombreuses entreprises et développeurs. Nous avons couvert quelques jolis principes fondamentaux tels que les types variables et de référence, et nous avons appris les fermetures et les fonctions d'ordre élevé. L'idée ici est juste de vous donner un chemin que vous pouvez suivre pour devenir un meilleur développeur, mais vous rappelant qu'il y a beaucoup d'autres concepts et principes fondamentaux que vous pourriez en apprendre davantage qui ne sont pas traités dans cet article. Alors, n'hésitez pas à les chercher et n’arrêtez pas d’apprendre!
Maîtrisons JavaScript! Merci d'avoir lu.
Source link