۱۵ مفهوم مهم در جاوا اسکریپت که هر توسعه‌دهنده باید بداند!

۱۵ مفهوم مهم در جاوا اسکریپت که هر توسعه‌دهنده باید بداند!

جاوا اسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است که برای توسعه وب، سرور، و حتی اپلیکیشن‌های موبایل مورد استفاده قرار می‌گیرد. درک مفاهیم اساسی این زبان می‌تواند به شما کمک کند تا برنامه‌های بهینه‌تر، سریع‌تر و خواناتر بنویسید. در این مقاله از فراز کد، ۱۵ مفهوم کلیدی جاوا اسکریپت که هر توسعه‌دهنده باید بداند را بررسی خواهیم کرد.

1- Arrow Function در جاوا اسکریپت

Arrow Functions در ES6 معرفی شدند و یکی از ویژگی‌های مدرن جاوا اسکریپت هستند که باعث کوتاه‌تر و ساده‌تر شدن کد می‌شوند. این توابع به جای function از علامت (<=) استفاده می‌کنند.

مزایا:

• سینتکس کوتاه‌تر : نیازی به نوشتن کلمه کلیدی function نیست.
• حفظ this : برخلاف توابع عادی که می‌توانند زمینه (context) this خود را تغییر دهند، Arrow Functions this را از محیط والد به ارث می‌برند.

// شکل سنتی
function sayHello(name) {
    return `Hello, ${name}`;
}

// شکل با Arrow Function
const sayHello = (name) => `Hello, ${name}`;

console.log(sayHello("Ali")); // خروجی: Hello, Ali

2- map در جاوا اسکریپت

map یکی از متدهای پرکاربرد برای آرایه‌ها است که روی هر عنصر آرایه یک تابع را اعمال می‌کند و یک آرایه جدید با نتایج برمی‌گرداند. برخلاف forEach که تنها عناصری را تکرار می‌کند، map نتیجه هر عملیات را در یک آرایه جدید ذخیره می‌کند.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // خروجی: [2, 4, 6]

3- filter & find در جاوا اسکریپت

Filter و Find برای جستجو و فیلتر کردن داده‌ها در آرایه‌ها بسیار مفید هستند.

• Filter : عناصری که شرط خاصی دارند را به صورت یک آرایه جدید برمی‌گرداند.
• Find : اولین عنصری که شرط مورد نظر را داشته باشد، به عنوان یک مقدار تکی برمی‌گرداند.

const numbers = [1, 2, 3, 4, 5];

// استفاده از filter
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // خروجی: [2, 4]

// استفاده از find
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // خروجی: 2

4- reduce در جاوا اسکریپت

متد reduce برای جمع‌آوری و کاهش عناصر آرایه به یک مقدار واحد به کار می‌رود و معمولاً برای محاسبات پیچیده مانند جمع، ضرب، یا میانگین‌گیری استفاده می‌شود.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // خروجی: 15

5- Template Literals در جاوا اسکریپت

Template Literals به شما اجازه می‌دهد به راحتی متغیرها را در رشته‌ها قرار دهید و رشته‌های چند خطی ایجاد کنید. این ویژگی با استفاده از backticks ` و ${} برای جاسازی متغیرها به کار می‌رود.

const name = "Ali";
const greeting = `Hello, ${name}!`;

console.log(greeting); // خروجی: Hello, Ali!

6- Destructuring در جاوا اسکریپت

Destructuring برای استخراج مقادیر از آرایه‌ها و اشیاء به کار می‌رود و باعث می‌شود کد خواناتر و ساده‌تر شود.

Array Destructuring :

const [first, second] = [10, 20];
console.log(first); // خروجی: 10
console.log(second); // خروجی: 20

Object Destructuring :

const person = { name: "Ali", age: 25 };
const { name, age } = person;

console.log(name); // خروجی: Ali
console.log(age); // خروجی: 25

7- Spread Operator در جاوا اسکریپت

عملگر Spread برای کپی کردن آرایه‌ها و اشیاء، ترکیب آن‌ها، و افزودن عناصر جدید استفاده می‌شود.

آرایه‌ها :

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

console.log(arr2); // خروجی: [1, 2, 3, 4]

اشیاء :

const person = { name: "Ali", age: 25 };
const updatedPerson = { ...person, city: "Tehran" };

console.log(updatedPerson); // خروجی: { name: 'Ali', age: 25, city: 'Tehran' }

8- Ternary Operator در جاوا اسکریپت

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

const age = 18;
const status = age >= 18 ? "Adult" : "Not an adult";

console.log(status); // خروجی: Adult

9- Promise در جاوا اسکریپت

Promises ابزاری برای مدیریت عملیات‌های ناهمگام (async) در جاوا اسکریپت هستند. هر Promise می‌تواند یکی از سه حالت زیر را داشته باشد:

• Pending : زمانی که Promise در حال انجام است.
• Resolved : زمانی که Promise با موفقیت انجام شده است.
• Rejected : زمانی که Promise با شکست مواجه شده است.

مثال:

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success!"), 1000);
});

promise.then(result => console.log(result)).catch(error => console.error(error));
// خروجی بعد از 1 ثانیه: Success!

10- Async-Await در جاوا اسکریپت

async-await یک سینتکس مدرن است که برای کار با Promiseها به کار می‌رود و باعث می‌شود کد به شکل همزمان (synchronous) و خواناتر نوشته شود.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success!"), 1000);
});

const fetchData = async () => {
    try {
        const result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
};

fetchData();
// خروجی بعد از 1 ثانیه: Success!

11- Import-Export در جاوا اسکریپت

برای مدیریت ماژول‌ها، import و export استفاده می‌شود تا بتوانید کد خود را به فایل‌های جداگانه تقسیم کرده و ماژول‌های مختلف را وارد یا صادر کنید.

استفاده از export :

// file1.js
export const greet = name => `Hello, ${name}`;

استفاده از import :

// file2.js
import { greet } from './file1';
console.log(greet("Ali")); // خروجی: Hello, Ali

12- getElementById (انتخاب عنصر بر اساس id) در جاوا اسکریپت

متد getElementById یکی از پرکاربردترین روش‌ها برای انتخاب یک عنصر در صفحه وب است. این متد با استفاده از id عنصر، آن را انتخاب می‌کند. از آنجایی که id باید در صفحه منحصر به فرد باشد، این متد همیشه یک عنصر (یا null در صورت عدم وجود) برمی‌گرداند.

سینتکس :

const element = document.getElementById('idName');

مثال:

<div id="header">این هدر صفحه است</div>

const header = document.getElementById('header');
console.log(header.textContent); // خروجی: "این هدر صفحه است"

نکات مهم:

• id باید در صفحه یکتا باشد.
• اگر عنصری با id مشخص شده وجود نداشته باشد، null برگردانده می‌شود.

13- getElementsByClassName (انتخاب عناصر بر اساس class) در جاوا اسکریپت

متد getElementsByClassName تمام عناصری که دارای کلاس مشخص شده هستند را به‌صورت یک HTMLCollection برمی‌گرداند. اگر هیچ عنصری با آن کلاس وجود نداشته باشد، یک HTMLCollection خالی برگردانده می‌شود.

سینتکس:

const elements = document.getElementsByClassName('className');

مثال

<div class="item">آیتم ۱</div>
<div class="item">آیتم ۲</div>
<div class="item">آیتم ۳</div>

const items = document.getElementsByClassName('item');
console.log(items.length); // خروجی: 3

for (let i = 0; i < items.length; i++) {
    console.log(items[i].textContent); // خروجی: "آیتم ۱", "آیتم ۲", "آیتم ۳"
}

نکات مهم :

• این متد یک HTMLCollection برمی‌گرداند که یک مجموعه زنده (live collection) است. یعنی اگر عناصری به صفحه اضافه یا حذف شوند، این مجموعه به‌طور خودکار به‌روزرسانی می‌شود.
• HTMLCollection شبیه به آرایه است، اما روش‌های آرایه مانند forEach را ندارد. برای پیمایش آن می‌توانید از حلقه‌های معمولی یا تبدیل آن به آرایه استفاده کنید.

14- querySelector و querySelectorAll (انتخاب عناصر با انتخاب‌گرهای CSS) در جاوا اسکریپت

متدهای querySelector و querySelectorAll به شما امکان می‌دهند عناصر را با استفاده از انتخاب‌گرهای CSS انتخاب کنید. این متدها بسیار انعطاف‌پذیر هستند و برای انتخاب عناصر پیچیده مناسب‌اند.

querySelector : این متد اولین عنصری که با انتخاب‌گر CSS مطابقت دارد را برمی‌گرداند. اگر هیچ عنصری مطابقت نداشته باشد، null برگردانده می‌شود.

مثال

const firstItem = document.querySelector('.item');

querySelectorAll : این متد یک NodeList از تمام عناصری که با انتخاب‌گر CSS مطابقت دارند را برمی‌گرداند. اگر هیچ عنصری مطابقت نداشته باشد، یک NodeList خالی برگردانده می‌شود.

مثال

const allItems = document.querySelectorAll('.item');

تفاوت های کلیدی بین متدها

۱. نوع خروجی:

• getElementById: یک عنصر (یا null).
• getElementsByClassName: یک HTMLCollection (زنده).
• querySelector: یک عنصر (یا null).
• querySelectorAll: یک NodeList (غیر زنده).

۲. زنده بودن (Live vs Static):

• getElementsByClassName و getElementsByTagName یک مجموعه زنده (live collection) برمی‌گردانند.
• querySelectorAll یک NodeList ایستا (static) برمی‌گرداند.

۳. انعطاف‌پذیری:

• querySelector و querySelectorAll از انتخاب‌گرهای CSS پشتیبانی می‌کنند و بسیار انعطاف‌پذیر هستند.
• getElementById و getElementsByClassName فقط بر اساس id یا class کار می‌کنند.
• querySelectorAll یک NodeList ایستا (static) برمی‌گرداند که تغییرات بعدی در DOM را منعکس نمی‌کند.
• برای پیمایش NodeList می‌توانید از forEach استفاده کنید.

کدام متد را استفاده کنیم ؟

• اگر می‌خواهید یک عنصر را بر اساس id انتخاب کنید، از getElementById استفاده کنید (سریع‌تر و مستقیم‌تر است).
• اگر می‌خواهید عناصر را بر اساس class انتخاب کنید، از getElementsByClassName یا querySelectorAll استفاده کنید.
• اگر نیاز به انتخاب‌گرهای پیشرفته‌تر CSS دارید، از querySelector یا querySelectorAll استفاده کنید.

انتخاب عناصر DOM یکی از پایه‌ای‌ترین مهارت‌ها در جاوا اسکریپت است. با استفاده از متدهایی مانند getElementById، getElementsByClassName، querySelector و querySelectorAll، می‌توانید به راحتی با عناصر صفحه وب تعامل داشته باشید. هر کدام از این متدها کاربرد خاص خود را دارند و انتخاب آن‌ها به نیاز شما بستگی دارد.

15- Local Storage و Session Storage در جاوا اسکریپت

این APIها برای ذخیره داده‌ها در مرورگر استفاده می‌شوند.

localStorage.setItem('username', 'Ali');
console.log(localStorage.getItem('username'));

جمع‌بندی

در این مقاله از فراز کد، ۱۵ مفهوم مهم جاوا اسکریپت را بررسی کردیم که هر توسعه‌دهنده باید بداند. آشنایی با این مفاهیم به شما کمک می‌کند تا به یک توسعه‌دهنده حرفه‌ای در جاوا اسکریپت تبدیل شوید. امیدواریم که این مقاله برای شما مفید بوده باشد!

سولات متداول در مورد مفاهیم مهم در جاوا اسکریپت