نگاهی به سایت State of JS 👍

سایت State of JS یک نظرسنجی سالانه در مورد تکنولوژی‌های مربوط به جاوااسکریپت هست. این سایت اطلاعاتی درباره محبوبیت، ترندها، ابزارهای مختلف جاوااسکریپت مثل فریم‌ورک‌ها، کتابخانه‌ها، و ابزارهای دیگه فراهم می‌کنه. کاربران و توسعه‌دهندگان جاوااسکریپت از سراسر جهان در این نظرسنجی شرکت می‌کنن و نتایج اون به صورت گزارش‌های تحلیلی ارائه میشه.

این گزارش‌ها می‌تونه به دولوپرا کمک کنه، تا تصمیمات بهتری در مورد انتخاب ابزارها و تکنولوژی‌ها برای پروژه‌هاشون بگیرن. پس پیشنهاد میکنم حتما یه سر به سایتش بزنید.

Website 🌐

#javascript
@CodeModule

با استفاده از navigator در جاوااسکریپت، چه کارهایی میتونیم انجام بدیم؟ 🪐

تشخیص نوع دستگاه و سیستم‌عامل کاربر:

با استفاده از navigator.userAgent می‌تونیم نوع دستگاه و سیستم‌عامل کاربر رو تشخیص، و محتوای سایت یا اپلیکیشن رو بر اساس اون تنظیم کنیم.

const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('iphone')) {
    console.log('User is on an iPhone');
} else if (userAgent.includes('android')) {
    console.log('User is on an Android device');
}

دسترسی به اطلاعات شبکه (Network Information API):

از navigator.connection میتونین برای دریافت اطلاعات شبکه کاربر مثل نوع ارتباط (WiFi, 4G) و سرعت اون استفاده کنیم.

const connection = navigator.connection  navigator.mozConnection  navigator.webkitConnection;
if (connection) {
    console.log('Effective connection type:', connection.effectiveType);
    console.log('Downlink speed:', connection.downlink, 'Mbps');
}

تشخیص وضعیت آنلاین/آفلاین بودن کاربر:

با استفاده از navigator.onLine می‌تونیم وضعیت آنلاین یا آفلاین بودن کاربر رو بررسی کنیم و تجربه کاربری رو بهبود ببخشیم.

if (navigator.onLine) {
    console.log('User is online');
} else {
    console.log('User is offline');
}

استفاده از Web Share API برای به اشتراک گذاری محتوا:

با استفاده از navigator.share می‌تونیم امکان اشتراک‌گذاری محتوا رو در دستگاه‌های موبایل فراهم کنیم.

const shareData = {
    title: 'Example Page',
    text: 'Check out this cool page!',
    url: 'https://example.com'
};

navigator.share(shareData).then(() => {
    console.log('Content shared successfully');
}).catch(err => {
    console.error('Error sharing content:', err);
});

دسترسی به باتری دستگاه (Battery Status API):

با استفاده از navigator.getBattery می‌تونیم اطلاعاتی مثل سطح باتری و وضعیت شارژ رو دریافت کنید.

avigator.getBattery().then(battery => {
    console.log('Battery level:', battery.level * 100 + '%');
    console.log('Charging:', battery.charging ? 'Yes' : 'No');
});

#navigator #javascript
@CodeModule

همه چیز از متد hasOwn جاوااسکریپت ✌️

کارایی hasOwn تقریباً مشابه hasOwnProperty هست و این متد به صورت استاتیک، از آبجکت گلوبال Object در دسترس هست و بررسی می‌کنه که آیا یک پراپرتی داخل یک آبجکت خاص وجود داره یا خیر. خروجی این متد یک مقدار بولین (true یا false) هست.

const person = { name: 'Emily' }; 
 
Object.hasOwn(person, 'name'); // true 
person.hasOwnProperty('name'); // true

مستندات MDN میگه hasOwn قراره جایگزین hasOwnProperty بشه. اما چرا؟ چرا hasOwn رو به hasOwnProperty ترجیح بدیم؟

دلایل مختلفی برای معرفی این متد وجود داره. ابتدای باید محدودیت‌های hasOwnProperty رو بشناسیم. اول اینکه این متد خیلی راحت می‌تونه Override بشه:

const person = { 
  name: 'Mario', 
  hasOwnProperty() { 
    return true; 
  }, 
} 
alert(person.hasOwnProperty('age')); // true

همچنین وقتی که یک آبجکت رو به صورت زیر می‌سازیم:

const person = Object.create(null); 

اینجا معمولاً هدفمون اینه که یک آبجکت بدون پروتوتایپ می‌خوایم. یعنی بدون والد. پس توی چنین آبجکتی هیچ یک از پراپرتی‌های والد وجود نداره. از جمله hasOwnProperty. پس با صدا زدن این متد از این آبجکت خطا می‌گیریم:

const person = Object.create(null); 
 
person.hasOwnProperty('name'); // TypeError: person.hasOwnProperty is not a function

‏Override کردن یا حذف کردن چنین متدی ممکنه برای یک کتابخونه خارجی دردسر ساز بشه. برای حل چنین مشکلی نویسنده اون کتابخونه مجبور بود به چنین راه حل‌هایی رو بیاره:

const person = { 
  hasOwnProperty() { 
    return true; 
  }, 
}
 
const exists = Object.prototype.hasOwnProperty.call(person, 'age'); alert(exists); // false

پس دولوپرای جاوااسکریپت به این فکر افتادن که یک متد اختصاصی برای حل چنین مشکلاتی معرفی کنن. اسم این متد رو گذاشتن hasOwn. اگه از این متد برای آبجکت‌های بالا استفاده کنیم دیگه خطا نمی‌گیریم:

const person1 = Object.create(null); 
alert(Object.hasOwn(person1, 'name')); // false 
const person2 = { 
  hasOwnProperty: () => true, 
}

alert(Object.hasOwn(person2, 'name')); // false 

همونطور که گفتیم اگه یک پراپرتی توی یک آبجکت وجود داشته باشه، خروجی این متد true هست. حتی اگه مقدار پراپرتی null یا undefined باشه:

const person = {}; 
Object.hasOwn(person, 'name'); // false 
 
person.age = 4; 
Object.hasOwn(person, 'age');  // true 
 
person.prop = null; 
Object.hasOwn(person, 'prop');  // true 
 
person.prop = undefined; 
Object.hasOwn(person, 'prop');  // true

از این متد نمی‌تونیم برای مقادیر null و undefined استفاده کنیم:

// TypeError: can't convert undefined to object 
Object.hasOwn(undefined, 'prop'); 
 
// TypeError: can't convert null to object 
Object.hasOwn(null, 'prop');

همچنین با hasOwn می‌تونیم بررسی کنیم که آیا یک آرایه یک ایندکس خاص داره یا نه:

const numbers = ['one', 'two']; 
 
Object.hasOwn(numbers, 1); // true 
Object.hasOwn(numbers, 2); // false

همچنین باید بدونیم که متد hasOwn یک متد کاملاً جدید هست و فقط مرورگرهای جدید از اون پشتیبانی می‌کنن.

#hasown #javascript
@CodeModule