คำถามและคำตอบในการสัมภาษณ์ JavaScript ที่พบบ่อย

การมี JavaScript ในพอร์ตโฟลิโอของคุณจะเพิ่มโอกาสในการได้รับบทบาทนักพัฒนาซอฟต์แวร์ ที่กล่าวว่า มาดูคำถามสัมภาษณ์ JavaScript ที่พบบ่อย

JavaScript เป็นหนึ่งในภาษาที่ใช้มากที่สุดในการพัฒนาเว็บ ปัจจุบันใช้ในการพัฒนาแอปพลิเคชันเกือบทุกชนิด

ก่อนเข้าสู่คำถามสัมภาษณ์ เรามาดูข้อดีของการเรียนรู้ JavaScript กันก่อน

JavaScript เป็นภาษาการเขียนโปรแกรมที่มีน้ำหนักเบา ตีความ หรือคอมไพล์แบบทันเวลาพอดี เป็นหนึ่งในภาษาหลักของเวิลด์ไวด์เว็บ คุณรู้จักภาษาหลักอีกสองภาษาของ www. คุณควรค้นหาพวกเขาถ้าคุณไม่

JavaScript ถูกสร้างขึ้นสำหรับเว็บเป็นหลัก แต่ไม่ใช่แค่สำหรับเว็บเท่านั้นในตอนนี้ ด้วยความช่วยเหลือของสภาพแวดล้อมเช่น Node, Deno และอื่น ๆ เราสามารถเรียกใช้งานได้บนเกือบทุกแพลตฟอร์ม

ลองมาดูข้อดีของมันกัน

ข้อดีของจาวาสคริปต์

1. ง่ายต่อการเริ่มต้นใช้งาน คุณสามารถเรียนรู้ได้แม้ไม่มีความรู้ด้านการเข้ารหัส
2. ชุมชนขนาดใหญ่รอบๆ คุณจะได้รับความช่วยเหลือทั้งหมดที่คุณต้องการหากคุณติดอยู่ที่ใดก็ตาม
3. มีไลบรารี/เฟรมเวิร์กจำนวนมากที่สร้างโดยใช้ JavaScript ซึ่งช่วยให้พัฒนาแอปพลิเคชันได้เร็วขึ้น
4. เราสามารถพัฒนา frontend, backend, android, iOS, etc.., applications ด้วย JavaScript เราสามารถสร้างแอปพลิเคชันได้เกือบทุกประเภท แต่มันแข็งแกร่งกว่าในการพัฒนาเว็บ

ประเภทข้อมูลใน JavaScript คืออะไร?

ชนิดข้อมูลใช้เพื่อจัดเก็บข้อมูลประเภทต่างๆ ชนิดข้อมูลจะแตกต่างจากภาษาโปรแกรมหนึ่งไปยังอีกภาษาหนึ่ง ใน JavaScript เรามีข้อมูล 8 ประเภท มาดูกันทีละคน

• ตัวเลข
• สตริง
• บูลีน
• ไม่ได้กำหนด
• โมฆะ
• บิ๊กอินท์
• สัญลักษณ์
• วัตถุ

ชนิดข้อมูลทั้งหมดยกเว้น Object เรียกว่าค่าดั้งเดิม และไม่เปลี่ยนรูป

วิธีการในตัวใน JavaScript คืออะไร?

เมธอดที่มีอยู่แล้วใน JavaScript นั้นแตกต่างกันไปสำหรับข้อมูลแต่ละประเภท เราสามารถเข้าถึงเมธอดในตัวเหล่านี้ได้โดยใช้ประเภทข้อมูลที่เกี่ยวข้อง มาดูวิธีการในตัวสำหรับประเภทข้อมูลและโครงสร้างข้อมูลต่างๆ กัน

1. ตัวเลข
   • แก้ไข
   • toString
   • …
2. สตริง
   • เป็นตัวพิมพ์เล็ก
   • เริ่มต้นด้วย
   • แผนภูมิที่
   • …
3. อาร์เรย์
   • กรอง
   • แผนที่
   • แต่ละ
   • …

มีเมธอดในตัวมากมายสำหรับข้อมูลแต่ละประเภท คุณสามารถตรวจสอบการอ้างอิงสำหรับเมธอดในตัวทั้งหมดของชนิดข้อมูลและโครงสร้างข้อมูลต่างๆ

จะสร้างอาร์เรย์ใน JavaScript ได้อย่างไร?

อาร์เรย์เป็นหนึ่งในโครงสร้างข้อมูลหลักใน JavaScript อาร์เรย์สามารถมีข้อมูลประเภทใดก็ได้เนื่องจาก JavaScript เป็นไดนามิก มาดูวิธีสร้างอาร์เรย์ใน JavaScript กัน

เราสามารถสร้างอาร์เรย์โดยใช้วงเล็บเหลี่ยม [] การสร้างวัตถุนั้นตรงไปตรงมาและรวดเร็ว

 // Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);

เราสามารถสร้างอาร์เรย์โดยใช้ตัวสร้าง Array ผู้คนไม่ค่อยใช้ตัวสร้างเพื่อสร้างอาร์เรย์ในโครงการทั่วไป

 // Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);

อาร์เรย์ JavaScript นั้นไม่แน่นอน นั่นคือเราสามารถแก้ไขได้ตามที่เราต้องการหลังจากสร้างมันขึ้นมา

จะสร้างวัตถุใน JavaScript ได้อย่างไร?

นอกจากอาร์เรย์แล้ว อ็อบเจกต์ยังเป็นโครงสร้างข้อมูลหลักอีกรูปแบบหนึ่งใน JavaScript วัตถุกำลังใช้เก็บคู่คีย์-ค่า คีย์ต้องเป็นค่าที่ไม่เปลี่ยนรูป ในขณะที่ค่าสามารถเป็นอะไรก็ได้ มาดูวิธีสร้างวัตถุใน JavaScript กัน

เราสามารถสร้างวัตถุโดยใช้วงเล็บปีกกา {} การสร้างวัตถุนั้นตรงไปตรงมาและรวดเร็ว

 // Empty object const object = {}; // Object with some random values const randomObject = { 1: 2, one: "Two", true: false }; console.log(object, randomObject);

เราสามารถสร้างวัตถุโดยใช้ตัวสร้าง Object คนไม่ค่อยใช้ในโครงการทั่วไป

 // Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);

ออบเจกต์ JavaScript นั้นไม่แน่นอน กล่าวคือ เราสามารถแก้ไขได้หลังจากสร้าง ดังที่คุณเห็นในตัวอย่างที่ 2

คุณดีบักโค้ด JavaScript อย่างไร

รหัสการดีบักไม่ตรงไปตรงมา และมันแตกต่างจากภาษาการเขียนโปรแกรมหนึ่งไปยังอีกภาษาหนึ่ง โครงการหนึ่งไปยังอีกโครงการหนึ่ง ฯลฯ..; มาดูสิ่งทั่วไปที่ใช้ในการดีบัก JavaScript กัน

#1. การบันทึก

เราสามารถใช้คำสั่ง console.log ในหลายตำแหน่งในรหัสของเราเพื่อระบุจุดบกพร่อง โค้ดจะหยุดรันโค้ดบรรทัดถัดไปเมื่อมีบั๊กในบรรทัดก่อนหน้า

การบันทึกเป็นวิธีการดีบักแบบเก่าวิธีหนึ่ง ซึ่งค่อนข้างมีประสิทธิภาพสำหรับโครงการขนาดเล็ก เป็นเทคนิคการดีบักทั่วไปสำหรับภาษาโปรแกรมใดๆ

#2. เครื่องมือสำหรับผู้พัฒนา

ส่วนใหญ่จะใช้ JavaScript สำหรับการพัฒนาเว็บแอปพลิเคชัน ดังนั้น เบราว์เซอร์เกือบทั้งหมดจึงมีเครื่องมือสำหรับนักพัฒนาที่ช่วยในการดีบักโค้ด JavaScript

วิธีการแก้จุดบกพร่องที่ใช้มากที่สุดวิธีหนึ่งคือการตั้งค่าเบรกพอยต์ในเครื่องมือสำหรับนักพัฒนา เบรกพอยต์จะหยุดการทำงานของ JavaScript และให้ข้อมูลทั้งหมดเกี่ยวกับการดำเนินการในขณะนี้

เราสามารถตั้งค่าเบรกพอยต์หลายจุดรอบ ๆ สถานที่ที่เราได้รับข้อผิดพลาดและดูว่าอะไรเป็นสาเหตุ เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการแก้ไขข้อบกพร่องของเว็บแอปพลิเคชัน JavaScript

#3. ไอดี

เราสามารถใช้ IDE เพื่อดีบัก JavaScript VS Code รองรับการดีบักด้วยเบรกพอยต์ คุณลักษณะการดีบักอาจแตกต่างกันไปตาม IDE ที่คุณใช้ แต่ IDE ส่วนใหญ่จะมีคุณสมบัตินั้น

จะเพิ่มโค้ด JavaScript ในไฟล์ HTML ได้อย่างไร?

เราสามารถเพิ่มไฟล์ JavaScript HTML โดยใช้แท็ก script คุณสามารถตรวจสอบตัวอย่างด้านล่าง

 <!DOCTYPE html> <html lang="en"> <head> <title>Geekflare</title> </head> <body> <h1>Geekflare</h1> <script> // JavaScript code goes here console.log("This is JavaScript code"); </script> </body> </html>

คุกกี้คืออะไร?

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

คุกกี้จะไม่ถูกล้างแม้ว่าเราจะรีเฟรชหน้านี้จนกว่าเราจะลบหรือหมดอายุ คุณสามารถตรวจสอบคุกกี้ของเว็บแอป/เว็บเพจในเบราว์เซอร์ใดก็ได้โดยเปิดเครื่องมือสำหรับนักพัฒนา

วิธีการอ่านคุกกี้?

เราสามารถอ่านคุกกี้ใน JavaScript โดยใช้ document.cookie มันจะคืนคุกกี้ทั้งหมดที่เราสร้างขึ้น

 console.log("All cookies", document.cookie);

มันจะส่งคืนสตริงว่างหากไม่มีคุกกี้

จะสร้างและลบคุกกี้ได้อย่างไร?

เราสามารถสร้างคุกกี้ได้โดยตั้งค่าคู่คีย์-ค่าเป็น document.cookie มาดูตัวอย่างกัน

 document.cookie = "one=One;";

ในไวยากรณ์ข้างต้น คีย์คุกกี้ one ตัวและ One คือค่าของมัน เราสามารถเพิ่มแอตทริบิวต์ให้กับคุกกี้ได้ เช่น โดเมน พาธ หมดอายุ เป็นต้น แต่ละรายการควรคั่นด้วย เครื่องหมายอัฒภาค (;) แอตทริบิวต์ทั้งหมดเป็นตัวเลือก

มาดูตัวอย่างที่มีแอตทริบิวต์กัน

 document.cookie = "one=One;expires=Jan 31 2023;path=/;";

ในโค้ดข้างต้น เราได้เพิ่มวันหมดอายุและเส้นทางไปยังคุกกี้ หากไม่ได้ระบุวันหมดอายุ คุกกี้จะถูกลบหลังจากเซสชัน เส้นทางเริ่มต้นจะเป็นเส้นทางของไฟล์ รูปแบบวันหมดอายุควรเป็น GMT

มาดูวิธีสร้างคุกกี้หลายรายการ

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

คุกกี้จะไม่ถูกเขียนทับหากคีย์หรือเส้นทางแตกต่างกันขณะตั้งค่าคุกกี้หลายรายการ หากคีย์และพาธเหมือนกัน มันจะเขียนทับคุกกี้ก่อนหน้า ตรวจสอบตัวอย่างด้านล่าง ซึ่งจะเขียนทับคุกกี้ชุดก่อนหน้า

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";

เราได้ลบวันหมดอายุออกจากคุกกี้และเปลี่ยนค่า

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

เราได้เห็นวิธีสร้างและอัปเดตคุกกี้แล้ว มาดูวิธีลบคุกกี้กัน

การลบคุกกี้เป็นเรื่องง่าย เพียงเปลี่ยนวันหมดอายุของคุกกี้เป็นวันที่ผ่านมา ตรวจสอบตัวอย่างด้านล่าง

 // Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

คุณจะไม่พบคุกกี้ตัวสุดท้ายในคุกกี้เนื่องจากคุกกี้ถูกลบในบรรทัดสุดท้ายของโค้ด เพียงเท่านี้สำหรับบทเรียนคุกกี้ขั้นต่ำ

JavaScript frameworks ต่างกันอย่างไร?

มีเฟรมเวิร์ก JavaScript จำนวนมากอยู่ที่นั่น React, Vue, Angular ฯลฯ สำหรับการพัฒนา UI Express, Koa, Nest ฯลฯ สำหรับการพัฒนาฝั่งเซิร์ฟเวอร์ NextJS, Gatsby ฯลฯ สำหรับการสร้างไซต์แบบสแตติก React Native, Ionic ฯลฯ สำหรับการพัฒนาแอพมือถือ เราได้กล่าวถึงเฟรมเวิร์ก JavaScript บางส่วนที่นี่ คุณสามารถค้นหาเฟรมเวิร์กเพิ่มเติมที่ต้องใช้เวลามากในการสำรวจ สำรวจเมื่อคุณต้องการ

การปิดใน JavaScript

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

 function outer() { const a = 1; function inner() { // We can access all the data from the outer function scope here // The data will be available even if we execute this function outside the outer function // as inners' closure formed while creating it console.log("Accessing a inside inner", a); } return inner; } const innerFn = outer(); innerFn();

การปิดใช้กันอย่างแพร่หลายในแอปพลิเคชัน JavaScript คุณอาจเคยใช้มันมาก่อนโดยไม่รู้ว่ามันกำลังปิดอยู่ มีอะไรมากกว่านี้ให้เรียนรู้เกี่ยวกับการปิด ตรวจสอบให้แน่ใจว่าคุณได้เรียนรู้แนวคิดนี้อย่างสมบูรณ์

การยกใน JavaScript

Hoisting เป็นกระบวนการใน JavaScript ซึ่งการประกาศตัวแปร ฟังก์ชัน และคลาสจะย้ายไปที่ด้านบนสุดของขอบเขตก่อนที่จะดำเนินการโค้ด

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "Geekflare";

หากคุณเรียกใช้โค้ดด้านบน คุณจะไม่พบข้อผิดพลาดใดๆ แต่ในภาษาส่วนใหญ่ คุณจะได้รับข้อผิดพลาด เอาต์พุตจะไม่ถูก undefined เนื่องจากการยกขึ้นจะย้ายการประกาศไปที่ด้านบนเท่านั้น และจะไม่เริ่มต้นจนกว่าจะถึงบรรทัดที่ 3

เปลี่ยน var เป็น let หรือ const ตามนี้ แล้วรันโค้ดอีกครั้ง

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "Geekflare";

ตอนนี้ คุณจะได้รับข้อผิดพลาดในการอ้างอิงว่าเราไม่สามารถเข้าถึงตัวแปรก่อนที่จะเริ่มต้น

 ReferenceError: Cannot access 'name' before initialization

ดังนั้น ต่อไปนี้เป็นการแนะนำ let และ const ใน ES6 ซึ่งไม่สามารถเข้าถึงได้ก่อนที่จะเริ่มต้น ตามที่ข้อผิดพลาดแนะนำ นี่เป็นเพราะตัวแปรที่ประกาศด้วย let หรือ const จะอยู่ใน Temporal Dead Zone (TDZ) จนกว่าจะเริ่มต้นบรรทัดนั้น เราไม่สามารถเข้าถึงตัวแปรจาก TDZ

แกงใน JavaScript

การแกงเป็นเทคนิคในการแปลงฟังก์ชันที่มีพารามิเตอร์จำนวนมากเป็นพารามิเตอร์ที่น้อยลงโดยมีหลายการเรียก ด้วยวิธีนี้ เราสามารถแปลงฟังก์ชันที่เรียกได้ add(a, b, c, d) เป็นเพิ่ม (a)(b)(c)(d) ที่เรียกได้ มาดูตัวอย่างวิธีทำกัน

 function getCurryCallback(callback) { return function (a) { return function (b) { return function (c) { return function (d) { return callback(a, b, c, d); }; }; }; }; } function add(a, b, c, d) { return a + b + c + d; } const curriedAdd = getCurryCallback(add); // Calling the curriedAdd console.log(curriedAdd(1)(2)(3)(4));

เราสามารถสรุปฟังก์ชั่น getCurryCallback ซึ่งจะใช้สำหรับฟังก์ชั่นต่าง ๆ เพื่อแปลงเป็น callables แกง คุณสามารถดูข้อมูล JavaScript สำหรับรายละเอียดเพิ่มเติมได้

ความแตกต่างระหว่างเอกสารและหน้าต่าง

window เป็นวัตถุบนสุดในเบราว์เซอร์ ประกอบด้วยข้อมูลทั้งหมดเกี่ยวกับหน้าต่างเบราว์เซอร์ เช่น ประวัติ ตำแหน่ง เนวิเกเตอร์ ฯลฯ มีให้บริการทั่วโลกใน JavaScript เราสามารถใช้ได้โดยตรงในโค้ดของเราโดยไม่ต้องนำเข้าใดๆ เราสามารถเข้าถึงคุณสมบัติและวิธีการของวัตถุ window โดยไม่มี window.

document เป็นส่วนหนึ่งของวัตถุ window HTML ทั้งหมดที่โหลดบนหน้าเว็บจะถูกแปลงเป็นวัตถุเอกสาร วัตถุเอกสารอ้างถึงองค์ประกอบ HTMLDocument พิเศษ ซึ่งจะมีคุณสมบัติและวิธีการที่แตกต่างกันเช่นเดียวกับองค์ประกอบ HTML ทั้งหมด

window ที่วัตถุแทนหน้าต่างเบราว์เซอร์และ document แสดงถึงเอกสาร HTML ที่โหลดในหน้าต่างเบราว์เซอร์นั้น

ความแตกต่างระหว่างฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์

ฝั่งไคลเอ็นต์หมายถึงผู้ใช้ปลายทางที่ใช้แอปพลิเคชัน ฝั่งเซิร์ฟเวอร์หมายถึงเว็บเซิร์ฟเวอร์ที่มีการปรับใช้แอปพลิเคชัน

ในคำศัพท์เฉพาะส่วนหน้า เราสามารถเรียกเบราว์เซอร์บนคอมพิวเตอร์ของผู้ใช้ว่าเป็นฝั่งไคลเอนต์และบริการคลาวด์เป็นฝั่งเซิร์ฟเวอร์

ความแตกต่างระหว่าง innerHTML และ innerText

ทั้ง innerHTML และ innerText เป็นคุณสมบัติขององค์ประกอบ HTML เราสามารถเปลี่ยนเนื้อหาขององค์ประกอบ HTML โดยใช้คุณสมบัติเหล่านี้

เราสามารถกำหนดสตริง HTML ให้กับ innerHTML โดยแสดงคุณสมบัติเหมือน HTML ทั่วไป ตรวจสอบตัวอย่างด้านล่าง

 const titleEl = document.getElementById("title"); titleEl.innerHTML = '<span style="color:orange;">Geekflare</span>';

เพิ่มหนึ่งองค์ประกอบที่มี title รหัสใน HTML ของคุณ และเพิ่มสคริปต์ด้านบนไปยังไฟล์ JavaScript เรียกใช้รหัสและดูผลลัพธ์ คุณจะ Geekflare สีส้ม และถ้าคุณตรวจสอบองค์ประกอบ องค์ประกอบนั้นจะอยู่ภายในแท็ก span ดังนั้น innerHTML จะใช้สตริง HTML และแสดงผลเป็น HTML ปกติ

innerText ด้านในอีกด้านหนึ่งจะใช้สตริงปกติและแสดงผลตามที่เป็นอยู่ จะไม่แสดง HTML ใด ๆ เช่น innerHTML เปลี่ยน innerHTML เป็น innerText ในโค้ดด้านบนและตรวจสอบผลลัพธ์

 const titleEl = document.getElementById("title"); titleEl.innerText = '<span style="color:orange;">Geekflare</span>';

ตอนนี้คุณจะเห็นสตริงที่เราให้ไว้บนหน้าเว็บ

ความแตกต่างระหว่าง let และ var

คำหลัก let และ var ใช้เพื่อสร้างตัวแปรใน JavaScript คีย์เวิร์ด let ถูกนำมาใช้ใน ES6

let เป็นขอบเขตบล็อกและ var เป็นขอบเขตฟังก์ชัน

 { let a = 2; console.log("Inside block", a); } console.log("Outside block", a);

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

 { var a = 2; console.log("Inside block", a); } console.log("Outside block", a);

คุณจะไม่ได้รับข้อผิดพลาดใด ๆ เนื่องจากเราสามารถเข้าถึง a นอกบล็อกได้เช่นกัน ตอนนี้เรามาแทนที่บล็อกด้วยฟังก์ชัน

 function sample() { var a = 2; console.log("Inside function", a); } sample(); console.log("Outside function", a);

คุณจะได้รับข้อผิดพลาดในการอ้างอิงหากคุณเรียกใช้โค้ดด้านบนเนื่องจากเราไม่สามารถเข้าถึง var a นอกฟังก์ชันได้เนื่องจากเป็นขอบเขตของฟังก์ชัน

เราสามารถประกาศตัวแปรใหม่โดยใช้คำหลัก var แต่เราไม่สามารถประกาศตัวแปรใหม่โดยใช้คำหลัก let มาดูตัวอย่างกัน

 var a = "Geekflare"; var a = "Chandan"; console.log(a);

 let a = "Geekflare"; let a = "Chandan"; console.log(a);

รหัสชิ้นแรกจะไม่ส่งข้อผิดพลาดใด ๆ และค่า a จะถูกเปลี่ยนเป็นค่าที่กำหนดล่าสุด โค้ดชิ้นที่ 2 จะส่งข้อผิดพลาดเนื่องจากเราไม่สามารถประกาศตัวแปรใหม่โดยใช้ let

ความแตกต่างระหว่างที่เก็บข้อมูลเซสชันและที่เก็บข้อมูลในตัวเครื่อง

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

ที่เก็บข้อมูลเซสชันจะถูกล้างหลังจากเซสชันสิ้นสุดลง (เมื่อปิดเบราว์เซอร์) พื้นที่เก็บข้อมูลตำแหน่งจะไม่ถูกล้างจนกว่าเราจะล้าง

เราสามารถเข้าถึง อัปเดต และลบที่เก็บข้อมูลเซสชันและที่เก็บข้อมูลตำแหน่งด้วยวัตถุ sessionStorage และ localStorage ตามลำดับ

NaN ใน JavaScript คืออะไร

NaN ย่อมาจาก Not-a-Number แสดงว่าบางสิ่งไม่ใช่ตัวเลขที่ถูกต้องตามกฎหมาย/ถูกต้องใน JavaScript มีบางกรณีที่เราจะได้ NaN เป็นเอาต์พุตเช่น 0/0 , undefined * 2 , 1 + undefined , null * undefined etc..,

ขอบเขตคำศัพท์คืออะไร?

ขอบเขตคำศัพท์หมายถึงการเข้าถึงตัวแปรจากขอบเขตของพาเรนต์ สมมติว่าเรามีฟังก์ชันที่มีฟังก์ชันภายในสองฟังก์ชัน ฟังก์ชันที่อยู่ด้านในสุดสามารถเข้าถึงตัวแปรขอบเขตของฟังก์ชันหลักสองตัวได้ ในทำนองเดียวกัน ฟังก์ชันระดับที่ 2 สามารถเข้าถึงขอบเขตฟังก์ชันที่อยู่นอกสุดได้ ลองดูในตัวอย่าง

 function outermost() { let a = 1; console.log(a); function middle() { let b = 2; // `a` are accessible here console.log(a, b); function innermost() { let c = 3; // both `a` and `b` are accessible here console.log(a, b, c); } innermost(); } middle(); } outermost();

JavaScript ใช้ขอบเขตขอบเขตเพื่อค้นหาตัวแปรเมื่อเราเข้าถึงที่ใดที่หนึ่งในโค้ด ขั้นแรก จะตรวจสอบตัวแปรในขอบเขตปัจจุบัน จากนั้นจึงตรวจสอบขอบเขตหลักจนถึงขอบเขตส่วนกลาง

อะไรส่งผ่านค่าและผ่านการอ้างอิง?

การ ส่งผ่านค่า และ การอ้างอิง เป็นสองวิธีในการส่งผ่านอาร์กิวเมนต์ไปยังฟังก์ชันใน JavaScript

ส่งผ่านค่า: สร้างสำเนาของข้อมูลต้นฉบับและส่งผ่านไปยังฟังก์ชัน ดังนั้น เมื่อเราทำการเปลี่ยนแปลงใดๆ ในฟังก์ชัน ก็จะไม่มีผลกับข้อมูลต้นฉบับ ตรวจสอบตัวอย่างด้านล่าง

 function sample(a) { // changing the value of `a` a = 5; console.log("Inside function", a); } let a = 3; sample(a); console.log("Outside function", a);

คุณจะเห็นว่าค่าดั้งเดิมของ a ไม่เปลี่ยนแปลงแม้ว่าเราจะเปลี่ยนแปลงภายในฟังก์ชันก็ตาม

ผ่านการอ้างอิง: ผ่านการอ้างอิงของข้อมูลไปยังฟังก์ชัน ดังนั้นเมื่อเราทำการเปลี่ยนแปลงใดๆ ในฟังก์ชัน ก็จะเปลี่ยนข้อมูลเดิมด้วย

 function sample(arr) { // adding a new value to the array arr.push(3); console.log("Inside function", arr); } let arr = [1, 2]; sample(arr); console.log("Outside function", arr);

คุณจะเห็นว่าค่าเดิมของ arr เปลี่ยนไปเมื่อเราเปลี่ยนภายในฟังก์ชัน

หมายเหตุ: ชนิดข้อมูลดั้งเดิมทั้งหมดจะถูกส่งผ่านตามค่า และไม่ใช่ข้อมูลดั้งเดิมจะถูกส่งผ่านโดยการอ้างอิง

การท่องจำคืออะไร?

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

 const memo = {}; function add(a, b) { const key = `${a}-${b}`; // checking whether we computed the value already or not if (memo[key]) { console.log("Not computing again"); return memo[key]; } // adding the newly computed value to cache // here cache is a simple global object memo[key] = a + b; return memo[key]; } console.log(add(1, 2)); console.log(add(2, 3)); console.log(add(1, 2));

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

พารามิเตอร์ที่เหลือคืออะไร?

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

 function sample(a, b, ...rest) { console.log("Rest parameter", rest); } sample(1, 2, 3, 4, 5);

พารามิเตอร์ ที่เหลือ จะเป็นอาร์เรย์ของอาร์กิวเมนต์สามตัวสุดท้ายในตัวอย่างข้างต้น ด้วยวิธีนี้ เราสามารถมีพารามิเตอร์จำนวนเท่าใดก็ได้สำหรับฟังก์ชัน

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

การทำลายวัตถุคืออะไร?

การทำลายออบเจกต์ใช้เพื่อเข้าถึงตัวแปรจากออบเจ็กต์และกำหนดให้กับตัวแปรที่มีชื่อเดียวกับคีย์อ็อบเจ็กต์ มาดูตัวอย่างกัน

 const object = { a: 1, b: 2, c: 3 }; // Object destructuring const { a, b, c } = object; // Now, a, b, c will be used as normal variables console.log(a, b, c);

เราสามารถเปลี่ยนตัวแปรของตัวแปรที่ถูกทำลายในบรรทัดเดียวกันได้ดังนี้

 const object = { a: 1, b: 2, c: 3 }; // Changing the names of `a` and `b` const { a: changedA, b: changedB, c } = object; // Now, changedA, changedB, c will be used as normal variables console.log(changedA, changedB, c);

การทำลายอาร์เรย์คืออะไร?

การทำลายอาร์เรย์ใช้เพื่อเข้าถึงตัวแปรจากอาร์เรย์และกำหนดให้กับตัวแปร มาดูตัวอย่างกัน

 const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);

การจับภาพเหตุการณ์และการเดือดของเหตุการณ์คืออะไร

การบันทึก เหตุการณ์และการ บับเบิ้ ลเหตุการณ์เป็นสองวิธีในการเผยแพร่เหตุการณ์ใน HTML DOM สมมติว่ามีองค์ประกอบ HTML สองรายการ โดยองค์ประกอบหนึ่งอยู่ภายในอีกองค์ประกอบหนึ่ง และเหตุการณ์ที่เกิดขึ้นกับองค์ประกอบภายใน ตอนนี้ โหมดเผยแพร่เหตุการณ์จะตัดสินลำดับการดำเนินการของเหตุการณ์เหล่านี้

เหตุการณ์เดือดปุดๆ: มันรันตัวจัดการเหตุการณ์บนองค์ประกอบก่อน จากนั้นตามด้วยองค์ประกอบ แล้วจึงไล่ไปจนถึงองค์ประกอบบนสุด นี่เป็นพฤติกรรมเริ่มต้นของเหตุการณ์ทั้งหมด

การบันทึก เหตุการณ์: เราต้องระบุในเหตุการณ์ว่าต้องใช้การเผยแพร่เหตุการณ์ประเภทนี้ เราสามารถระบุได้ในขณะที่เพิ่มผู้ฟังเหตุการณ์ เหตุการณ์จะดำเนินการตามลำดับต่อไปนี้หากเราเปิดใช้งานการบันทึกเหตุการณ์

1. เหตุการณ์เริ่มดำเนินการจากองค์ประกอบบนสุดจนถึงองค์ประกอบเป้าหมายลง
2. เหตุการณ์ในองค์ประกอบเป้าหมายจะถูกดำเนินการอีกครั้ง
3. การแพร่กระจายเหตุการณ์ฟองจะเกิดขึ้นอีกครั้งจนกว่าองค์ประกอบบนสุดจะขึ้น

เราสามารถหยุดการเผยแพร่เหตุการณ์โดยเรียก event.stopPropogation ในตัวจัดการเหตุการณ์

สัญญาใน JavaScript คืออะไร?

Promise วัตถุจะใช้สำหรับการดำเนินการแบบอะซิงโครนัสซึ่งจะเสร็จสมบูรณ์ในอนาคตโดยมีสถานะสำเร็จหรือล้มเหลว

Promise สามารถอยู่ในสถานะใดสถานะหนึ่งต่อไปนี้

1. pending การ - เมื่อการดำเนินการยังดำเนินอยู่
2. fulfilled – เมื่อการดำเนินการเสร็จสมบูรณ์ เราจะมีผลลัพธ์ (ถ้ามี) ในสถานะความสำเร็จ
3. rejected – เมื่อการดำเนินการเสร็จสิ้นโดยล้มเหลว เราจะมีเหตุผล (ข้อผิดพลาด) ว่าทำไมจึงล้มเหลว

มาดูตัวอย่างกรณีที่ประสบความสำเร็จและล้มเหลวกันสองกรณี

 // Promise which will complete successfully const successPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve({ message: "Completed successfully" }); }, 300); }); successPromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); // Promise which will complete with failure state const failurePromise = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error("Failing the promise for testing")); }, 300); }); failurePromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });

คุณสามารถมีมากกว่าหนึ่งอัน then ผูกมัดได้หากจำเป็น ข้อมูลที่ส่งคืนก่อนหน้านี้จะได้รับการยอมรับในการ then กลับครั้งถัดไป

อธิบายขอบเขตประเภทต่างๆ ใน ​​JavaScript

มีขอบเขตสองประเภทใน JavaScript ขอบเขตส่วนกลางและขอบเขต ท้องถิ่น

คุณอาจเคยได้ยินเกี่ยวกับขอบเขตของฟังก์ชันและขอบเขตของบล็อกเช่นกัน เป็นขอบเขตโลคัลสำหรับ var และ let , const ตามลำดับ

ฟังก์ชั่นเรียกตัวเองคืออะไร?

ฟังก์ชันเรียกตัวเองเป็นฟังก์ชันที่ไม่มีชื่อซึ่งจะดำเนินการทันทีหลังจากสร้าง มาดูตัวอย่างกัน

 // Without any parameters (function sayHello() { console.log("Hello, World!"); })(); // With parameters (function add(a, b) { console.log("Sum", a + b); })(1, 2);

เรายังสามารถส่งผ่านข้อโต้แย้งไปยังฟังก์ชันที่เรียกใช้ตัวเองได้ ดังที่คุณเห็นในตัวอย่าง

ฟังก์ชั่นลูกศรคืออะไร?

ฟังก์ชันลูกศรเป็นน้ำตาลวากยสัมพันธ์ไปยังฟังก์ชันปกติโดยมีการเปลี่ยนแปลงบางอย่าง พวกเขาทำงานเหมือนฟังก์ชั่นปกติในกรณีการใช้งานทั่วไป ฟังก์ชั่นลูกศรมีประโยชน์เมื่อเราต้องมีการโทรกลับ มาดูไวยากรณ์ของมันกัน

 // arrow functions will return by default if it doesn't have any brackets let add = (a, b) => a + b; console.log(add(1, 2));

มีความแตกต่างบางประการระหว่างฟังก์ชันลูกศรและฟังก์ชันปกติ

• ฟังก์ชัน Arrow ไม่มีการเชื่อมโยง this คำหลัก this ภายในฟังก์ชันลูกศรอ้างถึงขอบเขตหลักของมัน this
• ไม่สามารถใช้ฟังก์ชันลูกศรเป็นฟังก์ชันคอนสตรัคเตอร์ได้

การโทรกลับคืออะไร?

การโทรกลับเป็นฟังก์ชันที่ส่งผ่านไปยังฟังก์ชันอื่นที่เรียกใช้ภายในฟังก์ชันนั้น การใช้การโทรกลับเป็นเรื่องปกติใน JavaScript มาดูตัวอย่างกัน

 function sample(a, b, callback) { const result = a + b; callback(result); } function finished(result) { console.log("Finished with", result); } sample(1, 2, finished);

ฟังก์ชัน finished จะถูกส่งผ่านเป็นการเรียกกลับไปยัง sample ฟังก์ชันที่ finished จะถูกเรียกใช้พร้อมกับผลลัพธ์หลังจากดำเนินการบางอย่าง คุณจะเห็นการใช้งานการโทรกลับเป็นส่วนใหญ่ในการดำเนินการแบบอะซิงโครนัส เช่น สัญญา setTimeout เป็นต้น

ข้อผิดพลาดประเภทต่างๆ มีอะไรบ้าง

ตรวจสอบข้อผิดพลาดใน JavaScript กัน

ReferenceError : ข้อผิดพลาดนี้จะเกิดขึ้นหากตัวแปรที่เราเข้าถึงมีอยู่

TypeError: JavaScript จะส่งข้อผิดพลาดนี้หากข้อผิดพลาดไม่ตรงกับข้อผิดพลาดประเภทอื่น นอกจากนี้ยังจะเกิดขึ้นเมื่อเราพยายามดำเนินการที่ไม่เข้ากันกับข้อมูล

SyntaxError: ข้อผิดพลาดนี้จะเกิดขึ้นหากไวยากรณ์ของ JavaScript ไม่ถูกต้อง

มีข้อผิดพลาดประเภทอื่นด้วย แต่สิ่งเหล่านี้เป็นประเภทข้อผิดพลาดทั่วไปใน JavaScript

ขอบเขตของตัวแปรใน JavaScript ต่างกันอย่างไร

มีสองขอบเขตของตัวแปรใน JavaScript ตัวแปรที่ประกาศโดยใช้คีย์เวิร์ด var จะมี ขอบเขตของฟังก์ชัน และตัวแปรที่ประกาศด้วย let และ const จะมี ขอบเขตของบล็อก

อ้างถึงคำถามที่ 17 สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับขอบเขตของตัวแปรเหล่านี้

อักขระหลีกใน JavaScript คืออะไร

แบ็กสแลชเป็นอักขระหลีกใน JavaScript ใช้พิมพ์อักษรพิเศษบางตัวที่เราพิมพ์ทั่วไปไม่ได้ สมมติว่าเราต้องการพิมพ์เครื่องหมายอะพอ apostrophe (') ภายในสตริงซึ่งเราไม่สามารถทำตามปกติได้ เนื่องจากสตริงจะสิ้นสุดที่อะพอสทรอฟีตัวที่สอง ในกรณีนั้น เราจะใช้อักขระหลีกเพื่อหลีกเลี่ยงการสิ้นสุดสตริงที่จุดนั้น

 const message = 'Hi, I\'m Geekflare'; console.log(message);

เราสามารถบรรลุผลลัพธ์ข้างต้นโดยไม่ต้องใช้อักขระหลีกโดยการแทนที่เครื่องหมายอะพอสทรอฟีเดี่ยวภายนอกด้วยอะพอสทรอฟีคู่ แต่นี่เป็นเพียงตัวอย่างการใช้อักขระหลีกเท่านั้น มีอักขระอื่น ๆ ที่เราต้องการอักขระหลีกเช่น \n , \t , \\ etc..,

BOM และ DOM คืออะไร

Browser Object Model (BOM): เบราว์เซอร์ทั้งหมดมี BOM ที่แสดงหน้าต่างเบราว์เซอร์ปัจจุบัน มันมีวัตถุหน้าต่างบนสุดของเราซึ่งใช้เพื่อจัดการหน้าต่างเบราว์เซอร์

Document Object Model (DOM): เบราว์เซอร์สร้าง DOM เมื่อโหลด HTML ในโครงสร้างแบบต้นไม้ เราสามารถจัดการองค์ประกอบ HTML โดยใช้ DOM API

วัตถุหน้าจอคืออะไร?

วัตถุ หน้าจอ เป็นหนึ่งในคุณสมบัติของวัตถุหน้าต่างส่วนกลาง ประกอบด้วยคุณสมบัติต่างๆ ของหน้าจอที่แสดงหน้าต่างเบราว์เซอร์ปัจจุบัน คุณสมบัติบางอย่างคือ width , height , orientation , pixelDepth เป็นต้น

บทสรุป

อาจมีคำถามตามมาสำหรับคำถามข้างต้นทั้งหมด ดังนั้น คุณต้องเตรียมแนวคิดเกี่ยวกับคำถามข้างต้นทั้งหมด

คุณยังสามารถสำรวจคำถามและคำตอบในการสัมภาษณ์ Java ที่พบบ่อย

มีความสุขในการเรียนรู้