JAVASCRIPT ARRAY METHODS

Elzero Web School
Learn JAVASCRIPT In Arabic 2021 (From 41 To 80) :

[41] Using Length With Array .................................................................. 4
[42] Add And Remove From Array .......................................................... 5
[43] Searching Array ............................................................................... 6
[44] Sorting Arrays .................................................................................. 7
[45] Slicing Array..................................................................................... 7
[46] Joining Arrays .................................................................................. 8
[47] Array Challenge ............................................................................... 9
[40] to [47] ............................................................................................11
[48] Loop - For And Concept Of Loop .....................................................13
[49] Looping On Sequences ....................................................................14
[50] Nested Loops And Trainings ............................................................15
[51] Loop Control - Break_ Continue_ Label ...........................................16
[52] Loop - For Advanced Example .........................................................17
[53] Practice - Add Products To Page ......................................................17
[48] to [53] ............................................................................................18
[54] Loop - While ...................................................................................21
[55] Loop - Do While ..............................................................................22
[56] Loop - Challenge .............................................................................23
[54] to [56] ............................................................................................24
[57] Function Intro And Basic Usage.......................................................24
[58] Function Advanced Examples .........................................................25
[59] Function Return And Use Cases ......................................................26
[60] Function Default Parameters ..........................................................27
[61] Function Rest Parameters ...............................................................27
[62] Function Ultimate Practice .............................................................28
[63] Random Arguments Function Challenge .........................................29
[57] to [63] ............................................................................................30
[64] Anonymous Function And Practice .................................................35
[65] Return Nested Function ..................................................................36
[66] Arrow Function Syntax ...................................................................37
[67] Scope - Global And Local .................................................................38
[68] Scope - Block ..................................................................................39
[69] Scope - Lexical (Static) ....................................................................40
[70] Arrow Function Challenge...............................................................41
[64] to [70] ............................................................................................42
[71] Higher Order Functions - Map .........................................................45
[72] Higher Order Functions - Map Practice ...........................................47
[73] Higher Order Functions - Filter ........................................................48
[74] Higher Order Functions - Filter Practice ..........................................49
[75] Higher Order Functions - Reduce ....................................................50
[76] Higher Order Functions - Reduce Practice .......................................51
[77] Higher Order Functions - ForEach And Practice ...............................52
[78] Higher Order Functions - Challenge.................................................53
[71] to [78] ............................................................................................54
[79] Object - Introduction ......................................................................56
[80] Dot Notation vs Bracket Notation ...................................................57
[41] Using Length With Array
Here : ‫رابط الدرس عىل اليوتيوب‬
Here : ‫رابط الكود عىل الموقع‬
Arrays methods :
• Length .
• Index start from 0
// Index Start From 0 [ 0, 1, 2, 3, 4 ]
let myFriends = ["Ahmed", "Mohamed", "Sayed", "Alaa"];

. ‫ ببلش من الواحد‬Length ‫ ببلش من الصفر أما ال‬Index ‫ال‬
let myFriend = ["Ahmed", "Mohammed", "Ali", "Yosef"];
console.log(myFriend.length)
. 4 ‫النتيجة‬
console.log(myFriend.length); //4
myFriend[6] = "Gamal";
console.log(myFriend);
console.log(myFriend.length); //7
. ‫يىل بدي ياه‬ ‫ن‬ ‫ ر‬Gamal ‫هون طلبت منو يحط اسم‬
‫فبحطىل قيمتي فاضيات ثم بحط األسم ي‬
‫ي‬ ، ‫بالتتيب السادس‬
. ]"Ahmed", "Mohammed", "Ali", "Yosef", empty × 2, "Gamal"[ ‫النتيجة‬
myFriend[myFriend.length] = "Gamal";
console.log(myFriend)
‫ن‬
. ‫يعن اإلضافة رح تكون باألخت‬
‫ ي‬، ‫ضفىل أسم جديد بطريقة ديناميكة بدل من العد‬
‫ي‬ ‫هون عبقلو‬
. ]"Ahmed", "Mohammed", "Ali", "Yosef", "Gamal"[ ‫النتيجة‬
myFriend[myFriend.length - 1] = "Gamal";
‫ ر‬Length ‫ ال‬، ‫هون عبقلو عدل أخر قيمة‬
. ‫ بواحد‬index ‫اكت من ال‬ ‫ي‬
. ]"Ahmed", "Mohammed", "Ali", "Gamal"[ ‫النتيجة‬
myFriend.length = 2;
. ]"Ahmed", "Mohammed"[ ‫النتيجة‬
[42] Add And Remove From Array
Arrays Methods [Adding And Removing]

• unshift(" ") Add Element To The First .
• push(" ") Add Element To The End .
• shift( ) Remove First Element From Array .
• pop( ) Remove Last Element From Array .

myFriend.unshift("osama", "Nabil")
. ‫ وظيفتا تضيف عنارص ن يف بداية المصفوفة‬unshift
. ]"osama", "Nabil", "Ahmed", "Mohammed", "Ali", "Yosef"[ ‫النتيجة‬
myFriend.push("osama", "Nabil")
. ‫ وظيفتا تضيف عنارص ن يف نهاية المصفوفة‬psuh
. ]"Ahmed", "Mohammed", "Ali", "Yosef", "osama", "Nabil"[ ‫النتيجة‬
myFriend.shift();
. ‫ بتحذف أول عنرص من المصفوفة‬shift
. ]"Mohammed", "Ali", "Yosef"[ ‫النتيجة‬
let first = myFriend.shift();
console.log(`First Name is ${first}`);
. ‫يىل حذفتو‬ ‫ن‬
‫وفين اطبع ي‬
‫ي‬ ، ‫اذا حطيتو داخل متغيت بقوم بالمهمة اليوجد أي مشكلة‬
. First Name is Ahmed , ]"Mohammed", "Ali", "Yosef"[ ‫النتيجة‬
let last = myFriend.pop();
console.log(`Last Name is ${last}`);
. ‫ بيحذف اخر عنرص ن يف المصفوفة‬pop
. Last Name is Yosef , ]"Ahmed", "Mohammed", "Ali"[ ‫النتيجة‬
[43] Searching Array

Arrays Methods [Search]:

• indexOf (Search Element , From Index [Opt]) .
• lastindexOf (Search Element, From Index[Opt]) .
• includes (valueToFind, fromIndex [Opt]) [ES7] .

console.log(myFriend.indexOf("Ahmed"));
‫ن‬
. 0 ‫ النتيجة‬، ‫معي مشان يبلش منو‬ ‫ن‬
‫فين حطلو رقم‬
‫ ي‬، ‫ طبعا ببلش من الصفر‬Ahmed ‫بحثىل عىل كلمة‬
‫ي‬ ‫هون عبقلو‬
let myFriend = ["Ahmed", "Mohammed", "Ali", "Yosef", "Ahmed"];
console.log(myFriend.indexOf("Ahmed", 2));
. Ali ‫ رح يبلش من عند‬4 ‫هون النتيجة رح تتطلع‬
let myFriend = ["Ahmed", "Mohammed", "Ahmed", "Yosef", "Ahmed"];
console.log(myFriend.lastIndexOf("Ahmed",-2));
‫ن‬
. Yosef ‫يعن رح يبلش من عند‬
‫ ي‬-2 ، 2 ‫ النتيجة‬، ‫ بيبحث من األخر لألول‬lastIndexof
let myFriend = ["Ahmed", "Mohammed", "Ahmed", "Yosef"];
console.log(myFriend.includes("Yosef"));
. true ‫ النتيجة‬، ‫ بيبحث اذا موجود وال أل‬includes
console.log(myFriend.includes("Yosef",2));
. ‫ وبعد‬2 ‫ المقصود إذا موجودة من ال‬, ‫ ال‬2 ‫ أنو موجود بال‬2 ‫ هون مانو مقصود بال‬، true ‫النتيجة‬
if (myFriend.indexOf("Khir") === -1) {
console.log("Not found")
}
. ‫ إذا العنرص غت موجود‬-1 ‫بيعط‬
‫ي‬ Not found ‫النتيجة‬
console.log(myFriend.indexOf("Khir"))
‫))"‪console.log(myFriend.lastIndexOf("Khir‬‬
‫بيعط قيمة ‪. -1‬‬ ‫يىل عبدور عليه مانو موجود لذلك‬ ‫ن‬
‫ي‬ ‫النتيجة ‪ -1‬بالحالتي ‪ ،‬ألنو ي‬
‫‪[44] Sorting Arrays‬‬

‫رابط الدرس عىل اليوتيوب ‪Here :‬‬
‫رابط الكود عىل الموقع ‪Here :‬‬
‫]‪Arrays Methods [Sort‬‬

‫‪• sort (Function [Opt]) .‬‬
‫‪• reverse .‬‬
‫;]‪let my = [10, "Say", "Moha", "90", 900, 100, 20, 200, "10", -20, -10‬‬
‫;)‪console.log(my‬‬
‫))(‪console.log(my.sort‬‬
‫ن‬
‫يعن بتبلش من ‪ 1‬ثم ‪ 2‬ثم ‪ 3‬وهكذا ‪ ،‬بعدا بيعتمد عىل عدد األصفار ‪.‬‬ ‫ر‬
‫‪ sort‬بتتب ليس تصاعديا ابجديا ي‬
‫]‪[10, "Say", "Moha", "90", 900, 100, 20, 200, "10", -20, -10‬‬ ‫األساس‬ ‫التتيب‬‫ر‬
‫ي‬
‫]"‪[-10, -20, 10, "10", 100, 20, 200, "90", 900, "Moha", "Say‬‬ ‫بعد ر‬
‫التتيب‬
‫يىل صفارو أقل ‪ ،‬بتأثر عىل المصفوفة‬
‫بكت الرقم بحط الرقم ي‬
‫ببلش بالسالب ‪ K‬ثم باألرقام من ‪ 1‬وبعد ‪ ،‬بعدا بيهتم ر‬
‫ر‬ ‫ر‬
‫مابتبق عىل حاال بتتغت متل ماطبقت عليها حن لو كان داخل ال ‪. console‬‬ ‫يعن المصفوفة األساسية‬ ‫ن‬
‫األساسية ي‬
‫))(‪console.log(myfriend.reverse‬‬
‫ً‬
‫‪ reverse‬بيعكس ترتيب المصفوفة ‪ ،‬بساوي األخت باألول واألول باألخت ‪ ،‬طبعا ألخر وحدة ألنو بتغت المصفوفة ‪.‬‬
‫))(‪console.log(myfriend.sort().reverse‬‬
‫ن‬
‫فين استخدم تنيناتن بنفس اللحظة ‪.‬‬
‫ي‬
‫‪[45] Slicing Array‬‬

‫‪Arrays Methods [Slicing] :‬‬

‫‪• slice (Start [Opt] , End [Opt] Not Including End) .‬‬
‫‪o slice() => All Array .‬‬
‫‪o If Start Is Undefined => 0 .‬‬
‫‪o Negative Count From End .‬‬
o If End Is Undefined || > Indexes => Slice To The End Array.Length .
o Return New Array.
• splice (Start [Mand], Deletecount [Opt] [0 No Remove], The Items To Add [Opt]) .
o If Negative => Start From The End .
. ‫ بس مابأثر عىل المصفوفة األساسية‬، ‫ بتعمل اقتطاع بتحطلو البداية والنهاية اذا بدك‬Slice
let myfriend = ["Sayed", "Mohammed", "Gamal", "Yosef", "Osama", "Ali"];
console.log(myfriend);
console.log(myfriend.slice()); // 1
console.log(myfriend.slice(1)); // 2
console.log(myfriend.slice(2, 5)); // 3
console.log(myfriend.slice(-3)) // 4
console.log(myfriend.slice(1, -2)); // 5
console.log(myfriend.slice(-4, -2)); // 6
console.log(myfriend); // 7
]"Sayed", "Mohammed", "Gamal", "Yosef", "Osama", "Ali"[ ‫األساسية‬
‫ا‬
["Sayed", "Mohammed", "Gamal", "Yosef", "Osama", "Ali"] ‫( هون ماحددت لذلك بياخدا كامل‬1
["Mohammed", "Gamal", "Yosef", "Osama", "Ali"] (2
["Gamal", "Yosef", "Osama"] ‫( النهاية مابتدخل معنا‬3
["Yosef", "Osama", "Ali"] (4
["Mohammed", "Gamal", "Yosef"] (5
["Gamal", "Yosef"] (6
‫"[ رجعت طبعتا نفسا مشان ورجيك‬Sayed", "Mohammed", "Gamal", "Yosef", "Osama", "Ali"] (7
. ‫س من المصفوفة األساسية‬
‫مابتغت ي‬
let myfriend = ["Sayed", "Mohammed", "Gamal", "Yosef", "Osama", "Ali"];
myfriend.splice(0, 2, "Sameer", "Samar");
console.log(myfriend);
‫يىل أنا‬ ‫ن‬ ‫ن‬ ‫ر‬
‫يحذفىل هون ختت تني رح يحذف أول تني من البداية صفر ي‬
‫ي‬ ‫ ثم شو بدي‬، ‫ بحطلو البداية اجباري‬splice
‫ن‬
‫ بأثر عىل‬، ‫س بس بحط هدول مكان الرقم البداية‬ ‫ن‬
‫ يف حال ماحطيتلو يحذف ي‬، ‫وحطىل هدول األسمي مكانن‬
‫ي‬ ‫حددتا‬
. ]"Sameer", "Samar", "Gamal", "Yosef", "Osama", "Ali"[ ‫ النتيجة‬، ‫المصفوفة‬
myfriend.splice(2, 2, "Sameer", "Samar");
. ]"Sayed", "Mohammed", "Sameer", "Samar", "Osama", "Ali"[ ‫النتيجة‬
[46] Joining Arrays

Arrays Methods [Joining] :

• concat(array, array) => Return A New Array .
• join(Separator) .
‫ن‬
. ‫فين حطا عنارص إضافية‬
‫ طبعا ي‬، ‫ لدمج كذا مصفوفة مع بعض‬concat
let myfriend = ["Sayed", "Mohammed", "Gamal"];
let newfriend = ["Sameer", "Samar"];
let schoolfriend = ["Osama", "Ali"]
let allfriend = myfriend.concat(newfriend, schoolfriend, "Yosef")
console.log(allfriend)
. ]"Sayed", "Mohammed", "Gamal", "Sameer", "Samar", "Osama", "Ali", "Yosef"[ ‫النتيجة‬
. ‫ وبحطن مع بعض‬string ‫ بحول كل عنارص المصفوفة ال‬join
console.log(allfriend.join());
console.log(allfriend.join(""));
console.log(allfriend.join("|"));
‫ن‬
‫س رح يحط فاصلة بيناتن‬
‫ يف حال ماحطيت ي‬Sayed,Mohammed,Gamal,Sameer,Samar,Osama,Ali,Yosef
SayedMohammedGamalSameerSamarOsamaAliYosef
Sayed|Mohammed|Gamal|Sameer|Samar|Osama|Ali|Yosef
[47] Array Challenge

: ‫تحديات‬
let zero = 0;
let counter = 3;
let my = ["Ahmed", "Mazero", "Elham", "Osama", "Gamal", "Ameer"];
// Write Code Here
console.log(my); // ["Osama", "Elham", "Mazero", "Ahmed"];

console.log(my.slice("????")); // ["Elham", "Mazero"]
console.log(); // "Elzero"
console.log(); // "rO"
‫ن‬
. ‫القواني‬ ‫ن‬ ‫ أنا رح حل ر‬، ‫هادا المطلوب‬
‫بأكت من طريقة مشان إذا كان يف أي طريقة بتخالف‬
console.log(my.slice(zero,counter).concat("Osama").reverse());
// ["Osama", "Elham", "Mazero", "Ahmed"];
. ‫هاي أول طريقة بالنسبة ألول تحدي‬
my.length = ++counter
console.log(my.reverse());
‫ن‬
. ‫تان طريقة بالنسبة ألول تحدي‬
‫هاي ي‬
console.log(my.slice(zero,++counter).reverse());
. ‫هاي تالت طريقة بالنسبة ألول تحدي‬
console.log(my.slice(zero, my.indexOf("Gamal")).reverse());
. ‫هاي رابع طريقة بالنسبة ألول تحدي‬
my.pop(); my.pop()
console.log(my.reverse())
. ‫هاي خامس طريقة بالنسبة ألول تحدي‬
console.log(my.slice(++zero, counter).reverse());
// ["Elham", "Mazero"]
‫ن‬
. ‫لتان تحدي‬
‫هاي أول حل بالنسبة ي‬
console.log(my.slice(++zero, counter).reverse());
// ["Elham", "Mazero"]
‫ر‬
. ‫وباف الحلول كلن نفس الفكرة مع القبل‬ ‫ن‬ ‫ن‬
‫ي‬ ، ‫تحدي‬ ‫لتان‬
‫ي‬ ‫بالنسبة‬ ‫حل‬ ‫ثان‬
‫هاي ي‬
my.length = zero;
my[zero] = "Elzero"
console.log(my); // "Elzero"
. ‫هاي الحل بالنسبة لتالت تحدي‬
my.length = zero;
my[zero] = "Elzero"
console.log(my.toString().split("").slice(- --
counter).join("").split())
. ‫هون ماحليت كامل التحدي الم الحرف األخت يكون كبت‬
[40] to [47]
Here : ‫رابط التكليفات عىل الموقع‬
: 1 ‫التكليف‬
. ‫ممنوع إستخدام األرقام نهائيا ويمكنك إستخدام قيم المتغتات مع ما تعلمته لتنفيذ المطلوب‬ •
‫ن‬
. ‫مختلفتي‬ ‫ن‬
‫بطريقتي‬ ‫يجب عمل الحل والمطلوب‬ •
. ‫ لتنفيذ المطلوب‬Console ‫يمكنك كتابة ما تريد خارج ال‬ •
let myFriends = ["Ahmed", "Elham", "Osama", "Gamal"];

let num = 3;
// Method 1
console.log(myFriends.slice(myFriends.indexOf("Ahmed"),num));
// ["Ahmed", "Elham", "Osama"];
// Method 2
myFriends.pop()
console.log(myFriends); // ["Ahmed", "Elham", "Osama"];
. ‫ممنوع إستخدام األرقام نهائيا‬ •
. slice Method‫ممنوع إستخدام ال‬ •
. ‫ لتنفيذ المطلوب‬Console ‫يمكنك كتابة ما تريد خارج ال‬ •
let friends = ["Ahmed", "Eman", "Osama", "Gamal"];
// Write Your Code Here

friends.pop();
friends.shift()
console.log(friends); // ["Eman", "Osama"]
. ‫ممنوع إستخدام األرقام نهائيا‬ •
. ‫ واحد فقط لتخرج القيمة المطلوبة‬Code ‫يجب كتابة سطر‬ •
let arrOne = ["C", "D", "X"];

let arrTwo = ["A", "B", "Z"];
let finalArr = [];
// Write One Single Line Of Code
console.log(finalArr.concat(arrOne,arrTwo).sort().reverse());
// ["Z", "X", "D", "C", "B", "A"]
. ‫ فقط‬0 ‫ممنوع إستخدام األرقام نهائيا ويمكنك إستخدام الرقم‬ •
. ‫ واحد فقط لتخرج القيمة المطلوبة‬Code ‫يجب كتابة سطر‬ •
let website = "Go";

let words = [`${website}ogle`, "Facebook", ["Elzero", "Web",
"School"]];
console.log(words.reverse()[0][0].slice(website.length).toUpperCase());
// ZERO
. ‫هاي أول طريقة‬
let website = "Go";
let words = [`${website}ogle`, "Facebook", ["Elzero", "Web",
"School"]];
console.log(words[website.length][0].slice(website.length).toUpperCase(
)); // ZERO
‫ن‬
. ‫تان طريقة‬
‫هاي ي‬
. haystack ‫ المسماه‬Array ‫ موجود داخل ال‬needle ‫كل ما عليك هو التأكد أن قيمة متغت‬ •
. ‫يجب عمل الحل بثالث طرق مختلفة‬ •
. ‫ إذا كانت الكلمة موجودة‬Console ‫ ن يف ال‬Found ‫قم بطباعة كلمة‬ •
let needle = "JS";

let haystack = ["PHP", "JS", "Python"];
// Write 3 Solutions
if (haystack.includes(needle)) {
console.log("Found")
}
if(haystack.indexOf(needle) !== -1) {

}
if(haystack.lastIndexOf(needle) !== -1) {

}
. ‫ فيه ما تعلمته لتخرج النتيجة الموجودة ن يف المثال‬Code ‫قم بكتابة‬ •
. ‫يمنع كتابة اي أرقام نهائيا ن يف اي مكان ن يف الحل‬ •
let arr1 = ["A", "C", "X"];

let arr2 = ["D", "E", "F", "Y"];
let allArrs = [];
// Your Code Here

let one = allArrs.concat(arr1,arr2).sort();
let two = one.slice(arr2.length);
let three = two.join("").toLowerCase()
console.log(three) // fxy
[48] Loop - For And Concept Of Loop

Loop
• for ([initialization]; [condition]; [final-expression]) { statement }
for (let i = 0; i < 10 ; i++) {
console.log(i);
}
‫ن‬ ‫ن‬
‫الش الشط هون حطيت اصغر من عشة‬ ‫ي‬ ‫تان‬
‫ ي‬، ‫الش بحط مرحلة االنطالق‬
‫ي‬ ‫ اول‬، ‫موظفي‬ ‫انا هون بدي عش‬
‫ن‬
. ‫ بعدا شو يساوي‬، ‫موظفي‬ ‫وماحطيت يساوي النو ببلش من الصفر للتسعة هيط بصت عندي عشة‬
[49] Looping On Sequences

Loop
• Loop On Sequences
let myfriend = ["Ahmed", "Mohammed", "Ali", "Osama", "Yosef"];
console.log(myfriend[0]);
‫ لذلك‬، ‫أكت من هيك بكتت‬
‫ وممكن يكون المصفوفة ر‬، ‫األسام ولكن هاي الطريقة تحتاج الوقت‬
‫ي‬ ‫طبعىل كل‬
‫ي‬ ‫هيك رح‬
. loop ‫منستخدم ال‬
for (let i = 0; i < myfriend.length; i++) {
console.log(myfriend[i])
}
. ‫بتعط نفس النتيجة ولكن بطريقة أرسع‬
‫ي‬ ‫هاي‬
let myfriend = [1, 2, "Ahmed", "Mohammed", 3, "Ali", "Osama", "Yosef"];
let onlynames = [];
if (typeof myfriend[0] === "string") {

onlynames.push(myfriend[0]);
}
}
}
}
}
}
console.log(onlynames)
. ]"Ahmed", "Mohammed", "Ali"[ ‫النتيجة‬
let myfriend = [1, 2, "Ahmed", "Mohammed", 3, "Ali", "Osama", "Yosef"];
let onlynames = [];
for (let i = 0; i < myfriend.length; i++) {

if (typeof myfriend[i] === "string") {
onlynames.push(myfriend[i]);
}
}
console.log(onlynames)
. ‫الطريقة المخترصة بتساوي نفس الطريقة بشعة ودقة‬
[50] Nested Loops And Trainings

Loop :
• Nested Loop .
let products = ["Keyboard", "Mouse", "Pen", "Pad"];

let colors = ["Red", "Green", "Blue"];
let years = [2020, 2021];
for (let i = 0; i < products.length; i++) {
console.log("*".repeat(10));
console.log(`+ ${products[i]}`);
console.log("$".repeat(10));
console.log("Colors :");
for (let j = 0; j < colors.length; j++) {
console.log(`- ${colors[j]}`);
}
console.log("Years :");
for (let k = 0; k < years.length ; k++) {
console.log(`/ ${years[k]}`)
}
}
[51] Loop Control - Break_ Continue_ Label

Loop control :
• Break .
• Continue .
• Label .
let products = ["Keypboard", "Mouse", "Pen", "Pad", "Monitor"];
for (let i = 0; i < products.length ; i++) {

console.log(products[i]);
if (products[i] === "Pen") {
break;
}
}
ً
‫طبعا ر‬
. ‫التتيب مهم‬ ، ‫ النتيجة رح يطبع اول تالتة‬، ‫ تستخدم اليقاف الحلقة عند تحقيق الشط‬Break
let products = ["Keypboard","Mouse",10,20,"Pen","Pad",30,"Monitor"];
for (let i = 0; i < products.length ; i++) {

if (typeof products[i] === "number") {
continue;
}
}
‫ن‬ ‫ هون رح يحذف كل األرقام ر‬، ‫ بيحذف يىل حقق الشط بعدا بكمل‬Continue
if ‫ انتبه يف حال حطيت‬، ‫ويتك الكلمات‬ ‫ي‬
.‫س‬
‫يطبعىل كل ي‬
‫ي‬ ‫ رح‬console ‫بعد ال‬
mainloop: for (let i = 0; i < products.length ; i++) {

nestedloop: for (let j = 0; j < colors.length ; j++) {
console.log(`- ${colors[j]}`)
if (colors[j] === "Green") {
break mainloop;
}
}
}
‫ن‬ ‫ن‬ ‫ن‬
‫ هون النتيجة‬، ‫فين بالحلقة الداخلية التحكم بالحلقة األساسية‬
‫بفيدن متل هالحالة ي‬
‫ي‬ ‫سم كل حلقة هادا‬
‫ي‬ ‫يعن‬
‫ ي‬Label
. Keypboard - Red- Green
[52] Loop - For Advanced Example

Loop for advanced example .

let i = 0
for (;;) {
i++
if (i === products.length) break ;
}
‫ن‬
‫ أما إذا كان داخل الحلقة مارح‬، ‫يحطىل قيمتا‬
‫ي‬ ‫ رح‬i ، ‫ هون يف حال طبعت خارج الحلقة‬، ‫طريقة متقدمة لكتابة الحلقة‬
. i ‫يطبعىل قيمة ال‬
‫ي‬
[53] Practice - Add Products To Page

Products Practice :
let products =["Keypboard", "Mouse", "Pen", "Pad", "Monitor", "iphone"]

let showcount = 4;
document.write(`<h1>Show ${showcount} Products</h1>`);
for (let i = 0; i < showcount; i++) {

document.write(`<div>`);
document.write(`<h3> [${i + 1}] ${products[i]} </h3>`)
‫{ )‪for (let j = 0; j < colors.length ; j++‬‬
‫;)`}]‪document.write(`<p>- ${colors[j‬‬
‫}‬
‫)`>‪document.write(`<p>${colors.join(" / ")}</p‬‬
‫;)`‪document.write(`</div‬‬
‫}‬
‫عمىل ‪.‬‬
‫ي‬ ‫تطبيق‬
‫]‪[48] to [53‬‬
‫رابط التكليفات عىل الموقع ‪Here :‬‬
‫التكليف ‪: 1‬‬
‫ممنوع إستخدام األرقام نهائيا ويمكنك إستخدام قيم المتغتات مع ما تعلمته لتنفيذ المطلوب ‪.‬‬ ‫•‬
‫يجب طباعة األرقام وإستثناء الرقم ‪ 40‬كما ن يف المثال ‪.‬‬ ‫•‬
‫يجب إستخدام ال ‪ Loop For‬لعمل المطلوب ‪.‬‬ ‫•‬
‫;‪let start = 10‬‬ ‫;‪let end = 100‬‬ ‫;‪let exclude = 40‬‬
‫‪// Output‬‬
‫‪// 10 20‬‬ ‫‪30‬‬ ‫‪50‬‬ ‫‪60‬‬ ‫‪70‬‬ ‫‪80‬‬ ‫‪90‬‬ ‫‪100‬‬
‫{ )‪for (let i = start; i <= end; i += start‬‬

‫{ )‪if (i === exclude‬‬
‫;‪continue‬‬
‫}‬
‫)‪console.log(i‬‬
‫}‬
‫يجب طباعة األرقام كما ن يف المثال والتوقف عند الرقم ‪. 3‬‬ ‫•‬
‫إذا كان الرقم اصغر من ‪ 10‬قم بطباعة صفر قبله ‪.‬‬ ‫•‬
‫;‪let start = 10‬‬ ‫;‪let end = 0; let stop = 3‬‬
‫‪// Output 10‬‬ ‫‪09‬‬ ‫‪08‬‬ ‫‪07‬‬ ‫‪06‬‬ ‫‪05‬‬ ‫‪04‬‬ ‫‪03‬‬
‫{ )‪for (let i = start ; i >= stop ; i--‬‬
‫{ )‪if (i < start‬‬
‫)`}‪console.log(`0${i‬‬
‫{ ‪} else‬‬
‫}‬
‫}‬
‫يجب طباعة األرقام كما ن يف المثال ‪.‬‬ ‫•‬
‫;‪let start = 1‬‬ ‫;‪let end = 6‬‬ ‫;‪let breaker = 2‬‬
‫‪// Output‬‬ ‫‪1‬‬ ‫‪-- 2‬‬ ‫‪-- 4‬‬ ‫‪2‬‬ ‫‪-- 2‬‬ ‫‪-- 4‬‬ ‫‪3‬‬ ‫‪-- 2‬‬ ‫‪-- 4‬‬ ‫‪4‬‬ ‫‪-- 2‬‬
‫{ )‪for (let i = start; i <= end; i++‬‬

‫{ )‪for (let j = breaker; j < end; j += breaker‬‬
‫)`}‪console.log(`-- ${j‬‬
‫}‬
‫}‬
‫يجب طباعة األرقام كما ن يف المثال ‪.‬‬ ‫•‬
‫سء آخر ‪.‬‬

‫قم بكتابة ال ‪ Code‬الخاص بك داخل ال ‪ Loop‬فقط وال تقم بالتعديل عىل أي ي‬ ‫•‬
‫;‪let index = 10‬‬ ‫;‪let jump = 2‬‬ ‫;‪let end = 0‬‬
‫‪// Output‬‬ ‫‪10‬‬ ‫‪8‬‬ ‫‪6‬‬ ‫‪4‬‬
‫{ );;( ‪for‬‬
‫)‪console.log(index‬‬
‫‪index -= jump‬‬
‫{ )‪if (index === jump‬‬
‫‪break‬‬
‫}‬
‫}‬
‫ممنوع إستخدام األرقام نهائيا وال الحروف ويمكنك إستخدام قيم المتغتات مع ما تعلمته لتنفيذ المطلوب‬ ‫•‬
‫يجب طباعة األسماء كما ن يف المثال مع وضع رقم قبل كل قيمة بطريقة ديناميكية ‪.‬‬ ‫•‬
‫الن تبدأ بحرف ‪. A‬‬ ‫ر‬

‫قم بإسثتناء األسماء ي‬ ‫•‬
‫‪let friends = ["Ahmed", "Sayed", "Eman", "Mahmoud", "Ameer", "Osama",‬‬

‫;]"‪"Sameh‬‬
‫;"‪let letter = "a‬‬
‫;][ = ‪let empty‬‬
‫‪//‬‬ ‫‪Output‬‬
‫‪//‬‬ ‫"‪"1 => Sayed‬‬
‫‪//‬‬ ‫"‪"2 => Eman‬‬
‫‪//‬‬ ‫"‪"3 => Mahmoud‬‬
‫‪//‬‬ ‫"‪"4 => Osama‬‬
‫‪//‬‬ ‫"‪"5 => Sameh‬‬
‫{ )‪for(let i = 0; i < friends.length; i++‬‬

‫{ ))(‪if(friends[i][0] != letter.toUpperCase‬‬
‫;)]‪empty.push(friends[i‬‬
‫}‬
‫}‬
‫{ )‪for(let j = 0; j < empty.length; j++‬‬

‫)`"}]‪console.log(`"${j + 1} => ${empty[j‬‬
‫}‬
‫ممنوع إستخدام األرقام أو الحروف نهائيا ويمكنك إستخدام قيم المتغتات مع ما تعلمته لتنفيذ المطلوب‪.‬‬ ‫•‬
‫المطلوب بإستخدام ال ‪ Loop‬تحويل الحروف الكبت لصغتة والعكس‪ .‬شاهد المثال ‪.‬‬ ‫•‬
‫;‪let start = 0‬‬

let swappedName = "elZerO";
let changeChar = [];
// Output
// "ELzERo"
for(let i = start; i < swappedName.length; i++) {

if(swappedName[i] == swappedName[i].toLowerCase()) {
changeChar.push(swappedName[i].toUpperCase());
} else {
changeChar.push(swappedName[i].toLowerCase());
}
}
console.log(changeChar.join(""))
‫ن‬
. ‫إثني للنهاية‬ ‫المطلوب طباعة األرقام فقط من أول الرقم‬ •
. 1 ‫ يتجاهل الرقم‬Loop ‫فكر قليال بالمنطق كيف ستجعل ال‬ •
. ‫ لعمل المطلوب‬Loop For ‫يجب إستخدام ال‬ •
let start = 0;
let mix = [1, 2, 3, "A", "B", "C", 4];
// Output
// 2
// 3
// 4
for(let i = start; i < mix.length; i++) {

if(typeof mix[i] == "string" || mix[i] == 1) {
continue;
}
console.log(mix[i])
}
[54] Loop - While

Loop
• While .
let products = ["Keypboard", "Mouse", "Pad", "Monitor", "iphone"];

let index = 0;
while (index < 10) {

console.log(index);
index +=1; // index++
if (index === 3) {
break;
}
}
. ‫ بعدا بوقف الكود‬index = 3 ‫يىل ال‬
‫الش بيطبع ي‬
‫ي‬ ‫ هون أول‬، for ‫ بتشبه كتت ال‬While
let index = 0;
while (index < products.length) {

console.log(products[index]);
}
[55] Loop - Do While

Loop
• Do / while

let index = 0;
while (false) {
console.log(products[index]);
}
. ‫ النو من األول عبقلو مانو محقق الشط‬، ‫س‬
‫مارح يطبع ي‬
let i = 0;
do {
console.log(i);
i++
} while(false);
console.log(i);
. 0 1 ‫ هون النتيجة‬، ‫ بتخليك تتطبع باألول بعدا بتطلع عىل الشط اذا تحقق وال أل‬do
[56] Loop - Challenge

/*
Loop Challenge
*/
let myAdmins = ["Ahmed", "Osama", "Sayed", "Stop", "Samera"];

let myEmployees = ["Amgad", "Samah", "Ameer", "Omar", "Othman",
"Amany", "Samia", "Anwar"];
let adminsArray = [];
document.write(`<div>We Have X Admins</div>`);
for(let i = 0; i < myAdmins.length; i++) {

if(myAdmins[i] == "Stop") {
break;
}
adminsArray.push(myAdmins[i])
}
document.write(`<div>We Have ${adminsArray.length} Admins</div>`);
document.write(`<hr>`);
for(let i = 0; i < adminsArray.length; i++) {

document.write(`<div>`)
document.write(`The Admin For Team ${i + 1} Is ${adminsArray[i]}`)
document.write(`<h3>Team Members</h3>`)
let k = 0;
for(let j = 0; j < myEmployees.length; j++) {
if(myEmployees[j][0] == myAdmins[i][0]) {
k++
document.write(`<p> - ${k} ${myEmployees[j]}</p>`)
}
}
document.write(`</div>`)
document.write(`<hr>`)
}
‫هون ضىل عندي مشكلة ر‬
. ‫التقيم قبل كل أسم‬ ‫ي‬
[54] to [56]
Here : ‫رابط التكليفات عىل الموقع‬
‫ر‬
. A ‫الن تبدأ بحرف‬
‫يجب عدم طباعة األرقام وال االسماء ي‬ •
. ‫ لعمل المطلوب‬Loop While ‫يجب إستخدام ال‬ •
let friends = ["Ahmed", "Sayed", "Ali", 1, 2, "Mahmoud", "Amany"];

let index = 0;
let counter = 0;
let emptyArray = []
// Output
// "1 => Sayed"
// "2 => Mahmoud"
for(let i = index; i < friends.length; i++) {

if(friends[i][counter] == "A" || typeof friends[i] == "number") {
continue;
}
emptyArray.push(friends[i])
}
for(let i = index; i < emptyArray.length; i++) {

console.log(`${i + 1} => ${emptyArray[i]}`);
}
[57] Function Intro And Basic Usage

Function :
• What Is Function ?
• User-Defined Vs Built In .
• Syntax + Basic Usage.
• Example From Real Life .
• Paramerter + Argument .
• Practical Example .
function sayHello(userName) {
console.log(`Hello ${userName}`);
}
sayHello("Osama");
sayHello("Ahmed");
sayHello("Mohammed");
‫ أسمو‬username ، ‫ وظيفتو اذا بدي أعمل شغلة وكررا عدة مرات بعمل تابع مشان أخترص الشغل‬Function
. Argument ‫" يسم‬Osama", Paramerter
console.log(typeof console.log);
. Function ‫النتيجة‬
[58] Function Advanced Examples

Function advanced examples

function sayHello(userName, age) {
if (age < 20) {
console.log(Àpp is not good for ${userName} is age ${age}`)
} else {
console.log(`Hello ${userName} your age is ${age}`);
}
}
sayHello("Osama", 30);
sayHello("Mohammed", 10);
sayHello("Ahmed", 40);
.undefined ‫يحطىل‬ ‫ن‬ ‫نف حال وضع ن‬
‫ي‬ ‫ رح‬Argument ‫ يف حال ماحطيت ال‬، Parameter ‫تني‬ ‫ي‬
function generateYears(start, end, exclude) {
for (let i = start; i <= end; i++) {
if (i === exclude) {
continue;
}
console.log(i)
}
}
generateYears(1998, 2021, 2020);
‫ن‬
‫ النو يف‬end ‫ حطيتلو اصغر او يساوي ال‬، )‫يىل انا محدد (بداية – نهاية – غت مطلوبة‬
‫يحطىل السنوات ي‬
‫ي‬ ‫هون بدي تابع‬
. ‫حال حطيتلو اصغر بس مارح يدخل السنة األختة‬
[59] Function Return And Use Cases

Function
• Return .
• Automatic Semicolon Insertion [No Line Terminator Allowed] .
• Interrupting .
function sayHello(userName) {
return `hello ${userName}`
}
console.log(sayHello("Osama"));
let result = sayHello("Ali");
console.log(result)
return ‫ ومابصت حط ال‬، ‫س بعدها مابيشتغل‬
‫ أي ي‬، ‫س بعدا‬
‫ ومابصت حط ي‬، ‫ متل كأنو بيحفظا لبعدين‬return
‫ن‬
. ‫مرتي‬ ‫ هون بيطبع‬، ‫ حرصا الزم اكتب بهل الطريقة مشان الطباعة‬، ‫والتطبيق بسطرين‬
function calc(num1, num2) {
return num1 + num2;
}
let result = calc(10, 20);
console.log(result)
‫ن‬
. ‫رقمي‬ ‫هون جمع‬
function generate(start, end) {
for (let i = start; i <= end; i++) {
console.log(i)
if (i === 15) {
return Ìnteruptting`;
}
}
}
generate(10, 20);
. ‫ ويوقف‬15 ‫النتيجة رح يوصل لل‬
[60] Function Default Parameters

Fuction
• Default Function Parameters .
• Function Parameters Default [Undefined].
• Old Strategies [Condition + Logical Or] .
• ES6 Method .
ً
‫ هناك عدة طرق‬undefined ‫ بدال من من‬text ‫ مشان طالع‬، undefined ‫ه‬
‫ ي‬parameters ‫ لل‬default value ‫ال‬
. ‫قديمة ووحدة حديثة‬
function sayHello(userName, age ="Unknown") { //‫طريقة حديثة‬
// if (age === undefined) {
// age = "Unknown"; // ‫طريقة قديمة‬
// }
// age = age || "UnKnown"; // ‫طريقة قديمة‬
return `Hello ${userName} your age is ${age}`
}
console.log(sayHello("Mohammed"))
. Hello Mohammed your age is Unknown ‫النتيجة‬
[61] Function Rest Parameters

Function
• Rest Parameters .
• Only One Allowed .
• Must Be Last Element .
. Array ‫ طبعا بكون نوعا‬، (...numbers) ‫ بحط قبلو ثالث نقط‬Rest Parameters
function calc(...numbers) {
console.log(Array.isArray(numbers));
let result = 0;
for (let i = 0; i < numbers.length; i++) {
result += numbers[i]; // result = result + numbers[i]
}
return `Final Result is ${result}`
}
console.log(calc(10, 20, 40, 50, 20, 50))
‫ن‬
. 190 ‫ النتيجة‬، ‫بفيدن متل هل الحالة عندي عدد كبت من األرقام الزم أجمعن‬
‫ي‬
[62] Function Ultimate Practice

Function advanced practice :

• Parameters .
• Default .
• Rest .
• Loop .
• Condition .
function showInfo(usn = "un", ag = "Un", Sa = 0, sh = "Yes", ...sk) {

document.write(`<div>`)
document.write(`<h2>Welcome ${usn}</h2>`)
document.write(`<p>Age: ${ag}</p>`)
document.write(`<p>Salary: $${Sa}<p>`)
if (sh === "Yes") {
if (sk.length > 0) {
document.write(`<p>Skills: ${sk.join(" | ")}</p>`)
for (let i = 0; i < sk.length; i++) {
document.write(`<p>My Skill is ${sk[i]}</p>`)
}
} else {
document.write(`<p>Skills: No Skills</p>`)
}
} else {
document.write(`<p>Skills is Hidden</p>`)
}
document.write(`</div>`)
}
showInfo("Mohammed", 23, 20, "Yes", "Html", "Css", "JS")
.‫الش السابق‬
‫ي‬ ‫مثال متقدم للتدرب عىل‬
[63] Random Arguments Function Challenge

function showDetails(a, b, c) {
let emptyArray = [];
emptyArray.push(a,b,c)
for(let i = 0; i < emptyArray.length; i++) {
typeof emptyArray[i] === "string"
? nam = emptyArray[i]
: typeof emptyArray[i] === "number"
? num = emptyArray[i]
: bool = emptyArray[i]
}
bool === true ? bool = "Available" : bool = "Not Available";
console.log(`Hello ${nam}, Your Age Is ${num}, You Are ${bool} For

Hire`);
}
showDetails("Osama", 38, true);

// "Hello Osama, Your Age Is 38, You Are Available For Hire"
showDetails(38, "Osama", true);
showDetails(true, 38, "Osama");
‫"‪// "Hello Osama, Your Age Is 38, You Are Available For Hire‬‬
‫;)‪showDetails(false, "Osama", 38‬‬
‫"‪// "Hello Osama, Your Age Is 38, You Are Not Available For Hire‬‬
‫]‪[57] to [63‬‬
‫قم بإنشاء ‪ Function‬تظهر رسالة ترحيب لكل شخص بأي إسم تريده ‪.‬‬ ‫•‬
‫ن‬
‫إثني ‪ Parameters‬وهما إسم الشخص والنوع سواء ذكر أو انن ‪.‬‬ ‫ال ‪ Function‬تقبل‬ ‫•‬
‫قم بطباعة رسالة ترحيبية للشخص فيها إسمه وقبل اإلسم ‪ Mr‬أو ‪ Miss‬بناء عىل نوع الشخص سواء ذكر أو‬ ‫•‬
‫انن ‪.‬‬
‫لو لم يكتب الشخص نوعه ويفضل عدم ذكره ال تطبع ‪ Mr‬وال ‪ Miss‬وإطبع الرسالة ر‬
‫التحيبية فقط ‪.‬‬ ‫•‬
‫{ )‪function sayHello(theName, theGender‬‬

‫"‪theGender === "Male‬‬
‫)`}‪? console.log(`Hello Mr ${theName‬‬
‫"‪: theGender === "Female‬‬
‫)`}‪? console.log(`Hello Miss ${theName‬‬
‫)`}‪: console.log(`Hello ${theName‬‬
‫}‬
‫‪// Needed Output‬‬

‫"‪sayHello("Osama", "Male"); // "Hello Mr Osama‬‬
‫"‪sayHello("Eman", "Female"); // "Hello Miss Eman‬‬
‫"‪sayHello("Sameh"); // "Hello Sameh‬‬
‫قم بإنشاء ‪ Function‬تقوم بعمل عمليات حسابية مختلفة ‪.‬‬ ‫•‬
‫ن‬
‫والثان ونوع العملية الحسابية ‪.‬‬
‫ي‬ ‫ال ‪ Function‬تقبل ثالثة ‪ Parameters‬هم الرقم األول‬ ‫•‬
‫وه تحتوي عىل ‪ 3‬عمليات فقط | ‪add‬‬ ‫ن‬ ‫ر‬

‫الن تكتبها عىل الرقمي ي‬
‫ال ‪ Function‬تقوم بعمل العملية الحسابية ي‬ ‫•‬
‫) ‪. )subtract | multiply‬‬
‫ن‬
‫الرقمي ‪.‬‬ ‫ن‬
‫يف حالة لم يتم كتابة نوع العملية الحسابية قم بجمع‬ ‫•‬
‫ن‬ ‫ن‬ ‫ن‬
‫الثان غت‬
‫ي‬ ‫يف حالة تم كتابة رقم واحد فقط داخل ال ‪ Function‬قم بإظهار رسالة يف ال ‪ Console‬تفيد بأن الرقم‬ ‫•‬
‫موجود ‪.‬‬
function calculate(firstNum, secondNum, operation) {
if(operation === "subtract") {
console.log(firstNum - secondNum)
} else if (operation === "multiply") {
console.log(firstNum * secondNum)
} else if ((operation === "add" || operation === undefined) &&
secondNum !== undefined) {
console.log(firstNum + secondNum)
} else {
console.log('Second Number Not Found')
}
}
// Needed Output
calculate(20); // Second Number Not Found
calculate(20, 30); // 50
calculate(20, 30, 'add'); // 50
calculate(20, 30, 'subtract'); // -10
calculate(20, 30, 'multiply'); // 600
. ‫ تقوم بحساب عمرك بجميع وحدات الوقت‬Function ‫قم بإنشاء‬ •
‫ن‬
. ‫بالسني‬ ‫ واحد فقط هو عمرك‬Parameter ‫ تقبل‬Function ‫ال‬ •
‫ن‬
. ‫والثوان‬
‫ي‬ ‫المطلوب طباعة عمرك بالشهور واألسابيع واأليام والساعات والدقائق‬ •
‫ن‬ ‫ن‬
. Console ‫المطلوب طباعة كل وحدة من وحدات الوقت يف سطر منفصل يف ال‬ •
‫ن‬
‫وف حالة غت ذلك إطبع رسالة تفيد أن العمر خارج النطاق‬ ‫ ي‬100 ‫ وأقل من‬10 ‫أكت من‬ ‫يجب التأكد من أن العمر ر‬ •
function ageInTime(theAge) {
if(theAge > 10 && theAge < 100) {
console.log(`Months: ${theAge * 12}`)
console.log(`Weeks: ${theAge * 12 * 4}`)
console.log(`Days: ${theAge * 12 * 4 * 7}`)
console.log(`Hours: ${theAge * 12 * 4 * 7 * 24}`)
console.log(`Minutes: ${theAge * 12 * 4 * 7 * 24 * 60}`)
console.log(`Seconds: ${theAge * 12 * 4 * 7 * 24 * 3600}`)
} else {
console.log("Age Out Of Range")
}
}
// Needed Output
ageInTime(110); // Age Out Of Range
ageInTime(38); // Months Example => 456 Months
:) ‫ (التحدي‬4 ‫التكليف‬
. ‫ تطبع رسالة للمستخدم فيها إسمه وسنه وهل هو متاح للعمل أم ال‬Function ‫قم بإنشاء‬ •
. a, b, c ‫ وتكون أسمائهم‬.‫ اإلسم والسن والحالة‬Parameters ‫ تقبل ثالثة‬Function ‫ال‬ •
. ‫ للحالة‬Boolean ‫ للسن و‬Number ‫ لإلسم و‬String ‫أنواع البيانات ستكون‬ •
‫ن‬
. ‫معي‬ ‫عشوان وليس لهم ترتيب‬ ‫ بشكل‬Function ‫البيانات سوف يتم إستخدامها داخل ال‬ •
‫ي‬
‫يعت عنها يجب عليك طباعة الرسالة بناء عىل نوع البيانات لتكون رسالة‬
‫البيانات غت مرتبة وليس لها إسم ر‬ •
.‫منطقية‬
. ‫ وبناء عليها تتغت الرسالة‬False ‫ أو‬True ‫حالة العمل يمكن أن تكون‬ •
function showDetails(a, b, c) {
let emptyArray = [];
emptyArray.push(a,b,c)
for(let i = 0; i < emptyArray.length; i++) {
typeof emptyArray[i] === "string"
? nam = emptyArray[i]
: typeof emptyArray[i] === "number"
? num = emptyArray[i]
: bool = emptyArray[i]
}
bool === true ? bool = "Available" : bool = "Not Available";
console.log(`Hello ${nam}, Your Age Is ${num}, You Are ${bool} For

Hire`);
}
showDetails("Osama", 38, true);

showDetails(38, "Osama", true);
showDetails(true, 38, "Osama");
showDetails(false, "Osama", 38);
// "Hello Osama, Your Age Is 38, You Are Not Available For Hire"
. HTML ‫ ن يف صفحة ال‬Select Box ‫ تقوم بإنشاء‬Function ‫قم بإنشاء‬ •
‫ن‬
. ‫والثان هو عام النهاية‬ ‫ن‬
‫ي‬ ‫ األول هو عام البداية‬Parameters ‫إثني‬ ‫ تقبل منك‬Function ‫ال‬ •
‫ كل واحد فيهم فيه العام ر‬Options ‫ يحتوي عىل‬Select Box ‫قم بإنشاء ال‬
. ‫حن النهاية‬ •
. ‫شاهد المثال رلتى المطلوب‬ •
function createSelectBox(startYear, endYear) {

document.write(`<select>`)
for (let i = startYear; i <= endYear; i++) {
document.write(`<option value = ${i}>${i}</option>`)
}
document.write(`</select>`)
}
createSelectBox(2000, 2021);
: ‫المثال‬
<select>
<option value="2000">2000</option>
</select>
. ‫الن تمررها لها ن يف بعضها‬
‫ر‬ ‫ن‬
‫ تقوم برصب جميع األعداد ي‬Function ‫قم بإنشاء‬ •
‫ر‬
. Function ‫الن ستمررها لل‬
‫ ي‬Parameters ‫غت معروف كم عدد ال‬ •
. ‫ ال تستعمله مع األرقام‬String ‫ عبارة عن‬Function ‫ ألمستخدم ن يف ال‬Argument ‫إذا كان ال‬ •
‫ قبل بدأ عملية ن‬Integer ‫ قم بتحويله ل‬Float ‫ عبارة عن‬Argument ‫إذا كان ال‬
. ‫الرصب‬ •
function multiply(...mult) {
for (let i = 0; i < mult.length; i++) {
if (typeof mult[i] === "string") {
continue
} else {
console.log(mult[i] * mult[i + 1])
}
}
}
multiply(10, 20); // 200

multiply("A", 10, 30); // 300
multiply(100.5, 10, "B"); // 1000
.‫ن يف مشكلة‬
function multiply(...numbe) {
let result = 1;
for (let i = 0; i < numbe.length; i++) {
if (typeof numbe[i] === "string") {
continue
} else {
result *= Math.floor(numbe[i])
}
}
console.log(result)
}
multiply(10, 20); // 200

multiply("A", 10, 30); // 300
multiply(100.5, 10, "B"); // 1000
. ‫ عندك‬Logical ‫ عفت الحل القديم مشان تشوف مدى تطور ال‬، ‫هادا الحل صحيح مية بالمية‬
[64] Anonymous Function And Practice

Function :
• Anonymous Function .
• Calling Named Function Vs Anonumous Function .
• Argument To Other Function .
• Task Without Name .
• SeTimeout .
console.log(calc(10, 20));
function calc(num1, num2) {
return num1 + num2;
}
. ‫ رح يقلك ن يف مشكلة‬const ‫ وال‬let ‫ وال‬var ‫ مو متل ال‬، ‫ رح تطبعا عادي‬function ‫ن يف حال حطيت الطباعة قبل ال‬
console.log(calculator(10, 20));
let calculator = function (num1, num2) {
return num1 + num2;
}
‫ مارح تكون موجودة غت‬Function ‫ هون مارح يطبع رح يطالع مشكلة ألنو ال‬، Anonymous Function ‫هادا أسمو‬
‫ن‬
. ‫ بعدين بطبع‬Function ‫يعن الزم حط ال‬
‫وقت يوصل لهل السطر ي‬
let calculator = function (num1, num2) {
return num1 + num2;
}
console.log(calculator(10, 20));
. ‫هيك بيشتغل عادي‬
let calculator = function elzero(num1, num2) {
return num1 + num2;
}
console.log(elzero(10, 20));
‫ن‬
، variable ‫ الزم أستدعيها باسم ال‬، ‫مافين أستدعيها باألسم متل هون مارح تشتغل‬ ‫ ولكن‬function ‫سم ال‬ ‫ن‬
‫ي‬ ‫فين ن ي‬ ‫أنا ي‬
. error ‫بفيدن األسم مشان أعرف وين ال‬
‫ي‬ ‫أنا‬
‫ن‬
‫ إذا عندي شغلة بدي أستخدما مرة‬، ‫ من دون أسم‬function ‫ مشان تعرف الحكمة من وضع‬، ‫يف أمثلة متقدمة لبعدين‬
. ‫وحدة‬
[65] Return Nested Function

Function
• Function Inside Function .
• Return Function .
function sayMassage(Fname, Lname) {

let message = "hello";
function concatmsg() {
message = `${message} ${Fname} ${Lname}`
}
concatmsg();
return message;
}
console.log(sayMassage("Mohammed", "Khir"))
. hello Mohammed Khir ‫المثال األول النتيجة‬
return `${message} ${Fname} ${Lname}`
}
return concatmsg();
}
‫ن‬
. ‫الثان نفس النتيجة ولكن بطريقة مختلفة‬
‫ي‬ ‫المثال‬
function getfullname() {
return `${Fname} ${Lname}`
}
return `${message} ${getfullname()}`
}
return concatmsg();
}
. ‫ نفس النتيجة‬، ‫المثال الثالث‬
[66] Arrow Function Syntax

Function
• Arrow Function .
o Regular Vs Arrow [Param + No Param] .
o Multiple Lines .
function print() {
return 10;
}
console.log(print())
let print = function () {

return 10;
};
ً ‫ن‬
. ‫ طبعا الزم شغل كل واحد لحال‬، ‫بيعطون نفس النتيجة‬
‫ي‬
let print = () => 10;
let print = _ => 10;
‫ن‬ ‫ن‬ ‫ن‬
‫الش يف حال ماكان يف‬
‫ي‬ ‫التني نفس‬ ‫ هون بالمثال‬، ‫ هاي شبه مخترصة بتساوي الكود أوضح‬Arrow Function
. parameter
let print = function (num) {
return num;
}
let print = (num) => num;
let print = num => num;
console.log(print(100))
ً ‫ بس نف حال كان عندي ر‬، ‫تالتي بيعطو نفس النتيجة‬
‫رن‬
. ‫ حرصا الزم حط أقواس‬Parameter ‫أكت من‬ ‫ي‬
let print = function (num1, num2) {
return num1 + num2;
}
let print = (num1, num2) => num1 + num2;
console.log(print(100, 50))
‫ن‬
. ‫التني بيعطو نفس النتيجة‬
[67] Scope - Global And Local

Scope
• Global And Local Scope .
‫ن‬
. ‫مافين‬ ‫ن‬ ‫ن‬
‫ي‬ Local scope ‫ اما‬، ‫فين استعمله يف كامل الملف‬
‫ ي‬Global Scope ‫يىل بال‬
‫ي‬
var a = 1;
let b = 2;
function showtext() {
console.log(`Function ${a}`)
console.log(`Function ${b}`)
var a = 10; /// ‫ بيعطي‬undefined
let b = 20; /// ‫ بيعطي رسالة‬Error
}
console.log(`From Global ${a}`)
console.log(`From Global ${b}`)
showtext()
ً
‫طبعا هون الفرق ن‬ ‫ن‬ ‫ن‬
‫بي‬ ، )Global( ‫ بدور بغيت مكان‬، ‫) يف حال مالقاه‬Local(‫يف البداية التابع بيبحث عن المتغيت داخله‬
‫ للمتغتات وحطن قبل ال‬declar ‫ النو الزم اعمل‬، error ‫بيعط رسالة‬
‫ي‬ let ‫ و ال‬undefined ‫بيعط‬
‫ي‬ var ‫ال‬
. console
var a = 1;
let b = 2;
var a = 10;
let b = 20;
}
showtext()
‫خاصي فيها ن‬
‫ن‬ ً
‫يعن الطباعة خارج‬
‫ي‬ ‫هدول‬ function ‫ال‬ ‫داخل‬ ‫يىل‬
‫ي‬ ‫وطبعا‬ ، 20 ‫ و‬10 ‫ رح يطبع‬function ‫يىل داخل ال‬
‫ي‬
. ‫ مارح يطبع هدول‬function
// var a = 1;
// let b = 2;
var a = 10;
let b = 20;
}
showtext()
.‫س‬
‫ مارح يطبع ي‬, ‫هيك رح يصت عندي مشكلة‬
[68] Scope - Block

Scope :
• Block Scope [If, Switch, For] .
var x = 10;
let y = 20;
if (true) {
var x = 50; // ‫بيعمل تغير في المتغيير األساسي‬
let y = 100; // ‫مابيعمل تغير على المتغيير األساسي‬
console.log(x, y)
}
console.log(x, y)
‫األساس ‪ ،‬ولكن ال ‪ let‬مابغت فقط داخل‬
‫ي‬ ‫النتيجة األول ‪ ، 50 100‬النتيجة الثانية ‪ 50 20‬هون ال ‪ var‬بغت المتغيت‬
‫ال ‪ function‬أو الحلقة ‪. .......‬‬
‫)‪[69] Scope - Lexical (Static‬‬

‫‪Scope :‬‬
‫‪• Lexical Scope .‬‬
‫ن‬
‫استن لنوصلو) ‪Search :‬‬ ‫(إذا بدك بحاث عن هدول أو إذا بدك‬
‫‪• Execution Context .‬‬
‫‪• Lexical Environment .‬‬
‫{ )(‪function parent‬‬
‫;‪let a = 10‬‬
‫{ )(‪function child‬‬
‫;‪let a = 20‬‬
‫;)‪console.log(a‬‬
‫}‬
‫;)(‪child‬‬
‫}‬
‫;)(‪parent‬‬
‫يىل داخلو بعدين بيبحث برا ‪ ،‬ولكن ال ‪ function‬األساسية مافيها تاخد قيمة‬
‫الش بيطلع عىل ي‬
‫ي‬ ‫يطبعىل ‪ 20‬النو اول‬
‫ي‬ ‫رح‬
‫يىل داخل ال ‪ function‬الفرعية ‪.‬‬
‫المتغيت ي‬
‫{ )(‪function child‬‬
‫;‪let a = 20‬‬
‫}‬
‫;)(‪child‬‬
‫}‬
‫;)(‪parent‬‬
‫يطلعىل مشكلة ‪.‬‬
‫ي‬ ‫مارح يطبع ‪ ،‬رح‬
let a = 10;
function child() {
let a = 20;
function grand() {
console.log(a);
}
grand();
}
child();
}
parent();
. ‫ بيطبع اول واحد بشوفو قدامو‬، 20 ‫يطبعىل‬
‫ي‬ ‫رح‬
function parent() {
let a = 10;
console.log(b);
function child() {
let a = 20;
let b = 10;
function grand() {
console.log(a);
}
grand();
}
child();
}
parent();
. ‫ الفرعية‬function ‫ه بال‬
‫ النو ي‬b ‫يطلعىل مشكلة مشان ال‬
‫ي‬ ‫رح‬
[70] Arrow Function Challenge

: ‫التحدي األول‬
let names = function (...Names) {
return `String [${Names.join("], [")}] => Done !`;
}
console.log(names("Osama", "Mohammed", "Ali", "Ibrahim"));
// String [Osama], [Mohammed], [Ali], [Ibrahim] => Done !
‫!‪String [Osama], [Mohammed], [Ali], [Ibrahim] => Done‬‬ ‫النتيجة‬
‫;`! ‪let names =(...Names) => `String [${Names.join("], [")}] => Done‬‬
‫;))"‪console.log(names("Osama", "Mohammed", "Ali", "Ibrahim‬‬
‫‪// Arrow Function‬‬
‫نفس فوق بس هون حولتا ل ‪. Arrow Function‬‬
‫ن‬
‫الثان ‪:‬‬
‫ي‬ ‫التحدي‬
‫;]‪let myNumbers = [20, 50, 10, 60‬‬
‫;]‪let calc = (one, two, ...nums) => one + two + nums[0‬‬
‫‪console.log(calc(10, 50, 20)); // 80‬‬
‫ماقتنعت بالحل ‪ ،‬ألنو مانو واضح شو المطلوب بأي طريقة ‪.‬‬
‫]‪[64] to [70‬‬
‫كالتال ‪zName, zAge,‬‬
‫ي‬ ‫• قم بإنشاء ‪ Function‬بإسم ‪ getDetails‬تقبل منك ثالثة ‪ Parameters‬وهم‬
‫‪. zCountry‬‬
‫• ال ‪ Function‬ستحتوي عىل أربعة ‪ Functions‬فرعية باألسماء التالية ‪namePattern,‬‬

‫‪. ageWithMessage, countryTwoLetters, fullDetails‬‬
‫ن‬
‫مقطعي هكذا ‪ Osama Mohamed‬وترجع اإلسم‬ ‫• ‪ namePattern‬تقبل منك اإلسم مكون من‬
‫هكذا ‪ Osama M.‬شاهد المثال لتفهم أكت ‪.‬‬
‫• ‪ ageWithMessage‬تقبل منك رسالة فيها العمر تستخرج منه فقط العمر وتقوم بتغيت الرسالة شاهد المثال‬
‫لتفهم ‪.‬‬
‫حرفي من إسم البلد بحروف كبتة‬‫ن‬ ‫‪ countryTwoLetters‬تقبل منك إسم البلد وترجع لك رسالة معها أول‬ ‫•‬
‫شاهد المثال لتفهم ‪.‬‬
‫‪ fullDetails‬تقوم بدمج جميع ال ‪ Functions‬السابقة لتخرج لك الرسالة كاملة كما ن يف المثال ‪.‬‬ ‫•‬
‫إسم الشخص الثا ن ين أول حرف منه يمكن أن يكون ‪ Capital‬أو ‪. Small‬‬ ‫•‬
‫رسالة العمر يمكن أن تتغت ولكن الرقم دائما سيكون ن يف المقدمة ولن يتغت مكانه ‪.‬‬ ‫•‬
‫• التعليقات ستوضح لك المطلوب بالتفصيل ‪.‬‬
‫{ )‪function getDetails(zName, zAge, zCountry‬‬
function namePattern() {
// let firstName = zName.split(" ")[0];
// let letter = zName.split(" ")[1][0];
let firstName = zName.slice(0,zName.indexOf(" "));
let letter = zName.slice(zName.indexOf(" ") + 1, zName.indexOf(" ")
+ 2)
return `Hello ${firstName} ${letter.toUpperCase()}.,`;
// Osama Mohamed => Osama M.
// Ahmed ali => Ahmed A.
}
function ageWithMessage() {
let age = zAge.split(" ");
for(let i = 0; i < age.length; i++) {
!isNaN(parseInt(age[i])) ? num = age[i] : "";
}
return `Your Age Is ${num}`
// 38 Is My Age => Your Age Is 38
// 32 Is The Age => Your Age Is 32
}
function countryTwoLetters() {
return `You Live In ${zCountry.slice(0,2).toUpperCase()}`
// Egypt => You Live In EG
// Syria => You Live In SY
}
function fullDetails() {
return `${namePattern()} ${ageWithMessage()}
${countryTwoLetters()}`
}
return fullDetails(); // Do Not Edit This
}
console.log(getDetails("Osama Mohamed", "38 Is My Age", "Egypt"));

// Hello Osama M., Your Age Is 38, You Live In EG
console.log(getDetails("Ahmed ali", "32 Is The Age", "Syria"));

// Hello Ahmed A., Your Age Is 32, You Live In SY
02 ‫التكليف‬
. Arrow Function Syntax ‫ التالية ل‬Functions ‫ من ال‬Function ‫قم بتحويل كل‬
let itsMe = () => "Iam A Normal Function"
console.log(itsMe()); // Iam A Normal Function
let urlCreate = (protocol, web, tld) =>
`${protocol}://www.${web}.${tld}`;
console.log(urlCreate("https", "elzero", "org"));

// https://www.elzero.org
‫ تحدي‬03 ‫التكليف‬
. Arrow Function Syntax ‫ التالية ل‬Function ‫قم بتحويل ال‬
. Currying Function Technique ‫إقرأ عن‬
function checker(zName) {
return function (status) {
return function (salary) {
return status === "Available" ? `${zName}, My Salary Is ${salary}` :

Ìam Not Avaialble`;
};
};
console.log(checker("Osama")("Available")(4000)); // My Salary Is 4000
console.log(checker("Ahmed")("Not Available")()); // Iam Not Avaialble
. Currying Function Technique ‫ بس مشان تفهم وتعرف كيف مبدأ‬، ‫هيك الشكل قبل ماحل التكليف‬
function checker(zName) {
return (status) => (salary) => status === "Available"
? `${zName}, My Salary Is ${salary}` : Ìam Not Avaialble`;
}
console.log(checker("Osama")("Available")(4000));
// Osama, My Salary Is 4000
console.log(checker("Ahmed")("Not Available")());
// Iam Not Avaialble
04 ‫التكليف‬
. Parameters‫ تقبل منك عدد غت معروف من ال‬specialMix ‫ بإسم‬Function ‫قم بإنشاء‬ •
. ‫ تحتوي عىل أرقام ن يف بدايتها‬Strings ‫ أو‬Strings ‫ يمكن أن تقبل أرقام أو‬Function ‫ال‬ •
. ‫ عبارة عن أرقام قم بجمعهم‬Arguments ‫إذا كانت جميع ال‬ •
‫ن‬
‫ ال‬String ‫تستثن أي‬ ‫ تحتوي عىل أرقام قم بإستخراج االرقام منهم وقم بجمعهم وطبعا‬Strings ‫إذا كانت‬ •
‫ي‬
. ‫يحتوي عىل أرقام‬
. All Is Strings ‫ تقوم بطباعة رسالة‬String ‫ عبارة عن‬Arguments ‫إذا كانت جميع ال‬ •
. Test Cases ‫شاهد المثال رلتى ال‬ •
function specialMix(...data) {
let result = 0;
for (let i = 0; i < data.length; i++) {
if (typeof data[i] === "number") {
result += data[i]
} else if (!isNaN(parseInt(data[i].slice(0,2)))) {
result += +data[i].slice(0,2)
}
}
if (result === 0) {
result = "All Is Strings"
}
return `${result}`
}
console.log(specialMix(10, 20, 30)); // 60

console.log(specialMix("10Test", "Testing", "20Cool")); // 30
console.log(specialMix("Testing", "10Testing", "40Cool")); // 50
console.log(specialMix("Test", "Cool", "Test")); // All Is Strings
‫ ولكن أخر نتيجة ماحليتا بطريقة ر‬، ‫الحل صحيح‬
. ‫أحتافية‬
[71] Higher Order Functions - Map

Higher Order Function :

• Is A Function That Accepts Function As Parameters And/Or Returns A Function .
Map :
• Method Creates A New Array .
• Populated With The Results Of Calling A Provided Function On Every Element .
• In The Calling Array .
Syntax map(callBackFunction(Element, Index, Array) { }, thisArg) :

• Element => The Current Element Being Processed In The Array .
• Index => The Index Of The Current Element Being Processed In The Array .
• Array => The Current Array .
Notes :
• Map Return A New Array .
Examples :
• Anonymous Function .
• Named Function .
let myNums = [1, 2, 3, 4, 5, 6];

let newArray = [];
for (let i = 0; i < myNums.length; i++) {
newArray.push(myNums[i] + myNums[i]);
}
console.log(newArray)
. ‫ النتيجة بضاعف األرقام‬، ‫ حطيت مصفوفة فاضية‬، ‫هون عندي مصفوفة بدي أجمع كل رقم مع حالو‬
let myNums = [1, 2, 3, 4, 5, 6];
let addSelf = myNums.map(function(element, index, arr) {

console.log(`Current Element ${element}`);
console.log(`Current Index ${index}`);
console.log(Àrray ${arr}`);
console.log(`This ${this}`)
}, 20)
‫بتعط وين ترتيب‬
‫ي‬ ‫ مانها إجبارية‬index ‫ ال‬، ‫بتعط العنرص‬
‫ي‬ ‫ إجبارية‬element ‫ ال‬، ‫ بتطالع ثالث شغالت‬map ‫ال‬
‫ن‬ ً
. ‫كيق‬
‫ طبعا هدول بسميهن عىل ي‬، array ‫بتعط كامل ال‬
‫ي‬ arr ‫ ال‬، ‫العنرص‬
let myNums = [1, 2, 3, 4, 5, 6];
let addSelf = myNums.map(function(ele) {
return ele + ele
})
console.log(addSelf)
. ‫ مشان ضاعف األرقام بشعة كبتة‬map ‫هاي بطريقة ال‬
let myNums = [1, 2, 3, 4, 5, 6];
let addSelf = myNums.map((ele) => ele + ele )
console.log(addSelf)
. Arrow Function ‫نفس فوق بس بطريقة ال‬
let myNums = [1, 2, 3, 4, 5, 6];
function addition(ele) {
return ele + ele;
}
let add = myNums.map(addition)
console.log(add)
. ‫طريقة آخرى لجمع كل رقم مع نفسه‬
[72] Higher Order Functions - Map Practice

Map
• Swap cases .
• Inverted numbers .
• Ignore numbers value .
let swappingCases = "elZERo";

let arr = [];
for (let i = 0; i < swappingCases.length; i++) {
if (swappingCases[i] === swappingCases[i].toLowerCase()) {
arr.push(swappingCases[i].toUpperCase())
} else {
arr.push(swappingCases[i].toLowerCase())
}
}
console.log(arr.join(""))
. ‫ هاي آحدى الطرق‬, ‫تمرين بدي حول األحرف الكبتة لصغتة والصغتة لكبتة‬
let swappingCases = "elZERo";
let sw = swappingCases.split("").map(function (ele) {
return ele === ele.toUpperCase() ?ele.toLowerCase():ele.toUpperCase()
}).join("")
console.log(sw)
. ‫ المخترصة‬if ‫ وال‬map ‫هاي نفس فوق بس بطريقة ال‬
let invertedNumbers = [1, -10, -20, 15, 100, -30];
let inver = invertedNumbers.map(function (ele) {
return -ele
})
console.log(inver)
‫ن‬
‫ يف طريقة طويلة أنو إذا أصغر من الصفر‬، ‫ويىل موجب يصت سالب‬
‫يىل رقمو سالب ًيصت موجب ي‬
‫تمرين بدي ساوي ي‬
. ‫معناتا سالب وبالعكس موجب طبعا طريقة ضعيفة وغبية شوي‬
let ignoreNumbers = "Elz123er5o";
let ignor = ignoreNumbers.split("").map(function (ele) {
return isNaN(parseInt(ele)) ? ele : "" ;
}).join("")
console.log(ignor)
. ‫تمرين مشان أتجاهل األرقام وعيف األحرف‬
let ignoreNumbers = "Elz123er5o";
let ignor = ignoreNumbers
.split("")
.map((ele) => (isNaN(parseInt(ele)) ? ele : "" ))
.join("")
console.log(ignor);
. Arrow Function ‫نفس فوق بس هاي بطريقة ال‬
[73] Higher Order Functions - Filter

Filter
• Method Creates A New Array .
• With All Elements That Pass The Test Implemented By The Provided Function .
let numbers = [10, 20, 21, 14, 16, 29]
let addMap = numbers.map(function (ele) {

return ele + ele
} )
console.log(addMap)
let addFilter = numbers.filter(function (ele) {

return ele + ele
} )
console.log(addFilter)
‫ وظيفتا‬filter ‫ رح تحطا نفسا ألنو ال‬filter ‫ أما ال‬، ‫النتيجة أول وحدة رح تجمع كل رقم وتحط المصفوفة بعد الجمع‬
. ‫تقال إذا شغلة معينة محققة للشط عيفا إذا أل كبا‬
let friends = ["Ahmed", "Sameh", "Sayed", "Asmaa", "Amgad", "Israa"]
let filterFriends = friends.filter(function (ele) {
return ele.startsWith("A")
})
console.log(filterFriends)
. ‫يمش عليه‬ ‫ن‬
‫معي‬ ‫ حطلو رسط‬filter ‫ هاي وظيفة ال‬، ]"Ahmed", "Asmaa", "Amgad"[ ‫النتيجة‬
‫ي‬
let numbers = [11, 20, 2, 5, 17, 10];
let evenNumbers = numbers.filter(function (ele) {
return ele % 2 === 0
})
console.log(evenNumbers)
. ]10 ,2 ,20 [ ‫النتيجة‬
[74] Higher Order Functions - Filter Practice

codewars ‫التمجية‬
‫موقع لحل المشاكل ر‬
let sentence = "I Love Foood Code Too Playing Much";
let smallNumbers = sentence.split(" ").filter(function (ele) {
return ele.length <= 4;
}).join(" ")
console.log(smallNumbers);
‫هون بدي أحذف كل كلمة عدد أحرفها ر‬
. 4 ‫أكت من‬
let ignoreNumbers = "Elz123er4o"
let ign = ignoreNumbers.split("").filter(function (ele) {
return isNaN(parseInt(ele))
}).join("")
console.log(ign)
. filter ‫هون بدي أحذف األرقام بطريقة ال‬
let mix = "A13BS2ZX"
let mixedContent = mix.split("").filter(function (ele) {
return !isNaN(parseInt(ele))
}).map(function (ele) {
return ele * ele
}).join("")
console.log(mixedContent)
‫ مشان طالع األرقام ن‬map ‫ و ال‬filter ‫هون أستخدمت ال‬
. ‫وأرصبن بنفسن‬
[75] Higher Order Functions - Reduce

Reduce :
• Method executes a reducer function on each element of the array .
• Resulting in a single output value .
Syntax :
Reduce(callBachFunc(Accumulator, Current Val, Current Index, Source Array){},intialValue)
• Accumulator : the accumulated value previously returned in the last invocation .
• Current Val : the current element being processed in the array .
• Inedx : the index of the current element being processed in the array .
o Starts from index 0 if an initiaValue is Provided .
o Otherwise , it starts from index 1 .
• Array : the current array
let nums = [10, 20, 15, 30];

let add = nums.reduce(function (acc, current, index, arr) {
console.log(Àcc : ${acc}`)
console.log(`Current Element : ${current}`)
console.log(`Current Element Index : ${index}`)
console.log(Àrray : ${arr}`)
console.log(acc + current);
console.log(`########`)
return acc + current
})
20 ‫ه ال‬
‫ ي‬current ‫ ال‬، 10 ‫ه‬‫يىل ي‬
‫ هاي القيمة األول ي‬acc ‫ ال‬، ‫ هون وظفتا مشان أجمع عنارص المصفوفة‬reduce ‫ال‬
‫ن‬
. 75 ‫ النتيجة النهائية‬، ‫ نفس المصفوفة‬arr ‫ ال‬، 1 ‫يعن‬
‫ ي‬current ‫ الرقم تبع ال‬index ‫ ال‬،
let nums = [10, 20, 15, 30];
let add = nums.reduce(function (acc, current, index, arr) {
return acc + current
},5);
console.log(add)
.5‫ه‬
‫ ي‬acc ‫يعتت ال‬
‫ هون رح ر‬80 ‫النتيجة‬
[76] Higher Order Functions - Reduce Practice

Reduce :
• Longest Word .
• Remove Characters + Usr Reduce .
let theBiggest = ["Bla", "Propaganda", "Other", "AAA", "Battery", "Test

", "Prpaganda_Two"];
let check = theBiggest.reduce(function (acc, current) {

return acc.length > current.length ? acc : current
})
console.log(check)
. Prpaganda_Two ‫ه‬
‫يىل ي‬
‫أكت كلمة ي‬
‫هون عبقلو بدي ر‬
let removeChars = ["E", "@", "@", "L", "Z", "@", "@", "E", "@", "R", "@
", "O"];
let remove = removeChars.filter(function (ele) {

return ele != "@"
// return !ele.startsWith("@")
}).join("")
console.log(remove)
‫رن‬
‫ التبدو‬، ‫ لكن هذه طريقة مخترصة‬join ‫جمعي مع بعض بطريقة ال‬ ‫ بعدا‬، ‫نظام‬ ‫كلش مانو حرف‬ ‫هون بدي أحذف‬
‫ي‬ ‫ي‬
. ‫محتف ن يف حال حليت بهل الطريقة‬
‫ر‬
let remove = removeChars.filter(function (ele) {

return ele !== "@"
}).reduce(function (acc, current) {
return `${acc}${current}`
})
console.log(remove)
‫هاي الطريقة أكت ر‬
. ‫أحتافية‬
[77] Higher Order Functions - ForEach And Practice
forEach :
• method executes a provided function once for each array element .
Syntax forEach(callBackFunction(Element, Index, Array) { }, thisArg) .

• Element : The current element being processed in the array .
• Index : The index of the current element being processed in the array .
• Array : The current array .
Note :
• Doesn’t Return Anything [Undefined] .
• Break Will Not Break The Loop .
. ‫ يوجد مثال بتسخدم فيه بكتة‬، ‫س جديد‬

‫هاي بتسخدم من أجل التعديل عىل العنارص من دون ماتطالع ي‬
<ul>
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
<div>Div One</div>
<div>Div Two</div>
<div>Div Three</div>
</div>
. HTML
let allLis = document.querySelectorAll("ul li");
let allDivs = document.querySelectorAll(".content div")
allLis.forEach(function (ele) {
ele.onclick = function () {
// Remove Active Class From All Elements
allLis.forEach(function (ele) {
ele.classList.remove("active");
})
// Add Active Class To Element
this.classList.add("active");
// Hide All Divs
allDivs.forEach(function (ele) {
ele.style.display = "none"
})
}
})
loop ‫ه بتشبه ال‬ ‫يىل ي‬
‫ ي‬forEach ‫ بعدا استخدمت ال‬، ‫ بمصفوفة‬div ‫ بمصفوفة وكل ال‬li ‫الش حطيت كل ال‬ ‫ي‬ ‫أول‬
، ‫مايىل‬ ‫ن‬
‫ قلتلو مجرد ما أضغط عىل أي وحدة نفذ‬li ‫ هون مشت عىل كل ال‬، ‫بتمش عىل كل العنارص وبتنفذ أمر معي‬
‫ي‬ ‫ي‬
‫خفيىل‬
‫ي‬ ‫ بعدا‬، ‫يىل ضغطت عليه‬‫ للعنرص ي‬class = "active" ‫ بعدا ضيف‬، ‫ من الكل‬class = "active" ‫الش شيل‬ ‫ي‬ ‫أول‬
. divs ‫كل ال‬
[78] Higher Order Functions - Challenge

: ‫التحدي‬
let myString = "1,2,3,EE,l,z,e,r,o,_,W,e,b,_,S,c,h,o,o,l,2,0,Z";
let solution = myString.split("").filter(function (ele) {
return isNaN(parseInt(ele)) && ele !== "," && ele !== "_"
}).reduce(function (acc, current) {
return `${acc}${current}`
})
console.log(solution)
EElzerowebschoolz ‫ النتيجة‬, ‫هون بس ماعرفت كيف أحذف أول حرف و أخر حرف‬
let myString = "1,2,3,EE,l,z,e,r,o,_,W,e,b,_,S,c,h,o,o,l,2,0,Z";
let result = myString

.split(",")
.filter((ele) => isNaN(parseInt(ele)))
.map(function(ele, ind, arr) {
arr.length = arr.length--
return ele === "_" ? " " : ele;
// return ele.replace("_", " ");
})
.reduce((acc, cur) => acc + cur)
.slice(true)
‫)‪console.log(result‬‬
‫هادا الحل الجديد صحيح مية بالمية الحمدهلل ‪ ،Elzero Web School‬عفت القديم بس مشان تشوف كيف عبيتطور‬
‫مج عندك ‪.‬‬
‫الت ر ي‬
‫التفكت ر‬
‫]‪[71] to [78‬‬
‫لديك متغت بإسم ‪ mix‬يحتوي عىل ‪. Letters And Numbers‬‬ ‫•‬
‫قم بإنشاء ‪ Array‬جديدة بواسطة ال ‪. Map‬‬ ‫•‬
‫يجب عليك إستثناء األرقام نهائيا من النتيجة ‪.‬‬ ‫•‬
‫يجب عليك عمل ‪ Concatenate‬لل ‪ Letters‬لتخرج بالنتيجة ‪.‬‬ ‫•‬
‫يجب إستعمال ال ‪ Map + Reduce‬مع ما تعلمته لتخرج بالناتج المطلوب ‪.‬‬ ‫•‬
‫ممنوع إستخدام ال ‪ Join‬أو ‪. Filter‬‬ ‫•‬
‫;]"‪let mix = [1, 2, 3, "E", 4, "l", "z", "e", "r", 5, "o‬‬
‫{ )‪let removeNumbers = mix.map(function(ele‬‬

‫"" ‪return isNaN(parseInt(ele)) ? ele :‬‬
‫)‪}).reduce((acc, cur) => acc + cur‬‬
‫‪console.log(removeNumbers) // Elzero‬‬
‫لديك متغت بإسم ‪ myString‬يحتوي عىل ‪ Letters‬منها المكرر ومنها العادي ‪.‬‬ ‫•‬
‫قم بإنشاء ‪ Array‬جديدة بواسطة ال ‪. Filter‬‬ ‫•‬
‫يجب عليك إستثناء ال ‪ Letters‬المكررة نهائيا من النتيجة ‪.‬‬ ‫•‬
‫يجب عليك عمل ‪ Concatenate‬لل ‪ Letters‬لتخرج بالنتيجة ‪.‬‬ ‫•‬
‫;"‪let myString = "EElllzzzzzzzeroo‬‬

‫][ = ‪let emp‬‬
‫‪let unRepeat = myString‬‬

.split("")
.filter((e) => emp.indexOf(e) === -1 ? emp.push(e) : "" )
console.log(emp.join("")) // Elzero
: ‫ تحدي‬3 ‫التكليف‬
. ‫ أخرى‬Array ‫ وبداخلها‬Array ‫ يحتوي عىل‬myArray ‫لديك متغت بإسم‬ •
. Reduce ‫ جديدة بواسطة ال‬Array ‫قم بإنشاء‬ •
. ‫ واحدة‬Array ‫ رلتجع ب‬Array ‫ لل‬Flatten ‫يجب عليك عمل‬ •
. ‫ لتخرج بالنتيجة‬Letters ‫ لل‬Concatenate ‫يجب عليك عمل‬ •
. ‫ نهائيا‬Array.flat() ‫ممنوع إستخدام‬ •
let myArray = ["E", "l", "z", ["e", "r"], "o"];
let flatArray = myArray.map(function(ele) {

return ele.length > 1 ? ele.reduce((acc, cur) => acc + cur) : ele
}).reduce((acc, cur) => acc + cur)
console.log(flatArray) // Elzero
. ‫ األب‬array ‫ األبن مع ال‬array ‫ هاي مشان اعمل دمج لل‬array.flat() ‫خاصية ال‬
let arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
let arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
. Letters And Numbers ‫ يحتوي عىل‬numsAndStrings ‫لديك متغت بإسم‬ •
. Filter + Map ‫ جديدة بواسطة ال‬Array ‫قم بإنشاء‬ •
. ‫ من النتيجة‬Letters ‫يجب عليك إستثناء ال‬ •
‫ن‬
. ‫بمعن الموجب يكون سالب والسالب يكون موجب‬ ‫يجب عليك عكس األرقام‬ •
. ‫ ما تريد‬Map + Filter + ‫يجب عليك إستخدام ال‬ •
let numsAndStrings = [1, 10, -10, -20, 5, "A", 3, "B", "C"];

let inverNumbers = numsAndStrings
.filter(ele => !isNaN(parseInt(ele)))
.map(ele => -ele)
console.log(inverNumbers) // [-1, -10, 10, 20, -5, -3]
. ‫ يحتوي عىل مجموعة أرقام زوجية وفردية‬nums ‫لديك متغت بإسم‬ •
. ‫ فقط‬Reduce ‫قم بإيجاد النتيجة النهائية المطلوبة بواسطة إستخدام ال‬ •
‫ن‬
. 1 ‫ لرقم‬Reduce ‫ لل‬Initial Value ‫تعيي ال‬ ‫يجب عليك‬ •
‫ن‬
‫ مع ال‬Accumulator ‫ رقم فردي قم بجمع ال‬Reduce ‫ يف ال‬Current Element ‫إذا كانت قيمة ال‬ •
. Current Element
‫زوج قم ن‬ ‫ن‬
‫ مع ال‬Accumulator ‫برصب ال‬ ‫ رقم ر ي‬Reduce ‫ يف ال‬Current Element ‫إذا كانت قيمة ال‬ •
. Current Element
let nums = [2, 12, 11, 5, 10, 1, 99];
let result = nums.reduce((a, c) =>

c % 2 === 0 ? a * c : a + c
,1)
console.log(result) // 500
[79] Object - Introduction

Object :
• Intro and What Is Object .
• Testing Window Object .
• Accessing Object .
let user = {
// Properties
theName: "Osama",
theAge: 38,
// Methods
sayHello: function() {
return `Hello`
}
};
console.log(user.theName) // Osama
console.log(user.theAge) // 38
console.log(user.sayHello()) // Hello
[80] Dot Notation vs Bracket Notation

Object :
• Dig Deeper .
• Dot Notation vs Bracket Notation .
• Dynamic Property Name .
let user = {
theName: "Osama",
"country of": "Egypt",
};
console.log(user.theName); // ‫ فيني بهل الطريقة‬Dot Notation
console.log(user["theName"]); // ‫ وهل الطريقة كمان‬Bracket Notation
console.log(user.country of); // ‫ مارح يشتغل‬Dot Notation
console.log(user."country of"); // ‫ مارح يشتغل‬Dot Notation
console.log(user["country of"]); // ‫ بس هون حصرا هيك‬Bracket Notation
. ‫أستدع العنارص‬ ‫ن‬
‫فين‬
‫ي‬ ‫كيف ي‬
let myVar = "country"
let user = {
theName: "Osama",
country: "Egypt",
};
console.log(user.country); // Egypt Dot Notation
console.log(user[myVar]); // Egypt Bracket Notation
. ‫هاي كمان حاالت آخرى‬

JAVASCRIPT ARRAY METHODS

Uploaded by

Document Information

Original Description:

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

JAVASCRIPT ARRAY METHODS

Uploaded by

Copyright:

Available Formats

Elzero Web School

Learn JAVASCRIPT In Arabic 2021 (From 41 To 80) :

// Index Start From 0 [ 0, 1, 2, 3, 4 ]

let myFriends = ["Ahmed", "Mohamed", "Sayed", "Alaa"];

Arrays Methods [Adding And Removing]

let myFriend = ["Ahmed", "Mohammed", "Ali", "Yosef"];

[43] Searching Array

Arrays Methods [Search]:

let myFriend = ["Ahmed", "Mohammed", "Ali", "Yosef"];

‫‪[44] Sorting Arrays‬‬

‫]‪Arrays Methods [Sort‬‬

‫‪[45] Slicing Array‬‬

‫‪Arrays Methods [Slicing] :‬‬

[46] Joining Arrays

Arrays Methods [Joining] :

[47] Array Challenge

let my = ["Ahmed", "Mazero", "Elham", "Osama", "Gamal", "Ameer"];

// Write Code Here

console.log(my); // ["Osama", "Elham", "Mazero", "Ahmed"];

. ‫ لتنفيذ المطلوب‬Console ‫يمكنك كتابة ما تريد خارج ال‬ •

let myFriends = ["Ahmed", "Elham", "Osama", "Gamal"];

. slice Method‫ممنوع إستخدام ال‬ •

. ‫ لتنفيذ المطلوب‬Console ‫يمكنك كتابة ما تريد خارج ال‬ •

let friends = ["Ahmed", "Eman", "Osama", "Gamal"];

// Write Your Code Here

. ‫ واحد فقط لتخرج القيمة المطلوبة‬Code ‫يجب كتابة سطر‬ •

let arrOne = ["C", "D", "X"];

// Write One Single Line Of Code

. ‫ واحد فقط لتخرج القيمة المطلوبة‬Code ‫يجب كتابة سطر‬ •

let website = "Go";

. ‫يجب عمل الحل بثالث طرق مختلفة‬ •

. ‫ إذا كانت الكلمة موجودة‬Console ‫ ن يف ال‬Found ‫قم بطباعة كلمة‬ •

let needle = "JS";

if(haystack.indexOf(needle) !== -1) {

if(haystack.lastIndexOf(needle) !== -1) {

. ‫يمنع كتابة اي أرقام نهائيا ن يف اي مكان ن يف الحل‬ •

let arr1 = ["A", "C", "X"];

// Your Code Here

[48] Loop - For And Concept Of Loop

[49] Looping On Sequences

if (typeof myfriend[0] === "string") {

for (let i = 0; i < myfriend.length; i++) {

[50] Nested Loops And Trainings

let products = ["Keyboard", "Mouse", "Pen", "Pad"];

[51] Loop Control - Break_ Continue_ Label

let products = ["Keypboard", "Mouse", "Pen", "Pad", "Monitor"];

for (let i = 0; i < products.length ; i++) {

for (let i = 0; i < products.length ; i++) {

mainloop: for (let i = 0; i < products.length ; i++) {

[52] Loop - For Advanced Example

Loop for advanced example .

let products = ["Keypboard", "Mouse", "Pen", "Pad", "Monitor"];

[53] Practice - Add Products To Page

let products =["Keypboard", "Mouse", "Pen", "Pad", "Monitor", "iphone"]

document.write(`<h1>Show ${showcount} Products</h1>`);

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

‫يجب طباعة األرقام وإستثناء الرقم ‪ 40‬كما ن يف المثال ‪.‬‬ ‫•‬

‫يجب إستخدام ال ‪ Loop For‬لعمل المطلوب ‪.‬‬ ‫•‬

‫;‪let start = 10‬‬ ‫;‪let end = 100‬‬ ‫;‪let exclude = 40‬‬

‫{ )‪for (let i = start; i <= end; i += start‬‬

‫يجب إستخدام ال ‪ Loop For‬لعمل المطلوب ‪.‬‬ ‫•‬

‫;‪let start = 10‬‬ ‫;‪let end = 0; let stop = 3‬‬