Chapter2.md

บทที่ 2 ทบทวนเบื้องต้น

คอมเมนต์

var x = 10; 	//This is an example.

/* This is an example
ECMAScript 6 is very easy*/
var x = 10;

console.log()

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello, world!</h1>
<script>		
             console.log("Hello, world!");
</script>
</body>
</html>

console.log("Hello world", 122, 333.333); // "Hello world 122 333.333"

debugger

console.log("line 1");
debugger;			// บรรทัดนี้จะเป็นตำแหน่งของ breakpoint เพื่อหยุดการทำงานชั่วขณะ ตอนดีบั๊กโปรแกรม
console.log("line 2");

การตั้งชื่อ

var _ = 100;		// ตั้งชื่อแบบนี้ได้
var $ = 100;		// ตั้งชื่อแบบนี้ได้
var _a =100; 		// ตั้งชื่อแบบนี้ได้
var $a =100; 		// ตั้งชื่อแบบนี้ได้
var Abc = 100;	// ตั้งชื่อแบบนี้ได้
var abc = 100;	// ตั้งชื่อแบบนี้ได้ แต่ทว่าตัวแปร Abc กับ abc จะถือว่าคนละชื่อกัน 
var a0123 = 100;	// ตั้งชื่อแบบนี้ได้
var 9b = 100;		// ทำไม่ได้ มันจะเกิด SyntaxError เพราะมีเลข 9 นำหน้าชื่อตัวแปร

การประกาศตัวแปร

var  x = 100;

var  x = 1, y = 2, z = 3;	// ประกาศตัวแปร x, y และ z ให้อยู่ในบรรทัดเดียวกัน

var  x= 1,  y = x;
/* จะเสมือนเขียนซอร์สโค้ดแบบนี้
var x = 1;
var y = x;
*/

var x; 	    
console.log(x); 	// undefined

การประกาศตัวแปรโดยไม่มี var

x = 1;

console.log(x);	// ReferenceError

ไดนามิกไทป์

var foo = 42;    	// เริ่มต้นตัวแปร foo จะมีชนิดข้อมูลเป็นตัวเลข
foo = "bar"; 		// foo เปลี่ยนมาเก็บข้อมูลเป็นสตริง
foo = true;  		// foo เปลี่ยนมาเก็บข้อมูลเป็นบูลีน

null กับ undefined

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

ตัวเลข

console.log(100, 0, -0, -300, 3.14, -78.222); // 100 0 -0 -300 3.14 -78.222

console.log(200e5); 	// 200 x 105  =  20000000
console.log(2E-5);   	// 2 x 10-5 = 0.00002

console.log(Math.sqrt(-1)); 	//  NaN (ไม่สามารถถอดรากที่สองของ -1)
console.log(0/0); 			//  NaN ( 0 หาร 0 ไม่มีนิยาม)
console.log(parseInt("Hi"));	//  NaN (ไม่สามารถแปลง "Hi" เป็นตัวเลขได้)

console.log( Infinity * Infinity);	// Infinity
console.log( Infinity / Infinity);	// NaN
console.log(-344 * Infinity);		// -Infinity
console.log(3 / Infinity);			// 0

console.log(Number.MAX_VALUE);		//  1.7976931348623157e+308 เป็นค่าโดยประมาณ
console.log(Number.MAX_VALUE + 100);	//  1.7976931348623157e+308 เป็นค่าโดยประมาณ (บรรทัด 2)   
console.log(Number.MAX_VALUE * 10);	//  Infinity (บรรทัด 3)
console.log(Number.MAX_VALUE * -10);	//  -Infinity (บรรทัด 4)

console.log(Number.MIN_VALUE);   		//5e-324 (เป็นค่าโดยประมาณ)

สตริง

"Learning JavaScript"		
'Learning JavaScript'

// ใช้ \" อยู่ภายในสตริง ส่วนเครื่องหมาย ' สามารถเขียนอยู่ในสตริงได้เลย
console.log("...\"Learning\" 'JavaScript'...");	// ..."Learning" 'JavaScript'...
// ใช้ \' อยู่ภายในสตริง ส่วนเครื่องหมาย " สามารถเขียนอยู่ในสตริงได้เลย
console.log('..."Learning" \'JavaScript\'...');	//  ..."Learning" 'JavaScript'...

var str= "line1\
line2\
line3";
console.log(str);	// line1line2line3

console.log("1234567890".length);	 // 10

โอเปอเรเตอร์ทางคณิตศาสตร์

console.log(true + 0);        // ได้ผลลัพธ์เป็น 1 เพราะ true จะถือว่ามีค่าเป็น 1
console.log(false + false);   // ได้ผลลัพธ์เป็น 0 เพราะ false จะถือว่ามีค่าเป็น 0
console.log(100 - true);      // 99
console.log(true * 30);       // 30
console.log(true  / 2);       // 0.5
console.log(true %10);        // 1
console.log(+true);           // 1
console.log(-false);          // -0
var a = false,  b=true; 
console.log(++a);	          // 1     
console.log(--b);             // 0

console.log(NaN + 30);        // NaN
console.log(NaN - 30);        // NaN
console.log(NaN * 30);        // NaN
console.log(NaN / 30);        // NaN
console.log(NaN % 30);       // NaN
console.log(+NaN);           // NaN
console.log(-NaN);           // NaN
var x = NaN; 
console.log(++x);             // NaN
console.log(--x);             // NaN

console.log(Infinity * 0);    // NaN
console.log(Infinity * 1);    // Infinity
console.log(Infinity * Infinity);   // Infinity
console.log(Infinity * -Infinity);  // -Infinity
console.log(Infinity / 0);          // Infinity

โอเปอเรเตอร์ที่ใช้กำหนดค่าให้กับตัวแปร

var a = 20;		
a +=true;     	// true มีค่าเป็น 1
console.log(a);	// 21
a *=NaN;
console.log(a);	// NaN

โอเปเรอเตอร์แบบตรรกะ

console.log(true || true);		// true	(เงื่อนไข short circuit)
console.log(true || false);	// true	(เงื่อนไข short circuit)
console.log(false || true);	// true	
console.log(false || false);	// false
console.log(true && true);		// true
console.log(true && false);	// false
console.log(false && true);	// false	(เงื่อนไข short circuit)
console.log(false && false);	// false	(เงื่อนไข short circuit)
console.log(!true);			// false
console.log(!false);		// true

โอเปอเรเตอร์ระหว่างบิต

var a = 12;				// 1100 (เลขฐานสอง)
var b = 5;				// 0101 (เลขฐานสอง)
var c = a & b;			// 0100 (เลขฐานสอง)
console.log(c.toString(2)); 	// 100 (เลขฐานสอง)
console.log(c);			// 4
console.log(12 & 5);		// 4

var a = 12;				// 1100 
var b = 5;				// 0101 
var c = a | b;			// 1101
console.log(c.toString(2));	// 1101
console.log(c);			// 13
console.log(12 | 5);		// 13

var a =12;				// 1100 
var b= 5;				// 0101 
var c = a ^ b;			// 1001
console.log(c.toString(2));	// 1001
console.log(c);			// 9
console.log(12 ^ 5);		// 9

var a= 9;			 // 00000000000000000000000000001001
var b = ~a;			 // 11111111111111111111111111110110 (1’s Complement)
console.log(b);		 // -10 
console.log(~9);		 // -10

var a = 9; 			// 00000000000000000000000000001001
var c = a << 2;		// เลื่อนบิตจากขวามือไปทางซ้ายมือ 2 ตำแหน่ง
				// 00000000000000000000000000100100
console.log(c);		// 36
console.log(9 << 2);	// 36

var a = 9; 			// 00000000000000000000000000001001
var c = a >> 2;		// เลื่อนบิตจากซ้ายมือไปทางขวามือ 2 ตำแหน่ง
				// 00000000000000000000000000000010
console.log(c);		// 2
console.log(9 >> 2);	// 2

-9;                // 11111111111111111111111111110111 (เลขฐานสอง)
-9 >> 2;    // 11111111111111111111111111111101 (เลขฐานสอง) = -3 (เลขฐานสิบ)

var a = 9; 			// 00000000000000000000000000001001
var c = a >>> 2;		// เลื่อนบิตจากซ้ายมือไปทางขวามือ 2 ตำแหน่ง พร้อมเติมเลข 0 ที่บิตด้านหน้าสุด
				// 00000000000000000000000000000010
console.log(c);		// 2
console.log(9 >>> 2);	// 2

โอเปอเรเตอร์ typeof

console.log(typeof true);			// "boolean"
console.log(typeof false); 		// "boolean"		
console.log(typeof -0.13); 		// "number"
console.log(typeof NaN); 			// "number"
console.log(typeof Infinity); 		// "number"
console.log(typeof undefined); 		// "undefined"
console.log(typeof ''); 			// "string"
console.log(typeof "Hi");			// "string"
console.log(typeof (typeof 100) ); 	// "string"
console.log(typeof null ); 		// "object"
console.log(typeof {x: 1, y: 2});		// "object" 
console.log(typeof [1, 2]); 		// "object"
console.log(typeof function(){});		// "function"
console.log(typeof Math.sqrt);		// "function"
console.log(typeof class C {});		// "function" 
console.log(typeof Symbol());		// "symbol"

โอเปอเรเตอร์วงเล็บ

var a = 1 + 2 * 3 + 5; 
// จะเสมือนเขียนเป็น var a = 1 + (2 * 3) + 5;
console.log(a); // 12

var a = (1 + 2) * (3 + 5); 
console.log(a); // 24

โอเปอเรเตอร์คอมม่า

var a = 1, b = 2;
var x = (1+34, a+=2, b*=10, b+1);
console.log(x);	// 21

โอเปอเรเตอร์ void

var a = void 12;
console.log(a);			// undefined
console.log(Math.ceil(4.4));	// 5
console.log(void Math.ceil(4.4)); // undefined  	
var b = 1;
console.log(void (++b)); 		// undefined  
console.log(b);			// แสดงค่าออกมาเป็น 2 เพราะตัวแปร b ถูกบวกเพิ่มไป 1 ค่า

อาร์เรย์

[1, 1, 1, true, "Array"];	// อาร์เรย์

var a = ["a", "b", "c", "d", "e"];
console.log(typeof a);				// "object"
console.log(a[0], a[1], a[2], a[3], a [4]);	// "a b c d e"

var array = [];	// ประกาศเป็นอาร์เรย์ว่าง
array[0] = 1;		
array[1] = 2;

var array = [1, 2, 3, 4, 5];
console.log(array.length); 	// 5

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
array.length = 7;		// เพิ่มขนาดอาร์เรย์จาก 5 เป็น 7 
console.log(array);		// [ 1, 2, 3, 4, 5, <2 empty slots> ]
console.log(array.length); // 7
array[9] = 100;		
console.log(array);		// [ 1, 2, 3, 4, 5, <4 empty slots>, 100 ]
console.log(array.length); // 10

การประกาศฟังก์ชั่น

function function_Name (พารามิเตอร์1,  พารามิเตอร์2, …, พารามิเตอร์N) 
{
// ซอร์สโค้ดภายในบอดี้ของฟังก์ชั่น
return [value]; 
// จะมีหรือไม่มีประโยค return ก็ได้ 
// ส่วนค่า value หลังคำว่า return จะมีหรือไม่มีก็ได้
}

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

var result = calculate(10, 2);	
console.log(result);		// 20

function calculate(){
return 20;
}
var result = calculate();		
console.log(result);		// 20

ประโยค return

function myFunction (){
	return 1;
	console.log("myFunction");// บรรทัดนี้เส้นทางการทำงานของโปรแกรมจะมาไม่ถึง
}
var result = myFunction();		
console.log(result);		// 1

function myFunction (){
	return;
}
var result = myFunction(); 	
console.log(result);		// undefined

function myFunction (){
console.log("myFunction");
// จะเสมือนมีประโยค return undefined; วางไว้ตำแหน่งสุดท้าย ก่อนฟังก์ชั่นจบการทำงาน
}
var result = myFunction();	// "myFunction"
console.log(result);	// undefined

ฟังก์ชั่นไร้ชื่อ

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

นิพจน์ฟังก์ชั่น

var calculate = function (param1,param2){
return param1 * param2;
}
console.log(calculate(10, 2)); 	// 20
calculate = 100; 			// ตัวแปร calculation สามารถแก้ไขให้เป็นค่าอื่นได้
console.log(calculate);		// 100

var calculate = function calc2(param1,param2){
return param1 * param2;
}
console.log(calculate(10,2)); 		// 20

ฟังก์ชั่นคอลแบ็ค

function sayHi(){
console.log("Hi");
}
function sayBye(){
console.log("Bye");
}

function say(func){
	func();	// เรียกฟังก์ชั่นให้ทำงาน
}
say(sayHi);		// "Hi" 
say(sayBye);		// "Bye"

function say(func){
	console.log("Say...");
function sayHi(){	
      console.log("Hi");
} 
return sayHi;		// รีเทิร์นฟังก์ชั่น
} 
var hi = say();	// "Say..."
hi();			// "Hi"

function say(func){
	console.log("Say...");
	return  function(){		// รีเทิร์นฟังก์ชั่นไร้ชื่อ
      console.log("Hi");
} 
} // สิ้นสุดการประกาศฟังก์ชั่น
var hi = say();	// "Say..."
hi();			// "Hi"

อ็อบเจ็กต์ arguments

function myFunction(param1, param2){
console.log(param1, param2);
}
myFunction();				// undefined undefined
myFunction(100);			// 100	undefined
myFunction(100,200);		// 100 200
myFunction(100,200,300,400);	// 100 200

function myFunction (param1, param2){
console.log(arguments);
}
myFunction(100,200,300,400);	// [100, 200, 300, 400]

function myFunction(param1,param2){ // ฟังก์ชั่นนี้ไม่เคยถูกเรียกใช้			
	console.log("function1 value:", param1, param2); 
}
myFunction(100, 200);   		// เรียกใช้ฟังก์ชั่นที่ประกาศอยู่ด้านล่าง
function myFunction(param){ 	// จะโอเวอร์ไรด์ทับฟังก์ชั่นที่ประกาศไว้ก่อนหน้านี้
	console.log("function2 value:", param);
}
myFunction(100);     	
myFunction(100, 200);  	
/* แสดงผลลัพธ์เป็น
"function2 value: 100"
"function2 value: 100"
"function2 value: 100" */

ขอบเขตการมองเห็นของตัวแปร

if(true){
var a = 1;		// a มีขอบเขตการมองเห็นแบบโกลบอล
}
{
var b = 2;		// b มีขอบเขตการมองเห็นแบบโกลบอล
}
console.log(a, b);		//  1 2

<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
var a = "Hi";    		// a มีขอบเขตการมองเห็นแบบโกลบอล
function myFunction() {
    	var a = "Bye"; 	// a มีขอบเขตการมองเห็นแบบโลคอล เพราะประกาศภายใต้ฟังก์ชั่น
		console.log(a);	
}
myFunction();			// "Bye"
console.log(a);		// "Hi"
console.log(window.a);	// "Hi"
</script>
</body>
</html>

console.log(NaN, undefined, Infinity);     // NaN undefined Infinity
console.log(window.NaN, window.undefined, window.Infinity); // NaN undefined Infinity
// ถ้ารันอยู่ใน Node.js
// console.log(global.NaN,  global.undefined,  global.Infinity);	    
// NaN undefined Infinity

ฟังก์ชั่นซ้อนฟังก์ชั่น

function outerFunc() {
  var value = 0;
  function innerFunc() {
    console.log(++value);
  }
  return innerFunc;
};
var func1 = outerFunc();		// บรรทัด a
func1();	// 1
func1();	// 2

var func2 = outerFunc();		// บรรทัด b
func2();	// 1
func2();	// 2

Hoist

var value = 100;

function myFunction(num){
	// สามารถมองเห็นตัวแปร value		
	console.log(value);			// undefined

	if(num > 10) {
		var value = num*10;		// ประกาศตัวแปร value ที่ตรงนี้ แต่มองเห็นได้ทั่วฟังก์ชั่น
		/* ซอร์สโค้ด */
	} else {
		// ถ้าเงื่อนไขประโยค if เป็นเท็จ ก็จะเข้ามาทำงานที่ else 
 	// ซึ่งจะเห็นตัวแปร value มีค่าเป็น undefined	
		console.log(value);		// undefined
	}			
// สามารถมองเห็นตัวแปร value ได้ หลังจากประโยค if …else ทำงานเสร็จสิ้น
	console.log(value);			
}

function myFunction(num){
	var value; 			// ประกาศตัวแปร value โดยไม่มีค่าเริ่มต้น จึงทำให้มีค่าเป็น undefined
console.log(value);		// undefined
	if(num > 10) {
		value = num*10;	// บรรทัดนี้เป็นเพียงการกำหนดค่าให้กับตัวแปร value
		/* ซอร์สโค้ด */
	} else {
       console.log(value);	// undefined
	}	
	console.log(value);		
}

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

var value; 			// ประกาศตัวแปร value โดยไม่มีค่าเริ่มต้น จึงทำให้มีค่าเป็น undefined
console.log(value); 	// undefined
if(true) {
	value = 100;		// บรรทัดนี้เป็นเพียงการกำหนดค่าให้กับตัวแปร value
}
console.log(value);		// 100

// มองเห็นฟังก์ชั่นก่อนการประกาศใช้งาน
myFunction(); 	// "Hoisted"
function myFunction(){
console.log("Hoisted");
}

myFunction();		// "Hoisted"

function outerFunc() {
  innerFunc();	// มองเห็นฟังก์ชั่นก่อนการประกาศใช้งาน
  function innerFunc() {  
    console.log("inner function");
  }
};
outerFunc();				// "inner function"
console.log(typeof innerFunc);	// undefined

สตริคท์โหมด

"use strict";		// ประกาศโหมดสตริคท์ ด้วยการเขียนไว้ที่ตอนต้นของไฟล์
var x = 1;

function myFunction() {
   "use strict"; 	// เฉพาะฟังก์ชั่นนี้จะอยู่ในโหมดสตริคท์
    var x = 1;   
}

"use strict";
x = 1;           // เกิด error เพราะไม่ได้ประกาศตัวแปรแบบ var ถ้าอยู่ดี ๆ จะมากำหนดค่าให้ทันทีแบบนี้จะทำไม่ได้

"use strict";
function x(a, a) {};    // เกิด error เพราะประกาศพารามิเตอร์ ที่มีชื่อ a ซ้ำกัน

"use strict";
var x = 1;
delete x;			// เกิด error ไม่สามารถลบตัวแปรได้

"use strict";
delete Object.prototype; //เกิด error เพราะพร็อพเพอร์ตี้ตัวนี้ห้ามลบ

"use strict";
var x = 010;             // เกิด error ไม่สามารถประกาศแบบนี้ได้
var y = \010;            // เกิด error ไม่สามารถประกาศแบบนี้ได้

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 1;            // เกิด error เนื่องจากมันเป็นพร็อพเพอร์ตี้ที่อ่านค่าได้อย่างเดียว

"use strict";
var obj = {get x() {return 0} };
obj.x = 1;            // เกิด error ไม่สามารถกำหนดค่าให้กับ x ได้

"use strict";
var obj = {};
Object.preventExtensions(obj);  
obj.a= 1; 		 // เกิด error ไม่สามารถเพิ่มพร็อพเพอร์ตี้เข้าไปในอ็อบเจ็กต์ได้

"use strict";
function f() { return this; }
console.log(f());	// undefined

"use strict";
var eval = 1;         // เกิด error ไม่สามารถใช้ชื่อ eval เป็นตัวแปร

"use strict";
var arguments = 1;     // เกิด error ไม่สามารถใช้ชื่อ arguments เป็นตัวแปร

"use strict";
with (Math){ a = cos(1)}; 	//  เกิด error ไม่สามารถใช้ประโยคคำสั่ง  with ได้

"use strict";
eval("var x = 1;");	  // ประกาศตัวแปร x ด้วย eval()
x = 2;                // เกิด error
// แบบนี้จะไม่เกิด error
// eval("var x = 1; x = 2;"); // ไม่เกิด error

"use strict";
var implements =1;     // เกิด error เพราะ implements คือคำสงวนในโหมดสตริคท์

"use strict";
if(true) {
function myFunction1(){ }			// ขอบเขตแบบโลบอล
}

{
function myFunction2(){ }			// ขอบเขตแบบโลบอล

}
console.log(typeof myFunction1);	// undefined (ถ้าไม่ใช่โหมดสตริคท์จะแสดงค่าเป็น "function")
console.log(typeof myFunction2);	// undefined (ถ้าไม่ใช่โหมดสตริคท์จะแสดงค่าเป็น "function")

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

บทที่ 2 ทบทวนเบื้องต้น

คอมเมนต์

console.log()

debugger

การตั้งชื่อ

การประกาศตัวแปร

การประกาศตัวแปรโดยไม่มี var

ไดนามิกไทป์

null กับ undefined

ตัวเลข

สตริง

โอเปอเรเตอร์ทางคณิตศาสตร์

โอเปอเรเตอร์ที่ใช้กำหนดค่าให้กับตัวแปร

โอเปเรอเตอร์แบบตรรกะ

โอเปอเรเตอร์ระหว่างบิต

โอเปอเรเตอร์ typeof

โอเปอเรเตอร์วงเล็บ

โอเปอเรเตอร์คอมม่า

โอเปอเรเตอร์ void

อาร์เรย์

การประกาศฟังก์ชั่น

ประโยค return

ฟังก์ชั่นไร้ชื่อ

นิพจน์ฟังก์ชั่น

ฟังก์ชั่นคอลแบ็ค

อ็อบเจ็กต์ arguments

ขอบเขตการมองเห็นของตัวแปร

ฟังก์ชั่นซ้อนฟังก์ชั่น

Hoist

สตริคท์โหมด

FilesExpand file tree

Chapter2.md

Latest commit

History

Chapter2.md

File metadata and controls

บทที่ 2 ทบทวนเบื้องต้น

คอมเมนต์

console.log()

debugger

การตั้งชื่อ

การประกาศตัวแปร

การประกาศตัวแปรโดยไม่มี var

ไดนามิกไทป์

null กับ undefined

ตัวเลข

สตริง

โอเปอเรเตอร์ทางคณิตศาสตร์

โอเปอเรเตอร์ที่ใช้กำหนดค่าให้กับตัวแปร

โอเปเรอเตอร์แบบตรรกะ

โอเปอเรเตอร์ระหว่างบิต

โอเปอเรเตอร์ typeof

โอเปอเรเตอร์วงเล็บ

โอเปอเรเตอร์คอมม่า

โอเปอเรเตอร์ void

อาร์เรย์

การประกาศฟังก์ชั่น

ประโยค return

ฟังก์ชั่นไร้ชื่อ

นิพจน์ฟังก์ชั่น

ฟังก์ชั่นคอลแบ็ค

อ็อบเจ็กต์ arguments

ขอบเขตการมองเห็นของตัวแปร

ฟังก์ชั่นซ้อนฟังก์ชั่น

Hoist

สตริคท์โหมด