#javascript #js_trick #object

obj | prop | descriptor

const person = {};

Object.defineProperty(person, 'name', {
  value: 'علی',
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(person.name); // خروجی: علی

person.name = 'حسن' ;

#javascript #js_trick

const stringNumbers = ["12", "4.36", "2000", "mohammad"];

const numbers = stringNumbers.map(Number);

console.log(numbers);

[457, 5.36, NaN, 4500]

const filteredNumbers = numbers.filter(number => !isNaN(number));

console.log(filteredNumbers);

[457, 5.36, 4500]

#javascript #js_trick #object

const obj = {};

let value = 0;

Object.defineProperty(obj, 'prop', {
    get() {
        return value;
    },
    set(newValue) {
        value = newValue + 1;
    },
    configurable: true,
    enumerable: true
});

obj.prop = 10;
console.log(obj.prop);

const person = {
   firstName: "ali",
   lastName: "ahmadi"
};

Object.defineProperty(person, 'fullName', {
  get() {
    return ${this.firstName} ${this.lastName}.toUpperCase();
  }
});

console.log(person.fullName); 

ALI AHMADI

const person = {};

Object.defineProperty(person, 'age', {
  get() {
    return this._age;
  },
  set(newAge) {
    if (newAge < 0) {
      throw new Error('سن نمی‌تواند منفی باشد.');
    }
    this._age = newAge;
  }
});

person.age = 30;
console.log(person.age); // خروجی: 30

try {
  person.age = -5;
} catch (error) {
  console.error(error.message); // خروجی: سن نمی‌تواند منفی باشد.
}

#javascript #js_trick #object

console.log(0 == ""); // true console.log(null == undefined); // true

در مقابل، === مقایسه برابری دقیق تری را انجام می‌دهد و به نوع داده‌ها توجه می‌کند. 👇

console.log(0 === ""); // false
console.log(null === undefined); // false

const a = NaN;
const b = 0 / 0;

console.log(a === b); // false
console.log(Object.is(a, b)); // true

１مقایسه اول ( a ===b ) : این مقایسه از عملگر برابری دقیق (===) استفاده می‌کند که هم مقدار و هم نوع داده‌ای دو متغیر را بررسی می‌کند. در این مورد، هر دو متغیر مقدار NaN دارند اما === باز هم false را برمی‌گرداند. دلیل این اتفاق این است که در استاندارد IEEE 754 (استاندارد اعداد ممیز شناور)، NaN با خودش برابر نیست.

２ مقایسه دوم ( Object.is(a, b) ) : این مقایسه از متد Object.is استفاده می‌کند که برای مقایسه برابری دو مقدار طراحی شده است. این متد در بیشتر موارد مانند === عمل می‌کند، اما در مورد NaN رفتاری متفاوت دارد. Object.is تشخیص می‌دهد که هر دو متغیر مقدار NaN دارند و بنابراین true را برمی‌گرداند.

#javascript #js_trick #unary_operators

این عملگرها عملیات مختلفی مانند افزایش/کاهش، ارزیابی نوع داده، منفی کردن یک مقدار و غیره را انجام می‌دهند ⚡

let x = 5; // در باینری: 0000000000000000000000000000010
x = ~x; // در باینری: 11111111111111111111111111111010

function exampleFunction() {
    return 42; // این مقدار برگشتی تابع است
}

console.log(void exampleFunction()); // undefined

#javascript #triks #js_trick

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

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

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

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