Videos → Rebuild your mental model of JavaScript

แนะนำตัวและเกริ่นนำเรื่อง JavaScript0:00

โอเค ก่อนอื่นขออภัยทุกท่านที่มาสายนะครับ แล้วก็พอเข้ามาเนี่ย ช็อคนิดนึงเพราะว่าเห็นสีหน้าของแต่ละท่านเนี่ย รู้สึกว่าเรื่องที่ผมจะพูดเนี่ย ไม่จำเป็นอีกแล้วในชีวิต อะไรอย่างเงี้ยครับ รู้สึกว่าทุกคนน่าจะเทพมาก ถ้าสมมุติว่าเรื่องที่ผมเล่าเนี่ย ทุกคนรู้แล้วอย่างเงี้ย ก็ถือว่าเรามาทบทวนความรู้ก่อนเนาะ แล้วก็เดี๋ยวมันก็จะมี record ออกไปใช่ไหม ก็ให้คนที่เขายังไม่รู้ได้รู้ต่อไปอย่างเงี้ยครับ

โอเค ถือว่าเป็นเวทีแรกๆ ของผมเลยที่อยู่ในวงการซอฟต์แวร์เนาะ เพราะว่าปกติแล้วเมื่อก่อนผมทำ UX มา 5 ปี หลายๆ คนอาจจะเคยเห็นหน้าผมในวงการ UX ครับ แต่ว่าเนี่ย ผมเพิ่งหลังจากโควิดก็คือเปลี่ยนสายมาทำ frontend ได้ประมาณ 3-4 ปีละ แล้วก็รู้สึกว่าชอบ JavaScript อะไรอย่างเงี้ยครับ ก็เลยเริ่มศึกษามาเรื่อยๆ อะไรอย่างเงี้ยเนาะ โอเค background ประมาณนี้ครับ ชื่อเอ็มครับ ลืมบอก by the way เดี๋ยวนะ ขอดูปั๊กกะตืนก่อน

ถือมือถือนี่ ไม่ได้ตอบไลน์ครับ ดูโพยครับ จดโพยมาครับ

ขอโทษดีนะครับ โอเคครับ

เดี๋ยวเริ่มเนาะ โอเค 30 นาทีครับ ก่อนจะเริ่มนะ

จริงๆ มันมี ผมเห็นมีฟีเจอร์ใหม่ของ Keynote เนี่ย จริงๆ พื้นหลังมันเลื่อนด้วยนะ ถ้าใครไม่เห็นเนาะ คือหลังมันเลื่อนๆ เนี่ย เป็นฟีเจอร์ใหม่ของ Keynote ผมชอบมาก

ความสำคัญของพื้นฐาน JavaScript สำหรับนักพัฒนาหน้าใหม่1:28

ครับ ก็หลักแล้วเนี่ย ที่ผมมา

ที่ผมสนใจเรื่องนี้ครับ ผมรู้สึกว่าเด็กยุคใหม่ในปัจจุบันเนี่ยครับ คือเค้าเข้ามาในฟิลด์ของ front-end จะว่าสกิลเนี่ย คือเค้ามักจะจั๊มป์มาที่ framework เลยอย่างเงี้ย ซึ่งอาจจะทำให้ขาดพื้นฐานบางอย่างที่ทำให้เค้า อาจจะเข้าใจผิดหรือว่าไม่เข้าใจไปอะไรอย่างเงี้ยครับ ก็หวังว่าเวทีนี้จะได้ช่วยให้ทุกคนเข้าใจเนาะ

เฮ้ย เดี๋ยวนะ รู้สึกประหม่ามากเลย แล้วก็เดี๋ยวนะ ไป the way ก่อนที่ถึงจุดนั้นน่ะ คือกว่าผมจะมาถึงตอนเนี้ย เหมือนแบบพระเจ้าแกล้งมากเลยอ่ะ เครื่องบินก็ดีเลย์ รถก็ช้าอะไรอย่างเงี้ย เกือบจะมาไม่ทันแล้ว ผมจะขอทีมงานเทแล้วอะไรอย่างเงี้ยครับ

ตัวอย่างโค้ด: การกำหนดค่าตัวแปร2:11

โอเค ถ้าดูตามโค้ดเนี่ยครับ อันนี้เห็นมองเห็นอยู่เนาะ เห็นครับ

โอเค let a เท่ากับ 10 เนาะ แล้วก็ let b เท่ากับ a แล้วก็ a เท่ากับ 20 เลยครับ ถ้าถามทุกคนเนี่ย ทุกคนก็น่าจะรู้อยู่แล้วว่า คำตอบสุดท้าย a ค่า a กับค่า b เนี่ย เท่าไหร่เนาะ แต่ว่าถ้าเราลองคิดดูช้าๆ เนี่ย อันนี้จะชวนคิดนะว่า

ค่อยๆ คิดไปทีละ step ว่าสิ่งที่มันเกิดขึ้นในโค้ดที่เราเห็นเนี่ย เราคิดอะไรในหัวบ้างนะครับ ก็คือตอนแรกเนี่ย เราก็จะกำหนดตัวแปร a เนาะ

ตั้งค่าตัวแปร a ขึ้นมาตัวหนึ่ง แล้วก็กำหนดให้มันค่าเท่ากับ 10 เนาะ แล้วก็สร้างตัวแปร b ขึ้นมาตัวแปรหนึ่ง กำหนดค่าให้เท่ากับ a เอ๊ะ แล้ว a มันเท่าไหร่นะ เมื่อกี้ a มัน อ๋อ a มันเท่ากับ 10 นี่หว่า ก็คือ a เท่ากับ 10 นะครับ สุดท้ายก็คือกำหนด a เท่ากับ 20 เนาะ ดังนั้นคำตอบของโจทย์ข้อเนี้ยมันก็คือเท่ากับว่า สุดท้ายแล้วเนี่ย a ก็คือเท่ากับ 20 แล้วก็ b เท่ากับ 10 นะครับ ที่ชวนคุยอย่างเงี้ยก็คือ จริงๆ แล้วคือไม่ได้มาสอนเบสิกอะไรนะครับ แต่ว่าอยากให้เราลองค่อยๆ คิดตาม step เนี้ย คือให้เราเห็นว่าสิ่งที่เกิดขึ้นในหัวเราเนี่ย พอเราเห็นโค้ดเนี่ย เราคือทุกคนน่ะ รู้ทันทีว่ามันคำตอบเท่าไหร่เนาะ แต่ว่าอยากให้ทุกคนน่ะ เดี๋ยวนะ ตื่นเต้นแป๊บนึงครับ

อยากให้ทุกคนเห็นภาพแต่ละ step สิ่งที่มันเกิดขึ้น ในหัวครับว่ามันเกิดอะไรบ้างเนาะ สิ่งนี้คือเรา

แนะนำแนวคิด Mental Model ใน JavaScript3:42

เรียกว่า mental model เนาะ mental model เนี่ยก็คือตามชื่อโจทย์เนาะ ก็คือเนี่ย JavaScript mental model นะครับ เป็นเรื่องของ JavaScript เนาะที่ผมมาพูดเนาะ คือสิ่งที่เราเข้าใจ ถ้าตาม definition ของ Wikipedia

เนี่ยเค้าบอกว่า an internal representation model of external reality that is a way of representing reality within one's mind คือหมายความว่า สิ่งที่เรานึกว่า เรามองเห็นสิ่งนึงเนี่ย แล้วเราเข้าใจว่ามันทํางานยังไง เข้าใจง่ายๆ เช่น ลูกบิดประตู สมมุติว่าถ้าเรา ไปเห็นลูกบิดประตูเนี่ย เราก็จะเข้าใจโดยทันทีว่า มันมักจะบิดซ้าย บิดขวา บิดตามเข็ม

แต่ว่าวันไหนถ้ามีใครทําลูกบิดประตู

อันนึงที่มันหมุนไปตรงกันข้ามอย่างเงี้ย เราก็จะรู้สึกว่าอันนี้มันขัดกับหลัก สิ่งที่เราเข้าใจหรือว่าสิ่งที่เป็น mental model ของเรา นะครับ อันนี้มันก็จะ apply คล้ายๆ กับแนว UX นิดนึงนะครับ UX เนี่ยคือแบบว่า เวลาเราทํา product ให้ user เนี่ย คือเราก็จะทําตามที่ mental model ของกลุ่มเป้าหมาย เราเข้าใจเนาะ ไม่ใช่แบบตามที่เราต้องการอะไรเงี้ยครับ

อธิบายความแตกต่างระหว่างตัวแปรและกล่อง4:47

โดยปกติแล้วอะครับ เวลาเราพูดว่า variable เนี่ย

variable ทุกคนรู้จัก variable เนาะ variable เนี่ยหรือว่าตัวแปรเนี่ย เรามักจะเปรียบเทียบเป็นอะไร แต่เมื่อกี้ สปอยไปแล้ว มือเร็วไปหน่อย เราก็จะเปรียบเทียบเป็นกล่องเนาะ จริงๆ แล้วอะ คือมันก็ไม่ได้ผิดอะไรนะครับ

เพราะว่าบางทีเนี่ยเราอยากให้คนเนี่ยเข้าใจเร็วๆ หรือว่าเรียนรู้ได้ง่ายเลยคือมันก็คือแบบว่าแบบ โอเค กําหนดตัวแปร a ขึ้นมา ตัวแปร a เป็นกล่อง กล่องนึง แล้วเอา 10 ใส่เข้าไป อะไรอย่างเงี้ยครับ คือทําให้คนเข้าใจง่ายเนาะ แต่ว่าจริงๆ แล้วอะครับ ผมจะบอกว่าตัวแปรอะ

มันไม่ใช่กล่อง มันเป็นอย่างอื่น อะไรอย่างเงี้ย ถ้าหลายๆ คนก็อาจจะรู้แล้ว แต่ว่าถ้าใครที่ยังไม่รู้ก็ไม่เป็นไร ก็ถือว่าปกติ เพราะว่าเราถูกสอนมาแบบนี้เนาะ

ต่อไป รู้สึกสะมะกึ๊กสะมะกั๊กมากเลยเนี่ย

โค้ดนี้ยากขึ้นมาหน่อยอันนี้

ตัวอย่างโค้ด: ฟังก์ชัน duplicate spreadsheet5:52

เห็นกันนะครับ โอเคอันนี้เป็นฟังก์ชัน duplicate spreadsheet ชื่อก็ตามที่มันบอกเลยเนาะ ฟังก์ชั่นนี้ก็จะรับออบเจ็กต์ที่เป็นออริจินอลออบเจ็กต์ เข้ามาครับซึ่งเราจะเช็คก่อนว่า มันมี pending changes ไหม เม้าส์อยู่ไหนน้า ไม่เป็นไรไม่ต้องใช้ด้วยนะ

ถ้ามัน pending changes เนี่ย ก็คือไม่ให้ ไม่ให้ก็อปปี้ ไม่ duplicate ก็คือ throw error เลยว่ากรุณาเซฟก่อน duplicate อะไรงี้ครับแต่ว่าถ้ามันเซฟแล้ว สิ่งที่มันทำก็คือมันก็จะทำการก๊อปปี้ file original อย่างที่เห็นเห็นว่าเราเค้าประกาศตัวแปรก๊อปปี้ขึ้นมา ตัวแปรหนึ่งเป็นออบเจ็กต์ก่อนละก็ แต่ว่า date ก็คือเป็น date ปัจจุบันเนอะ และก็ ใช้ author น่ะเป็น original author ก็คือเป็นตัว ข้อมูลหลักของอริจินอลเนอะละก็

พวก cell และก็ metadata อะไรอย่างเงี้ย แต่ว่าสุดท้ายเนี่ยก็มีการเปลี่ยนชื่อไฟล์ ฝ่าย duplicate นี้ให้เพิ่มคำว่า "Copy of" เข้าไป น่ะครับแล้วมันก็จะได้เป็นชื่อว่า "Copy of" something ของ original โอเคมาถึงจุดนี้ มีใครรู้ไหมว่าไอ้ code นี้มันมีบัคอยู่?

การอธิบายบัคในโค้ดตัวอย่าง7:05

ไม่ต้องยกมือก็ได้นะเดี๋ยวผมกลัวทุกคนรู้ โอเคครับ. อันนี้ผมยกตัวอย่างนะ.

อันนี้เป็นเป็น origin object เนาะ มันก็จะมีชื่อ มีวันที่สร้าง มีชื่อเลยครับก็ ที่สำคัญที่เราอยากรู้คือตัว metadata ที่เป็นชื่อ title เนาะ title ชื่อ My spreadsheet ซึ่งตัว dupliacte ก็คือจะรับตัว original เข้าไป แล้วก็แก้ไขชื่อ copy of เนี่ยให้เพิ่ม copy of เข้าไปครับ อ่าอันนี้ผมจะลองดูนะก็คือ ก็คือ โอเค เนี่ยสร้างตัวแปร spreadsheet ขึ้นมาเก็บตัว duplicate เดี๋ยวผมจะลอง console.log ดู

มันไม่ได้เซฟ

โอเค มันไม่เป็นไร ทีนี้ ผมมา console.log มา 2 ตัว คือ ลอกตัว original ที่เป็น original spreadsheet เมื่อกี้ แล้วก็ตัว new sheet ใหม่นะครับ แต่เราจะเห็นได้ว่า ทั้ง 2 ตัวครับ มันเป็นชื่อ copy of my spreadsheet ทั้งคู่เลย ครับ อันนี้แหละ ก็คือ ถ้าใครนะครับ เห็น bug ตั้งแต่เมื่อกี้อะ ก็โอเค ก็ถือว่าเราเข้าใจ javascript ระดับนึงละเนาะ ก็ถือว่าเราวันนี้เรามาทบทวนความรู้ แต่ว่าถ้าใครไม่เห็น bug มันเมื่อกี้ ก็ถือว่า อีก 15 นาที หรือว่า 20 นาทีต่อจากไปนี้ ก็คือถือว่าจะเป็นความรู้ใหม่ของเรา หรือว่ามันจะเปลี่ยนความคิด วิธีคิดของเราเนาะ โอเค ต่อไป

ในการสไลด์วันนี้ครับ ผมอยากจะสโคปตัว context นะเนาะ

ให้อยู่ประมาณว่า ถ้าใน universe

ถ้าในจักรวาลของ javascript ทั้งหมดเนี่ย คือมันจะมีวิธีการเรียนรู้อยู่ 2 แบบนะครับ ก็คือเรียนจาก outside กับเรียนจาก inside เนอะ เรียนจาก outside เนี่ยก็จะเป็นการที่เราเข้าใจว่า เวลาเราสร้างตัวแปรเนี่ย มันไปเขียนตรงไหนใน memory แล้วมันไปชี้ เอา memory ไปชี้ตรงจุดไหน ของเป็นแบบ pointer หรือว่าเป็นจุดไหนของใน memory อะไรอย่างเนี้ยครับ มันจะอารมณ์ประมาณนั้น หรือว่ามันจะแบบ มันจะ execute bytecode ยังไง หรือว่ามันจะ optimize ยังไง มันจะเป็น way แบบ outside แต่ว่าวันนี้ครับ ผมจะชวนทุกคนมาคุยกันใน inside มากกว่า ก็คือ ใน inside เนี่ยก็คือ เป็นในสโคปของ javascript ก็คือ เราแค่เข้าใจว่า string เนี่ยก็คือ value ตัวหนึ่ง โดยที่เราไม่สนว่ามันจะ declare

หรือว่ามันจะประกาศไว้ตรงไหนใน memory ของโลก อะไรอย่างเนี้ย ขอให้เราทุกคนมองภาพตรงกันก่อนเนาะ

แนะนำ Primitive และ Non-primitive types9:45

นะ อันนี้เป็น quote ที่ผมชอบนะครับ ดึงมาเนาะ ก็ The stars are bright when I look at them

ก็คือเหมือนกับว่า ไอ้ดวงดาวยังสว่างอยู่ตอนที่ฉันมองมัน อะไรอย่างเนี้ย แต่ว่าพอที่ฉันหลับตาแล้วอะ มันยังอยู่มั้ย แล้วฉันก็ยักไหล่ เพราะว่าฉันไม่สนใจ เพราะว่ามันเป็น implementation details อะไรประมาณนี้ครับ

อันที่ 1 ครับ จริงๆ แล้วมันมีประมาณ 5 mental model ที่ผมจะมาคุยวันนี้ อันแรกเนี่ย ก็คือ โค้ดเนี่ย ไม่เท่ากับ value นะครับ อันนี้คือ ถ้าเราเห็นเนี่ย ก็คือมันจะเป็นโค้ดของเรา ซึ่งจริงๆ แล้ว เราทุกคนอาจจะเข้าใจว่า เวลาเราเขียนอย่างนี้ มันมักจะทำให้เราเข้าใจว่า โค้ดกับ value มันเป็นส่วนเดียวกันเนาะ แต่ว่าจริงๆ แล้วครับ value อย่างที่ผมบอกว่า value มันถูกสร้างขึ้นอยู่ในจักรวาลของ JavaScript อยู่แล้ว จักรวาลของ JavaScript value มีอะไรบ้าง ก็คือมี undefined มี null มี string มี number มี boolean มีนู่นนี่นั่น ซึ่งพวกนี้ครับ มันมีมาตั้งแต่เราเปิด JavaScript ขึ้นมา เราไม่ได้สร้างมันขึ้นมา ดังนั้น มันไม่ได้เป็นส่วนหนึ่ง ของโค้ดเรา มันเป็นของ universe JavaScript อยากให้เรามองภาพอย่างนี้ก่อนครับ ก็คือ หมายความว่า โค้ดไม่เท่ากับ value เนาะ บอกทำไม เดี๋ยวสักพักไป มันก็จะมีอะไรที่มัน relate เกี่ยวกับอันนี้เนาะ เดี๋ยวผมขอดูเผื่อตกหล่นอะไร

อันนี้ก็พูดไปแล้ว อันนี้คือเมื่อกี้คือเปรียบเทียบ

เมื่อกี้เนาะว่า โค้ดเนี่ยก็เหมือนตัวเราเนี่ย ที่ถือแบบ execution instruction ที่อยู่ในมือเนี่ย แล้วเราก็มองเห็นข้างนอกเนี่ย คือดวงดาว ที่เราทำอะไรกันไม่ได้เลย เนี่ยจะเป็นพวก string object อะไรเงี้ย ก็คือเหมือนกับว่า เปรียบพวกนี้คือเหมือนเป็น JavaScript universe ซึ่งเราไม่สามารถไปแก้ไข ลบ delete เพิ่มมันได้ ไอ้พวก value พวกนี้ ที่เป็นอยู่บนดาวเนี่ย แต่ว่าเราสามารถมองดูมันได้ หรือว่าไป interact กับมันได้บางอย่าง ในบางตัวอะไรเงี้ยครับ

อันที่ 2 ครับ primitive แป๊บนึง

primitive คือ immutable immutable คือแก้ไม่ได้ หรือว่า read-only นะครับ primitive เนี่ยมันจะมีอะไรบ้างเนาะ ก็คนอาจจะรู้แล้ว ก็คือมันก็มี undefined null booleans number string แล้วก็ symbol นะครับ ไอ้ symbol นี้ไม่ต้องถามผม ผมก็ไม่รู้เหมือนกันมันคืออะไรครับ อันนี้มันเขียนมาผมก็เลยพูดไปด้วย แล้วก็ส่วน non-primitive ที่ไม่ใช่ตัว primitive เนี่ย ก็คือจะมีแค่ type เดียวก็คือ object อ้าว แล้วพวกอะไรพวกนี่นั่นล่ะ พวกนั้นก็คือ object เหมือนกัน ถ้าหลายๆ คนก็น่าจะรู้เนาะ ฟังก์ชันคือ object array คือ object เหมือนกันอย่างหนึ่งเนาะ แต่ว่าฟังก์ชันเป็น object ที่มีความสามารถพิเศษเพิ่มเติมขึ้นมา

อะไรอย่างเงี้ยครับ

โอ้โห เวลาเร็วเหมือนกันนะเนี่ย สมมุติว่ายกตัวอย่างตัวเนี้ย

ถ้าเราคือดูใน string อ่ะ ใน string มันจะมีเค้าเรียกว่ามี method พิเศษที่สามารถทำให้เราเข้าถึงบางตัวได้ เช่นสมมุติว่า เราแบบเขียน เรียก reaction[0] อย่างเงี้ย มันก็จะเป็นตัว y ใช่มั้ยขึ้นมา แต่ว่าถ้าเราไปแก้ แก้จาก ถ้าไอ้คนเนี้ยเราแก้จาก y เป็น i ให้เปลี่ยนจาก yikes เป็น likes เงี้ย คิดว่าทำได้มั้ยครับ คิดว่าได้มั้ย

เดี๋ยวผมลองดูเนาะ

ครับ ก็อย่างที่บอกว่า primitive มันแก้ไขไม่ได้เนาะ ก็ดังนั้นหมายถึง ว่าถึงแม้ว่ามันจะเหมือนเราจะแก้มัน ได้เหมือนแบบเราแก้ array อะไรอย่างเงี้ย แต่มันก็แก้ไม่ได้อยู่ดีนะครับ อันนี้ที่สิ่ง ที่อยากจะพูด

ทีนี้ แต่ถ้าเป็นทางกลับกัน ถ้าเป็น พวก non-primitive หรือว่า object เนี่ย หรือว่าจริงๆ มันจะมีอีกชื่อนึงก็คือชื่อ reference เนาะ เดี๋ยวเราจะรู้ว่าทำไม มันถึงเรียกว่า reference เนาะ ไอ้พวกนี้ ก็คือสามารถแก้ไขได้ สมมุติถ้าเราเปลี่ยน จาก array ตัวที่ 1 ตำแหน่งที่ 1

ให้เปลี่ยนเป็น 428 อะไรอย่างเงี้ย

มันก็จะเปลี่ยนให้เนาะ โอเค

อธิบายว่าทำไมตัวแปรไม่ใช่กล่อง แต่เป็นเส้นเชื่อม14:14

อาจจะต้องรีบหน่อย เพราะว่าเหลือ 15 นาที โอเค ตัวที่ 3 ครับ อย่างที่บอกไปตอนต้นเมื่อกี้ว่า ตัว variable น่ะ ไม่ใช่กล่องเนาะ แต่ว่ามันคืออะไร นะครับ เดี๋ยว ผมจะทำให้ดู ตัว variable นะครับ จริงๆ แล้วครับ ถ้าสรุปเลยนะ มันไม่ใช่กล่อง แต่มันคือ เส้นเชื่อมนะครับ มันจะเป็นแบบนี้ เดี๋ยวผม จะลองทำให้ดู

โอเคครับ สมมุติว่า บรรทัดแรกครับ สมมุติว่าเราเขียนว่า declare ตัว pet นะครับขึ้นมา แล้วเราบอกว่า pet เนี่ยมันคือ ค่าของ cat สิ่งที่เกิดขึ้นนะครับ ใน JavaScript อ่ะ มันก็จะไปสร้าง ตัวแปรชื่อ pet ขึ้นมา แล้วก็จะ ไปสร้าง string ตัวหนึ่งที่ชื่อ ว่า cat ที่ไหนโลกไม่รู้ นะครับ แล้วมันก็จะบอกว่าโอเค pet คุณชี้ไปที่ cat นะ มามันเป็น ลักษณะนี้ครับ มันไม่ใช่กล่องเนาะ แต่ว่าอย่างบรรทัดที่ 2 พอเรา บอกว่าโอเค เมื่อเอาล่ะ pet เปลี่ยนเป็น dog สิ่งที่เกิดขึ้นครับ มันก็จะไปสร้าง string dog ขึ้นมาที่ไหนสักหนึ่งสักแห่งในโลก และมันก็จะชี้ไปที่ตัว dog แบบนี้ครับ อันเนี้ยคือเรื่อง

ของ variable ไม่ใช่กล่อง แต่ว่า เป็นเรื่องของตัวเป็นตัวชี้เนาะ เป็นลิงก์ เป็น pointer ครับ ประมาณนั้นครับ

การอ่านค่าตัวแปรและการส่งค่าเข้าฟังก์ชัน15:53

สุดท้ายล่ะ Reading variable of value นะครับ จริงๆ แล้วครับ

อันนี้จะชวนคุยเนาะว่าเวลาเรา โยนค่าอะไรเข้าไปในฟังก์ชัน เนี่ย สมมุติว่าค่า double เนี่ย อาจจะมี หลายๆ คนนะครับเข้าใจว่าสิ่งที่ เราโยนเข้าไปใน double เนี่ย ใน กรณีนี้คือ money เนาะ คือเรา โยนตัวแปร money เข้าไป แต่จริงๆ แล้วเราไม่ได้โยนตัวแปร money สิ่งที่เกิดขึ้นก็คือตอนที่มัน evaluate นะครับ ตอนที่มัน execute อ่ะ มันจะไปดูว่า ณ ปัจจุบันเนี้ย money อ่ะมีค่าเท่าไหร่ แล้วมันจะเอาตัวค่าของ money ใส่เข้าไป ดังนั้นในตัวเนี้ย ใน ตัว double เนี่ย ก็จะเป็น double 10 ไม่ใช่ double money ครับ เพราะว่า ไม่งั้นเนี่ย ถ้าเราส่ง money เข้าไปเนี่ย มันก็จะไป มันก็จะ มี side effect กับตัว money เนาะ แบบถ้าเรารันฟังก์ชันปุ๊บเนี่ย money เนี่ยก็จะกลายเป็น 20 นาที อะไรอย่างเงี้ยครับ ตัวแปร money เนาะ จริงๆ ก็คือมีตัวอย่างให้ดู

แต่ว่ามันจะไม่ทันอ่ะ

สุดท้ายล่ะ สุดท้าย

อธิบาย Reference Types และ Object ใน JavaScript17:01

เนี่ย ขอยาวหน่อย อันนี้จะยาว มันจะ เป็นรวมเรื่องรวมของ ทั้งหมดเลยนะครับ ก็คือเรื่อง non-primitive เนี่ย ก็คือเท่ากับ mutable นะครับ หรือเราเรียกอีก อย่างหนึ่งว่าเป็น reference type หรือว่า object นั่นเองนะครับ object มีอะไรบ้างก็คือมี object มี array มี date มี regular expression มี math object มี function แล้วก็อื่นๆ อีกมากมายที่ ไม่ได้พูดถึงในนี้เนาะ อ่ะ

สมมุติว่าเราสร้าง object sherlock ขึ้นมานะครับ เดี๋ยวผมจะ วาดรูปให้ดู สิ่งที่เกิดขึ้นนะ

สิ่งที่เกิดขึ้นนะครับ มันก็จะสร้างตัวแปรที่ชื่อว่า

เชอร์ล็อกขึ้นมาเนาะ

ทีนี้มันก็จะสร้างสิ่งที่เรียกว่า object reference ขึ้นมาครับ แบบนี้

ถามว่าทำไมถึงชื่อ object reference นะครับ เพราะว่า ค่าของหรือเราเรียกว่า property เนี่ย ที่เป็น surname หรือว่า age เนี่ย มันไม่ได้เก็บไว้ใน object physically นะครับ แต่ว่า โค้ดเรามันทำให้ดูเหมือนมันเก็บใน object เนาะ แต่จริงๆแล้วมันก็เหมือนกับ การเราประกาศตัวแปรแหละ มันก็คือเก็บที่อื่น แต่ว่าตัว object เนี่ย ทำหน้าที่ reference ไปว่ามันจะไปที่ไหน เนี่ย มันก็เลยเป็นที่มาของชื่อว่า reference type นะครับ

สมมุติว่ามี Holmes งี้เนาะ

แล้วก็มี age ที่ชื่อว่า 64 ครับ

ทีนี้สิ่งที่เกิดขึ้น object เนี่ย มันก็จะสร้าง ลิงก์ไปที่ string ที่ชื่อว่า Holmes สิ่งนี้มันเรียกว่า property เนาะ property ก็ชื่อว่า surname แล้วก็ตัวนี้ก็จะชื่อว่า age แบบนี้

แล้วเชอร์ล็อกก็จะชี้ไปที่

ตัว object ตัวนี้ครับ อันนี้ก็คือสิ่งที่เกิดขึ้นจริงๆ ดังนั้นผมอยากให้ทุกคนเนี่ย เปลี่ยน ถ้าใครแบบ มองภาพว่า object เนี่ย hold แบบเก็บค่าทั้งหมดเนี่ย ก็อาจจะต้องเปลี่ยน mental model นิดนึงนะครับ เพราะว่ามันจะส่งผลต่อวิธีการคิดของเราเนาะ เสร็จแล้วปุ๊บเนี่ย สมมุติว่าถ้าเราเรียก console.log อย่างงี้ sherlock.age สิ่งที่มันเกิดขึ้น console.log ก็จะไปดูว่า โอเค ตัวแปร sherlock มันชี้ไปที่ไหน โอเค ตัวแปร sherlock ตอนนี้ ชี้ไปที่ object แล้ว age เนี่ย age ใน object เนี่ยชี้ไว้ไหน ก็คือชี้ไปที่ 64 งั้นมันก็คือ 64 เนาะ

อันนี้ basic ไม่มีอะไรนะครับ แต่ว่าถ้าเราเปลี่ยนเป็น sherlock.age เท่ากับ 65 นะครับ สิ่งที่เกิดขึ้นก็คือคล้ายๆกับ variable เลยครับ มันก็จะสร้างตัวแปร มันก็สร้าง number ที่เป็น 65 ขึ้นมา

แล้วแก้ตัว age เนี่ย เปลี่ยนจาก 64 เป็น 65 แบบนี้ อันนี้ก็จะหายไปหรือจะอยู่ เราไม่สนใจ เพราะว่ามันเป็นหน้าที่ของ garbage collector นะครับ อันเนี้ยก็เป็น basic เนาะคร่าวๆ

อันต่อไปนะครับ คือสมมุติว่าผมอยากสร้าง object ที่ชื่อว่า john เหมือนกัน แต่ว่าใช้ sherlock.address ประมาณนี้

เดี๋ยวผมขออนุญาตลบย้ายอันนี้ก่อนเนาะ sherlock เหมือนเดิมเลย sherlock ไม่เหมือนเดิมนี่หว่า มี city ด้วย sherlock surname Holmes แต่ว่าไม่มี age แล้ว เปลี่ยนเป็น city

อันต่อไปนะครับ สิ่งที่ mental model อีกอันนึง ที่เราอาจจะต้องจำไว้นะครับ object ไม่ซ้อน object เนาะ object ก็คือจะแยกกันต่างหาก แต่ว่า visual ของการเขียน code อ่ะ มันทำให้เรารู้สึกว่า object มันอยู่ใน object นะครับ เพราะว่าเดี๋ยวมันจะส่งผล เดี๋ยวมันจะมีอีกอันนึง ที่จะให้ดูนะครับ

ทีเนี้ยอย่าง sherlock เนี่ย มันก็จะมี object ตัวนึงเนาะ sherlock มี object ตัวนึงที่มี London อยู่ข้างใน … London

แล้วมันก็จะชี้ไปที่ London อย่างงี้ ซึ่งมี property ที่ชื่อว่า city แล้ว object sherlock เนี่ย ก็จะชี้ไปที่ object นี่อีกที โดยใช้ property ที่ชื่อว่า address แบบนี้ครับ

9 นาที โอเค ทีนี้สมมุติว่าผมอยากสร้าง John ขึ้นมานะครับ John surname Watson แต่ว่าใช้ address กับ sherlock สิ่งที่เกิดขึ้นนะครับ มันก็จะมี John ขึ้นมาเนาะ อันนี้ทุกคนน่าจะพอเริ่มตามทันละ John Watson

วัตสัน แล้วก็มี object ขึ้นมาตัวหนึ่ง

john ชี้ไปที่ object ตัวนี้ ใช่มั้ย john เท่ากับก็คือชี้ไปที่เนาะ ชี้ไปที่ object แล้วก็ surname นี่ก็เป็น Watson - surname เป็น property ที่ชื่อว่า surname ทีนี้ มันจะใช้ sherlock.address เนี่ย มันก็จะเข้าไปอีล็อกที่ ตอนแรกที่เราถาม

ว่าทำไมมันถึงแก้ตัวข้างบนด้วยอ่ะครับ เวลาเรา reference นะครับ ตามที่ชื่อมันบอกเนาะ reference ตัว object อ่ะ สิ่งที่มันเกิดขึ้นนะครับ มันไม่ได้ก๊อปมาเนาะ มันจะเป็น reference ตามที่เราต้องการครับ อย่างตัว address ตัวนี้ มันจะเป็น reference ที่ชื่อว่า sherlock.address ซึ่งมันก็คือ object ตัวนี้ สิ่งที่เกิดขึ้นคือเป็นอย่างนี้ครับ ชี้มาที่เดียวกัน

ตัวนี้ก็เป็น address ประมาณนี้ มันก็เป็นสาเหตุว่าทำไมโค้ด ไอ้อันแรกเมื่อกี้ครับ ที่ว่า copy of อ่ะครับ ทำไมเราแก้ใน object ตัวนี้ แล้วมันไปแก้ตัว original ด้วยอะไรอย่างเงี้ยครับ อันนี้เป็นที่มาของมันเนาะ

ทีนี้ สมมุติว่าถ้าเรา ไปแก้ john city อะไรเงี้ยครับ เนี่ย บรรทัดที่ 12 เนี่ย อันนี้ช่างหัวมันบรรทัด 11 เนี่ย บรรทัด 12 เลย เราอยากแก้ john.address.city เป็น Malibu สิ่งที่เกิดขึ้นนะครับ เราก็จะไปดูว่าโอเค john object john เนี่ย ชี้ ชี้ไปที่ address ใช่มั้ย address คือตรงนี้ แล้วเปลี่ยน city ตรงนี้ ถ้าเราเปลี่ยน city ตรงนี้ เป็น Malibu

สิ่งที่เกิดขึ้นก็คือ sherlock ก็เปลี่ยนด้วยครับ อันนี้ก็เป็นที่มาของ คำว่า reference type อยากให้ทุกคนเข้าใจตรงกันนะครับจะได้ ไปสอนลูกสอนหลาน ครับ

อันนี้ก็เป็นที่ผม บอกว่า ตอบคำถามแก่เพราะว่าทำไมมันถึงแก้น่ะ เพราะว่าเราเนี่ย ไป reference กับตัว original น่ะ เราไม่ได้ก๊อปปีมาเนาะ แต่ว่าพอเรามาเปลี่ยนปุ๊บตรงนี้ ตัว original ก็จะเปลี่ยนด้วย แต่ถามว่าเมื่อกี้ ถ้าอยากเปลี่ยนแค่ address ของจอห์น โดยที่ไม่กระทบของเชอร์ล็อก มันทำได้มั้ย

มันก็พอทำได้เนาะ มันก็น่าจะมีเทคนิคอยู่อะไรเงี้ยครับ

จริงๆแล้วครับ ปกติเราเขียน john.address.city เงี้ยเนาะ

เราถ้าเราอยากเปลี่ยนน่ะ ปกติเราทำไง เราก็อย่างงี้ john.address.city = { city: 'Malibu' }

ใช่มั้ย

ใช่ๆ เอ่อ ไม่ใช่ ไม่ต้องอย่างงี้อ่ะ

โอเค ก็คือสร้าง object city ขึ้นมา ให้มันใหม่เลย อะไรอย่างเงี้ยครับ สิ่งที่มันเกิดขึ้น มันก็จะสร้างมาตัวใหม่ แบบนี้ แล้วก็เปลี่ยนจากชี้ตรงเนี้ย มาข้างล่างนี้เนี่ย ซึ่งตัวนี้ก็ยังเหมือนเดิมนะ อะไรวะ เมื่อกี้แล้ว อะไรไม่รู้อ่ะ เออ ประมาณนี้ครับ

เหลือ 5 นาทีอ่ะ โอเค

สุดท้ายแล้วอ่ะครับ

ตัวอย่างการเปรียบเทียบค่าใน JavaScript25:27

มันจะมี meme ตัวนึง ที่เราชอบเห็น ที่เค้าชอบล้อ JavaScript อ่ะครับ ไอ้เนี้ย เดี๋ยวนะ แป๊บนึง 1 == 1 = true

เดี๋ยวนะ 1 == 1 เอ้ย console.log เดี๋ยวนะ console.log(1 == 1)

1 เท่ากับ 1 มันก็คือ true ใช่มั้ย

ถ้าอันนี้คือ number เท่ากับ number ถ้าตรงกันเค้าก็ true ถ้าเป็น string

one กับ one true เหมือนกัน แต่ว่า มันเป็นเพราะอะไรวะ ทำไม

พอเราทำอย่างเงี้ย

มันหน้าตาเหมือนกันน่ะ แต่มันไม่ true ได้ไงวะ

ใช่ไหม

เหตุผลก็เพราะว่าที่เราดูไปเมื่อกี้ เพราะว่า object 2 ตัวเนี่ย มันคนละตัวกัน แค่นั้นเอง อย่างที่บอกว่า ตัวที่เป็น

พวกที่เป็น primitive อ่ะครับ ใน JavaScript ในจักรวาลของ JavaScript อ่ะ เวลาชี้อ่ะครับ มันจะชี้ไปที่ตำแหน่ง เดียวกัน มันก็คือมี 2 คือ ถ้ามันมี 2 อ่ะ มันก็เป็น 2 ตัวเดียวกัน ในทุกๆ ที่ของโค้ดเรา ดังนั้นเวลาเรา ไป reference มัน เอา in the background นะ เวลาเราเขียนว่า y เท่ากับ 2 มันจะชี้ไปที่เดียวกันทั้งหมด แต่ว่า ถ้าเป็นไม่ใช่พวก primitive น่ะครับ มันจะสร้างขึ้นมาใหม่ทุกครั้ง ที่เราเรียกใช้มัน ดังนั้นเป็นสาเหตุว่าทำไมเวลาเรา เท่ากับมันน่ะ มันไม่เท่ากับ มันก็คือจะไม่ true เพราะว่ามันเป็นคนละตัวกัน แค่นั้นเองครับ โอเค น่าจะประมาณนี้ สุดท้ายแล้ว หวังว่า

หวังอย่างน้อยนะทุกคนน่าจะ วันนี้กลับบ้านไปน่าจะเข้าใจว่าทำไม อีตัวนี้ ที่ผมพูด อันสุดท้ายเนี่ย ทำไมมันเท่ากับกันแล้วไม่เป็น true เนาะ

แนะนำหนังสือและแหล่งเรียนรู้ JavaScript27:34

อ่ะ ทีนี้เหลือ 3 นาที ผมอยากฝากครับ ใครเขียน React บ้างครับ รู้จักคนนี้ไหมครับ

ถ้าใครไม่รู้จักต้องรู้จักนะครับ เพราะว่าเค้า เป็น core team ของ React เนาะ talk ทั้งหมดที่ผมมาวันนี้ครับ มันเกิดจากการที่ผมไปอ่าน หนังสือเค้า ต่อไปนี้ เป็นหนังสือที่ผมอ่ะ อยากจะแนะนำให้ไปอ่านครับ มันเป็น ebook เนาะ มันเป็น website website ตัวนี้ชื่อว่า JustJavaScript.com ทุกคน ตามไปตำเลยครับ ดีโคตรๆ เอาไว้ซื้อให้ลูก ให้หลานนะครับ ใครที่เป็นหน้าใหม่เข้ามาในวงการ กรุณาไปอ่าน อันนี้ recommend มากนะครับ ผมบอกเลยว่าอันนี้ยเปลี่ยนชีวิต ผม ทำให้ผมจาก การที่เป็นแบบ เป็น JavaScript ที่ไม่รู้เรื่องอ่ะ เปลี่ยนผมเป็นอีกคนนึงเลยอะไรเงี้ยครับ โอเค

น่าจะประมาณนี้ครับ ขอบคุณครับ

ไม่ให้ถามนะครับ เพราะว่าไม่รู้

ช่วงถาม-ตอบ: ประสบการณ์การเปลี่ยนจาก UX เป็น JavaScript Developer28:41

พูดเล่นครับ มีใครมีอะไรถามมั้ยครับ ถ้าตอบได้ก็จะตอบ ถ้าตอบไม่ได้ก็จะให้คนอื่นตอบแทน โอเคครับ มีคำถามอีกมั้ยครับ

ครับผม ในฐานะที่เราเปลี่ยนจาก UX มาเป็น javascript เนี่ย

มันมี barrier อะไรที่เรารู้สึกว่า

ถ้าเรารู้แต่แรก เราน่าจะรู้ได้เลยกว่านี้มั้ยครับ

ถ้าเรารู้แต่แรก ก็คือ ผมมา realize ว่า ไม่ว่าเราจะเรียนรู้อะไรอะ พื้นฐานเป็นอะไรที่สำคัญที่สุดในชีวิต ดังนั้นเวลาที่ผมจะเรียนอะไร ผมมักจะเรียนพื้นฐานของมันก่อนเสมอครับ ช่วยได้ดีมาก แล้วก็ไม่เป็น skill dev เรียกว่า technical dev ก็ไม่ใช่ - เป็น skill dev ในอนาคตอะไรอย่างเงี้ยครับ ว่าแบบ สิ่งที่เราทำไปคืออะไรไม่รู้อย่างเงี้ยครับ อย่างน้อยทุกโค้ดที่เราเขียนไป ทุกบรรทัดที่เรา execute เราเข้าใจว่ามันเกิดอะไรขึ้น under the hood อะไรอย่างเงี้ยครับ มันก็ช่วยให้เราเป็น dev ที่ดีขึ้นน่ะแหละ ประมาณนี้ครับ

โอเคครับ