เทคนิค JavaScript 2 : สร้าง scope อย่างมีขอบเขต

การสร้าง scope ใน JavaScript มี วิธีเดียวคือ สร้าง function

scope คือ ขอบเขต
การสร้าง scope คือการสร้างขอบเขต
ขอบเขตทำให้ code นอก scope ไม่เห็นตัวแปรใน scope

function foo () {
   var x = 'hi';
}
x; // error : x is not defined

scope foo ทำให้ code ข้างนอกไม่รู้จัก x
นั่นคือ x เป็น local variable ของ foo

💥 for-loop, while-loop, if, else ไม่ได้สร้าง scope 

if (true) {
   var x = 'hi';
}
x; // hi

ถึงจะประกาศ x ใน if แต่ code ข้างนอกก็ยังเห็น x
📢 เพื่อป้องกันความสับสน ควรประกาศตัวแปรทั้งหมดที่บรทัดแรกของ function

JavaScript มี global scope หรือเรียกว่า window scope
การประกาศตัวแปรลอยๆ นอก function เป็นการสร้างตัวแปรให้ global scope

var x = 'hi';
x;                // hi
window.x;  // hi
this.x;         // hi

y = 'bye';     // ไม่มี var ให้ผลเหมือนกัน
y;               // bye
window.y;  // bye
this.y;        // bye

📢 ไม่ควรประกาศตัวแปรนอก function
เพราะมันจะเป็น global variable และอาจไปซ้ำกับโค้ดอื่นที่อยู่ในเพจ

ถ้าจำเป็นต้องสร้าง global variable แนะนำให้ใช้ namespace คู่กับ IIFE
namespace ควรเป็นชื่อบริษัท ทีม หรือโปรเจ็กที่กำลังทำอยู่

(function (ns) {
   ns.theme = "dark";
})(window.wonderProject = window.wonderProject || {});

window.wonderProject.theme;  // dark

ดูวิธีอื่นๆ ได้ ที่นี่

📢 ไม่ควรสร้างตัวแปรใน function โดยไม่ใช้ var
เพราะเมื่อ function ทำงาน จะเป็นการสร้างตัวแปรที่ global scope

function foo() {
   z = 'Oh';
}
foo();

z;                // Oh
window.z;  // Oh
this.z;         // Oh

z สร้างครั้งแรกใน function
แต่เพราะไม่ใช้ var ทำให้มันเป็นตัวแปรของ global (window) ไป
อันตรายเพราะอาจเกิด bug ได้

สรุป

1. สร้าง scope ทำโดยใช้ function เท่านั้น
2. for, while, if, else ไม่สร้าง scope
3. ประกาศตัวแปรทั้งหมดตั้งแต่บรรทัดแรกของ function
4. ใช้ namespace คู่กับ IIFE ถ้าต้องการสร้างตัวแปรที่ global scope (window scope)

blog หน้าผมจะอธิบาย JavaScript closure ครับ 😃

บทความน่าสนใจ
เทคนิค JavaScript 1 : "use strict" ทำไม และ อย่างไร ?
Soft Skills 1 : Agile ก็เท่านั้น ถ้าไม่มีใครฟังเราพูด !

Soft Skills 2 : พักโค้ดสักนิด คุยกันสักหน่อย

อ่านบทความนี้ Soft Skills 1 : Agile ก็เท่านั้น ถ้าไม่มีใครฟังเราพูด ! ก่อนนะครับ

ถึงแม้งานของโปรแกรมเมอร์ คือ การเขียนโค้ด
การสื่อสารกับผู้อื่นก็สำคัญต่อทำงานมาก

เป้าหมาย ✅

ทีมควรมีเป้าหมาย และทุกคนในทีมควรเข้าใจตรงกัน
สิ่งนี้ช่วยให้การทำงานร่วมกันง่ายขึ้น
ลดการทำงานนอกลู่นอกทาง

ตัวอย่าง

เป้าหมายของทีม TigerTech คือ พัฒนาประสบการณ์การใช้เว็บอย่างต่อเนื่อง โดยให้ developer ใช้ Java  technology เพื่อสร้างเว็บ AJAX ที่ใช้งานได้กับทุก browser 

เป้าหมายที่ชัดเจนช่วยลดข้อขัดแย้ง และการโต้เถียงที่ไม่จำเป็นในทีม

ประชุม 🕙

1. ตอนทำอะไรใหม่ๆและต้องการความเห็นคนอื่นตอนประชุม ถ้าเป็นไปได้ไม่ควรเชิญเกิน 5 คน

มีคนมากไปจะทำให้ความเห็นกระจาย

2. เชิญคนที่จำเป็นเท่านั้น

3. บอกรายละเอียดให้ทุกคนก่อนประชุม

4. เวลาประชุมควรเป็นก่อนเที่ยง หรือใกล้เลิกงาน เผื่อไม่ให้ประชุมยืดเยื้อ 

5. ปิดประชุมทันที ถ้าได้ข้อสรุปแล้ว

เทคนิคสำคัญ 💊

1. อย่าขอความเห็นทางอีเมล์ ใช้อีเมล์แจ้งเรื่องที่ได้ข้อสรุปแล้ว 

2. ใช้ bug tracker เพื่อกระตุ้นให้คนแก้ bug ตามกำหนดเวลา

3. code comment ควรบอกว่าทำทำไม ไม่ใช่ทำอะไรเพราะมันดูจากโค้ดได้

4. เปลี่ยนโค้ดทีละนิดถ้าทำได้ เพื่อจะได้รีวิวง่าย

5. ตอนเขียนโค้ดนึกถึงคนอ่านด้วย อย่าสนแค่ทำงานได้

ต่อ blog หน้าครับ 😁

ออสเตรีย เชก 10 วัน 20 เบียร์

Soft Skills 1 : Agile ก็เท่านั้น ถ้าไม่มีใครฟังเราพูด !

ตอนนี้หลายบริษัทนำ Agile มาใช้ เช่น scrum, kanban
แต่มีบางอย่างที่หนังสือหรือคอร์ส Agile ไม่ได้สอน คือ การทำงานเป็นทีม !

การทำงานเป็นทีม คือ พื้นฐานของทุกอย่าง ไม่ว่าจะเป็น waterfall, agile, pair programming
การทำงานเป็นทีมควรเป็นบทที่ 1 ของหนังสือ Agile ทุกเล่ม

ผมได้อ่านหนังสือ Team Geek 
ผู้เขียนเป็นผู้บริหารและวิศวกรระดับสูงของ Google รวมทั้งเป็นผู้สร้าง Subversion
คนที่ต้องการประสบความสำเร็จในอาชีพไม่ว่าอาชีพใดๆ ต้องอ่าน !

ถ้าไม่มีเวลาอ่านภาษาอังกฤษ ผมจะย่อยให้ 😊
เริ่มเลย !

H-R-T

หัวใจ (HeaRT) ของการทำงานเป็นทีม คือ

• Humility - ถ่อมตน
• Respect - ให้เกียรติ
• Trust - เชื่อถือ

ดูง่ายมากและพื้นฐานมากๆ

แต่ปัญหาความขัดแย้งในทีมเกือบทั้งหมด มีต้นเหตุมาจากการขาดอันใดอันนึงไป

คุณคิดว่าจริงไหม

เวลาเขียนโปรแกรมสิ่งที่ต้องจำคือ

"You are NOT your code"

"You are NOT your code"

"You are NOT your code"

("and your coworkers are not their code, too")

เคยไหมเวลามีคนวิจารณ์งานเรา แล้วรู้สึกแย่หรือเคือง

จงท่องไว้ "เราคือเรา งานคืองาน" ("You are NOT your code")

เคยไหมเห็นคนอื่นทำงาน แล้วรู้สึกอยากวิจารณ์หรือให้คำแนะนำ

จำไว้ว่า งานเขาไม่ใช่ตัวเขา ("Your coworkers are not their code, too")

กฎข้อแรกของการให้คำแนะนำ คือ ต้องแน่ใจก่อนว่าผู้นั้นต้องการคำแนะนำจากเราและฟังเรา

ถ้าไม่แน่ใจก็อย่าทำ 

การให้คำแนะนำโดยที่เขาไม่อยากได้ จะทำให้เกิดปัญหาตามมา

ทีนี้ถ้าแน่ใจว่าผู้นั้นฟังเราและต้องการคำแนะนำ เราควรพูดอย่างไร

สมมติ คุณกำลัง  review code ให้เพื่อนร่วมงาน

BAD
เธอเขียนโค้ดผิดที่ตรงนี้ เธอควรเขียนแบบ ABC style เหมือนคนอื่นๆในทีม

GOOD
ผมไม่ค่อยเข้าใจโค้ดส่วนนี้ครับ  ผมคิดว่าถ้าเขียนแบบ ABC style อาจจะทำให้โค้ดอ่านง่ายขึ้นนะครับ

เห็นความแตกต่างไหมครับ
ข้อความแรกเน้นที่ตัวบุคคล เหมือนกำลังบอกว่าเขาทำผิด
ข้อความหลังเน้นที่ตัวงาน ไม่ได้บอกว่าใครผิดหรือถูก

ถ้าเราเป็นฝ่ายได้รับคำแนะนำล่ะ เราควรทำอย่างไร
การยอมรับว่าทำผิดหรือทำไม่ได้ เป็นทางที่ดีที่สุดครับ

เมื่อคนอื่นเห็นว่าคุณไว้ใจเขา เคารพเขา ฟังความเห็นเขา
คุณจะได้สิ่งนั้นเป็นการตอบแทนจากคนอื่นด้วย 😊

ยังไม่หมดนะครับ มีต่อ blog หน้า
ขอทิ้งท้ายด้วย quote จากหนังสือ

Sometimes the best thing you can do is just to say, "I don't know"

เทคนิค JavaScript 1 : "use strict" ทำไม และ อย่างไร ?

JavaScript ถูกคิดค้นขึ้นในปี 1995
ด้วยความนิยมจึงมีหน่วยงานกลางมากำหนดมาตรฐานที่เป็นทางการเพื่อให้มันทำงานเหมือนกันในทุก browser 
หน่วยงานนั้นก็คือ ECMA 
นั่นคือเหตุผลว่า บางครั้งคนเรียก JavaScript ว่า ECMAScript (ES) นั่นเอง 😮

ECMAScript ผ่านการปรับปรุงมาหลายครั้ง ครั้งสำคัญคือ version ปี 1999 หรือ ES3
browser ส่วนใหญ่ทำ JavaScript ให้มีพฤติกรรมตาม ES3 มากที่สุด
(ECMAScript เป็นมาตรฐานกลาง แต่ browser จะทำตามหรือเปล่านั้นเป็นอีกเรื่องนึง 😕)
มี JavaScript บาง feature ที่ไม่มีใน ES แต่ browser แต่ละเจ้าคิดกันเอง และมีวิธี code แตกต่างจาก browser อื่นๆ จึงเป็นปัญหาต่อมา

การเปลี่ยนแปลงครั้งสำคัญถัดมา คือ ES5 ปี 2009 
ES5 เพิ่ม feature ใหม่ๆ มากมาย 
บาง feature ก็มีอยู่แล้วในบาง browser แต่กำหนดให้เป็นมาตรฐานมากขึ้น

ปัญหาใหญ่ของ JavaScript คือ feature ที่ไม่ใช่มาตรฐาน บาง browser ก็ใช้ได้ บาง browser ก็ไม่ได้ และถึงแม้จะใช้ได้ก็อาจทำงานไม่เหมือนกัน 
เช่น

const myName = "James";
myName = "Bob !";
myName; // "James"

นั่นคือ const ไม่ยอมให้เปลี่ยนค่าเริ่มต้น
แต่ !!
บาง browser ยอมให้เปลี่ยน

const myName = "James";
myName = "Bob !";
myName; // "Bob !"

JavaScript มีมานาน การจำว่า feature ไหนเป็นมาตรฐานหรือไม่ ควรใช้หรือไม่ เป็นเรื่องน่าปวดหัวของโปรแกรมเมอร์สุดๆ 
ด้วยเหตุนี้จึงมีกรณีที่ web app ทำงานถูกใน Chrome แต่พังใน IE (Internet Explorer) บ่อยๆ

ES5 พยายามแก้ปัญหานี้โดยใช้ strict mode
strict mode ไม่ยอมให้มี JavaScript code ที่ใช้ feature ที่เป็นปัญหา
โปรแกรมเมอร์สามารถใช้ strict mode โดยเพิ่ม string พิเศษเข้าไปใน JavaScript code

"use strict";

 ถ้าอยากใช้กับบาง function ก็ทำได้ตามด้านล่าง

function foo(x) {
             "use strict";
          //..
}

บาง browser อาจใช้ strict mode ไม่ได้ ซึ่งไม่เป็นปัญหา เพราะมันจะมอง "use strict" เป็น string ธรรมดา

browser ที่ใช้ strict mode ได้ จะมี error กับ code ด้านล่าง

function foo(x) {
             "use strict";
          var arguments = []; // error: redefinition of arguments
          //..
}

strict mode ไม่ยอมให้ตั้งชื่อตัวแปรว่า arguments เพราะทุก function มีตัวแปร arguments ซ่อนอยู่ การตั้งชื่อซ้ำจะไปทับค่าเดิม ดู ตัวอย่าง

ตำแหน่งของ "use strict" ก็มีประเด็นอยู่ เราควรวางมันใน function หรือข้างนอกดี
คำแนะนำคือไว้ข้างในดีกว่า  มาดูเหตุผลกัน 👇

โปรเจคส่วนใหญ่มี js file หลายไฟล์ แต่เวลา deploy ที่ production จะรวมไฟล์ทั้งหมดเป็นไฟล์เดียว เรียกว่า script concatenation เพื่อลดการ request js ไฟล์จาก browser และทำให้ web page โหลดเร็วขึ้น
สมมติมี 2 ไฟล์ file1.js และ file2.js

// file1.js
"use strict";
function foo() {
     //...
}
//..

และ

// file2.js
// ไม่ใช้ strict mode
function bar() {
      var arguments = [];
}
//..

ทีนี้ตอนรวมไฟล์ ถ้า file1.js มาก่อน จะเกิด error

// file1.js 
"use strict";
function foo() {
     //...
}
//..
// file2.js 
// ไม่ใช้ strict mode
function bar() {
      var arguments = []; // error: redefinition of arguments
}
//..

ไฟล์ file1.js มาก่อนและใช้ strict mode ทำให้ส่วนของ file2.js เป็น strict mode ไปด้วย ทำให้เกิด error ขึ้น
วิธีแก้คือทุกไฟล์ใช้ strict mode ให้หมด

แต่ !! 😬
ถ้าต้องรวมไฟล์ของ third-party library เข้าไปด้วยล่ะ เช่น open-source library 
เราไม่สามารถควบคุม third-party code ให้ใช้ strict mode ได้
วิธีแก้คือ ใช้เทคนิค immediately invoked function expression (IIFE)
นั่นคือ ห่อ code ของทั้ง file1.js และ file2.js ด้วย function ด้านล่าง

(function() {
   // code file1.js หรือ file2.js
})();

เมื่อรวมไฟล์แล้วจะได้ผลตามด้านล่าง

(function() {
   // file1.js 
   "use strict";
   function foo() {
         //...
   }
   //..
})();
(function() {   
   // file2.js 
   // ไม่ใช้ strict mode
   function bar() {
       var arguments = [];
   }
   //..
})();

เท่านี้โค้ดของ file1.js และ file2.js จะอยู่ในโลกของตัวเองถึงแม้จะรวมเป็นไฟล์เดียวกันแล้วก็ตาม

สรุป

1. ใช้ strict mode เสมอ
2. ห่อโค้ดในแต่ละไฟล์ด้วย IIFE

Enjoy coding !! 😃

บทความน่าสนใจ
Soft Skills 1 : Agile ก็เท่านั้น ถ้าไม่มีใครฟังเราพูด !