متغیرهای جاوااسکریپت Variable

متغیر چیه؟

توی جاوااسکریپت، برای ذخیره کردن اطلاعات، از متغیرهای جاوااسکریپت استفاده می‌کنیم. چه زمانی نیاز هست که اطلاعات رو ذخیره کنیم؟ هر وقت نیاز داشته باشیم تا یه «مقدار» یا value رو چند جای مختلف استفاده کنیم. کار کردن با متغیرها باعث می‌شه سایرین راحت‌تر کد شما رو متوجه بشن و در اصطلاح، کد شما «خواناتر» می‌شه.

چطوری یه متغیر تعریف کنیم؟

اگه بخوایم یه متغیر تعریف کنیم، باید از یکی از کلیدواژه‌های let یا const استفاده کنیم و بعد برای اون متغیر یه اسم انتخاب کنیم؛ از کلیدواژه const وقتی استفاده می‌کنیم که نیاز به یه مقدار ثابت داشته‌باشیم و از let زمانی استفاده می‌کنیم که مقدارمون متغیر باشه؛ توی این دوره نمی‌خوام خیلی عمیق وارد تفاوت‌های const و let بشم ولی درباره انتخاب کردن اسم متغیرها یه سری قواعد هست که باید همین جا یاد بگیرید:

• اسمی که انتخاب می‌کنید باید معنی‌دار باشه
• اسمی که انتخاب می‌کنید نباید با عدد شروع بشه
• بین کلماتی که برای اسم متغیر انتخاب می‌کنید نباید فاصله باشه
• برای انتخاب کردن اسم‌ها، توی جاوااسکریپت از یه جور استاندارد املایی استفاده می‌شه که بهش می‌گن نگارشِ شُتُری یا camelCase؛ این طوریه که کلمه اول با حرف کوچیک شروع می‌شه و از کلمه دوم به بعد، کلمات با حرف بزرگ شروع می‌شن و به همدیگه می‌چسبن؛ توی مثال بعدی می‌بینید که متغیرهای windowWidth و windowHeight با رعایت کردن همین استاندارد نوشته شدن (رعایت این استاندارد اجباری نیست اما شدیداً توصیه می‌شه از این روش برای نوشتن اسامی استفاده بشه)

استفاده از متغیرهای جاوااسکریپت توی p5.js

حالا بیاید یه متغیر تعریف کنیم و ببینیم در عمل، تعریف کردن یه متغیر چطوری انجام می‌شه. همون کدی که توی درس قبلی نوشتیمو یه بار دیگه استفاده می‌کنم و این دفعه برای مشخص کردن اندازه‌های دایره از یه متغیر استفاده می‌کنم:

function setup() {
     createCanvas(windowWidth, windowHeight)
}
function draw() {
     if(mouseIsPressed) {
          fill(0)
     } else {
          fill(255)
     }

     // this is a variable, you can change circle size here
     const circleSize = 80

     ellipse(mouseX, mouseY, circleSize, circleSize)
}

بعد از این که فایل index.html رو توی مرورگر باز کردید، عدد متغیر circleSize رو تغییر بدید، فایل رو ذخیره کنید و صفحه مرورگرو رفرش کنید. می‌بینید که هم عرض و هم ارتفاع دایره فقط با تغییر دادن یه متغیر، عوض می‌شه.

متغیر ازپیش‌تعریف‌شده

توی setup موقع اجرا کردن تابع createCanvas از دو تا متغیر از پیش‌تعریف‌شده‌ی windowWidth و windowHeight استفاده کردیم که به ترتیب عرض و ارتفاع صفحه مرورگرو بهمون می‌ده؛ این دو تا متغیر رو ما تعریف نکردیم و از متغیرهای پیش‌فرض p5.js هستن. پس p5.js شامل تعدادی متغیر ازپیش‌تعریف‌شده‌س که کاربردهای مختلفی دارن. حالا یه اسکیس دیگه انجام بدیم. این دفعه می‌خوام یه دایره وسط تصویر بکشم و وسطش یه مستطیل درست کنم:

function setup() {

     // general
     createCanvas(windowWidth, windowHeight)
     background(1, 186, 240)
     noStroke()

}
function draw() {

     // circle
     const circleSize = 200
     fill(237, 35, 93)
     ellipse(windowWidth / 2, windowHeight / 2, circleSize, circleSize)

     // rectangle
     const rectWidth = 150
     const rectHeight = 30
     fill(255)
     rect(windowWidth / 2 - rectWidth / 2, windowHeight / 2 - rectHeight / 2, rectWidth, rectHeight)

}

این مثال یه خرده نیاز به توضیح داره. من کد رو به سه قسمت تقسیم کردم:

بخش اول که با کامنت general مشخص شده تنظیمات عمومی صفحه‌س؛ این جا با تابع background مشخص کردم که رنگ پس‌زمینه چی باشه و همچنین با استفاده از تابع noStroke مشخص کردم که اَشکالی که قراره بعد از این به نمایش دربیاد دورخط یا استروک نداشته باشه.

بخش دوم که با کامنت circle مشخص شده شامل یه متغیره که اندازه دایره توش تعریف شده. بعد هم از تابع fill استفاده کردم که به دایره رنگ بدم. بعد خود دایره کشیده شده. برای این که دایره دقیقاً وسط صفحه قرار بگیره عرض و ارتفاع صفحه رو تقسیم بر دو کردم.

بخش سوم که با کامنت rectangle مشخص شده هم شامل دو تا متغیره که عرض و ارتفاع مستطیل رو مشخص می‌کنه؛ این جا هم از fill استفاده کردم برای مشخص کردن رنگ مستطیل. اگه دقت کنید مجبور شدم عرض و ارتفاع مستطیل رو تقسیم بر دو کنم تا مستطیل وسط دایره قرار بگیره.

توی این مثال دیدید که من متغیرها رو توی تابع draw ساختم و توی همون تابع هم استفاده کردم. ممکنه این سؤال توی ذهنتون به وجود بیاد که اگه این متغیرها توی تابع setup ساخته می‌شدن چی می‌شد؟ جواب اینه که برنامه با خطا مواجه می‌شد و درست اجرا نمی‌شد؛ این به خاطر اینه که توی جاوااسکریپت، اگه یه متغیر داخل یه تابع ساخته بشه، فقط داخل همون تابع می‌شه ازش استفاده کرد. پس برنامه پایین با خطا مواجه می‌شه:

function setup() {

     // general
     createCanvas(windowWidth, windowHeight)
     background(1, 186, 240)
     noStroke()

     // variables
     const circleSize = 200
     const rectWidth = 150
     const rectHeight = 30

}
function draw() {

     // circle
     fill(237, 35, 93)
     ellipse(windowWidth/2, windowHeight/2, circleSize, circleSize)

     // rectangle
     fill(255)
     rect(windowWidth/2 - rectWidth/2, windowHeight/2 - rectHeight/2, rectWidth, rectHeight)

}

اما اگه نیاز باشه، می‌تونیم متغیرها رو بیرون تابع draw و قبل از تابع setup بسازیم و توی هر تابعی که خواستیم ازشون استفاده کنیم. این طوری برنامه به مشکلی نمی‌خوره؛ به این متغیرها می‌گن متغیرهای عمومی؛ یعنی منحصر به هیچ تابعی نیستن و هر جایی قابل استفاده هستن.

// variables
const circleSize = 200
const rectWidth = 150
const rectHeight = 30

function setup() {
     createCanvas(windowWidth, windowHeight)
     background(1, 186, 240)
     noStroke()
}
function draw() {

     // circle
     fill(237, 35, 93)
     ellipse(windowWidth/2, windowHeight/2, circleSize, circleSize)

     // rectangle
     fill(255)
     rect(windowWidth/2 - rectWidth/2, windowHeight/2 - rectHeight/2, rectWidth, rectHeight)

}

چه چیزهایی رو می‌شه توی متغیرهای جاوااسکریپت ذخیره کرد؟ «انواعِ داده»

توی مثال‌هایی که تا الان دیدید، فقط اعداد رو داخل متغیرها ذخیره کردیم. در واقع تنها «نوع داده‌»ای که تا الان داخل متغیرهای جاوااسکریپت ذخیره کردیم، اعداد بودن. جاوااسکریپت هشت نوع داده یا دیتا تایپ داره که می‌شه اون‌ها رو توی متغیرها ذخیره و بعد ازشون استفاده کرد؛ اون هشت نوع داده اینا هستن:

• عدد ـ Number ـ ممکنه عدد صحیح یا اعشاری باشه
• استرینگ ـ String ـ همون متنه و بین کوتیشن‌مارک یا بک‌تیک قرار می‌گیره
• بولیَن ـ Boolean ـ یعنی true یا false (صحیح یا غلط)
• نال ـ Null ـ مقدارِ خالی
• تعریف‌نشده ـ Undefined ـ متغیر تعریف شده ولی هیچ مقداری نداره
• آرایه ـ Array ـ فهرستی از داده‌ها
• تابع ـ Function
• آبجکت ـ Object

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

اول: عدد

اعداد می‌تونن عدد صحیح یا اعشاری باشن. می‌تونیم توی فرمول‌ها از اعداد استفاده کنیم و باهاشون اعمال ریاضی، مثل جمع و تفریق انجام بدیم.

const firstNumber = 5
const secondNumber = 10

console.log(firstNumber + secondNumber)
// 15

این البته خیلی مثال ساده‌ایه. توی جاوااسکریپت یه آبجکتی داریم که بهش می‌گیم Math که به معنی ریاضیه و بهمون امکانات زیادی می‌ده که بتونیم با اعداد کارای مختلفی انجام بدیم. توی مثال پایین ببینید که با مِتُدهای مربوط به آبجکت Math چطوری اعداد رو به سمت بالا یا پایین رُند می‌کنیم و یا از بین مجموعه اعداد، عدد کمینه یا بیشنه رو مشخص می‌کنیم:

console.log(PI) 
// 3.141592653589793

console.log(Math.round(PI)) 
// 3, to round values to the nearest number

console.log(Math.round(9.81)) 
// 10

console.log(Math.floor(PI)) 
// 3, rounding down

console.log(Math.ceil(PI)) 
// 4, rounding up

console.log(Math.min(-5, 3, 20, 4, 5, 10)) 
// -5, returns the minimum value

console.log(Math.max(-5, 3, 20, 4, 5, 10)) 
// 20, returns the maximum value

به اون عبارتی که بعد از آبجکت Math نوشتیم می‌گن مِتُدِ مربوط به اون آبجکت. مِتُدهای مربوط به آبجکت Math خیلی زیادن و برای هر عملیات ریاضی که از ذهنتون بگذره، جاوااسکریپت یه مِتُدِ آماده داره؛ من نمی‌خوام همه این مِتُدها رو بررسی کنم یا توضیح بدم چون خیلی زیاد هستن و واقعاً بیشترشون تا حالا به کارم نیومده، فقط یادتون باشه که برای هر جور عملیات ریاضی که فک کنید یه مِتُدی وجود داره و این متدها محدود به استفاده در p5.js نیستن، بلکه توی هر محیطی که بشه توش جاوااسکریپت نوشت قابل استفاده هستن.

دوم: استرینگ

استرینگ همون متنه و بین کوتیشن‌مارک یا علامت نقل‌قول نوشته می‌شه. فرض کنید می‌خوایم استرینگ‌های مختلف رو به همدیگه متصل کنیم و به صورت یک متن واحد نمایش بدیم؛ برای این کار از علامت + استفاده می‌کنیم و متغیرها رو بین متن قرار می‌دیم:

const space = ' '
const firstName = 'Ali'
const country = 'Iran'
const city = 'Tehran'
const language = 'JavaScript'
const age = 33
const personInfo = 'Hi!' + space + 'My name is' + space + firstName

console.log(personInfo)
// Hi! My name is Ali

البته برای این کار یه روش دیگه هم وجود داره که به نظر من روش بهتریه که بهش می‌گن «درج در استرینگ» یا به انگلیسی String Interpolation؛ توی این روش دیگه از علامتِ + استفاده نمی‌شه و به جاش برای نمایش متغیرها از علامت $ استفاده می‌شه و بعد اسم متغیر توی براکت قرار می‌گیره؛ ضمناً کل استرینگ بین دو تا علامت بک‌تیک قرار می‌گیره. علامت بک‌تیک این علامته: ` و توی صفحه کلید من سمت چپ عدد یک قرار داره. پس اگه بخوایم خلاصه کنیم، توی روش درج در استرینگ:

• قبل از متغیرها از علامت دلار استفاده می‌شه
• متغیرها داخل براکت قرار می‌گیرن
• کل استرینگ داخل علامت بک‌تیک نوشته می‌شه

const firstName = 'Ali'
const country = 'Iran'
const city = 'Tehran'
const language = 'JavaScript'
const age = 33
const personInfo = `Hi! My name is ${firstName} and I live in ${city}`

console.log(personInfo)
// Hi! My name is Ali and I live in Tehran

سوم: بولیَن

بولیَن نوعی از داده‌س که می‌تونه true یا false باشه (توی یادداشت قبلی خیلی مختصر بهش اشاره کردم)؛ یعنی یا درسته یا غلطه؛ خیلی ساده‌س و جلوتر که درباره مقایسه و منطق شرطی یاد بگیرید متوجه می‌شید که چقدر کاربردیه. فعلاً فقط بدونید هر وقت عمل مقایسه انجام بدیم، در واقع داریم یه بولیَن می‌سازیم که ممکنه true یا false باشه. خودتون می‌تونید یه سری مقایسه انجام بدید و نتیجه رو توی کنسول نگاه کنید:

console.log(4 > 3) 
// true

console.log(3 > 4) 
// false

console.log(3 == 3) 
// true

توی مثالی که اول همین درس داشتیم از متغیر mouseIsPressed استفاده کردیم؛ این متغیر یه بولیَنه و از متغیرهای پیش‌فرض p5.js هم هست، وقتی دکمه ماوس فشار داده بشه true و در غیر این صورت false می‌شه.

function setup() {
     createCanvas(windowWidth, windowHeight)
}
function draw() {
     if(mouseIsPressed) {
          fill(0)
     } else {
          fill(255)
     }

     // this is a variable, you can change circle size here
     const circleSize = 80

     ellipse(mouseX, mouseY, circleSize, circleSize)
}

چهارم: نال

نال یعنی تُهی، یعنی هیچ. متغیر نال متغیریه که خالیه و هیچ چیزی توش نیست؛ دقت کنید که این هم‌معنی با عدد صفر نیست، چون عدد صفر یه عدده ولی نال هیچ چی نیست؛ همچنین این یه متغیر تعریف‌نشده نیست.

const empty = null

console.log(empty) 
// null

پنجم: تعریف‌نشده

اگه یه متغیر بسازید ولی هیچ مقداری بهش نسبت ندید، مقدار اون متغیر undefined یا تعریف‌نشده می‌شه.

let firstName

console.log(firstName) 
// undefined

نکته خیلی مهم توی مثال بالا اینه که برای ساختن متغیر توی مثال بالا دیگه از const استفاده نکردم؛ چون توی جاوااسکریپت وقتی با کلیدواژه const یه متغیر می‌سازید باید حتماً مقدار اون متغیر رو هم تعریف کنید؛ در غیر این صورت با خطا مواجه می‌شید؛ این در حالیه که متغیرهایی که با let ساخته می‌شن، می‌تونن ابتدا مقداری نداشته باشن و مقدار اون‌ها بعداً مشخص بشه.

ششم: آرایه

آرایه‌ها در واقع فهرستی از داده‌ها هستن که با علامت , از همدیگه جدا شدن و می‌تونن شامل هر نوعِ داده‌ی دیگه‌ای باشن. اگه لازم باشه با مجموعه‌ای از داده‌ها کار کنیم، مثلاْ مجموعه‌ای از کلمات، باید از یه آرایه استفاده کنیم. با استفاده از علامت‌های [] که بهش می‌گیم براکت، می‌شه یه آرایه تعریف کرد و ازش استفاده کرد:

const words = ['this', 'is', 'a', 'simple', 'array']

console.log(words[0])
// this

console.log(words[3])
// simple

console.log(words.length)
// 5 

آرایه‌های جاوااسکریپت zero-base هستن؛ یعنی وقتی محتوای آرایه شماره‌گذاری می‌شن، شماره‌گذاری از صفر شروع می‌شه؛ برای همینه که توی مثال بالا وقتی خواستیم به اولین موردِ آرایه دسترسی پیدا کنیم از words[0] استفاده کردیم. همچنین از متُدِ length استفاده کردیم تا تعداد موارد داخل آرایه رو به دست بیاریم؛ متُدهای دیگه هم هستن که برای کار کردن با آرایه‌ها وجود داره. مثلاً متُد push یک آیتم یا مقدار به انتهای آرایه اضافه می‌کنه:

let words = ['this', 'is', 'a', 'simple', 'array']
words.push('apple')

console.log(words[5])
// apple

خب، این از شش تا انواعِ داده، می‌مونه «تابع» و «آبجکت» که بعداً قراره حسابی درباره‌شون یاد بگیریم.

چک کردن انواع داده

بعضی وقتا نیاز داریم ببینیم چه نوع داده‌ای توی یه متغیر ذخیره شده؛ برای این کار از مِتُدِ typeof استفاده می‌کنیم:

const firstName = 'Ali'
const age = 33
let job

console.log(typeof firstName) 
// string

console.log(typeof age)
// number

console.log(typeof job) 
// undefined, because a value was not assigned

یه خُرده ریاضی

خبر خوب اینه که پروژه‌های جاوااسکریپت معمولاً ریاضیات خیلی پیچیده‌ای ندارن و با اعمال خیلی ساده ریاضی سر و کار دارن (مگه این که پروژه خاصی باشه). خیلیا فک می‌کنن برای این که برنامه‌نویس خوبی بشن حتماً باید خیلی ریاضی بلد باشن. البته که دانش ریاضی خیلی وقتا توی کدنویسی به داد آدم می‌رسه، اما تجربه نشون داده که بیشتر وقتا اعمال خیلی ساده ریاضی هستن که توی پروژه‌ها کاربرد دارن. علامت‌های ساده‌ای مثل به‌علاوه، منها و ستاره وقتی بین اعداد (یا متغیرهای شامل اعداد) قرار بگیرن، اعمال ریاضی رو بین اون اعداد انجام می‌دن. با این علامت‌هایی که این زیر لیست کردم می‌تونیم روی اعداد، اعمال ساده ریاضی انجام بدیم. توی مثال بعدی می‌تونید اعداد رو به دلخواه خودتون تغییر بدید و نتیجه هر کدوم از اعمال ریاضی رو توی کنسول مرورگرتون ببینید.

• جمع: +
• تفریق: -
• ضرب: *
• تقسیم: /
• باقی‌مانده: %
• توان: **

const numOne = 5
const numTwo = 3
const sum = numOne + numTwo
const diff = numOne - numTwo
const mult = numOne * numTwo
const div = numOne / numTwo
const remainder = numOne % numTwo
const powerOf = numOne ** numTwo

console.log(sum)
console.log(diff)
console.log(mult)
console.log(div)
console.log(remainder)
console.log(powerOf)

جاوااسکریپت قوانینی داره که مشخص می‌کنه انجام کدوم اعمال ریاضی نسبت به سایر اعمال اولویت داره. یعنی کدوم محاسبات اول انجام می‌شه، کدوم محاسبات دوم، کدوم سوم و الی آخر؛ این اطلاعات به شما کمک می‌کنه بفهمید یه چنین کدی چطوری کار می‌کنه:

const x = 4 + 4 * 5
// 24

توی مثال بالا، اول 4 * 5 محاسبه می‌شه چون عمل ضرب بالاترین اولیت رو داره. بعد 4 به حاصل ضرب 4 * 5 اضافه می‌شه و نتیجه 24 به دست میاد. اگه دوست داشته باشید می‌تونید برنامه رو مجبور کنید که عمل جمع رو اول انجام بده؛ کافیه عمل جمعی که مد نظرتونه رو ببرید داخل یه جفت پرانتز. اعمال داخل پرانتز همیشه اولویت بالاتری نسبت به اعمال خارج از پرانتز دارن:

const x = (4 + 4) * 5
// 40

توی برنامه‌نویسی بعضی از محاسبات این قدر زیاد تکرار می‌شن که براشون یه میان‌برهایی طراحی شده. مثلاً اضافه کردن عدد 1 به یه متغیر با علامت ++ انجام می‌شه، یا کم کردن عدد 1 از یه متغیر با علامت -- به راحتی انجام می‌شه:

x++
y--

p5.js هم تابع‌های آماده‌ای داره که خیلی از عملیات‌های ریاضی رو برامون ساده‌تر می‌کنه. مثلاً رُند کردن اعداد با تابع round انجام می‌شه، با تابع random می‌شه یه عدد تصادفی توی بازه‌ای که مشخص می‌کنید، بسازید و با تابع cos می‌تونید کسینوس یه زاویه رو به دست بیارید.

const roundedValue = round(2.67)
// 3

const randomValue = random(-5, 5)
// a random number between -5 and 5

const cosineValue = cos(angle)
// calculates the cosine 

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

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

• فقط مقدار، برابر: ==
• هم مقدار و هم نوع داده، برابر: ===
• نابرابر: =!
• بزرگتر از: >
• کوچکتر از: <
• بزرگتر یا مساوی: >=
• کوچکتر یا مساوی: <=

console.log(3 > 2) // true
console.log(3 >= 2) // true
console.log(3 < 2) // false
console.log(2 < 3) // true
console.log(2 <= 3) // true
console.log(3 == 2) // false
console.log(3 != 2) // true

console.log(3 == '3') // true, compare only value
console.log(3 === '3') // false, compare both value and data type
console.log(3 !== '3') // true, compare both value and data type
console.log(3 != 3) // false, compare only value
console.log(3 !== 3) // false, compare both value and data type

• علامت آمپرسَند ـ && ـ همه شروط درست باشن
• علامت پایپ ـ || ـ یکی از شروط درست باشه
• علامتِ نفی ـ ! ـ تبدیل درست به غلط و غلط به درست

// && ampersand
const check1 = 4 > 3 && 10 > 5 // true
const check2 = 4 > 3 && 10 < 5 // true
const check3 = 4 < 3 && 10 < 5 // false

// || pipe
const check4 = 4 > 3 || 10 > 5 // true
const check5 = 4 > 3 || 10 < 5 // true
const check6 = 4 < 3 || 10 < 5 // false

// ! negation
const check7 = 4 > 3 // true
const check8 = !(4 > 3) // false
const isLightOn = true
const isLightOff = !isLightOn // false
const isMarried = !false // true

شرط

خیلی وقتا نیاز داریم توی برنامه‌مون یه شرط بنویسیم؛ یعنی اگه یه چیزی true بود برنامه یه کاری برامون انجام بده و اگه false بود یه کار دیگه انجام بده؛ برای این کار می‌تونیم از کلیدواژه if استفاده کنیم و داخل پرانتز شرط رو بنویسیم، شرط می‌تونه شامل یه متغیر بولین باشه یا یه مقایسه (که باز هم در نهایت نتیجه‌ش یه بولیَنه)؛ بعد هم باید داخل {} بنویسیم که اگه شرط صادق بود چه اتفاقی قراره بیفته. اول همین صفحه، اولین مثالی که انجام دادیم شامل یه شرط بود. دقت کنید که چطور از if و else استفاده شده:

if(mouseIsPressed) {
     fill(0)
} else {
     fill(255)
}