Câu hỏi phỏng vấn JavaScript Developer

.bind () được sử dụng để gọi một hàm với một ngữ cảnh nhất định. Sử dụng .bind () sẽ không gọi hàm, chỉ sửa đổi ngữ cảnh.

.call () và .apply () sẽ gọi hàm ngay lập tức và sửa đổi ngữ cảnh. Sự khác biệt giữa call() và apply():

• .call () chấp nhận một danh sách các giá trị làm đối số của nó
• .apply () chấp nhận một mảng làm đối số của nó

Sử dụng .bind () khi bạn muốn sửa đổi ngữ cảnh nhưng bạn muốn gọi hàm sau này.

Sử dụng .call () hoặc .apply () khi bạn muốn sửa đổi ngữ cảnh và bạn muốn gọi hàm ngay lập tức.

AJAX là viết tắt của Asynchronous JavaScript And XML và nó hoạt động theo cách sau:

Bất cứ khi nào một sự kiện xảy ra trên một trang web, ví dụ: người dùng nhấp vào một button, một yêu cầu XHR được tạo bởi JavaScript sẽ được gửi đến máy chủ. Máy chủ xử lý yêu cầu và trả về phản hồi cho trang web sau đó được xử lý bằng JavaScript và các hành động cần thiết được thực hiện, ví dụ: cập nhật nội dung trang.
Ưu điểm của AJAX

• Cập nhật một trang web mà không thực sự tải lại nó
• Yêu cầu và nhận dữ liệu từ máy chủ sau khi trang được tải xong
• Gửi dữ liệu đến máy chủ ở background

Nhược điểm của AJAX:

• AJAX sẽ không hoạt động trong trường hợp JavaScript bị disabled
• Có thể làm cho button quay lại của trình duyệt trở nên vô dụng
• Vì AJAX làm tăng kích thước mã, nó có thể làm cho trang web của bạn dễ bị tấn công bởi các mối đe dọa bảo mật

Một promise luôn ở một trong ba trạng thái sau:

• Pending (đang chờ xử lý): đây là trạng thái ban đầu của promise
• Fulfilled (hoàn thành): promise đã được thực hiện thành công.
• Rejected (bị từ chối): promise đã bị từ chối, có lỗi.

Một pending promise có thể được thực hiện với một giá trị, hoặc bị từ chối với một lý do.

Ưu điểm của việc sử dụng Promises trong JavaScript:

• Chúng có thể kết hợp, không giống như các lệnh gọi lại, do đó chúng tôi có thể tránh các địa chỉ gọi lại
• Bạn có thể dễ dàng thực thi mã với Promise.all khi nhiều phản hồi được trả về
• Bạn chỉ có thể đợi một kết quả từ các lời hứa đồng thời đang chờ xử lý với sự trợ giúp của Promise.race
• Bạn có thể viết mã không đồng bộ một cách đồng bộ nếu bạn sử dụng nó kết hợp với async / await.

Một số nhược điểm của nó là:

• Chúng chỉ có thể hoạt động trên một giá trị duy nhất tại một thời điểm
• Chúng không có sẵn trong trình duyệt cũ hơn, chúng phải được làm đầy
• Chúng chậm hơn so với việc sử dụng lệnh gọi lại, điều này có thể dẫn đến các vấn đề về hiệu suất có thể xảy ra.

Có thể xem một số built-in methods trong bảng sau:=

Cả hai phương thức map() và forEach() đều duyệt qua qua các phần tử của một mảng. Sự khác biệt ở đây là map tạo ra một mảng mới trong khi forEach thì không. Nếu bạn tuân theo mô hình lập trình chức năng và bạn muốn giữ cho dữ liệu không thay đổi thì bạn nên sử dụng map . Nếu bạn muốn thay đổi các phần tử của mảng ban đầu, bạn nên sử dụn forEach . Hiểu ngắn gọn:

• forEach thay đổi các mục gốc trong mảng
• map trả về một mảng đã biến đổi trong khi vẫn giữ nguyên bản gốc

Toán tử typeof được sử dụng để lấy kiểu dữ liệu của toán hạng (operand) của nó. Toán hạng có thể là một chữ hoặc một cấu trúc dữ liệu, ví dụ như một biến, một hàm hoặc một đối tượng. Nó là một toán tử một ngôi được đặt trước toán hạng đơn của nó, có thể thuộc bất kỳ kiểu nào. Giá trị của nó là một chuỗi chỉ ra kiểu dữ liệu của toán hạng.

// This will return "string"
typeof "1"

// This will return "number"
typeof 1

// This will return "boolean"
typeof true

// This will return "undefined"
typeof undefined

// This will return "symbol"
typeof Symbol()

// This will return "object"
typeof []

NaN là viết tắt của Not-a-Number . Để kiểm tra xem một cái gì đó có phải là NaN không, chúng ta không thể sử dụng toán tử typeof vì loại NaN là một kiểu dữ liệu numberic (bạn nên tìm hiểu thêm điều này)  . Chúng ta cũng không thể sử dụng value === NaN vì NaN không bằng chính nó. Nhưng vì nó không bằng nhau nên chúng ta có thể kiểm tra giá trị so với chính nó: value! == value. Nếu nó không phải là một số, nó sẽ trả về true. Chúng ta cũng có thể sử dụng hàm Number.isNaN () mới được giới thiệu trong ES6.

// This will give us "number" as a type
typeof NaN

// We can't do triple equal either since NaN is not equal to itself
value === NaN // retun false
NaN === NaN // return false

// If value is not equal to itself, we can be sure it is NaN
value !== value

// We can also use the new isNaN Number function introduced in ES6
Number.isNaN(value);

Không chỉ là một câu hỏi trong phỏng vấn JavaScript, nhiều lập trình viên vẫn hay lẫn lộn giữa i ++ và ++ i Cả hai đều sẽ tăng giá trị lên 1. Tuy nhiên:

• i ++, được gọi là bước tăng hậu tố (postfix increment) sẽ trả về giá trị trước khi nó được tăng lên
• ++ i, được gọi là bước tăng tiền tố (prefix increment) sẽ trả về giá trị sau khi nó được tăng

let i = 0;

i++ // Will evaluate to 0
++i // Will evaluate to 1

Một palindrome là một từ hoặc một cụm từ mà khi ta đọc xuôi hoặc đọc ngược thì nó cũng như nhau. Ví dụ:

isPalindrome('noon'); // true
isPalindrome('moon'); // false
isPalindrome('level'); // true

Để kiểm tra một chuỗi có phải là palindrome không chúng ta có thể theo cách sau:

// We check if the passed string is equal to the string reversed with split + reverse + join
const isPalindrome = (str) => str === str.split('').reverse().join('');

isPalindrome('noon'); // returns true
isPalindrome('moon'); // returns false
isPalindrome('level'); // returns true

Bạn có thể trả lời sai câu hỏi phỏng vấn JavaScript này nếu cho biết kết quả là 1,2,3. Nó sẽ xuất ra 3, ba lần liên tiếp. Điều này là do setTimeout là một API trình duyệt được chuyển đến cuối của  call stack. Vào thời điểm hàm gọi lại được trả về  call stack, giá trị của i sẽ là 3.

Có ba toán tử logic trong JavaScript:

• AND &&
• OR ||
• NOT!

Trong JavaScript, toán tử Logical OR trả về true nếu một trong hai toán hạng là true:

true || true;
// true
true || false;
// true
false || false;
// false

Hai khía cạnh quan trọng của toán tử logic trong JavaScript là chúng đánh giá từ trái sang phải và chúng có tính đoản mạnh (short-circuiting)

Điều này có nghĩa là khi JavaScript đánh giá một biểu thức, lấy ví dụ biểu thức OR, nếu toán hạng đầu tiên là true, thì JavaScript bị đoản mạch và không xét đến toán hạng thứ hai. Trong ví dụ bên dưới, dấu hoa thị (****) biểu thị bất kỳ giá trị nào – nó đơn giản không quan trọng nó là gì vì JavaScript thậm chí sẽ không bao giờ xét đến nó trong Logical OR.

true || ****
// true

Ví dụ thêm về đoản mạnh:

// Short circuit with logical OR
// If this.fileName is undefined, 😶 will be used as a fallback value

const fileName = this.fileName || '😶';

// Short circuit with logical AND
// If hasFireworks is evaluated to true, makeItFestive will be executed
hasFireworks && makeItFestive();

// This is equivalent to:
if (hasFireworks) {
makeItFestive();
}

Vòng lặp for-in được thiết kế đặc biệt để lặp qua tất cả các thuộc tính của đối tượng theo cách thức từng bước. Nó chọn một thuộc tính từ đối tượng trong mỗi lần lặp và thực hiện các hoạt động cần thiết trên đó. Hãy xem một ví dụ: 

var user = {
             "name": "Juan",
             "country": "Germany",
             "website": "livecodestream.dev"
};
for(var key in user)

{          

             if(user.hasOwnProperty(key))

            {
                        console.log(key + " -> " + user[key]);
            }
}

Nếu một biểu thức đưa ra lỗi, bạn có thể xử lý chúng bằng câu lệnh try… catch.
Ý tưởng của việc sử dụng cấu trúc này là thử chạy một biểu thức, chẳng hạn như một hàm có đầu vào và bắt các lỗi có thể xảy ra. Ví dụ:

function weekDay(dayNum) {
   if (dayNum < 1 || dayNum > 7) {
     throw 'InvalidDayNumber'
   } else {
     return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][dayNum - 1];
   }
}

try { // Try to run the following
  let day = weekDay(8);
  console.log(day);
}
catch (e) { // catch an error if the above try failed
   let day = 'unknown';
   console.log(e);
}

Web storage là một API cung cấp cách để trình duyệt lưu trữ các cặp khóa-giá trị cho trình duyệt của người dùng cục bộ. Sử dụng Web storage làm cho quá trình này trực quan hơn so với sử dụng cookie. Web storage cung cấp hai cách để lưu trữ dữ liệu:

• Local storage – lưu trữ dữ liệu cho client mà không có ngày hết hạn.
• Session storage – chỉ lưu trữ dữ liệu cho một phiên. Dữ liệu sẽ biến mất khi trình duyệt bị đóng.

Dưới đây là một ví dụ về cách bạn có thể lưu, truy cập và xóa một mục khỏi sessionStorage:

// Save data to sessionStorage
sessionStorage.setItem('favoriteColor', 'gray');

// Get the color from the sessionStorage
let data = sessionStorage.getItem('favoriteColor');
console.log(data);

// Remove saved color preset from sessionStorage
sessionStorage.removeItem('favoriteColor');

// Remove ALL the saved data from sessionStorage
sessionStorage.clear();

Và đây là cách bạn có thể làm điều tương tự bằng cách sử dụng localStorage:

// Save data to localStorage
localStorage.setItem('favoriteColor', 'gray');

// Get the color from the localStorage
let data = localStorage.getItem('favoriteColor');
console.log(data);

// Remove saved color preset from localStorage
localStorage.removeItem('favoriteColor');

// Remove ALL the saved data from localStorage
localStorage.clear();

Trong quá trình phỏng vấn cho vị trí Senior JavaScript Developer, tôi nhấn mạnh vào kinh nghiệm làm việc của mình trong việc phát triển ứng dụng web sử dụng ngôn ngữ JavaScript, đặc biệt là trong những dự án lớn và phức tạp. Tôi đã tham gia và đóng góp tích cực vào việc xây dựng các dự án quy mô lớn bằng cách áp dụng kiến thức vững về các framework như React và Node.js. Kinh nghiệm của tôi bao gồm việc tối ưu hóa hiệu suất ứng dụng, quản lý trạng thái global, và tích hợp các API phức tạp. Đồng thời, tôi đã có kinh nghiệm làm việc chặt chẽ với đội ngũ phát triển, đảm bảo chuẩn mã hóa và quy trình phát triển tốt nhất được duy trì trong suốt quá trình dự án.

Khi gặp vấn đề khó khăn trong quá trình phát triển phần mềm sử dụng JavaScript, tôi ứng xử bằng cách tiếp cận có hệ thống và sáng tạo. Tôi đã từng đối mặt với thách thức là tối ưu hóa hiệu suất của ứng dụng trong môi trường JavaScript phức tạp. Để giải quyết, tôi đã phân tích và tối ưu mã nguồn, sử dụng công cụ giám sát và tinh chỉnh các phần quan trọng. Thêm vào đó, tôi thường tìm kiếm sự hỗ trợ từ cộng đồng và đồng đội, thể hiện khả năng làm việc nhóm và linh hoạt trong giải quyết vấn đề.

Trong lĩnh vực JavaScript, tôi tập trung vào việc theo dõi và áp dụng những phương pháp và công nghệ mới nhất để nâng cao hiệu suất và khả năng của ứng dụng. Hiện tại, tôi quan tâm đặc biệt đến các kỹ thuật như Progressive Web Apps (PWA), WebAssembly, và GraphQL để tối ưu hóa trải nghiệm người dùng. Để cập nhật kiến thức, tôi thường xuyên tham gia các khóa học trực tuyến, đọc sách chuyên ngành, và tham gia cộng đồng JavaScript thông qua các diễn đàn, hội thảo, và dự án mã nguồn mở. Qua những hoạt động này, tôi không chỉ cập nhật thông tin mới mẻ mà còn chia sẻ và học hỏi từ cộng đồng, giúp tôi duy trì sự động lực và sẵn sàng đối mặt với những thách thức mới trong ngành công nghiệp JavaScript.

Câu trả lời cho câu hỏi phỏng vấn về kinh nghiệm làm việc với các framework JavaScript phổ biến như React, Angular, hoặc Vue.js có thể được tóm tắt như sau: "Có, tôi có kinh nghiệm đáng kể trong việc làm việc với các framework JavaScript như React. Trong dự án XYZ, tôi đã đảm nhận vai trò Senior JavaScript Developer, nơi tôi chịu trách nhiệm xây dựng và duy trì các thành phần chính của ứng dụng sử dụng React. Công việc của tôi bao gồm việc tối ưu hóa hiệu suất, tương tác chặt chẽ với các API, và đảm bảo mã nguồn tuân thủ các quy chuẩn phát triển. Điều này đã cung cấp cho tôi cơ hội để phát triển kỹ năng lãnh đạo và hiểu biết sâu rộng về các khía cạnh của React để đáp ứng yêu cầu kỹ thuật và kinh doanh của dự án."