ES6 scope,object and array destructing, tmplete literals

coderzaman · coderzaman · commit c7a975172e1c · 2024-10-03T23:16:13.000+06:00
diff --git a/22. ES6/img/image.png b/22. ES6/img/image.png
diff --git a/22. ES6/index.html b/22. ES6/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ES6</title>
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+
+
+
+<body>
+
+    <div class="container not_found"></div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="js/objectdestructing.js"></script>
+    <!-- <script src="js/arraydestructing.js"></script> -->
+    <!-- <script src="js/templeteLiteral.js"></script> -->
+    <!-- <script src="js/arrowFunction.js"></script> -->
+    <!-- <script src="js/scope.js"></script> -->
+    <p></p>
+</body>
+
+</html>
diff --git a/22. ES6/js/arraydestructing.js b/22. ES6/js/arraydestructing.js
@@ -0,0 +1,39 @@
+// Array Destructuring
+
+let fruits = ["Apple", "Banana", "Cherry", "Date"];
+
+// If you need access elements from we can follow
+let fruit1 = fruits[0];
+let fruit2 = fruits[1];
+let fruit3 =fruits[2];
+
+console.log(`Fruits: ${fruit1}, ${fruit2}, ${fruit3}`);
+
+// but we array destructuring we can access array elements like array variables
+
+// If you can access to elements exceed array this returns udefined
+
+var [frt1, frt2, frt3, frt4, frt5] = fruits;
+console.log(`Fruits: ${frt1}, ${frt2}, ${frt3}, ${frt4}, ${frt5}`);
+
+
+// Now if we need array exclude some array Element we can access like that
+
+var [frt1, frt2, , frt4 ] = fruits;
+console.log(`Fruits: ${frt1}, ${frt2}, ${frt4}`);
+
+
+// Swap array value
+// tradional way 
+console.log(fruits);
+let temp =fruits[0];
+fruits[0] = fruits[1];
+fruits[1] = temp;
+
+console.log(fruits);
+
+// We can also swap value following technique 
+[fruits[0], fruits[1]] = [fruits[1], fruits[0]];
+console.log(fruits);
+
+
diff --git a/22. ES6/js/arrowFunction.js b/22. ES6/js/arrowFunction.js
@@ -0,0 +1,44 @@
+// Define arrow function
+// function hello(){
+//     console.log("hello world!");
+// }
+
+
+
+// Arrow Function
+let hello = ()=> {
+    console.log("hello world!");
+}
+
+hello();
+
+// In only this senario we escape the parenthesis if function have one parameter
+hello = name => {
+    console.log("Hello,", name + "!");
+}
+
+hello("Aktar");
+
+
+// If there is only statement which is return do not need return statement
+// if write retrun it throw a error
+// or if we have a statement only we can escape {}
+cal = a => a ** a;
+console.log(cal(5));
+
+
+// if we write return we need to put {}
+cal2 = a => {return a * a} 
+console.log(cal(3));
+
+
+//Callback function
+
+numbers = [43,4,32,34,53,2];
+numbers.forEach(element => console.log(element));
+
+
+//Map 
+let sq = numbers.map(element => element * element);
+
+console.log(sq);
diff --git a/22. ES6/js/objectdestructing.js b/22. ES6/js/objectdestructing.js
@@ -0,0 +1,40 @@
+let person = {
+    firstName: 'Abdullah',
+    lastName: 'Abdur Rahman',
+    dob: "12-23-1998"
+};
+
+// We can access it traditionally
+
+var name = person.firstName + ' ' + person.lastName
+var dob = person.dob;
+
+console.log(`Name: ${name}
+Date of Birth: ${dob}`);
+
+// We can access it with object destructuring
+var { firstName, lastName, dob } = person;
+console.log(firstName + ' ' + lastName);
+console.log(dob);
+
+// we need to same var object destructuring name same as object properties
+var { fname, lname, dob } = person;
+console.log(fname + ' ' + lname); //undefined  cause use different name
+console.log(dob);
+
+
+// If we need change name we can use
+var { firstName: fname, lastName: lname, dob } = person;
+console.log(fname + ' ' + lname);
+console.log(dob);
+
+
+// we can use Object destruction in function
+
+function printObject({ firstName, lastName, dob }) {
+    console.log(fname + ' ' + lname);
+    console.log(dob);
+}
+
+console.log(firstName + ' ' + lastName);
+console.log(dob);
diff --git a/22. ES6/js/scope.js b/22. ES6/js/scope.js
@@ -0,0 +1,72 @@
+// We can redeclared variable before declared with var
+// It can create a serious problem in programming execution
+var a = 10;
+a = a + 7;
+
+console.log(a);
+
+var a = 10;
+console.log(a);
+
+// We can solve the problem declared variable with let 
+let b = 10;
+b = 30;
+console.log(b);
+
+// let b = 39; // Cause create error
+
+//When we create variable with const it can't be redeclared or reassigned
+const c = 10;
+
+// Casuse an error
+// c  = 45;
+//const c = 15;
+
+console.log(c);
+
+
+//Scope 
+// Local Scope 
+
+var p = 4;
+let q = 16;
+const r = 32;
+
+console.log("Global Scope: ", p, q, r);
+
+var x = 10;
+
+function test() {
+    var p = 2;
+    let q = 8;
+    const r = 12;
+    x = 10;
+    // We can access the global scope variable from the local scope
+    console.log("Local Scope: ", p, q, r, x);
+
+    var z = 39;
+}
+
+test();
+
+if(true){
+    // When we declared variable with var in if scope which redeclared before.
+    // And reassign here here it can also be change in global scope
+    // But let and const can not be changed in global scope
+    var p = 2;
+    let q = 8;
+    const r = 12;
+}
+
+console.log("Global Scope: ", p, q, r);
+//But you can not acces local scope value from  
+// console.log(z);
+
+// for scope work same as if scope
+
+for(var i = 2; i <=10;i++){
+    console.log(i);
+}
+
+console.log(i);
+
diff --git a/22. ES6/js/templeteLiteral.js b/22. ES6/js/templeteLiteral.js
@@ -0,0 +1,33 @@
+// Template Literal is a Feature of ES6 
+// It use for write multiple comments
+
+// For Write Multiple Line string we \n or write log statements 
+// tow times
+console.log("Template Literal.");
+console.log("It is a Feature of ES6.");
+
+
+console.log("Template Literal.\nIt is a Feature of ES6.");
+
+
+// We can backtick `` use in write templte litral
+console.log(`Template Literal.
+It is a Feature of ES6.
+    `);
+
+let age = 26;
+let nam = "Abdullah";
+let dob = "13-04-1998";
+// we can write varible with in backtick ${}
+
+console.log(`My Name is ${nam}
+My Age is:${age}
+My date of birt is:${dob}
+`);
+
+// we can do arithmetic operations in template literals
+
+let num1 = 10;
+let num2 = 20;
+
+console.log(`Result: ${num1 + num2}`);
