#javascript #triks #js_trick

let user = {
  name: "Ali",
  address: {
    city: "Tehran"
  }
};

console.log(user.address?.city); // "Tehran"
console.log(user.contact?.phone); // undefined (بدون ارور)

#javascript #vs #article

پ.ن : اگر با زبان برنامه نویسی جاوااسکریپت کار میکنید یکی از مباحث مهمی که حتما باید بدونید primitive و refrence value هستش 👌

#javascript #js_trick

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

#javascript #js_trick

const original = { name: "محمد", age: 18 };
const copy = original;

copy.name = "Doe";

console.log(original.name); // "Doe"

همونطور که می‌بینید توی مقال بالا وقتی copy رو تغییر دادیم، original هم تغییر کرد !

const original = { name: "محمد", age: 18 };
const copy = structuredClone(original);

copy.name = "علی";

console.log(original.name); // "محمد"
console.log(copy.name); // "علی"

اینجا دیگه تغییرات تو copy روی original اثری نداره و هر کدوم مستقلاً تغییر می‌کنن.

#javascript #tricks

const obj { key1: 'value1', key2: 'value2', key3: 'value3'

};

const keysArray = Object.keys(obj);

const valuesArray = Object.values(obj);

const entriesArray = Object.entries(obj);

console.log(keysArray); 
// Output: ['key', 'key2', 'key3']

console.log(valuesArray); 
// Output: ['value', 'value2', 'value']

console.log(entriesArray); 
// Output: [['key', 'value'], ['key2', 'value'], ['key3', 'value3']]

#javascript #js_trick

const largeNumber = 1_000_000_000; console.log(largeNumber); // 1000000000 

این قابلیت زمانی که با اعداد طولانی کار می‌کنید، بسیار مفید است و به درک بهتر مقادیر کمک می‌کند ⚡

const mask = (value) => {
    return value.trim().slice(-4).padStart(value.length, '*');
}

console.log(mask('09121111111'));

// خروجی => 1111*******

Channel | Group | YouTube

#javascript  #js_trick

button.addEventListener('click',() => {
  alert('سلام رفیق 👋');
}, { once: true });

#javascript #js_trick

navigator.getBattery().then(battery => {
    console.log(`Battery level: ${battery.level * 100}%`);
    console.log(`Is charging: ${battery.charging ? 'Yes' : 'No'}`);
});

#WhatsThat #javascript #window

let myWindow = window.open("https://example.com")
// بستن تب باز شده بعد از 5 ثانیه
setTimeout(() => {
    myWindow.close();
}, 5000);

let width = window.innerWidth;
let height = window.innerHeight;

let myDiv = document.getElementById("myDiv");

myDiv.style.width = (width / 2) + "px"; 
// نصف عرض پنجره

myDiv.style.height = (height / 3) + "px"; 
// یک سوم ارتفاع پنجره

// ذخیره اطلاعات
window.localStorage.setItem("theme", "dark");

// خوندن اطلاعات
let theme = window.localStorage.getItem("theme");
console.log("تم انتخاب شده: " + theme);

// پاک کردن اطلاعات
window.localStorage.removeItem("theme");

// خوندن آدرس فعلی صفحه
console.log("آدرس فعلی: " + window.location.href);

// هدایت کاربر به صفحه دیگه
window.location.href = "https://example.com";

// تغییر قسمتی از URL بدون لود مجدد صفحه
window.location.hash = "section1"; // کاربر رو به بخش مشخصی از صفحه هدایت می‌کنه

// نمایش پیام ساده
window.alert("به وبسایت ما خوش آمدید!");

// پرسیدن سوال از کاربر
let name = window.prompt("اسمت چیه؟");
console.log("اسمی که کاربر وارد کرده: " + name);

// گرفتن تأییدیه از کاربر
let result = window.confirm("آیا مطمئن هستید که می‌خواهید ادامه دهید؟");
if (result) {
    console.log("کاربر ادامه داد");
} else {
    console.log("کاربر لغو کرد");
}

#javascript #geolocation

این API به شما اجازه می‌ده با دریافت اجازه از کاربر، عرض و طول جغرافیایی دقیقش رو به دست بیارید.

navigator.geolocation.getCurrentPosition((position) => {
console.log(`
Lat:${position.coords.latitude},
Long:${position.coords.longitude}
`);
});

#️⃣ #fun #javascript

🚀@coolycode

navigator.vibrate(200);

توی پروژه بالا براتون یه مثال عملی از این متد رو براتون گذاشتم‌ 🔺

#️⃣ #javascript #vibrate

🚀 @coolycode

   const sym1 = Symbol('test')
   const sym2 = Symbol('test');
   console.log(sym1 === sym2); // false

#️⃣ #javascript #symbol

🚀 @coolycode

➊ افزایش سرعت بارگذاری اولیه
با بارگذاری محتوای ضروری، صفحات سریع‌تر لود می‌شوند.

➋ کاهش استفاده از پهنای باند
چون محتوای غیرضروری به‌صورت همزمان لود نمی‌شود، مصرف داده کاهش می‌یابد.

➌ بهبود تجربه کاربری
کاربران تجربه بهتری از سرعت و عملکرد صفحه خواهند داشت.

<img src="image.jpg" alt="Sample Image" loading="lazy" />

با استفاده از اتریبیوت loading با مقدار lazy، مرورگر تصویر را تنها زمانی که کاربر به آن نزدیک می‌شود یا به آن نیاز پیدا می‌کند (مثلاً وقتی اسکرول می‌کند) بارگذاری می‌کند.

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

این کد با استفاده از React.lazy کامپوننت را به‌صورت لیزی لود می‌کند و با کمک Suspense تا زمان بارگذاری کامل، یک پیام یا محتوای موقت (مثل "Loading...") را نمایش می‌دهد.

#️⃣ #WhatsThat #lazyloading #javascript

🚀 @coolycode

هدف اصلی tree shaking اینه که فقط کدی که واقعاً در برنامه استفاده میشود در باندل نهایی باقی بماند و کدهای اضافی حذف شوند 💥

نکته ای که وجود داره اینه که جاوااسکریپت به تنهایی نمیتونه tree shaking رو فعال کنه و توسط bundler‌هایی مثل webpack و rollup انجام می‌شه !

🌐 Webpack

🌐 Rollup

#️⃣ #WhtsThat #javascript #bundlesize #tree_shaking #webpack #rollup

🚀 @coolycode

توی مثال زیر پروپرتی name رو از user اومدیم و destruct کردیم 🔻

const user = { name: 'Mmd', address: { city: 'cool city', } };

const { name } = user; console.log(name); // Mmd

توی مثال زیر پروپرتی city رو به سادگی از address اومدیم و destruct کردیم 🚀

const { name, address: { city } } = user;
console.log(name); // Mmd
console.log(city); // cool city

#️⃣ #javascript #tricks

⭐ 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

const truncate = (str, length) => 
  str.length > length ? str.slice(0, length) + "..." : str;
console.log(truncate("JavaScript Tricks", 10)); // "JavaScript..."

const array = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(array); // [1, 2, 3, 4, 5]

const num = +"42";
console.log(num); // 42

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

const isEven = (num) => num % 2 === 0;
console.log(isEven(4)); // true

const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello")); // "olleh"

پیشنهاد : این مورد رو خودتون سعی کنید بدون استفاده از متد های آماده جاوااسکریپت بسازید جالبه و ساده ؛)

const getDay = (day) => ({
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
}[day] || "Invalid day");
console.log(getDay(1)); // "Monday"

const arr = [0, null, undefined, "", 5];
const filtered = arr.filter(Boolean);
console.log(filtered); // [5]

const arraysAreEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
console.log(arraysAreEqual([1, 2], [1, 2])); // true

const unique = [...new Set([1, 2, 2, 3])];
console.log(unique); // [1, 2, 3]

#️⃣ #tricks #javascript

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

یعنی دیگه نیازی نیست خودتون به صورت دستی به نوشتن کوئری‌های پیچیده با sql خام بپردازید و میتونید تمرکز بیشتری رو روی منطق برنامه‌نویسی داشته باشید 💥

با استفاده از ORM، نیاز به نوشتن کد SQL کاهش پیدا میکنه و عملیات دیتابیس به صورت خودکار انجام می‌شه

کد ORM بیشتر به زبان برنامه‌نویسی شما نزدیکه و فهم اون ساده‌تره.

با ORM میتونید به سادگی از یک دیتابیس به یک دیتابیس دیگه منتقل شد.

با ORM ها مدیریت روابط ( ریلیشن‌ها ) بین جداول مختلف خیلی ساده تر میشه

برای برخی از عملیات‌های پیچیده مثل گذارش گیری ها ممکنه کارایی کمتری نسبت به نوشتن کد SQL خالص داشته باشن.

درک کامل عملکرد ORM و چگونگی کارکرد اون می‌تونه برای برخی از دولوپر‌های تازه‌کار سخت تر باشه.

برای سناریوهایی با نیازهای خاص و پیچیده، ممکنه ORM همه نیازهای مارو برآورده نکنه.

یک ORM قدرتمند برای Node.js و دیتابیس های SQL با پشتیبانی از تعریف مدل، روابط پیچیده، و Migration.

به شخصه typeorm رو‌ برای NestJS توصیه میکنم چون فوق‌العاده مناسب برای TypeScript هستش که از database های SQL و NoSQL پشتیبانی میکنه.

این یکی برای MongoDB به‌کار می‌ره و درواقع ODM هستش که با Schema‌ها، Middleware و قابلیت Validation، مدیریت دیتای NoSQL رو براتون اسون تر میکنه.

یک ORM مدرن و TypeScript-friendly برای دیتابیس های SQL با تمرکز بر سرعت، Type-Safty کوئری‌ها.

#️⃣ #lazyloading #javascript

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣