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

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

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

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

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

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

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

สารบัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

    // 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);

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

    // 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 โดยใช้แท็กสคริปต์ คุณสามารถตรวจสอบตัวอย่างด้านล่าง

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

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

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

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

      19 แฮ็คที่น่าทึ่งในการแฮ็ก Roku เพื่อรับช่องฟรี

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

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

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

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

    document.cookie = "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 = "admintrick.com";

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

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

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

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

    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 สำหรับรายละเอียดเพิ่มเติมได้

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

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

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

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

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

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

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

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

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

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

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

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

      วิธีใช้ฟังก์ชัน XLOOKUP ใน Microsoft Excel

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

    const titleEl = document.getElementById("title");
    
    titleEl.innerText="<span style="color:orange;">admintrick.com</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);

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

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

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

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

    var a = "admintrick.com";
    var a = "Chandan";
    console.log(a);
    let a = "admintrick.com";
    let a = "Chandan";
    console.log(a);

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

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

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

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

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

    NaN ใน JavaScript คืออะไร

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

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

    ขอบเขตคำศัพท์หมายถึงการเข้าถึงตัวแปรจากขอบเขตของพาเรนต์ สมมติว่าเรามีฟังก์ชันที่มีฟังก์ชันภายในสองฟังก์ชัน ฟังก์ชันที่อยู่ด้านในสุดสามารถเข้าถึงตัวแปรขอบเขตของฟังก์ชันหลักสองตัวได้ ในทำนองเดียวกัน ฟังก์ชันระดับที่ 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 สองรายการ โดยองค์ประกอบหนึ่งอยู่ภายในอีกองค์ประกอบหนึ่ง และเหตุการณ์ที่เกิดขึ้นกับองค์ประกอบภายใน ตอนนี้ โหมดเผยแพร่เหตุการณ์จะตัดสินลำดับการดำเนินการของเหตุการณ์เหล่านี้

      สร้างแอพสูตรคูณ Python ด้วย OOP

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

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

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

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

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

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

  • อยู่ระหว่างดำเนินการ – เมื่อการดำเนินการยังดำเนินอยู่
  • Fulful – เมื่อการดำเนินการเสร็จสมบูรณ์ เราจะมีผลลัพธ์ (ถ้ามี) ในสถานะความสำเร็จ
  • ถูกปฏิเสธ – เมื่อการดำเนินการเสร็จสิ้นโดยล้มเหลว เราจะมีเหตุผล (ข้อผิดพลาด) ว่าทำไมจึงล้มเหลว
  • มาดูตัวอย่างกรณีที่ประสบความสำเร็จและล้มเหลวกันสองกรณี

    // 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);
      });

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

    อธิบายขอบเขตประเภทต่างๆ ใน ​​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 ไม่มีการเชื่อมโยงนี้ คำหลักนี้ภายในฟังก์ชันลูกศรอ้างถึงขอบเขตหลักของสิ่งนี้
    • ไม่สามารถใช้ฟังก์ชันลูกศรเป็นฟังก์ชันคอนสตรัคเตอร์ได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    const message="Hi, I"m admintrick.com';
    console.log(message);

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

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

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

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

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

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

    บทสรุป

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

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

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

    เรื่องล่าสุด

    x