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

Có một số cách để thực hiện việc này, đơn giản nhất là gán lại biến cho một mảng trống. Hãy xem qua các cách:

const array = [1, 2, 3];

// Assigning to an empty

array array = [];

// Setting its length property to 0

array.length = 0;

// Using splice with the array's length

array.splice(0, array.length);

Các cách khác nhau để tạo ra các object trong JavaScript:

// Using object literals

const obj = { ... };

// Using the new keyword

function Obj(props) {

this.props = props;

};

const obj = new Obj('');

// Using Object.create()

function newObject(props) {

this.props = props;

};

const obj = Object.create(newObject);

// Using Object.assign()

const obj = { ... };

const copy = Object.assign({}, obj);

Nhân bản (clone) đối tượng có thể khó vì chúng ta có thể có nhân bản nông (shallow clone) tức chỉ sao chép đối tượng nhưng giữ tham chiếu,  hoặc nhân bản sâu (deep clone), tức tạo một bản sao mới với một tham chiếu mới.

const obj = { ... };

// Shallow copy can be done by using assignment:

const shallow = obj;

// Deep copy examples:

// Using JSON.parse & JSON.stringify

JSON.parse(JSON.stringify(obj));

// Using Object.assign

const deep = Object.assign({}, obj);

// Using object spread

const deep = { ...obj };

.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();