Xoắn não với phỏng vấn JavaScript 9

Cập nhật ngày 22/08/2019

Xin chào bạn đến bài viết Xoắn não với phỏng vấn JavaScript 9, hôm nay mình lại tiếp tục chia sẻ với bạn những câu hỏi phỏng vấn JavaScript rất hay.

Mời bạn theo dõi bài viết!

Xoắn não với phỏng vấn JavaScript 9 – Câu 1

let s1 = Symbol("id");
let s2 = Symbol.for("id");
let s3 = Symbol.for("id");

console.log(s1 === s2); // 1
console.log(s2 === s3); // 2

Hỏi console in ra kết quả như thế nào? Tại sao?

Đáp án:

false
true

Giải thích:

Nếu bạn đã đọc bài viết Tìm hiểu về Symbol trong JavaScript, mình chắc chắn bạn sẽ trả lời được câu hỏi này.

Phương thức Symbol("id") sẽ tạo mới một biến kiểu Symbol với description là "id". Mà một đặc điểm quan trọng của Symbol là tính duy nhất. Nghĩa là bạn tạo ra bao nhiêu Symbol với cùng description thì nó vẫn khác nhau:

let myId1 = Symbol("id");
let myId2 = Symbol("id");
let myId3 = Symbol("id");

console.log(myId1 === myId2); // => false
console.log(myId2 === myId3); // => false

Tiếp theo là phương thức Symbol.for("id"). Phương thức này sẽ tìm trong một đối tượng Global, xem có tồn tại Symbol với key là "id" hay không. Nếu chưa có Symbol nào thoả mãn thì một Symbol mới với key "id" sẽ được tạo ra. Ngược lại, phương thức trên sẽ trả về Symbol đã tồn tại.

Do đó, s2 và s3 ở trên chắc chắn bằng nhau và khác s1.

Xoắn não với phỏng vấn JavaScript 9 – Câu 2

const a = [0, 1, undefined, "a", "b", null, false, true];
const b = a.filter(Boolean);

console.log(b);

Hỏi console in ra kết quả như thế nào? Tại sao?

Đáp án:

[1, "a", "b", true]

Giải thích:

Trước tiên, mình nói về hàm filter. Phương thức này lọc lấy các phần tử trong mảng thoả mãn một điều kiện cho trước và trả về một mảng mới chứa những phần tử đó.

Nói cách khác, phương thức filter nhận tham số đầu tiên là một hàm và trả về một mảng các phần tử làm cho hàm trên return true.

Cái này chắc nhiều bạn đã biết rồi. Tuy nhiên, vấn đề chính ở đây là tham số đầu tiên truyền vào là Boolean. Đây là một built-in object trong JavaScript.

Nhưng thú vị ở chỗ, bạn có thể sử dụng Boolean như một function để convert một giá trị bất kỳ về kiểu Boolean. Cụ thể trong câu hỏi trên:

Boolean(0); // false
Boolean(1); // true
Boolean(undefined); // false
Boolean("a"); // true
Boolean("b"); // true
Boolean(null); // false
Boolean(false); // false
Boolean(true); // true

Đến đây thì đáp án của câu hỏi đã được giải thích rồi phải không nào?

Note: nếu bạn muốn viết code tường minh hơn thì có thể sửa lại đoạn code trên như sau mà vẫn cho kết quả tương tự:

const a = [0, 1, undefined, "a", "b", null, false, true];
const b = a.filter((v) => Boolean(v));

console.log(b);

Xoắn não với phỏng vấn JavaScript 9 – Câu 3

const f = ({ x = 0, y = "a", z = true }) => {
  console.log(x, y, z);
};

f();

Hỏi console in ra kết quả như thế nào? Tại sao?

Đáp án:

Uncaught TypeError: Cannot destructure property `x` of 'undefined' or 'null'

Giải thích:

Thoạt nhìn, nhiều bạn sẽ nghĩ đáp án là: 0, "a", true". Nhưng thực tế thì không phải vậy.

Trước tiên, function f ở trên tương đương:

const f = (param) => {
  const { x = 0, y = "a", z = true } = param;
  console.log(x, y, z);
};

f();

Khi bạn gọi hàm f() mà không có tham số truyền vào, giá trị của param sẽ là undefined. Do đó, khi thực hiện Destructuring Assignment, bạn sẽ gặp lỗi như trên Cannot destructure property 'x' of 'undefined' or 'null'.

Để tránh lỗi trên, bạn có thể sửa lại function ban đầu như sau:

const f = ({ x = 0, y = "a", z = true } = {}) => {
  console.log(x, y, z);
};

f();

Ở đây, mình khai báo giá trị default cho tham số đầu tiên là một object rỗng. Nghĩa là khi bạn không truyền bất kỳ tham số nào khi gọi hàm f() thì giá trị mặc định của nó sẽ là {}.

Tức là param ở trên sẽ bằng {}. Và khi thực hiện Destructuring Assignment:

const { x = 0, y = "a", z = true } = {};

Các biến số x, y và z nhận giá trị default tương ứng là: 0, "a" và "true".

Lời kết

Trên đây là 3 câu hỏi phỏng vấn JavaScript cũng rất hay. Nếu bạn có cùng nhận xét với mình thì vui lòng để lại bình luận xuống phía dưới nhé!

Xin chào và hẹn gặp lại bạn trong bài viết tiếp theo, thân ái!

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

Xoắn não với phỏng vấn JavaScript 8
JavaScript là gì?
Chia sẻ:

Bình luận