var x = 1 // This is an example comment.

/* This is
an example
comment */
var y = 2

console.log('Hello world.')

// "Hello world."

console.time('do-100-loops')
for (var i = 0; i < 100; i++) {
  //
}
console.timeEnd('do-100-loops')

// do-100-loops: 0.035888671875ms

var myName = 'ball'
// var --> reserved word ไว้ประกาศตัวแปร
// myName --> variable name
// = --> assignment operator ไว้กำหนดค่าให้กับตัวแปร
// 'ball' --> ค่าที่กำหนดให้กับตัวแปรชื่อ myName

console.log(null === undefined); // false
console.log(null == undefined); // true
console.log(typeOf null); // "object"
console.log(typeOf undefined); // "undefined

var greeting = 'Hello world'
// หรือ
var greeting = 'Hello world'

// กรณีืที่มีปัญหาเช่น
var greeting = 'It's great to see you!'; // error
var respone = "Billy said, "I am sick""; // error

// ต้องใช้ ESCAPE CHARACTER มาช่วย
var greeting = 'It\'s great to see you!';
var respone = "Billy said, \"I am sick\"";

var greeting = "It's great to see you!"
greeting.length // 22

var x = 8
var y = '8'
x == y //true
x === y // false

var firstName = 'Somprasong'
var lastName = 'Damyos'
var fullName = firstName + ' ' + lastName // Somprasong Damyos

// Object Literal Natation Syntax: var object = {};
var person = {
  name: 'ball', // properties
  gender: 'male',
  age: 32,
  getInfo: function () {
    return 'Name ' + name + ', Gender ' + gender + ', Age ' + age + ' years.'
  }, // function
  extra: {
    value: 1,
  }, // object
}

// การเข้าถึง Object
// 1. ใช้ DOT NOTAION --> object.property = value;
var person2 = {}
person2.name = 'ball'
person2.gender = 'male'
person2.age = 32

// 2. ใช้ Bracket Notation --> object['property'] = value;
var person3 = {}
person3['name'] = 'ball'
person3['gender'] = 'male'
person3['age'] = 32

// จากตัวอย่างข้างบนมี person 3 คน เหมือนกัน สร้าง constructor ได้ดังนี้
// syntax: function Object() {}
function Person(name, gender, age) {
  // ใช้ P ตัวใหญ่, ใน () คือ parameters
  this.name = name // property = value;
  this.gender = gender
  this.age = age
}

// การนำไปใช้
var person1 = new Person('ball', 'male', 32)
var person2 = new Person('john', 'male', 33)
var person3 = new Person('jane', 'female', 23)

function Car(color){
  this.color = color;
}

Car.prototype.drive = function() {
  console.log("Drive a " + this.color + " car");
}

var redCar = new Car('red');
redCar.drive(); // "Drive a red car"

var buleCar = new Car('bule');
buleCar.drive(); // "Drive a red car"

// เมื่อใช้ new สร้าง redCar ขึ้นมาจาก Car ทำให้ redCar มี prototype เป็น Car.prototype
console.log(Object.getPrototypeOf(redCar) === Car.prototype); // true

// ถ้าต้องการตรวจสอบว่า object นั้นถูกจากมาจาก constructor function นั้น หรือไม่ ใช้ instanceOf
console.log(redCar instanceOf Car); // true

// ค่าแต่ละตัว เรียกว่า Elements
// ค่าแต่ละตัวจะมีการอ้างอิงตำแหน่งเริ่มจาก 0 เรียกว่า INDEX
var testScores = [72, 84, 68, 92, 74]

// elements แต่ละตัวใน array ไม่จำเป็นต้องมีชนิดข้อมูลเดียวกันก็ได้
var fishTank = ['glass', 10, 'gold fish', true]

// การใช้งาน
fishTank[0] //'glass'
fishTank[1] // 10

// เทียบกับ object
var fishTank = {
  material: 'glass',
  gallons: 10,
  fishType: 'gold fish',
  hasWater: true,
}

fishTank.material //'glass'
fishTank.gallons // 10

// [].methods()
var testScores = [72, 84, 68, 92, 74]

// stacks --> last in first out (LIFO)
testScores.pop()
testScores // [72, 84, 68, 92]

testScores.push(13)
testScores // [72, 84, 68, 92, 13]

testScores.push(55, 66, 77)
testScores // [72, 84, 68, 92, 13, 55, 66, 77]

// queues first in first out (FIFO)
testScores.shift()
testScores // [84, 68, 92, 13, 55, 66, 77]

var firstItem = testScores.shift()
firstItem // 84

testScores.unshift(77, 72)
testScores // [77, 72, 68, 92, 13, 55, 66, 77]

// syntax: array1.concat(array2, array3);
var bigDog = ['golden retriever', 'St. berrnard', 'german shepherd', 'bernese mountain dog']

var littleDog = ['terrier', 'weiner dog', 'corgie', 'pomeranian']

var allDogs = bigDog.concat(littleDog)
allDogs // ['golden retriever', 'St. berrnard', 'german shepherd', 'bernese mountain dog', 'terrier', 'weiner dog', 'corgie', 'pomeranian']

// reverse();
var reverseDogs = allDogs.reverse()
reverseDogs // ['pomeranian', 'corgie', ..., 'golden retriever']

// sort();
var alphaOrder = allDogs.sort()
alphaOrder // ['bernese mountain dog', 'corgie', 'german sheperd', ...]

// slice();
allDogs.slice(1, 4) // ['St. berrnard', 'german shepherd', 'bernese mountain dog']
allDogs.slice(-3, -1) // ['weiner dog', 'corgie']
allDogs.slice(3) // ['bernese mountain dog', 'terrier', 'weiner dog', 'corgie', 'pomeranian']

function functionaName(param1, param2, ..., paramN) {
  return [value]; // optional
}

function calculate(param1, param2) {
  return param1 * param2
}

// การเรียกใช้งาน
var result = calculate(2, 10)
console.log(result) // 20

// function expression
var calculate = function (param1, param2) {
  return param1 * param2
}

// การเรียกใช้งาน
console.log(calculate(2, 10)) // 20

// เนื่องจาก calculate เป็นตัวแปร ดังนั้นสามารถแก้ไขค่าได้
calculate = 100
console.log(calculate) // 100

var calculate = (function (param1, param2) {
  return param1 * param2
})(2, 10)

// การเรียกใช้งาน
console.log(calculate) // 20

// เปรียบเทียบกับการประกาศฟังก์ชันแบบปกติ
var greeting1 = function () {
  return 'Hello, everyone!'
}
// ต้องใส่ () ต่อท้ายด้วย
console.log(greeting1()) // "Hello, everyone!"
// IIFE
var greeting2 = (function () {
  return 'Hello, everyone!'
})()
// เรียกใส่งานได้เลยไม่ต้อใส่ ()
console.log(greeting2) // "Hello, everyone!"

var scope = 'public'
function checkScope() {
  var scope = 'private'
  console.log(scope)
}

checkScope() // "private"
console.log(scope) // "public"

// global scope
var height = 10

function volume() {
  // parent scope
  var width = 10
  var length = 10
  var volumeOfObject = function () {
    // child scope
    return length * width * height
  }
  // return value of function expression volumeOfObject
  return volumeOfObject()
}

volume() // 1000

// ตัวอย่าง function
// มองเห็นฟังก์ชันก่อนประกาศใช้งาน
myFunction() // "Hoisted"

function myFunction() {
  // มันจะย้ายไปอยู่บรรทัดแรก
  console.log('Hoisted')
}

myFunction() // "Hoisted"

// การประกาศตัวแปรแบบ var
function myFunction() {
  // สามารถมองเห็นตัวแปร value
  console.log(value) // undefined
  if (true) {
    var value = 100
    console.log(value) // 100
  }
  console.log(value) // 100
}

// เนื่องจาก javascript มันแปลงโค้ดไปเป็นแบบนี้
function myFunction() {
  var value // hositing
  console.log(value) // undefined
  if (true) {
    value = 100
    console.log(value) // 100
  }
  console.log(value) // 100
}

// การประกาศตัวแปรแบบ let และ const
function myFunction() {
  console.log(value) // ReferanceError เนื่องจากตัวแปร value มันจะถูกประกาศอยู่ใน if block เท่านั้น
  if (true) {
    let value = 100 // scope เริ่มจากจุดที่ประกาศใช้งาน
    console.log(value) // 100
  }
  console.log(value) // ReferanceError
}

// if
if (5 > 6) {
  // if true, run code here
  console.log('true condition')
  // if false, do not run this code block
}

// no code run

// else if
var testScore = 88
if (testScore > 90) {
  console.log('You got an A!')
} else if (testScore > 80) {
  console.log('You got a B!')
} else if (testScore > 70) {
  console.log('You got a C!')
} else {
  console.log('You failed')
}

switch (expression) {
  case x:
    // code block;
    break
  case y:
    // code block;
    break
  default:
  // code block;
}

while (condition) {
  statement
}

var i = 0
while (i < 3) {
  console.log(i++)
}
/* result
0
1
2 */

do {
  statement
} while (condition)

var i = 0
do {
  console.log(i++)
} while (i < 3)
/* result
0
1
2 */

for ([expr1]; [expr2]; [expr3]) {
  statement
}

// expr1 --> ใช้ประกาศค่าเริ่มต้นให้กับตัวแปร เพื่อใช้ในการนับจำนวนลูป
// expr2 --> ไว้ตรวจสอบว่าโปรแกรมวนลูปได้ครบตามจำนวนที่ต้องการแล้วหรือยัง ถ้าเป็นจริงจะเข้าไปทำงานใน for ถ้าไม่ก็จะจบการทำงานของ for
// expr3 --> เมื่อโปรแกรมทำงานคำสั่งสุดท้ายใน for เสร็จจะกลับมาที่ expr3 เพื่อใช้แก้ไขค่าของตัวนับใน expr1 จากนั้นก็จะไปตรวจสอบใน expr2 ใหม่อีกครั้ง

for (var i = 0; i < 3; i++) {
  console.log(i)
}
/* result
0
1
2 */

for (variable in obj) {
  statement
}

function Person(name, gender, age) {
  this.name = name
  this.gender = gender
  this.age = age
}
var person = new Person('ball', 'male', 32)
for (var key in person) {
  console.log(key + ' : ' + person[key])
}
/* result
"name : ball"
"gender : male"
"age : 32" */

// array
for (let i of [1, 3, 5]) {
  console.log(i)
}
/* result
1
3
5 */

// String
for (let i of 'hello') {
  console.log(i)
}
/* result
h
e
l
l
o */

for (var i = 0; i < 3; i++) {
  if (i <= 1) {
    continue
  }
  console.log(i)
}
/* result
  2 */

for (var i = 0; i < 3; i++) {
  if (i == 2) {
    break
  }
  console.log(i)
}
/* result
  0
  1 */

// ตัวอย่าง.ช้ lable กับ continue;
outer: for (var i = 0; i < 2; i++) {
  console.log('i: ' + i)
  for (var j = 0; j < 3; j++) {
    if (j == 1) {
      continue outer
    }
    console.log('j: ' + j)
  } // จบการทำงาน for
} // จบการทำงาน outer: for
/* result
  "i: 0"
  "j: 0"
  "i: 1"
  "j: 0" */

// ตัวอย่างใช้ lable กับ break;
outer: while (true) {
  for (var i = 0; i < 3; i++) {
    if (i == 1) {
      break outer
    }
    console.log('i: ' + i)
  } // จบการทำงาน for
} // จบการทำงาน outer: while

// result
// "i: 0"

var obj = {
  foo: function () {
    this.a = 1 // this สามารถใช้สร้างตัวแปรเพิ่มเข้าไปใน object ได้ด้วย
    console.log(this.a) // ใช้ this เรียกใช้งาน property อื่นใน object นี้ได้
  },
  bar: function () {
    this.foo() // ใช้ this เรียกใช้งาน method อื่นใน object นี้ได้
  },
}

obj.foo() // 1
obj.bar() // 1
console.log(obj.a) // 1

var number = {
  x: 11,
  y: 22,
}

var count = function () {
  console.log(this.x + this.y) // ใช้งาน this ในฟังก์ชันธรรมดา
}

count() // Nan เนื่องจากไม่มีค่า x, y

func.call(thisObj, arg1, arg2, arg3)

func.apply(thisObj, argsArray)

var bindFunc = func.bind(thisObj, arg1, arg2, arg3)

// แบบที่ 1
try {
  // โค้ดที่อาจมี error เกิดขึ้นได้
} catch (e) {
  // จัดการกับ error
}

// แบบที่ 2
try {
  // โค้ดที่อาจมี error เกิดขึ้นได้
} catch (e) {
  // จัดการกับ error
} finally {
  // สุดท้ายไม่ว่าจะเกิด error หรือไม่ก็ตามก็ต้องมาทำงานที่นี่เป็นลำดับสุดท้ายเสมอ
}

// แบบที่ 3
try {
  // โค้ดที่อาจมี error เกิดขึ้นได้
} finally {
  //
}

try {
  console.log(x); // เกิด error ตรงนี้
  x++; // ตรงนี้ไม่ทำงานเพราะข้ามไปจัดการ error ใน catch แล้วออกไปเลย
}catch(e) {
  console.log(typeOf e); // "object"
  console.log(e.message); // "x is not defined"
  console.log(e.name); // "ReferanceError"
}

console.log("Last statement");

/* Result
"object"
"x is not defined"
"ReferanceError"
"Last statement" */

try {
  throw "This is an error"; // ใช้ throw เพื่อโยน exception ออกมาเอง
  console.log("This is try"); // ไม่แสดงเพราะออกจาก try เข้า catch แล้ว
}catch (e) {
  console.log(e); // "This is an error"
}finally {
  console.log("This is finally"); // ต้องทำทำงานที่นี่ก่อนออกจากโปรแกรมเสมอ
}

console.log("Last statement");

/* Result
"This is an error"
"This is finally"
"Last statement" */

function foo(){
  try{
    return "This is try";
  }finally {
    console.log("This is finally"); // ก่อนจะ return ออกไปต่องมาทำงานในนี่ก่อนเสมอ
  }
}
console.log(foo());

/* Result
"This is finally"
"This is try" */

var count = 4
if (true) {
  var more = 1
}
console.log(count + more) // 5

let count = 4
if (true) {
  let more = 1
}
console.log(count + more) // error more undefined

var array = [];
for(var i = 0; i < 3; i++){
  array.push(function(){ console.log(i) });
}
array.forEach(function(printLog)){
  printLog();
}
/* Result
5
5
5
*/

var array = [];
for(let i = 0; i < 3; i++){
  array.push(function(){ console.log(i) });
}
array.forEach(function(printLog)){
  printLog();
}
/* Result
0
1
2
*/

let name = 'Ball'
let msg = `My name's 
"${name}".`
console.log(msg)
/* Result
"My name's
"Ball""*/

let a = 3.25,
  b = 10.5
console.log(`Price $${(a * b).toFixed(2)}`) // Price $34.13

// ES 5
var es5Func = function(value) {
  return value;
}
console.log(es5Func(123)) // 123

// ES6
let es6Func = (value) => {
  return value;
}
console.log(es6Func(123)) // 123

// แต่ถ้ามีพารามิเตอร์แค่ 1 ตัว ไม่ต้องใส่ () ก็ได้ และถ้าทำงานแค่ return ออกมา หรือทำงานบรรทัดเดียวก็ไม่ต้องใส่ {}
let arrowFunc = value => value;
console.log(arrowFunc(123)) // 123

// แต่ถ้าไม่มีพารามิเตอร์ต้องใส่ ()
let arrowFunc2 = () => console.log('Hello arrow fuction');
arrowFunc2(); // "Hello arrow fuction"

// ฟังก์ชันเปล่า
let arrowFunc3 = () => {};

// ถ้ารีเทิร์นเป็น object ต้องใส่ {} ครอบไว้เสมอ ไม่ใส่จะเกิด error
let arrowFunc4 = () = { {a:3, b:"abc"} };

// ตัวอย่างใช้ arrow function return arrow function
const log = level => message => console.log(`${level}: ${message}`);
/*เหมือนกับการเขียนแบบนี้
function log(level){
    return function(message){
        console.log(`${level}: ${message}`);
    }
}
*/
const debugLevel = log('DEBUG');
debugLevel('Test'); // DEBUG: Test

let iterateItem = (item, ...last) => {
  console.log(item)

  let result = 0
  let len = last.length
  for (let i = 0; i < len; i++) {
    result += last[i]
  }
  console.log(result)
}

iterateItem(1, 2, 3, 4, 5, 6)

/* Result
1
20
*/

// Math.max() จะรับค่าอากิวเมนต์กี่ตัวก้ได้ แต่จะไม่รับ array
// ถ้าต้องการส่งค่าจาก array ไป ต้องใช้ spread operator ช่วย
let vals = [100, 33, -55, 299, 44, 231]
console.log(Math.max(...vals)) // 299
// เหมือนกับการเขียน console.log(Math.max(vals[0], vals[1], vals[2], vals[3], vals[4], vals[5]));

let color = 'red'
let size = 20

let fontES5 = {
  color: color,
  size: size,
  myFunc: function (param) {
    console.log('Param: ' + param)
  },
}
console.log(fontES5.color) // "red"
console.log(fontES5.size) // 20
fontES5.myFunc('abc') // "Param: abc"

let fontES6 = {
  color,
  size,
  myFunc(param) {
    console.log(`Param: ${param}`)
  },
}
console.log(fontES6.color) // "red"
console.log(fontES6.size) // 20
fontES6.myFunc('abc') // "Param: abc"