Câu hỏi phỏng vấn javascript

Milo · January 28, 2022, 9:25am

Em dự định apply vào vị trí front end - reactJS (em sắp tốt nghiệp, chưa từng làm việc ở đâu hết).

drgnz · January 28, 2022, 9:30am

reactjs là gì
bạn có biết redux không? mô tả sơ về redux
ngoài redux ra bạn còn biết các thư viện có sẵn tương tự không? theo bạn các thư viện đó có ưu điểm gì hơn redux?
vdom là gì? tại sao nên xài vdom? vdom có tệ không?

Milo · January 28, 2022, 9:30am

Theo em thì chỉ có cách là phải optimize lại code front end. Ví dụ như :

Call API để lấy data vừa đủ, không lấy thừa.
Khi add các event listener sử dụng xong phải remove nó.
Chia thành 2 domain mobile và desktop để giảm code dư thừa trong tính năng responsive.
Code phải thường xuyên try catch để app không bị loop vô hạn, stack overflow.

Milo · January 28, 2022, 10:16am

Em xin được trả lời như sau:

Reactjs là một thư viện mã nguồn mở để lập trình giao diện web, thường thích hợp làm web SPA giao tiếp với backend bằng API.

Em chưa có kinh nghiệm sử dụng redux. Redux cung cấp cho cả app một state ở phạm vi global, mọi component đề có thể truy cập vào global state này. Trường hợp các component lồng nhau muốn truyền data qua lại giữa các component rất khó khăn (truyền từ con sang cha, cha sang component ông nội bằng props) nên phải dùng redux. Chức năng giỏ hàng có thể dùng redux.

useContext tương tự redux. useContext có ưu điểm là có sẵn trong hệ sinh thái react, gọn nhẹ, dễ cài đặt hơn redux.

Vdom có nghĩa là thư viện hoặc framework dùng javascript để render ra các elements mà không access trực tiếp vào cây DOM thật. Dev chỉ làm việc trên VDOM, từ VDOM render ra DOM thật do lib hoặc framework xử lý. Khi giao diện bị thay đổi, VDOM sẽ so sánh sự khác biệt của DOM trước và sau khi sự thay đổi đó diễn ra, nếu khác nhau mới update DOM thật.

Em không biết Có lẽ vì nó nhanh hơn real DOM đổi với browser và với cả dev.

VDOM sẽ không tối ưu SEO vì các elements phải sau bước trung gian render ra mới có, nên search engine của google không crawl được (cả app reactjs chỉ có 1 thẻ div duy nhất là real DOM)

Milo · February 9, 2022, 2:16pm

Anh chị có thể đặt cho em vài câu hỏi liên quan đến prototype based được không ạ!

Khoa_Bean · February 9, 2022, 6:41pm

Trả lời: Theo em thì sử dụng webpack, tư tưởng của webpack cũng giống như GC là chúng sẽ dánh dấu và loại bỏ các node không cần thiết, cho ra kết quả tối ưu cuối cùng đó là code js đã đc nén. Việc nén code js có thể phần nào đó cải thiện lưu lượng memory sử dụng để load đoạn js thừa nhưng cách tốt nhất vẫn là cải thiện cách code . Nếu code toàn bug với vòng lặp tào lao thì có nén bao nhiêu thì cũng bằng 0

drgnz · February 10, 2022, 3:23am

prototype vs __proto__
object được khởi tạo từ class vs function khác nhau chỗ nào?
new operator khi được gọi sẽ làm gì?
a1 và a2 trong đoạn code dưới đây khác gì nhau?

function ClassA() {}
a1 = new ClassA()
a2 = ClassA()

Viết 1 hàm map có chức năng tương tự như bên Array().map nhưng cho Object và áp dụng cho toàn bộ value. Tức khi 1 object mới được tạo, ta có thể sử dụng như sau

a = {v1: 2, v2: 1}
newA = a.map((k, v) => v * 2)
console.log(newA) // {v1: 4, v2: 2}

Milo · February 11, 2022, 10:12am

Cảm ơn anh đã đặt câu hỏi.

So sánh prototype vs __proto__

Prototype là một object mà object này lại là cha của mọi object khác được tạo ra từ một blueprint nào đó (prototype cũng là thuộc tính của blueprint này). Em không biết diễn đặt bằng từ ngữ như thế nào nên đưa ra ví nhự như này (không biết lúc phỏng vấn người ta có cho đưa ra ví dụ không nữa )

function DiscoursePlatform() {
    this.frontEnd = 'Jquery';
}
const DayNhauHoc = new  DiscoursePlatform();
console.log(DayNhauHoc.backend); //undefined
// Bây giờ muốn thêm backEnd cho DiscoursePlatform
DiscoursePlatform.prototype.backEnd = 'Ruby';
console.log(DayNhauHoc.backEnd); // Ruby
// vậy là TẤT CẢ forum được tạo ra đều có backend
const DayNhauHoc2 = new  DiscoursePlatform();
console.log(DayNhauHoc2.backEnd); // Ruby

Nghĩa là backEnd trong DiscoursePlatform.prototype.backEnd là thuộc tính của prototype, prototype là thuộc tính của DiscoursePlatform.

Khi các instance được tạo ra từ một blueprint nào đó thì mặc định những instance đó tự có thuộc tính __proto__, __proto__ này chứa các thuộc tính của prototype.
DayNhauHoc và DayNhauHoc2 đều có thuộc tính __proto__ chứa frontEnd = 'Jquery'; backEnd = 'Ruby'.

P/S: Em không rõ prototype-based với OOP (class-based) cái nào có trước, cái nào có sau. Nhưng thay vì tạo ra N instance tương ứng với N property giống nhau từ 1 class gây tốn bộ nhớ nên N property này (__proto__) cùng nhau trỏ vào 1 object dùng chung là prototype.

Câu này em không biết. Theo em thì kết quả instance tạo ra từ 2 cách là như nhau, khác nhau ở cú pháp tạo blueprint ban đầu (class phải khai báo các thuộc tính bên trong constructor)

Câu này em cũng không rõ bên trong nó làm gì chỉ biết là sau từ khóa new thì JS Engine sẽ tạo ra một ô nhớ mới cho instance (hình như ngôn ngữ OOP nào cũng vậy) và khởi tạo object __proto__ từ prototype cha.

a1 = new ClassA() thì tạo instance từ function constructor ClassA. a2 = ClassA() là gán object ClassA cho biến a2, nhưng cụ thể thì em cũng không biết

drgnz:

Viết 1 hàm map có chức năng tương tự như bên Array().map nhưng cho Object và áp dụng cho toàn bộ value. Tức khi 1 object mới được tạo, ta có thể sử dụng như sau
a = {v1: 2, v2: 1}
newA = a.map((k, v) => v * 2)
console.log(newA) // {v1: 4, v2: 2}

Object.prototype.map = function (callback) {
let result = {};
let keys = Object.keys(this);
keys.map(key => {
    result[key] = callback(key, this[key]);
});
return result;
}

5 câu, trả lời được 2, chắc tạch rồi Câu 2,3,4 em có search google nhưng cũng không ổn lắm.

Be0 · February 11, 2022, 2:25pm

"PROTOTYPE LÀ CÁI ĐẦU CHA MÀY" anh @Huy_Hoang_Pham nói vậy “Hiểu nôm na prototype là khuôn hoặc cha của một object” anh Hoàng said.
Nguồn: https://toidicodedao.com/2016/02/02/series-javascript-sida-po-ro-to-tai-prototype-la-cai-gi

Milo · February 14, 2022, 3:15am

Cho em hỏi frontend thường dùng design pattern nào?

Milo · June 14, 2022, 12:10pm

Khi gặp câu hỏi phỏng vấn liên quan đến code nên trả lời bằng cách mô tả bằng lời nói hay mượn giấy bút, bút lông viết lên bảng, mở máy tính demo vậy các bác? Em đi phỏng vấn gặp một câu hỏi về code nhưng em trả lời sai, nghe người phỏng vấn giải thích xong em cũng nửa tin nửa ngờ. Về nhà suy nghĩ lại thì cả em với người phỏng vấn đều đúng nhưng do 2 người đang hiểu đến 2 case khác nhau. Và cố giải thích trường hợp mình đang nghĩ.

library · June 14, 2022, 10:52pm

Liên quan tới code là sao à cậu? Ý cậu là live coding?
Cậu có ví dụ nào không @Milo?

superthin · June 20, 2022, 3:39pm

Tui dám chắc luôn ông hỏi cái này là hỏi cho có, một cách hời hợt. Nói đừng buồn, nhưng trước khi ông đi phỏng vấn mà không có khái niệm gì về Mốc In-tơ-view thì xem như tạch, tạch và tạch.

Milo · June 15, 2022, 1:17am

Đúng rồi anh, nhưng mà code bằng miệng, phòng phỏng vấn không có máy tính, bảng.

Kiểu như interviewer bảo: “Anh có 3 function như này và function X như này …bla …bla… đối số thứ nhất anh truyền vào … đối số thứ 2 anh truyền vào …, em cho anh biết nếu đối số thứ 1 anh truyền vào object thì như nào, sau đó mô tả object …”. Nói chung nếu code này in ra giấy, hoặc capture màn hình đưa em đọc thì em còn biết trả lời chứ tưởng tưởng đề theo mô tả bằng lời như này khiến em hiểu sai đề nên buổi phỏng vấn đó bị tạch. Thế nên lần sau gặp tình huống như này em có nên viết ra giấy rồi đưa cho interviewer: “ý anh đề bài có phải như này không?” rồi mới suy nghĩ trả lời.

library · June 15, 2022, 3:54am

@@
Tớ chưa thấy kiểu phỏng vấn mô tả code bằng miệng như vậy bao giờ

Cơ mà, chắc chắn là cậu nên làm điều cậu đang hỏi:

Thế nên lần sau gặp tình huống như này em có nên viết ra giấy rồi đưa cho interviewer: “ý anh đề bài có phải như này không?” rồi mới suy nghĩ trả lời.

Hiểu rõ requirement là điều đầu tiên cậu cần làm, kể cả trong lúc làm việc lẫn trong khi phỏng vấn.
Ngoài ra, cậu cũng có quyền hỏi người phỏng vấn viết ra trên giấy, hoặc trên editor, để dễ dàng hơn cho quá trình phỏng vấn. Không có lý do gì để ảnh không giúp cậu điều đó cả