بیانیه ها در مقابل صداها • جاش دبلیو کومو

بنابراین، چند سال پیش من توسعه وب را در یک بوت کمپ کد نویسی محلی تدریس می کردم و یک دانش آموز این سوال را از من پرسید:

تفاوت بین “statement” و “expression” در جاوا اسکریپت چیست؟

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

هیچ چیز فروتن تر از آموزش نیست 😅 دانش آموزان در شناسایی “نقاط فازی” در درک ما مهارت دارند.

من از آن زمان متوجه شدم که این سوال است عالی مهم است. این یک ستون بتنی پشتیبان است که به شما کمک می کند تا دانش جاوا اسکریپت زیادی را حفظ کنید.

همین است به خصوص برای توسعه دهندگان React صادق است. بسیاری از آن قوانین JSX که باید به خاطر بسپارید و همیشه فراموش کنید که از آنها پیروی کنید، نتیجه این دوگانگی بیان/عبارت است.

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

در هسته خود، یک عبارت قطعه ای از کد جاوا اسکریپت است که یک مقدار تولید می کند.

به عنوان مثال، اینها همه عبارت هستند:

• 1 – تولید می کند 1

• "hello" – تولید می کند "hello"

• 5 * 10 – تولید می کند 50

• num > 100 – تولید می کند true یا false

• isHappy ? "🙂" : "🙁" – شکلک ایجاد می کند

• [1, 2, 3].pop() – اعداد را تولید می کند 3

عبارات می توانند شامل عبارات باشند. مثلاً چند عبارت در این کد JS می‌شماری؟ پس شما هم حدس بزنید نوار لغزنده را بکشید برای دیدن برجسته شدن هر کدام:

برنامه جاوا اسکریپت مجموعه ای از عبارات است. هر دستور دستوری برای کامپیوتر برای انجام کاری است.

در اینجا چند نمونه از عبارات جاوا اسکریپت آورده شده است:

if (hi > 10) {
  // More statements here
}

throw new Error('Something exploded!');

من دوست دارم به این موضوع فکر کنم: عبارات ساختار سفت و سختی هستند که برنامه ما را کنار هم نگه می دارند، در حالی که عبارات جزئیات را پر می کنند.

عبارات اغلب دارای «شاخه‌هایی» برای بیانیه‌ها هستند. ما می توانیم هر عبارتی را که دوست داریم در این اسلات ها قرار دهیم.

به عنوان مثال، اعلان یک متغیر دارای یک شکاف عبارت است:

let hi = /* some expression */;

می توانیم استفاده کنیم هر یک از عبارات قبلا در این اسلات دیدیم:

let hi = 1;
let hi = "hello";
let hi = 5 * 10;
let hi = num > 100;
let hi = isHappy ? "🙂" : "🙁";
let hi = [1, 2, 3].pop();

از نظر نحو معتبر، عبارات هستند قابل تعویض. اگر دستوری دارای یک شکاف عبارت باشد، می توانیم قرار دهیم هر نوع عبارت وجود دارد و کد اجرا خواهد شد. خطای نحوی دریافت نخواهیم کرد.

که گفت ما هنوز هم می توانیم با مشکلات دیگری مواجه شویم. به عنوان مثال، کد زیر از نظر نحوی معتبر است، اما اگر بخواهیم آن را اجرا کنیم، تب مرورگر را خراب می کند زیرا باعث ایجاد یک حلقه بی نهایت می شود:

while ("hello") {
  // Because “hello” never changes, this loop will
  // run over and over until the script crashes.
  // Syntactically valid, but still problematic.
}

پیوند به این عنوانیک ترفند کاربردی

می خواهید بدانید که آیا یک قطعه JS یک عبارت است یا یک عبارت؟ سعی کنید از سیستم خارج شوید!

console.log(/* Some chunk of JS here */);

اگر در حال اجرا باشد، کد یک است بیان. اگر با خطا مواجه شدید، این یک است بیانیه (یا احتمالاً JS نامعتبر).

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

این کار می کند زیرا همه آرگومان های تابع باید عبارت باشند. عبارات یک مقدار ایجاد می کنند و آن مقدار به تابع ارسال می شود. دستورات یک مقدار ایجاد نمی کنند و بنابراین نمی توانند به عنوان آرگومان تابع استفاده شوند.

حتی به عنوان یک توسعه دهنده با تجربه، من به یک تکیه می کنم لحن در console.log. این یک ابزار فوق العاده همه کاره است!

در اینجا یک عبارت است: 1 + 2 + 3.

چه اتفاقی می افتد اگر یک فایل JS ایجاد کنیم که فقط شامل این عبارت باشد؟ بیایید تصور کنیم محتوای زیر را به عنوان ذخیره کنیم test.js:

این فایل حاوی چند عصاره است؟ صفر یا یک؟

معامله این است: عبارات به خودی خود نمی توانند وجود داشته باشند. آنها هستند همیشه بخشی از یک بیانیه بنابراین در این مورد ما یک بیانیه داریم که به نظر می رسد:

عبارت اساساً خالی است به جز شکاف عبارت. بیان ما 1 + 2 + 3 آن شکاف را پر می کند و بیانیه ما کامل است.

به عبارت دیگر، تمام خطوط زیر عبارات معتبر هستند:

// Statement 1:
let hi = /* expression slot */;

// Statement 2:
return /* expression slot */;

// Statement 3:
if (/* expression slot */) { }

// Statement 4:
/* expression slot */;

اغلب، درس ها ادعا می کنند که عبارات عبارت هستند، اما این کاملاً صحیح نیست. عبارات و عبارات چیزهای متفاوتی هستند. اما می توان بدون ارائه کاراکترهای اضافی، عملگر را در اطراف یک عبارت قرار داد. مانند پیچیدن یک ساندویچ در بسته بندی شفاف شرینک به آن فکر کنید.

عبارات معمولاً با نقطه ویرگول پایان می یابند که پایان عبارت را نشان می دهد. نقطه ویرگول برای برخی عبارات ضروری نیست، مانند if اظهارات، while حلقه ها و اعلان های تابع

اگر قبلاً با React کار کرده اید، احتمالاً می دانید که بریس های فرفری ({ و }) به ما اجازه می دهد تا قطعات جاوا اسکریپت را در JSX خود جاسازی کنیم، مانند این:

function CountdownClock({ secondsRemaining }) {
  return (
    div>
      Time left:
      {Math.round(secondsRemaining / 60)} minutes!
    div>
  );
}

این بخشی از چیزی است که React را بسیار جادویی می کند. ما قدرت کامل جاوا اسکریپت را در اختیار داریم.

اما یک گرفتاری وجود دارد – ما نمی توانیم آن را قرار دهیم هر نوع جاوا اسکریپت در بریس های مجعد. به طور خاص، ما فقط می توانیم شامل شود عبارات، نه اظهارات بریس های مجعد اساساً یک اسلات عبارت در JSX خود ایجاد کنید.

اگر بخواهیم a را جاسازی کنیم بیانیه در اینجا، به عنوان یک عبارت if/else، یک خطا دریافت خواهیم کرد:

function CountdownClock({ secondsRemaining }) {
  return (
    // 🚫 Throws a SyntaxError
    div>
      {if (secondsRemaining > 0) {
        `${secondsRemaining} seconds left`
      } else {
        "Time expired!"
      }}