Công nghệ thông tin

50 câu hỏi phỏng vấn front end cùng nguồn câu hỏi tham khảo

Theo Khảo sát Stack Overflow mới nhất, có tới 27,42% tất cả các lập trình viên trên Stack Overflow tự coi mình là nhà phát triển front end. Nhu cầu tuyển dụng các vị trí front-end developer để xây dựng giao diện người dùng thanh lịch, trực quan, đáp ứng và tương tác tốt trên các thiết bị khác nhau, ngày càng cao. Nhưng vấn đề là khá nhiều các ứng viên đều bối rối hoặc không chắc chắn loại câu hỏi phỏng vấn mà họ có thể gặp. Biết những câu hỏi phù hợp là rất quan trọng đối với bất kỳ ai muốn vượt qua cuộc phỏng vấn xin việc ở vị trí front end developer.

Cho dù bạn là người mới mới vào nghề hay ứng viên đã có kinh nghiệm, hãy xem danh sách các câu hỏi và hướng dẫn trả lời phỏng vấn nhà phát triển front end bên dưới để có thể chuẩn bị tốt hơn cho buổi phỏng vấn. Ngoài các câu hỏi, bài viết cũng mang đến cho bạn một số nguồn tham khảo các câu hỏi phỏng front end khác.

Nội dung

Các kiến thức chính trong phỏng vấn front end developerCác câu hỏi phỏng vấn front end về kỹ thuật 1/Các câu hỏi phỏng vấn về HTML2/ Các câu hỏi phỏng vấn về CSS3/ Các câu hỏi phỏng vấn JavaScriptMột số câu hỏi hành viMột số nguồn câu hỏi tham khảo
Các kiến thức chính trong phỏng vấn front end developer

Bạn cần chú ý các lĩnh vực kiến thức và kỹ năng sau có thể gặp xuyên xuốt trong các câu hỏi phỏng vấn front end

Hiểu biết tốt về JavaScript – đó là điều khá rõ ràng. Ngoài ngôn ngữ, bạn nên làm quen với các công cụ phân tích mã tĩnh (static code analysis tool).Kiến thức tốt về các frameworks, các thư viện thông dụng (tùy thuộc vào nhu cầu cụ thể của công ty bạn đang ứng tuyển): React, Angular, Vue.js, v.v.Nắm vững HTML5 và CSS, viết HTML chính xác về mặt ngữ nghĩa, triển khai hoàn hảo pixel của các thiết kế thành CSS, chú ý đến chi tiết, thiết kế responsive.Tiếng Anh – bạn phải có khả năng giao tiếp trôi chảy và đưa ra các luận điểm của mình một cách rõ ràng nếu công việc bạn cần làm với tiếng Anh nhiều.Trình duyệt – kiến thức thực tế về trình duyệt, cách chúng hoạt động và cách gỡ lỗi code của bạn trong trình duyệt.Kinh nghiệm thực tế làm việc với các API (Rest API và / hoặc GraphQL).Có kinh nghiệm làm việc với GIT repo.Có kinh nghiệm về kiểm thử.

Các câu hỏi phỏng vấn front end về kỹ thuật
1/Các câu hỏi phỏng vấn về HTML
Q1: doctype trong html là gì? Các loại Doctypes khác nhau là gì?
Khai báo kiểu tài liệu HTML, còn được gọi là DOCTYPE, là dòng mã đầu tiên được yêu cầu trong mọi tài liệu HTML hoặc XHTML. Khai báo DOCTYPE là một hướng dẫn cho trình duyệt web về phiên bản HTML mà trang được viết. Điều này đảm bảo rằng trang web được phân tích cú pháp giống nhau bởi các trình duyệt web khác nhau.

Có 3 loại Doctypes :

Strict Doctype 
Transitional Doctype
Frameset Doctype

Tham khảo thêm về DOCTYPE: What is the DOCTYPE Declaration in HTML?

Q2:Thuộc tính data- là gì?
Thuộc tính data – cho phép bạn lưu trữ thêm thông tin / dữ liệu trong DOM. Bạn có thể viết html hợp lệ với embedded private data. Bạn có thể dễ dàng truy cập thuộc tính dữ liệu bằng cách sử dụng javascript và do đó rất nhiều thư viện như knockout sử dụng nó.

Tham khảo thêm về thuộc tính data- để chuẩn bị tốt hơn cho phỏng vấn Front end: How to Use HTML5 Data Attributes

Q4: Làm thế nào bạn có thể tạo public key trong html?
Trả lời: html có phần tử keygen giúp tạo khóa và gửi thông qua biểu mẫu (form).

Q5: Làm sao để đáp ứng được một trang có nhiều ngôn ngữ trong html?
Chúng ta có thể đặt ngôn ngữ HTML bằng cách đặt thuộc tính lang trong code

Tham khảo:

How to serve a page with content in multiple languages ?
Declaring language in HTML

Q6: HTMLsemantic có nghĩa là gì?
HTML semactic có nghĩa là sử dụng thẻ thích hợp nhất cho nhiệm vụ hiện có. Nó có nghĩa là sử dụng các phần tử có ý nghĩa như , và thay vì chỉ sử dụng và .

Q7: Khả năng truy cập Web là gì (Web Accessibility)?
Khả năng truy cập web có nghĩa là đảm bảo web có thể được sử dụng bởi người khuyết tật. Nó bao gồm việc đảm bảo người dùng chỉ sử dụng bàn phím có thể điều hướng trang web của bạn đồng thời đảm bảo một số người gặp khó khăn khi nghe hoặc nhìn cũng có thể sử dụng nó.

Q8: Sự khác biệt giữa thẻ và thuộc tính là gì?
Các thẻ(tag) HTML là các phần tử (element). Chẳng hạn  , và . Thuộc tính (attribute) HTML mô tả đặc điểm của các phần tử. Ví dụ src, class và id.

Ví dụ: Ví dụ: Câu hỏi phỏng vấn front end

, trong đó ‘align’ là thuộc tính mà chúng ta  căn chỉnh đoạn văn để hiển thị ở giữa.

Image credit: interviewbit.com
Q9: Sự khác biệt giữa phần tử inline và phần tử block là gì?
Các phần tử inline không được có chiều cao hoặc chiều rộng. Ví dụ về các phần tử inline bao gồm span, a và img. Các phần tử khối (block) có dòng riêng và chiếm toàn bộ chiều rộng có sẵn. Ví dụ về các phần tử khối là div, p và h1.

Q10: Hãy so sánh Display none và visibility hidden
Cả display none (không hiển thị) và visibility hidden (hiển thị ẩn) sẽ ẩn phần tử khỏi trang. Sự khác biệt là với display none, không có không gian được phân bổ cho phần tử, trong khi với visibility hidden, một khoảng trống sẽ xuất hiện trên trang.

Q11: Hãy xem HTML5 như một nền tảng web mở. Các khối building block của HTML5 là gì?
Các building block của html5:

Ngữ nghĩa (Semantics) – Cho phép bạn mô tả chính xác hơn nội dung.
Khả năng kết nối – Cho phép  giao tiếp với máy chủ theo những cách mới và sáng tạo.
Ngoại tuyến và lưu trữ – Cho phép các trang web lưu trữ cục bộ dữ liệu ở phía client và hoạt động offline hiệu quả hơn.
 Đa phương tiện – Làm cho video và âm thanh trở thành công dân hạng nhất trong Open Web.
Đồ họa và hiệu ứng 2D / 3D – Cho phép nhiều tùy chọn trình bày đa dạng hơn.
Hiệu suất và tích hợp – Cung cấp khả năng tối ưu hóa tốc độ cao hơn và sử dụng phần cứng máy tính tốt hơn.
Quyền truy cập thiết bị – Cho phép sử dụng các thiết bị đầu vào và đầu ra khác nhau.
Tạo kiểu (Styling) – Để các tác giả viết các chủ đề phức tạp hơn.

Tham khảo thêm về HTML5 để trả lời tốt các câu hỏi Front End : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Q12: Mô tả sự khác biệt giữa cookie, sessionStorage và localStorage.
Tất cả các công nghệ được đề cập ở trên là cơ chế lưu trữ khóa-giá trị (key-value) ở phía client. Chúng chỉ có thể lưu trữ các giá trị dưới dạng chuỗi

 
cookie
localStorage
sessionStorage

Nơi khởi tạo
Client hoặc server. Server có thể dủng Set-Cookie header
Client
Client

Hết hạn
Có thời gian sống
Lưu trữ vô thời hạn
Mất dữ liệu khi đóng tab

Liên tục trên các phiên trình duyệt
Tùy thuộc vào thời gian hết hạn được cấu hình

Không

Gửi đến máy chủ với mọi yêu cầu HTTP
Cookies được tự động gửi qua  Cookie header
Không
Không

Lưu trữ tối đa (per domain)
4kb
5MB
5MB

Truy cập
Bất kỳ cửa sổ nào
Bất kỳ cửa sổ nào
Trên cùng tab

Q13: Hãy giải thích việc sử dụng phần tử canvas trong HTML5
là phần tử trong HTML5 mà chúng ta có thể sử dụng để vẽ đồ họa sử dụng kịch bản (JavaScript). Phần tử này hoạt động như một container cho đồ họa và phần còn lại sẽ được thực hiện bởi kịch bản. Chúng ta có thể vẽ hình ảnh, đồ thị và một ít hình ảnh động Etcetera sử dụng phần tử

Q14: Mô tả sự khác biệt giữa , và .

– Phân tích cú pháp HTML bị chặn, tập lệnh được tìm nạp và thực thi ngay lập tức, phân tích cú pháp HTML tiếp tục sau khi tập lệnh được thực thi.
– Tập lệnh sẽ được tìm nạp song song với việc phân tích cú pháp HTML và được thực thi ngay khi có sẵn (có thể là trước khi quá trình phân tích cú pháp HTML hoàn tất). Sử dụng không đồng bộ khi tập lệnh độc lập với bất kỳ tập lệnh nào khác trên trang, ví dụ: phân tích.
– Tập lệnh sẽ được tìm nạp song song với quá trình phân tích cú pháp HTML và được thực thi khi trang hoàn tất quá trình phân tích cú pháp. Nếu có nhiều trong số chúng, mỗi tập lệnh hoãn lại được thực thi theo thứ tự mà chúng gặp trong tài liệu. Nếu một tập lệnh dựa trên DOM được phân tích cú pháp đầy đủ, thì thuộc tính defer sẽ hữu ích trong việc đảm bảo rằng HTML được phân tích cú pháp đầy đủ trước khi thực thi. Không có nhiều sự khác biệt khi đặt một bình thường ở cuối . Tập lệnh hoãn lại không được chứa document.write.

Lưu ý: Các thuộc tính async và defer bị bỏ qua đối với các tập lệnh không có thuộc tính src.

Q15: progressive rendering là gì?
Progressive rendering là tên được đặt cho các kỹ thuật được sử dụng để cải thiện hiệu suất của trang web (đặc biệt là cải thiện thời gian tải cảm nhận) để kết xuất nội dung hiển thị nhanh nhất có thể. Progressive rendering đã từng phổ biến hơn nhiều vào những ngày trước khi có internet băng thông rộng nhưng nó vẫn được sử dụng trong sự phát triển hiện đại khi kết nối dữ liệu di động ngày càng trở nên phổ biến (và không đáng tin cậy)!

Tham khảo thêm về Progressive rendering:  https://stackoverflow.com/questions/33651166/what-is-progressive-rendering

Q16: DOM là gì?

DOM là viết tắt của Document Object Model
DOM là một API lập trình cho các tài liệu HTML và XML
DOM đại diện cho các tài liệu HTML & XML dưới dạng các node và đối tượng. Vì vậy, nó có thể được điều khiển thông qua javascript
Xây dựng DOM giống với cấu trúc dựa trên cây

Ví dụ:

Shady Grove
Aeolian

Over the River, Charlie
Dorian

HTML ở trên được biểu diễn dưới dạng cấu trúc dựa trên cây như bên dưới. Biểu diễn đồ họa:

Xem nguồn của câu hỏi phỏng vấn front end này tại đây

Tìm hiểu thêm về DOM: Introduction to the DOM

Q17: Geolocation API trong HTML5 là gì?
Geolocation (định vị địa lý) API được sử dụng để chia sẻ vị trí thực của khách hàng với các trang web. Điều này giúp cung cấp nội dung dựa trên ngôn ngữ và trải nghiệm độc đáo cho người dùng, dựa trên vị trí của họ. Geolocation API hoạt động với một thuộc tính mới của đối tượng điều hướng toàn cầu và hầu hết các trình duyệt hiện đại đều hỗ trợ điều này.

var geolocation = navigator.geolocation;

Q18: Hình ảnh raster và hình ảnh vector là gì?

Hình ảnh raster – Hình ảnh raster được xác định bằng cách sắp xếp các pixel trong một lưới với màu sắc chính xác của pixel đó. Một số định dạng tập tin raster bao gồm PNG (.png), JPEG (.jpg), v.v.
Hình ảnh vectơ – Hình ảnh vectơ được xác định bằng cách sử dụng các thuật toán với định nghĩa hình dạng và đường dẫn có thể được sử dụng để hiển thị hình ảnh trên màn hình được viết theo kiểu đánh dấu tương tự. Phần mở rộng của tập tin là .svg

Q19: Cách sử dụng thuộc tính novalidate cho thẻ biểu mẫu (form tag) được giới thiệu trong HTML5 là gì?
Giá trị của nó là kiểu boolean cho biết liệu dữ liệu đang được biểu mẫu gửi có được xác thực trước hay không. Bằng cách gán là false, các biểu mẫu có thể được gửi mà không cần xác thực, điều này cũng giúp người dùng tiếp tục sau đó.

Q20: Hãy mô tả cấu trúc bố cục của HTML.
Mỗi trang web đều có các thành phần khác nhau để hiển thị nội dung dự định và một giao diện người dùng cụ thể. Tuy nhiên, có một số thứ được tạo khuôn mẫu và được chấp nhận toàn cục để cấu trúc trang web, chẳng hạn như:

Internal: phần tử đầu của trang web có internal CSS được triển khai trong đó:

Q38: Ưu điểm của việc sử dụng Translate() thay vì absolute position là gì?
Translate() không khiến trình duyệt kích hoạt repaint và bố cục mà thay vào đó, chỉ hoạt động trên trình tổng hợp. Absolute position kích hoạt repaint hoặc chỉnh sửa DOM. Vì vậy, Translate() mang lại hiệu suất tốt hơn

Q39: Giải thích thuộc tính vị trí (possition) CSS?

Absolute: Để đặt một phần tử chính xác nơi bạn muốn đặt nó. Absolute position thực sự được đặt so với phần tử gốc. Nếu không có trang gốc nào thì vị trí tương đối với chính trang đó (nó sẽ mặc định tất cả các cách sao lưu vào phần tử).
Relative: Tương đối với chính nó. Vị trí đặt: tương đối; trên một phần tử và không có thuộc tính định vị nào khác, nó sẽ không ảnh hưởng đến định vị của nó. Nó cho phép sử dụng z-index trên phần tử và nó giới hạn phạm vi của các phần tử con được định vị tuyệt đối. Bất kỳ phần tử con nào sẽ được định vị tuyệt đối trong khối đó.
Fixed:  Phần tử được định vị liên quan đến chế độ xem hoặc chính cửa sổ trình duyệt. Khung nhìn không thay đổi nếu bạn cuộn và do đó phần tử cố định sẽ ở ngay vị trí cũ.
Static: Mặc định tĩnh cho mọi phần tử trang. Lý do duy nhất bạn muốn đặt một phần tử ở vị trí: static là để xóa một cách một số vị trí đã áp dụng cho một phần tử nằm ngoài tầm kiểm soát của bạn.
Sticky: Sticky positioning là sự kết hợp giữa định vị tương đối và cố định. Phần tử được coi là vị trí tương đối cho đến khi nó vượt qua ngưỡng được chỉ định, tại thời điểm đó, phần tử được coi là vị trí cố định.

Q40: Grid system là gì?
CSS Grid Layout là hệ thống bố cục mạnh mẽ nhất hiện có trong CSS. Nó là một hệ thống 2 chiều, có nghĩa là nó có thể xử lý cả cột và hàng, không giống như flexbox phần lớn là hệ thống 1 chiều

3/ Các câu hỏi phỏng vấn JavaScript
Các câu hỏi phỏng vấn JavaScript là phần quan trọng trong phỏng vấn Front End. Hãy cùng xem một số câu hỏi thông dụng:

Q41: Hãy giải thích về event delegation
Event delegation là một kỹ thuật liên quan đến việc thêm event listeners vào một phần tử mẹ thay vì thêm chúng vào các phần tử con. Listeners sẽ kích hoạt bất cứ khi nào sự kiện được kích hoạt trên các phần tử con do sự kiện làm nổi bong bóng (bubbling up) DOM. Lợi ích của kỹ thuật này là:

Memory footprint giảm xuống vì chỉ cần một trình xử lý duy nhất trên phần tử mẹ, thay vì phải đính kèm các trình xử lý sự kiện trên mỗi phần tử con.
Không cần phải hủy liên kết trình xử lý khỏi các phần tử bị xóa và liên kết sự kiện cho các phần tử mới.

Q42: Giải thích cách hoạt động của this trong JavaScript
Không có lời giải thích đơn giản nào cho this; nó là một trong những khái niệm khó hiểu nhất trong JavaScript. Giá trị của this phụ thuộc vào cách hàm được gọi.  Các quy tắc sau được áp dụng:

Nếu từ khóa new được sử dụng khi gọi hàm, thì bên trong hàm này là một đối tượng hoàn toàn mới.
Nếu apply, call hoặc bind được sử dụng để gọi / tạo một hàm, thì bên trong hàm này là đối tượng được truyền vào dưới dạng đối số.
Nếu một hàm được gọi là một phương thức, chẳng hạn như obj.method () – thì this là đối tượng mà hàm là thuộc tính của nó.
Nếu một hàm được gọi dưới dạng một lệnh gọi hàm miễn phí, nghĩa là nó được gọi mà không có bất kỳ điều kiện nào ở trên, thì đây là đối tượng toàn cục. Trong trình duyệt, nó là đối tượng window. Nếu ở chế độ nghiêm ngặt (‘use strict’), this sẽ là undefined thay vì đối tượng toàn cục.
Nếu áp dụng nhiều quy tắc trên, quy tắc nào cao hơn sẽ được ưu tiên và sẽ đặt giá trị này.
Nếu hàm là một arrow function ES2015, nó sẽ bỏ qua tất cả các quy tắc ở trên và nhận this của phạm vi xung quanh tại thời điểm nó được tạo.

Q43: Sự khác biệt giữa các host objects và native objects là gì?

Native objects là các đối tượng là một phần của ngôn ngữ JavaScript được xác định bởi đặc tả ECMAScript, chẳng hạn như String, Math, RegExp, Object, Function, v.v.
Host objects được cung cấp bởi môi trường thời gian chạy (trình duyệt hoặc Node), chẳng hạn như window, XMLHTTPRequest, v.v.

Q44: Ưu điểm và nhược điểm của việc sử dụng Ajax là gì?
Ưu điểm:

Tương tác tốt hơn. Nội dung mới từ máy chủ có thể được thay đổi động mà không cần tải lại toàn bộ trang.
Giảm kết nối đến máy chủ vì tập lệnh và biểu định kiểu chỉ phải được yêu cầu một lần.
Trạng thái có thể được duy trì trên một trang. Các biến JavaScript và trạng thái DOM sẽ vẫn tồn tại vì trang vùng chứa chính không được tải lại.

Nhược điểm:

Các trang web động khó đánh dấu hơn.
Không hoạt động nếu JavaScript đã bị tắt trong trình duyệt.
Một số trình duyệt web không thực thi JavaScript và sẽ không nhìn thấy nội dung đã được tải bởi JavaScript.
Các trang web sử dụng Ajax để tìm nạp dữ liệu có thể sẽ phải kết hợp dữ liệu từ xa đã tìm nạp với các mẫu phía máy khách để cập nhật DOM. Để điều này xảy ra, JavaScript sẽ
phải được phân tích cú pháp và thực thi trên trình duyệt và các thiết bị di động cấp thấp có thể phải vật lộn với điều này.

Image credit: bestinterviewquestion.com
Q45: “use strict” là gì? Những thuận lợi và khó khăn khi sử dụng nó là gì?
“use strict”  là một câu lệnh được sử dụng để bật chế độ nghiêm ngặt cho toàn bộ tập lệnh hoặc các chức năng riêng lẻ. Chế độ nghiêm ngặt (strict mode) là một cách để chọn tham gia một biến thể JavaScript bị hạn chế.

Ưu điểm:

Làm cho nó không thể vô tình tạo ra các biến toàn cục.
Thực hiện các bài tập mà nếu không sẽ không đưa ra một ngoại lệ.
Làm cho các nỗ lực xóa thuộc tính không thể xóa được ném ra (nơi mà trước đó nỗ lực chỉ đơn giản là không có tác dụng).
Yêu cầu tên tham số hàm là duy nhất.
điều này không được xác định trong bối cảnh toàn cầu.
Nó bắt một số blooper mã hóa phổ biến, đưa ra các ngoại lệ.
Nó vô hiệu hóa các tính năng khó hiểu hoặc không được nghĩ ra.

Nhược điểm:

Nhiều tính năng còn thiếu mà một số nhà phát triển có thể đã quen.
Không còn quyền truy cập vào function.caller và function.arguments.
Việc kết hợp các tập lệnh được viết ở các chế độ nghiêm ngặt khác nhau có thể gây ra sự cố.

Q46: Sự khác biệt giữa Set, WeakSet, Map và WeakMap trong JavaScript là gì?

WeakSet và Set đều là tập hợp các giá trị duy nhất. Sự khác biệt chính là WeakSet chỉ lưu trữ đối tượng và không thể chứa các giá trị tùy ý thuộc bất kỳ loại nào, nhưng các Setthì có thể.
Sets hữu ích khi bạn cần nối từng dữ liệu một vào cấu trúc dữ liệu nhưng cũng muốn loại bỏ các phần trùng lặp. Các hoạt động tập hợp có giá trị trung bình là O(1), điều này làm cho chúng tiết kiệm thời gian.
WeakMap và Map là tập hợp các cặp khóa / giá trị. Sự khác biệt chính là trong WeakMap, các khóa phải là các đối tượng. Trong Map, các khóa có thể thuộc bất kỳ loại nào.
Cũng cần biết rằng các giá trị WeakMap không thể được lặp lại và chúng giữ một tham chiếu yếu (weak reference) đến khóa. Ví dụ: nếu bạn xóa thủ công một khóa được tham chiếu trong WeakMap, khóa đó sẽ được thu gom.

Q47: Khi nào bạn sử dụng document.write ()?
document.write () ghi một chuỗi văn bản vào một luồng tài liệu được mở bởi document.open (). Khi document.write () được thực thi sau khi trang được tải, nó sẽ gọi document.open để xóa toàn bộ tài liệu (đã xóa và !) Và thay thế nội dung bằng giá trị tham số đã cho. Do đó, nó thường được coi là nguy hiểm và dễ bị lạm dụng.

Q48: Sự khác biệt giữa let, const và var là gì?
Ban đầu, var là tùy chọn duy nhất mà JavaScript có để xác định các biến. Trong ES6, chúng ta có const và let là các tùy chọn bổ sung.

Các biến được xác định bằng const không thể được gán lại.
Các biến Const và let là phạm vi khối.
Biến Var là function scoped.
Các biến được xác định bằng var được sử dụng theo cơ chế hoisting

Q49: Làm cách nào để bạn kiểm tra xem một biến có phải là một số trong JavaScript hay không?
Để kiểm tra xem một biến có phải là số hay không, chúng ta có thể sử dụng hàm isNaN () trong JavaScript. Nó xác định xem một giá trị có phải là một số hay không.

Q50: CoffeeScript là gì?
CoffeeScript là một ngôn ngữ lập trình nhỏ có thể biên dịch thành JavaScript. Nó giúp viết mã JavaScript tốt hơn bằng cách cung cấp cho bạn cú pháp nhất quán hơn và tránh tính chất bất thường của ngôn ngữ JavaScript. Quy tắc cơ bản cho Coffee Script:

Vấn đề về khoảng trắng: Không có dấu ngoặc nhọn trong CoffeeScript
Không có dấu ngoặc đơn: Các hàm nhận đối số không yêu cầu dấu ngoặc đơn

Q51: Clousure là gì?
Closure là tạo một phạm vi từ vựng đóng bên trong một phạm vi khác, vì vậy phạm vi bên trong có thể truy cập phạm vi bên ngoài. Closure được tạo khi hàm được tạo. Closure là làm cho các biến và phương thức ở chế độ riêng tư trong phạm vi.
Currying là một ví dụ của việc closure. Nó thường tự trả về khi tạo ra lexical environment. Môi trường này bao gồm bất kỳ biến cục bộ nào nằm trong phạm vi tại thời điểm closure được tạo. Nó giống như một nhà máy nhỏ để sản xuất một sản phẩm với các chức năng cụ thể từ các thành phần đó.

function add(n){
var num = n
return function addTo(x){
return x + num
}
}
addTwo = add(2)
addTwo(5)

Không có cách rõ ràng nào để tạo các phương thức private trong JS, nhưng closure có thể ‘private’ các phương thức.

Q52: Hãy giải thích về ‘Hoisting’
Hoisting là hành vi mặc định trong JavaScript, di chuyển tất cả các khai báo lên trên cùng của phạm vi hiện tại và cho phép các biến có thể được sử dụng trước khi khai báo. Quá trình khởi tạo sẽ không bị kéo lên. Hosts chỉ để khai báo.
Ví dụ dưới đây sẽ kéo x, y ở trên cùng:

var x = 1
console.log(x + “ — -”+y) // 1 — -undefined
var y = 2

Q53: JavaScript templating là gì? Bạn biết những thư viện nào?
JavaScript templating đề cập đến phương pháp liên kết dữ liệu phía client được triển khai bằng ngôn ngữ JavaScript. Cách tiếp cận này trở nên phổ biến nhờ JavaScript được sử dụng nhiều hơn, khả năng xử lý của ứng dụng khách tăng lên và xu hướng chuyển các phép tính cho trình duyệt web của khách hàng. Các thư viện JavaScript templating phổ biến là AngularJS, Backbone.js, Ember.js, Handlebars.js, và Mustache.js. Một phương pháp thường xuyên là sử dụng dấu ngoặc nhọn kép (tức là {{key}}) để gọi các giá trị của khóa đã cho từ các tập tin dữ liệu, thường là các đối tượng JSON.

Một số câu hỏi hành vi
Một số câu hỏi hành vi bạn có thể gặp trong phỏng vấn Front End

Q54: Hãy mô tả ngắn gọn về trang web hoặc ứng dụng web cuối cùng mà bạn đã làm việc, bạn đã thực hiện những bước nào để đảm bảo nó thân thiện với người dùng và có thể truy cập?
Gợi ý:

Các nhà tuyển dụng sẽ tìm kiếm những ứng viên có kinh nghiệm trực tiếp triển khai các tiêu chuẩn về usability và accessibility.
Các câu trả lời cho câu hỏi phỏng vấn Front End này có thể đề cập đến việc thực hiện kiểm tra người dùng trên các thiết bị khác nhau, đảm bảo trang web hoặc ứng dụng hoạt động liên tục và trực quan cho dù người dùng tương tác với nó như thế nào.

Q55: Hãy kể về khoảng thời gian bạn gặp phải những phản ứng từ stakeholder trong một dự án mà bạn đang thực hiện. Bạn đã xử lí tình huống đó như thế nào?
Gợi ý:

Nhà tuyển dụng mong muốn những ứng viên đã phản hồi một cách chuyên nghiệp, lắng nghe và biết giải thích quan điểm của mình.
Những câu trả lời có thể bao gồm cách ứng viên thuyết phục các bên liên quan thử theo cách của họ,  hoặc cách đề xuất một thỏa hiệp mà đã được chấp nhận trong thực tế dự án.

Q56: Mô tả trải nghiệm của bạn về một dự án web khó khăn có sự tham gia của nhiều bên liên quan. Bạn đã hoàn thành dự án như thế nào?
Gợi ý:

Nhà tuyển dụng luôn tìm kiếm các dấu hiệu cho thấy ứng viên đã chịu trách nhiệm và thúc đẩy phần còn lại của nhóm.
Những câu trả lời tốt sẽ cho thấy ứng viên đã hỏi những câu hỏi thông minh đối với những người liên quan, đưa ra các chi tiết để mọi người hiểu được các yêu cầu về thiết kế và chức năng.

Một số nguồn câu hỏi tham khảo
Một số nguồn câu hỏi dùng cho bài viết này và một số tài liệu tham khảo dành cho phỏng vấn Front End developer

Front End Interview Handbook
Các câu hỏi phỏng vấn Front End
Câu hỏi thường gặp trong vòng tuyển dụng Front end Developer
10 câu hỏi thông dụng về JavaScript cho phỏng vấn Front end Developers

 

 

Bạn có biết?

tham gia cộng đồng ITguru trên Linkedin, Facebook và các kênh mạng xã hội khác có thể giúp bạn nhanh chóng tìm được những chủ đề phát triển nghề nghiệp và cập nhật thông tin về việc làm IT mới nhất

Linkedin Page: https://bit.ly/LinkedinITguru
Facebook Group: https://bit.ly/ITguruvn
cơ hội việc làm IT : ITguru.vn

Back to top button