یکی از ویژگی های پرکاربرد که سال ها قبل به #ES2015 اضافه شد و بیشتر موتورهای #javascript و مرورگرها ساپورت می کنند، معرفی Template literals بود. رشته هایی (string) که با استفاده از کاراکترهای `` بجای " یا ' تعریف می کنیم. با استفاده از این ویژگی می تونیم رشته ها را قالب بندی کنیم و رشته های چند سطری داشته باشیم:
var name = 'foo';
console.log(
`Go to the next two lines

print ${name}!`);

// Output:
Go to the next two lines

print foo!

#سطح_مبتدی

Tag Functions - #javascript

امکان پیشرفته تری که Template literals فراهم می کنند، قابلت Tagged templates هستند. تگ ها امکان پارس کردن template literals را از طریق توابع (Tag functions) فراهم می کنند.
نحوه صدا زدن این توابع فرق می کنند ( بدون پرانتز) و مقدار ورودی این تابع به این شکل پارس میشه: پارامتر اول آرایه ای از مقدار رشته ها (strings) و پارامترهای یعدی متغیر های استفاده شده در رشته هستند:

let Person = {
  name: 'foo',
  age: 30
};

function tag(str,name, age) {
  console.log('output:');
  console.log(str[0]);
  console.log(str[1]);
  console.log(name);
  console.log(age);
};

let {name, age} = Person;

/*
  Tagged template is a function call
  that get its arguments from a
  template literal.
*/
tag`Name: ${name}, age:${age}`;

// output:
// Name:
// , age:
// foo
// 30

#سطح_پیشرفته

روش ساده تر برای حذف یک آیتم از آرایه با حفظ #immutability در #javascript

const newArr =
[...arr.slice(0, index),
...arr.slice(index + 1)];

#سطح_متوسط #immutable

این #تیپ‌کد خیلی ساده است و احتمالا همه شما آن را میدانید. اما برای توضیح تیپ کد بعدی لازمه که ذکر شود.
کد زیر را ملاحظه کنید:

$arr = array(1, 2, 3);
foreach ($arr as $item) {
    $item += 100;
}
print_r($arr);

خروجی:

Array ( 1, 2, 3 )

در #php حلقه #foreach اطلاعات را در متغییر item$ کپی میکنند. پس با تغییر دادن item$ تغییری در آریه اصلی اتفاق نخواهد افتاد.
اگر قصد دارید که کد فوق در آرایه اصلی تغییر ایجاد کند باید از عملگر & استفاده کنید تا اطلاعات ByRef به item$ پاس داده شود:

$arr = array(1, 2, 3);
foreach ($arr as &$item) {
    $item += 100;
}
print_r($arr);

خروجی:

Array ( 101, 102, 103 )

در پست بعدی مشکلی که در استفاده از این روش اتفاق خواهد افتاد را ذکر میکنیم
#بک‌اند #سطح_مبتدی

مشکلی که در استفاده ByRef از حلقه foreach به وجود می‌آید این است که متغییر item$ بعد از خروج از حلقه، همچنان به آخرین عنصر آرایه اشاره دارد و هر تغییر در آن منجر به تغییر در آرایه اصلی میشود.

$arr = array(1, 2, 3);
foreach ($arr as &$item) {
    $item += 100;
}
$item = 0;
print_r($arr);

خروجی:

Array ( 1, 2, 0 )

یکی از مواردی که سهوا اتفاق می‌افتد و تیم برنامه نویسی ما نصف روز درگیر رفع این مشکل بود، استفاده از یک حلقه دیگر اما بدون علامت & است:

$arr = array(1, 2, 3);
foreach ($arr as &$item) {
    $item += 100;
}

foreach ($arr as $item){...}

print_r($arr);

خروجی:

Array ( 101, 102, 102 )

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

unset($item);

#بک‌اند #php #سطح_پیشرفته

بدون استفاده از علامت جمع چطور دو عدد رو با هم جمع کنیم؟
first -=- second

@TipCode

از این به بعد بجای ++i از i-=-1 استفاده کنیم؟!

اگر خواستید حداقل یک جای کدتون با برنامه نویس ارشد فرق داشته باشه 😁

#سطح_مبتدی #fun

سریع‌ترین راه تبدیل Float به Int

console.log( 12.9 | 0); // 12
console.log(-12.1 | 0); //-12

console.log(~~12.1); //12
console.log(~~-12.1); //-12

#javascript ‏#سطح_متوسط

زمانی که نیاز به تقسیم صحیح دارید

console.log((13 / 5) | 0) // 2

@TipCode

با این کد ساده، پاس دادن مقدار برای پارامترهای تابع را در ‎#javascript اجباری کنید!

const isRequired = (argName) => {
  throw new Error(`|${argName}| is a required arg!`);
};

استفاده
const aFunc = (name = isRequired('name')) => { /* body */ };


نتیجه

// Error: name is a required arg!

aFunc();
aFunc(undefined);

// No error
aFunc('TipCode');
aFunc(null);

@TipCode

اپراتور "<--" در ‎#javascript چه کاری میکنه؟!

let x = 10;
while(x --> 0)
console.log(x);


با استفاده از امکان space بین اپراتورهای ++ , -- و اپرند، <-- فقط تلفیق دو اپراتور -- و < هست.

بعضی از دولوپرها از این شکل استفاده می کنند چون علامت <-- از نظر بصری مثل اشاره گر به عدد انتهایی هست.

const name = 'foo', family = 'bar';

برای راحت دیباگ کردن از Object Initializer استفاده کنید:

console.log({name, family});

بجای:

console.log(`name: ${name}, family: ${family}`);

#javascript

اگر در ‎#vuejs نیاز دارید که تمام props را به یک کامپوننت دیگه پاس بدین!

خیلی کاربردیه زمانی که از یک کامپوننت بعنوان wrapper برای یک کامپوننت دیگه استفاده می کنید.
<template>
<child v-bind="$props"/>
</template>
بجای:
<template>
<child
:prop1="prop1"
:prop2="prop2"
.
.
.
/>
</template>

مشابه با این تیپ ولی برای پاس دادن تمام event listeners از یک کامپوننت (parent) به زیرکامپوننت (child component)
<template>
<child v-on="$listeners"/>
</template>

#vuejs

یک راه دیگه:

y = [x, x = y][0];

#javascript

با فرض این آرایه

let arr = [1,2,3,...,999];

با استفاده از ‎#object_destructuring

const {0: first,
    10: tenth,
    50: fiftieth,
    1000: thousandth = 1000} = arr;

بجای این دستورات:
const first = arr[0],
tenth = arr[10],
fiftieth= arr[50],
thousandth = arr[1000] || 1000;

#javascript

و با استفاده از ‎#computed_property_names کد های مختصر و بهتری تولید میشه:

const {length: len,
  [len / 2 | 0]: mid = 0,
  [len - 1]: last } = arr;

بجای:
const len = arr.length,
mid = arr[parseInt(arr.length / 2)] || 0,
last = arr[arr.length - 1];

#javascript

ویژگی Logpoints که جدیدا به chrome #DevTools اضافه شده کمک میکنه بدون استفاده ‎console.log در کنسول لاگ کنید.

ویژگی کاربردی تر اینه که با reload کردن صفحه هم لاگ‌پوینت های ست شده باقی می مونن (جهت trace و دیباگ کد روی load صفحه)

اگر مثل من زیاد به خوندن خروجی ها در قالب JSON نیاز دارید، jsoncrack به شما کمک زیادی در visualize کردن دیتا می کنه

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

https://jsoncrack.com