فقط در جاوا اسکریپت فقط یاد بگیرید: نقشه راه من از صفر تا پیشرفته

سلام devs! 👋
من اخیراً رفتم همه در مورد یادگیری JavaScript – از اصول مطلق تا مفاهیم موجود در نحوه عملکرد JS در زیر کاپوت. اما این پیچش است:
❌ من “همه چیز” را یاد نگرفتم.
✅ من یاد گرفتم فقط آنچه واقعاً مهم است برای ساخت پروژه های دنیای واقعی و مصاحبه های ترک.
بگذارید آنچه را که روی آن تمرکز کردم به اشتراک بگذارم
1⃣ var
با let
با const
: تفاوت واقعی چیست؟
var x = 10;
let y = 20;
const z = 30;
x = 100; // ✅ allowed
y = 200; // ✅ allowed
z = 300; // ❌ Error: Assignment to constant variable
-
var
عملکردی است ، در حالی کهlet
وادconst
بلوک های بلوک هستند. -
const
نمی توان مجدداً منصوب شد. - استفاده کردن
let
وتconst
– فراموش کنvar
در JS مدرن.
2 ⃣ بلند کردن 🏗
console.log(a); // undefined
var a = 10;
sayHi(); // "Hi!"
function sayHi() {
console.log("Hi!");
}
-
var
بلند می شود تعریف نشده - توابع کاملاً بلند می شوند
3⃣ انواع داده ها
// Primitives
let num = 5;
let str = "Hello";
// Reference
let obj = { name: "Dev" };
let arr = [1, 2, 3];
- یاد بگیرید تفاوت بین انواع بدوی و مرجع
- انواع مرجع در حافظه پشته ذخیره می شوند
4⃣ شرط بندی و حلقه ها
if (true) {
console.log("Runs!");
}
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
- ارباب
if
باelse
باswitch
باfor
باwhile
باdo while
5⃣ توابع = قدرت
function greet(name) {
return `Hello, ${name}`;
}
const greetArrow = (name) => `Hello, ${name}`;
- شهروندان درجه یک
- می توانید آنها را منتقل کنید ، آنها را برگردانید ، آنها را اختصاص دهید
- درک کردن
callback
باarrow
باpure
باhigher-order
باIIFE
6⃣ آرایه ها و اشیاء
let nums = [1, 2, 3];
nums.push(4); // [1, 2, 3, 4]
let user = { name: "Dev", age: 22 };
user.city = "Pune";
- روشهای باید دانستن:
push
باpop
باshift
باunshift
باmap
باfilter
باreduce
- تخریب دسترسی را ساده می کند
const { name } = user;
7⃣ زمینه و دامنه اجرای
function outer() {
let a = 10;
function inner() {
console.log(a); // 10
}
inner();
}
outer();
- دامنه و بسته های واژگانی
- درک پشته ، پشته و تخصیص حافظه را درک کنید
8 this
با call
با apply
با bind
🤯
const obj = {
name: "Dev",
greet: function () {
console.log(`Hello, ${this.name}`);
},
};
obj.greet(); // Hello, Dev
- بدانید چگونه
this
در زمینه های مختلف رفتار می کند - استفاده کردن
.call()
با.apply()
با.bind()
کنترلthis
9⃣ دستکاری DOM 📱
const btn = document.getElementById("clickMe");
btn.addEventListener("click", () => {
document.body.style.background = "lightblue";
});
- عناصر HTML را انتخاب ، ویرایش و سبک انتخاب ، ویرایش و سبک کنید
- تعامل را در جلوی خود ایجاد کنید
🔟 ES6+ ویژگی ها
function greet(name = "Guest") {
console.log(`Hello, ${name}`);
}
const user = { name: "Dev", age: 22 };
const { name, age } = user;
- پارامترهای پیش فرض
- تخریب
- اپراتورهای پخش/استراحت
🔄 جاوا اسکریپت ناهمزمان
setTimeout(() => {
console.log("Runs after 2s");
}, 2000);
// Promises
const fetchData = () =>
new Promise((resolve, reject) => {
resolve("Data fetched!");
});
fetchData().then(console.log);
- یاد گرفتن
setTimeout
باPromises
باasync/await
- حلقه رویداد ، API های وب و بازگشت به تماس را درک کنید
👷 نمونه اولیه و OOP در JS
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
console.log(`Hi, I'm ${this.name}`);
};
const user = new Person("Dev");
user.sayHello(); // Hi, I'm Dev
- توابع سازنده
- نمونه ها و وراثت
-
new
کلمه کلیدی و نحوه ایجاد اشیاء
📁 جایزه: کد تمرین من
من تمام نمونه های خود را برای دسترسی آسان در یک repo github قرار داده ام:
🔗 https://github.com/mahendra11111111/javascript_practiceset
👋 کلمات نهایی
JavaScript می تواند احساس غرق شدن کند – اما اگر به آن پایبند باشید واقعاً مهم است، شما سریع تولید می کنید.