{"id":216921,"date":"2023-12-13T06:30:00","date_gmt":"2023-12-13T06:30:00","guid":{"rendered":"https:\/\/datascientest.com\/?p=216921"},"modified":"2023-12-08T13:46:59","modified_gmt":"2023-12-08T13:46:59","slug":"es6-tout-savoir","status":"publish","type":"post","link":"https:\/\/datascientest.com\/es6-tout-savoir","title":{"rendered":"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"216921\" class=\"elementor elementor-216921\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3c598f8 e-flex e-con-boxed e-con\" data-id=\"3c598f8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9be3eed elementor-widget elementor-widget-heading\" data-id=\"9be3eed\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Depuis sa cr\u00e9ation en 1995, JavaScript n\u2019a eu de cesse de s\u2019am\u00e9liorer. Initialement con\u00e7u comme un simple langage de script pour animer les pages web, il est rapidement devenu l'un des piliers du d\u00e9veloppement web.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7be2d5d elementor-widget elementor-widget-text-editor\" data-id=\"7be2d5d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><span style=\"font-weight: 400;\">Cependant, malgr\u00e9 sa popularit\u00e9 croissante, JavaScript avait ses d\u00e9fauts, en particulier en termes de structure et de fonctionnalit\u00e9s. En 2015, une mise \u00e0 jour majeure du langage a \u00e9t\u00e9 introduite, promettant de changer irr\u00e9m\u00e9diablement la fa\u00e7on dont les d\u00e9veloppeurs \u00e9criraient du code JavaScript. Cette mise \u00e0 jour, connue sous le nom d&rsquo;<strong>ECMAScript 2015 ou ES6<\/strong>, a introduit une s\u00e9rie de nouvelles fonctionnalit\u00e9s qui non seulement ont rendu le langage plus puissant, mais ont \u00e9galement simplifi\u00e9 sa syntaxe, rendant le code JavaScript plus propre, plus efficace et plus facile \u00e0 comprendre.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a1bc4d8 e-flex e-con-boxed e-con\" data-id=\"a1bc4d8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e67cad1 elementor-widget elementor-widget-heading\" data-id=\"e67cad1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Nouvelles fonctionnalit\u00e9s d\u2019ES6<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6710e6a elementor-widget elementor-widget-text-editor\" data-id=\"6710e6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Examinons en d\u00e9tail certaines des fonctionnalit\u00e9s les plus embl\u00e9matiques et utiles introduites par ES6. Le tableau ci-apr\u00e8s vous permet de les appr\u00e9hender, avec un exemple d\u2019utilisation.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b081aa elementor-widget elementor-widget-html\" data-id=\"5b081aa\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style type=\"text\/css\">\r\n.tg  {border-collapse:collapse;border-spacing:0;}\r\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg .tg-zcez{border-color:inherit;font-family:Tahoma, Geneva, sans-serif !important;font-weight:bold;text-align:left;\r\n  vertical-align:top}\r\n.tg .tg-u5bg{border-color:inherit;font-family:Tahoma, Geneva, sans-serif !important;text-align:left;vertical-align:top}\r\n.tg .tg-37qa{border-color:inherit;color:#700080;font-weight:bold;text-align:left;vertical-align:top}\r\n.tg .tg-w91y{border-color:inherit;font-family:Tahoma, Geneva, sans-serif !important;font-style:italic;font-weight:bold;\r\n  text-align:left;vertical-align:top}\r\n.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}\r\n<\/style>\r\n<table class=\"tg\" style=\"undefined;table-layout: fixed; width: 800px\">\r\n<colgroup>\r\n<col style=\"width: 125px\">\r\n<col style=\"width: 200px\">\r\n<col style=\"width: 275px\">\r\n<col style=\"width: 200px\">\r\n<\/colgroup>\r\n<thead>\r\n  <tr>\r\n    <th class=\"tg-zcez\">Let et Const<\/th>\r\n    <th class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Nouvelles d\u00e9clarations de variables<\/span><\/th>\r\n    <th class=\"tg-w91y\"><span style=\"font-weight:700;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">let<\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">permet une port\u00e9e de bloc pour les variables. <\/span><br><span style=\"font-weight:700;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">d\u00e9finit une constante qui ne peut pas \u00eatre r\u00e9affect\u00e9e.<\/span><\/th>\r\n    <th class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">let<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">x<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">10<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">;<\/span><br><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">y<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">20<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">;<\/span><\/th>\r\n  <\/tr>\r\n<\/thead>\r\n<tbody>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Arrow Functions<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Fonctions avec une nouvelle syntaxe<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Elles permettent une syntaxe plus courte<\/span><\/td>\r\n    <td class=\"tg-0pky\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">(<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">a<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">b<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">) <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=&gt;<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0050A0;background-color:transparent\">a<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">+<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0050A0;background-color:transparent\">b<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Classes<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Mod\u00e8le orient\u00e9 objet pour JavaScript<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Introduit la programmation orient\u00e9e objet avec des classes, des constructeurs et de l'h\u00e9ritage.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">class<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">Person<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> { <\/span><br>\t<span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#572000;background-color:transparent\">constructor<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">(<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">) { <\/span><br>\t\t<span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">this<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">.<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#572000;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0050A0;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">; <\/span><br>\t<span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">} <\/span><br><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">}<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Modules<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Divisez le code en modules importables<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Permet d'isoler des parties du code pour une meilleure organisation et r\u00e9utilisation.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">import<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> { <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">func<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> } <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">from<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#A01010;background-color:transparent\">'module'<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">;<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Destructuring<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Extraire des donn\u00e9es de tableaux\/objets<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Une fa\u00e7on concise d'extraire des valeurs de tableaux ou d'objets et de les affecter \u00e0 des variables.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> [<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">a<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">b<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">] <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> [<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">1<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">2<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">];<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Param\u00e8tres par d\u00e9faut<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Valeurs par d\u00e9faut pour les fonctions<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Permet de d\u00e9finir des valeurs par d\u00e9faut pour les param\u00e8tres des fonctions.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">function<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">greet<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">(<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#A01010;background-color:transparent\">\"Doe\"<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">) { <\/span><br>\t<span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">return<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#1AB1CD;background-color:transparent\">Hello<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#1AB1CD;background-color:transparent\">$<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">{<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0050A0;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">}<\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">!<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">; <\/span><br><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">}<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Promises<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Gestion des op\u00e9rations asynchrones<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Fournit un moyen plus propre de g\u00e9rer les op\u00e9rations asynchrones par rapport aux callbacks.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">new<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#1AB1CD;background-color:transparent\">Promise<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">((<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">resolve<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">reject<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">) <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=&gt;<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> { <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#A05000;background-color:transparent\">\/* ... *\/<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> });<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Spread et Rest Operators<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">\u00c9tendre et regrouper des \u00e9l\u00e9ments<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Le spread operator d\u00e9compose les \u00e9l\u00e9ments. <\/span><br><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Le rest operator regroupe les \u00e9l\u00e9ments en un tableau.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">nums<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> [<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">1<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">2<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#106040;background-color:transparent\">3<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">];<\/span><br><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> [<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">a<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#505050;background-color:transparent\">...<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">rest<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">] <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#1AB1CD;background-color:transparent\">nums<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">;<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-zcez\">Template Literals<\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Cha\u00eenes de caract\u00e8res multi lignes et interpol\u00e9es<\/span><\/td>\r\n    <td class=\"tg-u5bg\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Permet d'int\u00e9grer des expressions au sein des cha\u00eenes de caract\u00e8res et de cr\u00e9er des cha\u00eenes multilignes.<\/span><\/td>\r\n    <td class=\"tg-37qa\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#700080;background-color:transparent\">const<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#0000F0;background-color:transparent\">greeting<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#E1F;background-color:transparent\">=<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\"> <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#F05000;background-color:transparent\">`Hello, ${<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#1AB1CD;background-color:transparent\">name<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#F05000;background-color:transparent\">}!`<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">;<\/span><\/td>\r\n  <\/tr>\r\n<\/tbody>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1523bde elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"1523bde\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formations-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Se renseigner sur nos formations<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-315ac36 e-flex e-con-boxed e-con\" data-id=\"315ac36\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb05b5c elementor-widget elementor-widget-heading\" data-id=\"eb05b5c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les b\u00e9n\u00e9fices d\u2019ES6<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7f1aaf elementor-widget elementor-widget-text-editor\" data-id=\"d7f1aaf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">L&rsquo;adoption d&rsquo;ES6 ne se r\u00e9sume pas simplement \u00e0 l&rsquo;utilisation de nouvelles fonctionnalit\u00e9s ou \u00e0 la modernisation du code. Cette mise \u00e0 jour du langage JavaScript offre des avantages tangibles qui peuvent am\u00e9liorer consid\u00e9rablement l&rsquo;efficacit\u00e9, la lisibilit\u00e9 et la maintenance du code. Examinons de plus pr\u00e8s certains de ces avantages :<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0286aea elementor-widget elementor-widget-html\" data-id=\"0286aea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style type=\"text\/css\">\r\n.tg  {border-collapse:collapse;border-spacing:0;}\r\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\r\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\r\n.tg .tg-cohx{background-color:#EFEFEF;font-family:Tahoma, Geneva, sans-serif !important;font-size:100%;font-weight:bold;\r\n  text-align:left;vertical-align:top}\r\n.tg .tg-im40{background-color:#F3F3F3;font-family:Tahoma, Geneva, sans-serif !important;font-size:100%;text-align:left;\r\n  vertical-align:top}\r\n.tg .tg-0lax{text-align:left;vertical-align:top}\r\n<\/style>\r\n<table class=\"tg\" style=\"undefined;table-layout: fixed; width: 800px\">\r\n<colgroup>\r\n<col style=\"width: 100px\">\r\n<col style=\"width: 250px\">\r\n<col style=\"width: 450px\">\r\n<\/colgroup>\r\n<thead>\r\n  <tr>\r\n    <th class=\"tg-0lax\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/image4.png\" width=\"100\" height=\"100\"><\/th>\r\n    <th class=\"tg-cohx\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Code plus propre et plus lisible<\/span><\/th>\r\n    <th class=\"tg-im40\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Avec l'introduction de la syntaxe des <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">arrow functions<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, des <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">templates literals <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">et du <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">destructuring<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, le code JavaScript est devenu plus concis et expressif. Ces fonctionnalit\u00e9s r\u00e9duisent la verbosit\u00e9 du code, ce qui le rend plus facile \u00e0 lire et \u00e0 comprendre.<\/span><\/th>\r\n  <\/tr>\r\n<\/thead>\r\n<tbody>\r\n  <tr>\r\n    <td class=\"tg-0lax\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/image1-2.png\" alt=\"Image\" width=\"100\" height=\"100\"><\/td>\r\n    <td class=\"tg-cohx\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Programmation orient\u00e9e objet am\u00e9lior\u00e9e<\/span><\/td>\r\n    <td class=\"tg-im40\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Avec l'introduction des <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">classes <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">et de <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">l'h\u00e9ritage<\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">, JavaScript a renforc\u00e9 son soutien \u00e0 la programmation orient\u00e9e objet. Cela facilite la cr\u00e9ation de structures de code robustes et la r\u00e9utilisation de code, en particulier pour les grands projets.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-0lax\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/image5.png\" width=\"100\" height=\"100\"><\/td>\r\n    <td class=\"tg-cohx\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Meilleure gestion de l'asynchronie<\/span><\/td>\r\n    <td class=\"tg-im40\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Les <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">Promises <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">et, plus tard, les fonctions async\/await (introduites dans ES7) ont transform\u00e9 la mani\u00e8re dont les d\u00e9veloppeurs g\u00e8rent les op\u00e9rations asynchrones. Ces fonctionnalit\u00e9s ont r\u00e9duit la complexit\u00e9 du code, \u00e9vitant l'enchev\u00eatrement typique des callbacks.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-0lax\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/image2.png\" width=\"100\" height=\"100\"><\/td>\r\n    <td class=\"tg-cohx\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Modularit\u00e9 et r\u00e9utilisation du code<\/span><\/td>\r\n    <td class=\"tg-im40\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Avec le syst\u00e8me de modules, les d\u00e9veloppeurs peuvent d\u00e9sormais mieux organiser leur code, le diviser en modules r\u00e9utilisables, et ainsi am\u00e9liorer la maintenance et la collaboration sur les projets.<\/span><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td class=\"tg-0lax\"><img decoding=\"async\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/image6.png\" width=\"100\" height=\"100\"><\/td>\r\n    <td class=\"tg-cohx\"><span style=\"font-weight:700;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">S\u00e9curit\u00e9 et pr\u00e9vention des bugs<\/span><\/td>\r\n    <td class=\"tg-im40\"><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">Des fonctionnalit\u00e9s telles que <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">let <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">et <\/span><span style=\"font-weight:400;font-style:italic;text-decoration:none;color:#000;background-color:transparent\">const <\/span><span style=\"font-weight:400;font-style:normal;text-decoration:none;color:#000;background-color:transparent\">permettent de limiter la port\u00e9e des variables et de pr\u00e9venir les r\u00e9affectations accidentelles, r\u00e9duisant ainsi le risque d'erreurs courantes.<\/span><\/td>\r\n  <\/tr>\r\n<\/tbody>\r\n<\/table>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d72a55d elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"d72a55d\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formations-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">En savoir plus sur nos formations<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-83ecdce e-flex e-con-boxed e-con\" data-id=\"83ecdce\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4d12e9 elementor-widget elementor-widget-heading\" data-id=\"e4d12e9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">La transpilation : rendre ES6 compatible avec tous les navigateurs<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d3d2e1 elementor-widget elementor-widget-text-editor\" data-id=\"4d3d2e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">ES6 a apport\u00e9 une multitude de nouvelles fonctionnalit\u00e9s et am\u00e9liorations au langage JavaScript. Un d\u00e9fi majeur s&rsquo;est alors pos\u00e9 : comment garantir que le code \u00e9crit via ES6 fonctionnera dans tous les navigateurs, y compris ceux qui ne supportent pas nativement ces nouvelles fonctionnalit\u00e9s ? La r\u00e9ponse r\u00e9side dans un processus appel\u00e9 <\/span><b>transpilation<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ea31e9 elementor-widget elementor-widget-heading\" data-id=\"1ea31e9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Qu'est ce que  la transpilation ?<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a12b5ed elementor-widget elementor-widget-text-editor\" data-id=\"a12b5ed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">La <\/span><b>transpilation <\/b><span style=\"font-weight: 400;\">est le processus de conversion du code source \u00e9crit dans une version du langage en une autre version qui est g\u00e9n\u00e9ralement plus largement support\u00e9e. Dans le contexte d&rsquo;ES6, cela signifie convertir le code ES6 en une version ant\u00e9rieure de JavaScript (souvent ES5) qui est support\u00e9e par la majorit\u00e9 des navigateurs.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e77604 elementor-widget elementor-widget-heading\" data-id=\"4e77604\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Pourquoi est-ce n\u00e9cessaire ?<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40a9186 elementor-widget elementor-widget-text-editor\" data-id=\"40a9186\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Bien que la plupart des navigateurs modernes aient commenc\u00e9 \u00e0 supporter ES6, il existe toujours un grand nombre d&rsquo;utilisateurs qui utilisent des navigateurs plus anciens ou des versions qui ne supportent pas enti\u00e8rement ES6. Pour garantir une exp\u00e9rience utilisateur fluide et sans erreurs, la transpilation est essentielle.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e9d0a1 elementor-widget elementor-widget-heading\" data-id=\"2e9d0a1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">La transpilation avec Babel<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4140a63 elementor-widget elementor-widget-text-editor\" data-id=\"4140a63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><a href=\"https:\/\/babeljs.io\/\"><span style=\"font-weight: 400;\">Babel<\/span><\/a><span style=\"font-weight: 400;\"> est l&rsquo;un des transpileurs les plus populaires et les plus utilis\u00e9s pour convertir le code ES6 en ES5. Il permet aux d\u00e9veloppeurs d&rsquo;\u00e9crire du code en utilisant les derni\u00e8res fonctionnalit\u00e9s de JavaScript, tout en garantissant que ce code sera ex\u00e9cut\u00e9 sans probl\u00e8me dans n&rsquo;importe quel environnement.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14661b6 elementor-widget elementor-widget-heading\" data-id=\"14661b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-medium\">Consid\u00e9rations<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc396a5 elementor-widget elementor-widget-text-editor\" data-id=\"bc396a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance <\/b><span style=\"font-weight: 400;\">: Elle peut ajouter une surcharge au code, il est donc essentiel de tester les performances.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polyfills <\/b><span style=\"font-weight: 400;\">: Certains objets ou m\u00e9thodes introduits dans ES6, tels que <\/span><i><span style=\"font-weight: 400;\">Promise <\/span><\/i><span style=\"font-weight: 400;\">ou <\/span><i><span style=\"font-weight: 400;\">Array.prototype.includes<\/span><\/i><span style=\"font-weight: 400;\">, ne peuvent pas \u00eatre transpil\u00e9s. \u00c0 la place, un <\/span><b>polyfill <\/b><span style=\"font-weight: 400;\">est utilis\u00e9 pour fournir cette fonctionnalit\u00e9 dans les anciens navigateurs.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Configuration <\/b><span>: Babel, comme d&rsquo;autres transpileurs, offre une multitude d&rsquo;options de configuration. Il est essentiel de prendre le temps n\u00e9cessaire pour les configurer correctement.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ac3e5df e-flex e-con-boxed e-con\" data-id=\"ac3e5df\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5de8043 elementor-widget elementor-widget-heading\" data-id=\"5de8043\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pour conclure<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-664fe59 elementor-widget elementor-widget-text-editor\" data-id=\"664fe59\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">ES6 marque <strong>une \u00e9tape majeure dans l&rsquo;\u00e9volution de JavaScript<\/strong>, enrichissant le langage de fonctionnalit\u00e9s puissantes et d&rsquo;une syntaxe plus \u00e9l\u00e9gante, rendant par cons\u00e9quent le d\u00e9veloppement plus intuitif et plus puissant. Alors que la transpilation garantit sa compatibilit\u00e9, adopter ES6 est le choix judicieux pour tout d\u00e9veloppeur souhaitant rester \u00e0 la pointe du d\u00e9veloppement web moderne.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5a96cc elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"a5a96cc\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formations-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9couvrir nos formations<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3d57569 e-flex e-con-boxed e-con\" data-id=\"3d57569\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-184388e elementor-widget elementor-widget-html\" data-id=\"184388e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Qu'est ce que  la transpilation ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"La transpilation est le processus de conversion du code source \u00e9crit dans une version du langage en une autre version qui est g\u00e9n\u00e9ralement plus largement support\u00e9e. Dans le contexte d'ES6, cela signifie convertir le code ES6 en une version ant\u00e9rieure de JavaScript (souvent ES5) qui est support\u00e9e par la majorit\u00e9 des navigateurs.\"\r\n    }\r\n  },{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"La transpilation avec Babel\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Babel est l'un des transpileurs les plus populaires et les plus utilis\u00e9s pour convertir le code ES6 en ES5. Il permet aux d\u00e9veloppeurs d'\u00e9crire du code en utilisant les derni\u00e8res fonctionnalit\u00e9s de JavaScript, tout en garantissant que ce code sera ex\u00e9cut\u00e9 sans probl\u00e8me dans n'importe quel environnement.\"\r\n    }\r\n  },{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Les fonctions personnalis\u00e9es dans Table.SelectRows\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Outre les options avanc\u00e9es, un gros point fort de Table.SelectRows est la possibilit\u00e9 d\u2019utiliser des fonctions personnalis\u00e9es pour le filtrage. Elle ouvre la porte \u00e0 une flexibilit\u00e9 consid\u00e9rable pour le nettoyage et la transformation de donn\u00e9es.\"\r\n    }\r\n  }]\r\n}\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Depuis sa cr\u00e9ation en 1995, JavaScript n\u2019a eu de cesse de s\u2019am\u00e9liorer. Initialement con\u00e7u comme un simple langage de script pour animer les pages web, il est rapidement devenu l&rsquo;un des piliers du d\u00e9veloppement web. Cependant, malgr\u00e9 sa popularit\u00e9 croissante, JavaScript avait ses d\u00e9fauts, en particulier en termes de structure et de fonctionnalit\u00e9s. En 2015, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":216923,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2494],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9<\/title>\n<meta name=\"description\" content=\"ES6 a introduit une s\u00e9rie de nouvelles fonctionnalit\u00e9s qui ont am\u00e9lior\u00e9es le langage de script JavaScript plus puissant tout en restant simple.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/es6-tout-savoir\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/es6-tout-savoir\" \/>\n<meta property=\"og:site_name\" content=\"Formation Data Science | DataScientest.com\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-13T06:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-08T13:46:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/ES6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Margalith Mamou\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margalith Mamou\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/es6-tout-savoir\",\"url\":\"https:\/\/datascientest.com\/es6-tout-savoir\",\"name\":\"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/#website\"},\"datePublished\":\"2023-12-13T06:30:00+00:00\",\"dateModified\":\"2023-12-08T13:46:59+00:00\",\"author\":{\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\"},\"description\":\"ES6 a introduit une s\u00e9rie de nouvelles fonctionnalit\u00e9s qui ont am\u00e9lior\u00e9es le langage de script JavaScript plus puissant tout en restant simple.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/es6-tout-savoir\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/#website\",\"url\":\"https:\/\/datascientest.com\/\",\"name\":\"Formation Data Science | DataScientest.com\",\"description\":\"Leader de la formation en Data Science\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\",\"name\":\"Margalith Mamou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"contentUrl\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"caption\":\"Margalith Mamou\"},\"description\":\"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/\",\"user\"],\"url\":\"https:\/\/datascientest.com\/author\/margalith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9","description":"ES6 a introduit une s\u00e9rie de nouvelles fonctionnalit\u00e9s qui ont am\u00e9lior\u00e9es le langage de script JavaScript plus puissant tout en restant simple.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/es6-tout-savoir","og_locale":"fr_FR","og_type":"article","og_title":"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9","og_url":"https:\/\/datascientest.com\/es6-tout-savoir","og_site_name":"Formation Data Science | DataScientest.com","article_published_time":"2023-12-13T06:30:00+00:00","article_modified_time":"2023-12-08T13:46:59+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/10\/ES6.png","type":"image\/png"}],"author":"Margalith Mamou","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Margalith Mamou","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/datascientest.com\/es6-tout-savoir","url":"https:\/\/datascientest.com\/es6-tout-savoir","name":"ES6 sur JavaScript : Fonctionnalit\u00e9s, avantages et comptabilit\u00e9","isPartOf":{"@id":"https:\/\/datascientest.com\/#website"},"datePublished":"2023-12-13T06:30:00+00:00","dateModified":"2023-12-08T13:46:59+00:00","author":{"@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00"},"description":"ES6 a introduit une s\u00e9rie de nouvelles fonctionnalit\u00e9s qui ont am\u00e9lior\u00e9es le langage de script JavaScript plus puissant tout en restant simple.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/es6-tout-savoir"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/#website","url":"https:\/\/datascientest.com\/","name":"Formation Data Science | DataScientest.com","description":"Leader de la formation en Data Science","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00","name":"Margalith Mamou","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/datascientest.com\/#\/schema\/person\/image\/","url":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","contentUrl":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","caption":"Margalith Mamou"},"description":"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.","sameAs":["https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/","user"],"url":"https:\/\/datascientest.com\/author\/margalith"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/216921"}],"collection":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/comments?post=216921"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/216921\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media\/216923"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media?parent=216921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/categories?post=216921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/tags?post=216921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}