Why Should I Learn ES6?: Classes

ES6
ES6 stands for ECMAScript 6.

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of
ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
Why Should I Learn ES6?

React uses ES6, and you should be familiar with some of the new features like:
 Classes
 Variables
 Arrow Functions
 Array Methods
 Destructuring
 Spread Operator
 Modules
Classes
ES6 introduced classes.
A class is a type of function, but instead of using the keyword function to initiate
it, we use the keyword class, and the properties are assigned inside a constructor()
method.
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
Variables
Before ES6 there was only one way of defining your variables: with the var
keyword. If you did not define them, they would be assigned to the global object.
Unless you were in strict mode, then you would get an error if your variables were
undefined.
Now, with ES6, there are three ways of defining your variables: var, let, and const.
Arrow Functions
Arrow functions are been introduced in the ES6 version of JavaScript. It is used to
shorten the code. Here we do not use the “function” keyword and use the arrow
symbol.
hello = () => {
hello = function() { return "Hello World!";
return "Hello World!"; }
}
hello = () => "Hello World!";
const res = function (a,b) {
console.log(a+b); const sum = (a,b) => a+b;
} sum(4,6);
res(2,7);
Array Methods
map()
 The map() method creates a new array by performing a function on each

array element.
 The map() method does not execute the function for array elements without
values.
 The map() method does not change the original array.
<h2>The map() Method</h2>

<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
When a callback function uses only the value parameter, the index and array
parameters can be omitted.
filter()
The filter() method creates a new array with array elements that pass a test.
<h2>The filter() Method</h2>

<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
The callback function does not use the index and array parameters, so they can be
omitted.
reduce()
 The reduce() method runs a function on each array element to produce

(reduce it to) a single value.
 The reduce() method works from left-to-right in the array.
 The reduce() method does not reduce the original array.
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
The callback function does not use the index and array parameters, so they can be
omitted.
Destructuring
The two most used data structures in JavaScript are Object and Array.
 Objects allow us to create a single entity that stores data items by key.
 Arrays allow us to gather data items into an ordered list.
However, when we pass these to a function, we may not need all of it. The function
might only require certain elements or properties.
 Destructuring assignment is a special syntax that allows us to “unpack”

arrays or objects into a bunch of variables, as sometimes that’s more
convenient.
 Destructuring means to break down a complex structure into simpler parts.
With the syntax of destructuring, you can extract smaller fragments from
objects and arrays. It can be used for assignments and declaration of a
variable.
 Destructuring is an efficient way to extract multiple values from data that is
stored in arrays or objects.
Destructuring Arrays
Old Way Destructuring

let arr = ["Hello", "World] let arr = ["Hello", "World"]
let value1 = arr[0]; let [first, second] = arr;
let value2 = arr[1];
const vehicles = ['mustang', 'f-150',

'expedition']; const vehicles = ['mustang', 'f-150',
const car = vehicles[0]; 'expedition'];
const truck = vehicles[1]; const [car, truck, suv] = vehicles;
const suv = vehicles[2];
Destructuring comes in handy when a function returns an array:

<script>
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(4, 7);
document.write("<p>Sum: " + add + "</p>");
document.write("<p>Difference " + subtract + "</p>");
document.write("<p>Product: " + multiply + "</p>");

document.write("<p>Quotient " + divide + "</p>");
</script>
Destructuring Objects
Old Way Destructuring

const Car = { const Car = {
brand: 'Ford', brand: 'Ford',
model: 'Mustang', model: 'Mustang',
type: 'car', type: 'car',
year: 2021, year: 2021,
color: 'red' color: 'red'
} }
myCar(Car); myCar (Car);

function myCar(car) { function myCar ({type, color, brand,
const message = 'My ' + car.type + ' is model}) {
a ' + car.color + ' ' + car.brand + ' ' + const message = 'My ' + type + ' is a ' +
car.model + '.'; color + ' ' + brand + ' ' + model + '.';
} }
Spread Operator
The JavaScript spread operator (...) allows us to quickly copy all or part of an
existing array or object into another array or object.
Copy original array to let arr = ['a', 'b', 'c'];

another. Changing new let arr2 = arr;
array changed the arr2.push('d');
original array. console.log(arr2);
console.log(arr);
Solving above problem let arr = ['a', 'b', 'c'];

using Spread Operator let arr2 = [...arr];
console.log(arr);
arr2.push('d');
console.log(arr2);
console.log(arr);
Joining two Arrays let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [arr1, arr2];
console.log(arr);
Solving above problem let arr1 = [1, 2, 3];
using Spread Operator let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];
console.log(arr);
Combining two Objects const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle,
...updateMyVehicle}
console.log(myUpdatedVehicle);
Modules
JavaScript modules allow you to break up your code into separate files.
This makes it easier to maintain the code-base.
ES Modules rely on the import and export statements.
Export Import
You can import modules into a file in
You can export a function or variable two ways, based on if they are named
from any file. exports or default exports.
There are two types of exports: Named Named exports must be destructured
and Default. using curly braces. Default exports do
not.
Named Exports
In-line individually: person.js
export const name = "Jesse" Import named exports from the file
export const age = 40 person.js:
All at once at the bottom: person.js import { name, age } from "./person.js";
const name = "Jesse"
const age = 40 Example
export { name, age }

Default Exports
const message = () => { Import a default export from the file
const name = "Jesse"; message.js:
const age = 40;
return name + ' is ' + age + 'years old.'; import message from "./message.js";
};
Example
export default message;

Why Should I Learn ES6?: Classes

Uploaded by

Copyright:

Available Formats

Why Should I Learn ES6?: Classes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Why Should I Learn ES6?: Classes

Uploaded by

Copyright:

Available Formats

ES6

ES6 stands for ECMAScript 6.

Why Should I Learn ES6?

 The map() method creates a new array by performing a function on each

<h2>The map() Method</h2>

<h2>The filter() Method</h2>

const numbers = [45, 4, 9, 16, 25];

 The reduce() method runs a function on each array element to produce

const numbers = [45, 4, 9, 16, 25];

 Destructuring assignment is a special syntax that allows us to “unpack”

Old Way Destructuring

const vehicles = ['mustang', 'f-150',

const truck = vehicles[1]; const [car, truck, suv] = vehicles;

const suv = vehicles[2];

Destructuring comes in handy when a function returns an array:

document.write("<p>Product: " + multiply + "</p>");

Old Way Destructuring

myCar(Car); myCar (Car);

Copy original array to let arr = ['a', 'b', 'c'];

Solving above problem let arr = ['a', 'b', 'c'];

export { name, age }

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.