என் Best Practices – JavaScript

1. Cache-ஐ முடக்குங்கள்

Firefox:
Developer Tools-ஐத் திறக்கவும் -> Settings-ஐத் திறக்கவும் (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Developer Tools-ஐத் திறக்கவும் -> Settings-ஐத் திறக்கவும் (F1) -> "Disable cache (while DevTools is open)"

2. JS console-ஐத் திறந்தே வையுங்கள்

Dev Tools-இல் Console tab-ஐத் திறந்து அப்படியே வைத்திருங்கள்; அப்போதுதான் படி 1 தொடர்ந்து செயல்படும், network மற்றும் JS பிழைகளும் உங்கள் கண்ணில் படும்.

இந்த plugin-ஐயும் பரிந்துரைக்கிறேன்; நீங்களே கவனிக்க மறந்தாலும், JS பிழைகளை இது இன்னும் சிறப்பாகக் காட்டும்:

3. JavaScript: கட்டாயம் படிக்க வேண்டியது “You Don't Know JS”

• You Don't Know JS (1st Edition)
• this-ஐ ஏன் தவிர்க்க வேண்டும் என்று விளக்குகிறது
• JS-இல் சில நேரங்களில் ஏன் விசித்திரமாகத் தோன்றும் விஷயங்கள் நடக்கின்றன என்று விளக்குகிறது (முக்கியச் சொற்கள்: Lexical Scope, Closures)

4. Semicolon

• எப்போதும் போடுங்கள்
• இது கட்டாயமில்லை, ஆனால் எடுத்துக்காட்டாக இந்தப் பொறியைத் தவிர்க்க உதவும்: Stack Overflow
• JavaScript தானாகவே semicolon-ஐச் சேர்க்கிறது:

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. Logical operator-கள் &&, ||

• Java-வில் a && b, a || b ஆகியவை Boolean இயற்கணிதப்படி evaluate செய்யப்படுகின்றன. a, b இரண்டும் Boolean-ஆக இருக்க வேண்டும்.
• JavaScript-இல்:
  • a && b-இல், a true என்றால் b return செய்யப்படும்
  • a || b-இல், a false என்றால் b return செய்யப்படும்

Expression-களையும் இப்படி இணைக்கலாம்; இதனால் சாத்தியமான மிகச் சிறிய if-statement கிடைக்கிறது – Syntax Sugar:

• isAdmin && showDeleteButton();
• (சரியாகச் சொன்னால், இது இனி ஒரு statement அல்ல)

Default மதிப்புகளுக்கும் இது அடிக்கடி பயன்படுத்தப்படுகிறது:

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. JavaScript pass-by-reference-ஆ, pass-by-value-ஆ?

JavaScript-இல் இது சுவாரஸ்யமானது. எடுத்துக்காட்டு:

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

இது பின்வரும் output-ஐத் தருகிறது:

10
changed
unchanged

obj1 ஒரு reference-ஆகவே இல்லாவிட்டால், obj1.item-ஐ மாற்றுவது function-க்கு வெளியே உள்ள obj1-ஐ எந்த விதத்திலும் பாதித்திருக்காது.

Argument ஓர் உண்மையான reference-ஆக இருந்திருந்தால், எல்லாமே மாறியிருக்கும்: num 100 ஆகியிருக்கும், obj2.item-இல் “changed” இருந்திருக்கும். மாறாக, num 10-ஆகவே இருக்கிறது, obj2.item “unchanged”-ஆகவே இருக்கிறது.

உண்மையில், அனுப்பப்படும் உறுப்பு value-ஆகவே அனுப்பப்படுகிறது. ஆனால் value-ஆக அனுப்பப்படுவது ஒரு reference. தொழில்நுட்ப ரீதியாக இது call-by-sharing என்று அழைக்கப்படுகிறது.

நடைமுறையில் இதன் பொருள்: parameter-ஐயே நீங்கள் மாற்றினால் (num, obj2 போல), function-க்கு அனுப்பப்பட்ட மூல object-ஐ அது பாதிக்காது. ஆனால் parameter-இன் உள் மதிப்புகளை மாற்றினால், அந்த மாற்றங்கள் நிலைத்திருக்கும் (obj1 போல).