Function Chaining Function Chaining คือการเรียกใช้ฟังก์ชันหลายฟังก์ชันในบรรทัดเดียวโดยใช้ Dot Notation ทำให้โค้ดกระชับและเพิ่มประสิทธิภาพ บทความนี้จะสอน Function Chaining ด้วย Regular Objects ก) ไม่ใช้ Function Chaining ในตัวอย่าง สร้างออบเจ็กต์ obj ที่มี property i เริ่มต้นที่ 0 และมีเมธอด add(),

เพื่อดึงส่วนของสตริง ใช้เมธอด string.substring() ใน JavaScript เมธอดนี้ช่วยดึงส่วนของสตริงที่อยู่ก่อนหรือหลังตัวอักษรเฉพาะได้ str.substring() เมธอดนี้จะตัดสตริงจากดัชนีเริ่มต้น (รวม) ถึงดัชนีสิ้นสุด (ไม่รวม) หากระบุดัชนีเดียว จะตัดสตริงทั้งหมดตั้งแต่ดัชนีนั้น รูปแบบที่ 1 - ดึงส่วนหลังตัวอักษร stri

ออบเจ็กต์ที่สร้างด้วย Object Literal เป็น Singleton หมายความว่าเมื่อมีการเปลี่ยนแปลงออบเจ็กต์ มันจะส่งผลต่อออบเจ็กต์ทั้งหมดในสคริปต์ ในขณะที่ออบเจ็กต์ที่สร้างด้วย Constructor Function การเปลี่ยนแปลงจะไม่ส่งผลต่อออบเจ็กต์อื่นๆ ในสคริปต์ 1) ออบเจ็กต์ที่สร้างด้วย Object Literal เนื่องจากเป็น Singleton

Global Namespace Pollution การประกาศ Variable/Function ใน Global Scope มากเกินไป → Name Collision (ชื่อซ้ำ) โดยเฉพาะโปรเจกต์ใหญ่/หลายทีม/หลาย Library ปัญหา: Name Collision ตัวอย่าง TeamA1.js function Student(fname, lname) { this.fname = fname; this.lname = lname; this.getFullName = function(

Event Bubbling (Bubble Phase) Event เริ่มที่ Target Element แล้ว ฟองน้ำ ขึ้นไปยัง Ancestors จนถึง Window (Default Behavior) ตัวอย่าง: Nested Elements (Div → Span → Button) <style> .styleClass { display: table-cell; border: 1px solid black; padding: 20px; text-align: center; } </style>

Flatten Array (ลึกลงไป) รวม Nested Arrays ทุกระดับให้กลายเป็น 1-D Array 1. Array.flat() (ES2019 - แนะนำ) <script> const arr = [1, 2, [2, 3, [4, 5, [6, 9]]]]; // Depth 2 console.log(arr.flat(2)); // [1, 2, 2, 3, 4, 5, 6, 9] // Infinite Depth console.log(arr.flat(Infinity)); //

Event Capturing (Capture Phase) Event Flow 3 Phases: Capture → Target → Bubble Capture Phase: Event ไหลจาก Root (Window) ลงมายัง Target Element Target Phase: Event ถึง Element ที่ Trigger Bubble Phase: Event ขึ้นจาก Target กลับไป Root addEventListener Phase Parameter element.addEventListene

Palindrome Checker (Alphanumeric Only) Palindrome = อ่านจากหน้าหลังได้เหมือนกัน (Ignore Case, Non-alphanumeric) ขั้นตอน Lowercase ทั้ง String ลบ Non-alphanumeric ด้วย Regex /[\W_]/g (\W = Non-word, _ = Underscore) Reverse String Compare กับ Original Implementation <script> functi

Title Case a Sentence แปลงคำแรกของทุกคำเป็น Uppercase ที่เหลือ Lowercase Algorithm Split String ด้วย Space: str.split( ) Lowercase ทุกคำ: word.toLowerCase() Uppercase ตัวแรก: word[0].toUpperCase() + word.slice(1) Join กลับ: words.join( ) Implementation word.charAt(0).toUpperCase() + wor

Insertion Sort Simple Comparison Sort O(n²) เหมาะสำหรับ Small Arrays หรือ Nearly Sorted Data เนื่องจาก Low Overhead และ Adaptive Algorithm เริ่มจาก Index 1 (ถือว่า Index 0 Sorted แล้ว) Key = Current Element เปรียบเทียบกับ Sorted Part (ซ้ายมือ) ย้าย Element ที่มากกว่า Key ไปขวา Insert Key ท

Split String เป็น Chunks ขนาด n วิธี 1: Regex (แนะนำ - Concise) function chunkString(str, size) { if (!str) return []; return str.match(new RegExp(`.{1,${size}}`, g)); } // Usage chunkString(tutorialspoint, 3); // [tut, ori, als, poi, nt] chunkString(tutorix, 2); // [tu, to, ri, x] วิธ

3 ระดับการป้องกัน Object (ES5) 1. Prevent Extensions - ป้องกันเพิ่ม Property ใหม่ <script> var obj = {prop1: 1}; Object.preventExtensions(obj); delete obj.prop1; // OK - ลบได้ obj.prop1 = 2; // OK - แก้ได้ obj.newProp = 3; // Fail (Strict: TypeError)

Non-enumerable Property Property ที่ ไม่แสดงในการ Iterate (for...in, Object.keys(), JSON.stringify) แต่เข้าถึงได้ปกติ การสร้างด้วย Object.defineProperty() <script> const person = {name: Gopal}; person.age = 21; person[country] = India; // สร้าง Non-enumerable Property Object.defi

Merge Object Properties แบบ Dynamic 1. Object.assign() (ES2015) Copy Properties จาก Source(s) ไป Target (Mutate Target) <script> const target = {a: ram, b: rahim}; const source = {c: akbar, d: anthony}; const returned = Object.assign(target, source); console.log(target); // {a:

Timers และ Memory Leak setTimeout() และ setInterval() เป็นสาเหตุ Memory Leak บ่อยที่สุด Object ที่ผูกกับ Timer ไม่ถูก GC จน Timer Expire/Clear ตัวอย่างปัญหา <script> for (var i = 0; i < 100000; i++) { var tiedObject = { callAgain: function() { var self = this; var

Set Object (ES6) Set เก็บค่า Unique ไม่ซ้ำกัน รองรับ Primitive และ Object ใดๆ จำลำดับ Insertion Order ไวยากรณ์ new Set([iterable]) ตัวอย่างพื้นฐาน console.log(`Value: ${v}`)); // Value: a // Value: b // Value: c // Value: d console.log(set1.size); // 4 console.log(set1.has(a)); //

Quick Sort - Divide and Conquer Quick Sort เลือก Pivot แบ่ง Array เป็น 2 ส่วน: น้อยกว่า Pivot และ มากกว่า Pivot แล้ว Recursive Sort แต่ละส่วน Implementation (Lomuto Partition) <script> function quickSort(arr) { if (arr.length <= 1) return arr; const pivot = arr[arr.length - 1];

Closure และ Memory Leak Closure: Inner Function ที่เข้าถึง Variable ของ Outer Function ได้ แม้ Outer Return แล้ว ตัวอย่างปัญหา <script> window.onload = function parentFunction(arg1) { var a = arg1; // Captured by Closure return function childFunction(arg2) { alert(a + +

Map vs WeakMap โครงสร้าง Key-Value คล้ายกัน แต่มีความแตกต่างสำคัญเรื่อง Garbage Collection และ Key Types ความแตกต่างหลัก FeatureMapWeakMap Key TypesAny (Primitive, Object)Object Only (No Primitive) GC BehaviorStrong Reference (กัน GC)Weak Reference (ไม่กัน GC) IterableYes (keys, values, en

MEAN.io vs MEAN.js ทั้งคู่เป็น Full-stack JavaScript Framework (MongoDB, Express, Angular, Node.js) แต่มีแนวทางต่างกัน ประวัติ MEAN.io: เริ่มโดย Amos Haviv (Israel) - Original MEAN.js: Fork จาก MEAN.io - Community Driven การเปรียบเทียบ FeatureMEAN.ioMEAN.js ScaffoldingCustom CLI (mean)Y