Operator || ใน Var Statement ของ JavaScript ทำหน้าที่อะไร

|| (Logical OR) ใน Variable Declaration ใช้สำหรับ Default Value Pattern (ก่อน ES2020 Nullish Coalescing)

ตัวอย่างจากบทความ

<html>
  <body>
    <script>
      var a = true;
      var b = false;
      document.write("(a || b) => ");
      result = (a || b);
      document.write(result); // true
    </script>
  </body>
</html>

Default Value Pattern (Common Idiom)

// รับค่าจาก config, environment, หรือ default
var config = userConfig || defaultConfig || {};

// Function parameter default (Pre-ES6)
function greet(name) {
  name = name || 'Guest';
  console.log('Hello ' + name);
}

// Object property default
var options = {
  timeout: opts.timeout || 5000,
  retries: opts.retries || 3,
  debug: opts.debug || false
};

ปัญหาของ || Pattern

จับ Falsy Values ทั้งหมด ไม่ใช่แค่ null/undefined:

ES2020 Solution: Nullish Coalescing (??)

// แทน name = name || 'Guest'
name = name ?? 'Guest'; // เฉพาะ null/undefined

// ตัวอย่างที่ชัดเจน
function createServer(config = {}) {
  const port = config.port ?? 3000;      // 0 เป็น valid port!
  const host = config.host ?? 'localhost';
  const ssl = config.ssl ?? false;       // false เป็นค่าที่ตั้งใจ!
  const timeout = config.timeout ?? 5000; // 0 = no timeout
  
  return { port, host, ssl, timeout };
}

createServer({ port: 0, ssl: false, timeout: 0 });
// { port: 0, host: 'localhost', ssl: false, timeout: 0 } ✓

Short-Circuit Evaluation

// || หยุดที่ truthy แรก
let a = 0;
let b = a || computeExpensive(); // เรียก computeExpensive() เพราะ 0 เป็น falsy

// ?? หยุดที่ null/undefined แรก
let c = 0;
let d = c ?? computeExpensive(); // ไม่เรียก computeExpensive() เพราะ 0 ไม่ใช่ null/undefined

Logical OR Assignment (||=) - ES2021

// x ||= y เทียบเท่า x || (x = y)
// กำหนดค่าเฉพาะเมื่อ x เป็น falsy
let count = 0;
count ||= 10; // count = 10 (เพราะ 0 falsy)

let name = 'John';
name ||= 'Guest'; // name = 'John' (ไม่เปลี่ยน)

// ใช้กับ property
obj.prop ||= defaultValue;

Nullish Coalescing Assignment (??=) - ES2021

// x ??= y เทียบเท่า x ?? (x = y)
// กำหนดค่าเฉพาะเมื่อ x เป็น null/undefined
let count = 0;
count ??= 10; // count = 0 (ไม่เปลี่ยน เพราะ 0 ไม่ใช่ null/undefined)

let name = null;
name ??= 'Guest'; // name = 'Guest'

สรุป