Scribd
Upload
48 views

ES6 JavaScript

The document discusses new features introduced in ECMAScript 2015 (ES6) that improve JavaScript, including let and const for block-scoped variable declarations, template literals for string interpolation, arrow functions for concise anonymous functions, and array methods like find, forEach, filter and map.

Uploaded by

ahmedbenarbia789
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

ES6 JavaScript

The document discusses new features introduced in ECMAScript 2015 (ES6) that improve JavaScript, including let and const for block-scoped variable declarations, template literals for string interpolation, arrow functions for concise anonymous functions, and array methods like find, forEach, filter and map.

Uploaded by

ahmedbenarbia789
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Programming Web 2

Part 2: React JS
Course 1: ES 6

Semester 2 2023 – 2024


• ECMAScript is the JavaScript standard.
• In 2012, the modern browser supported ECMAScript 5.1.
ES6 JavaScript • Since 2015, all browsers used the latest ECMAScript 2015
implementation (ECMAScript 6 or ES6).
• This allows you to write less code and get more done..
Variable declaration: var

▪ When using var inside blocks like for loops, while loops, if
statements and others, the variable will always be allocated
until the end of execution (even after the block ends) . This
allocation can lead to memory leaks and unexpected bugs.
▪ Note in the example below that the variable "myNumber" is still
set even after the for loop:

for(var i = 0; i < 6; i++){


var myNumber = i;
console.log(myNumber); // 0, 1, 2, 3, 4, 5
}
console.log(myNumber); // 5
Variable declaration: let

⚫ ES6 provided a new declaration keyword called “let”.


⚫ Whenever we declare a variable with let, it will only be defined
at inside the block containing the declaration.
⚫ In other words, it is only defined inside the braces {} which
contain the statement let.

for(let i = 0; i < 6; i++){


console.log(i); // 0, 1, 2, 3, 4, 5
}
console.log(i); // undefined
Variable declaration: const

⚫ ES6 also introduces the “const” keyword which allows us to declare


constants.
⚫ When we are dealing with fixed values, using "const" will reduce
the bugs and unexpected behavior.
⚫ Attempting to change variables, which are declared with "const",
will throw an error.

const numberOfHoursInADay = 24; // NOT ALLOWED TO DO


THIS
numberOfHoursInADay = 25; // TypeError is raised
Template Literals

⚫ When displaying or returning a message containing variables,


we always end up with lots of plus '+' signs (as shown below).
⚫ ES6 introduced a new way to combine strings and variables
using of special quotes `` called template literals.

let name = "John"


// using normal quotes
console.log("Hello "+name+", how are you ?");
// using ES6 template literals
console.log(`Hello ${name}, how are you ?`);
Template Literals

⚫ To create the special apostrophe (`), you can click alt+7 or click the ~
button. It depends on your keyboard.
Arrow Functions

⚫ ES6 is mainly about having short and optimized code.


⚫The “Arrow functions” in ES6 present a more concise syntax for
writing function express ions.
// JavaScript (ES5)
function multiply() { return 2 * 3; };
// ES6
const multiply= () => { return 2 * 3 };
Arrow Functions

• If we have these conditions:


• a single instruction.
• This instruction is a return instruction.
• We can omit the braces {} and the return keyword.

// JavaScript (ES5)
function multiplyBy2(a) { return 2 * a; };
// ES6
const multiplyBy2 = a => 2 * a ;
Arrow Functions
• Another amazing feature provided by JavaScript ES6 is the
ability to pass a function as an argument to another function.
This is what we call a higher order function or a first class
function.
let sayHello = () => alert`Hello`;
let sayBye = () => alert`Bye`; //sayHello(); // “Hello”
will be alerted //
Let’s create a function that takes an argument and call it
as if it was a function
let doSomething = somethingToDo => { somethingToDo(); };
// Now any function we send to “doSomething()” function
will be called right away
doSomething(sayHello); // “Hello” will be alerted
doSomething(sayBye); // “Bye” will be alerted
Array Methods
• ES6 fournit des fonctions prédéfinies supplémentaires pour
faciliter le travail avec les tableaux telles que.
✓ .find()
✓ .forEach()
✓ .filter()
✓ .map()
✓ .reduce()
Array Methods:Find
• Suppose we want to find an element in an array, we would think of a for or while
loop to do that.
• On the other hand, using ES6's find() function will make it very easy.
• find method is a higher order function, so it takes a function as a parameter, the
parameter function sets the search criteria for the desired element in the array
• The find() method will return the value of the first element meeting the criteria
of research
const people = [{ name: 'Max' }, { name: 'Jack' }, { name: 'Marry' }]
.
// JavaScript
function findPerson(name) {
for (let i = 0; i < people.length; i++) {
let person = people[i]
if (person.name == name) {
return person
}}}
// ES6
function findPerson(name) {
return people.find(person =>person.name == name)
Array Methods:Find

const people = [{ name: 'Max' }, { name: 'Jack' }, {


name: 'Marry' }]
// JavaScript
function findPerson(name) {
for (let i = 0; i < people.length;
i++) { let person = people[i]
if (person.name == name) {
return person
} } }
// ES6
function findPerson(name) {
return people.find(person =>person.name == name)
}
Array Methods: forEach
• Suppose we want to perform an action on each element of a given array.
The forEach method is our way of using predefined methods.
• The .forEach() method will iterate through the array and execute the
same statement on
• each element of this same array.
const people = [{ name: 'Max' }, { name: 'Jack' }, {
name: 'Marry' }]
// JavaScript
function showEachOne(name) {
for (let i = 0; i < people.length; i++) {
alert(people[i].name)
} }
// ES6
const showEachOne = name => people.forEach(person =>
alert(person.name));
Array Methods: filter
• Imagine we have a cart full of groceries and we only want to keep cheap
products. If we consider a product array where each product is an object
(as shown below).
• By applying the filter method, we will have a new table that will
eliminate all products priced over $10.
const products = [{name:"Milk",price:15}, {name:"Water", price:9},
{name:"Bread", price:5}];
// JavaScript
function filterProducts() { let
cheapProducts = [];
for (let i = 0; i < products.length; i++) { if
(products[i].price < 10)
cheapProducts.push(products[i]);
}
return cheapProducts;
}
// ES6
const filterProducts = () => products.filter(product => product.price < 10);
Array Methods: filter
• ES6 also provided a function for array transformation using
• .map().
• Suppose we want to add two dollars to the price of each product in the
• painting.
• But you may ask what is the difference between .forEach() and .map(). method? As we
said, the forEach executes the same statement on each element of a given array, the
.map() method does the same thing but on a copy of the array, as the original data still
unchanged.
const products = [ { name: 'Milk', price: 15 }, { name: 'Water', price: 9 },
{ name: 'Bread', price: 5 }, ]
// JavaScript
function changeProducts() {
for (let i = 0; i < products.length; i++) {
products[i].price += 2 } return products
} // ES6
const changeProducts = () => products.map(product => ({ ...product, price:
product.price + 2 }));
console.log(changeProducts());
console.log(products);

You might also like