การใช้ console.log ใน JavaScript

console.log เป็นคำสั่งพื้นฐานที่นักพัฒนา JavaScript ใช้บ่อยที่สุดในการ Debug โค้ด โดยจะแสดงข้อความหรือค่าต่างๆ ออกมาที่ Browser Console มาดูวิธีใช้งานกันครับ

แสดงข้อความพื้นฐาน

console.log('Hello World')
// Hello World

console.log(123)
// 123

console.log(true)
// true

แสดงหลายค่าพร้อมกัน

สามารถส่งค่าหลายตัวพร้อมกันโดยขั้นด้วยเครื่องหมายจุลภาค

console.log('Name:', 'John', 'Age:', 25)
// Name: John Age: 25

ใช้ร่วมกับตัวแปรและ Template literals

const name = 'John'
const age = 25

// แบบ Template literals
console.log(`Name: ${name}, Age: ${age}`)
// Name: John, Age: 25

// แบบใส่ตัวแปรโดยตรง
console.log('Name:', name, 'Age:', age)
// Name: John Age: 25

แสดง Object และ Array

const user = { name: 'John', age: 25, email: '[email protected]' }
console.log(user)
// { name: 'John', age: 25, email: '[email protected]' }

const fruits = ['apple', 'banana', 'orange']
console.log(fruits)
// ['apple', 'banana', 'orange']

Console หลายระดับ

นอกจาก console.log แล้วยังมี Console ในระดับอื่นๆ

console.info('ข้อมูลทั่วไป')      // แสดงสีน้ำเงิน/ธรรมดา
console.debug('ข้อมูล Debug')     // ใช้สำหรับ Debug
console.warn('คำเตือน')           // แสดงสีเหลือง
console.error('เกิดข้อผิดพลาด')   // แสดงสีแดง

แต่ละระดับจะแสดงสีที่แตกต่างกันใน Browser Console ทำให้แยกแยะประเภทข้อความได้ง่ายขึ้น

แสดง JSON เป็นตารางด้วย console.table

ถ้าต้องการแสดง Array of Objects ให้ดูง่ายขึ้น ใช้ console.table

const users = [
  { name: 'John', age: 25, email: '[email protected]' },
  { name: 'Jane', age: 30, email: '[email protected]' },
  { name: 'Bob', age: 22, email: '[email protected]' },
]

console.table(users)

จะแสดงผลเป็นตารางที่อ่านง่าย แทนที่จะเป็น Object ปกติ

วัดเวลาการทำงานด้วย console.time

ใช้วัดเวลาในการทำงานของโค้ด

console.time('ชื่อ Timer')

// โค้ดที่ต้องการวัดเวลา
let sum = 0
for (let i = 0; i < 1000000; i++) {
  sum += i
}

console.timeEnd('ชื่อ Timer')
// ชื่อ Timer: 5.123ms

จัดกลุ่มด้วย console.group

console.group('User Info')
console.log('Name: John')
console.log('Age: 25')
console.groupEnd()

ล้างหน้า Console

console.clear()

สรุป