Thành công trong các câu hỏi phỏng vấn JavaScript

Thành công trong các câu hỏi phỏng vấn JavaScript

Anh NguyễnBạn nghĩ gì về bài viết này?

Các câu hỏi phỏng vấn JavaScript không phải là dễ và nhiều ứng viên đã dành thời gian để xem qua các câu hỏi coding rải rác nhiều nơi để tạo sự tự tin. Trong khi thực hành nhiều sẽ tạo sự khác biệt đáng kể. Có một kế hoạch cụ thể sẽ giúp bạn nắm vững tất cả các khái niệm cơ bản và nâng cao mà người phỏng vấn mong đợi.

Để bạn làm quen với quy trình chuẩn bị phỏng vấn trong cộng đồng IT và các câu hỏi mà bạn cần biết, chúng tôi đã soạn một danh sách các khái niệm cần biết bên cạnh các giải pháp coding thực tế.

Cách chuẩn bị cho các câu hỏi phỏng vấn JavaScript

Các hỏi phỏng vấn JavaScript nổi tiếng là nghiêm ngặt, và nhiều ứng cử viên cảm thấy bối rối về cách chuẩn bị. Sự thật phũ phàng là không có phương pháp chắc chắn nào để đảm bảo thành công cho cuộc phỏng vấn JavaScript của bạn; tất cả phụ thuộc vào mức độ mà bạn chuẩn bị.

Bước 1: Biết những gì bạn cần học

Bạn đã biết ngôn ngữ lập trình nào bạn sẽ sử dụng, vì vậy bây giờ bạn cần nghiên cứu những khía cạnh nào của ngôn ngữ đó sẽ được kiểm tra. Có ba khía cạnh của bước này:

Biết bạn đang phỏng vấn ở cấp độ nào. Thường vị trí Junior Dev sẽ không cần biết nhiều về concurrency mà có thể họ sẽ kiểm tra khả năng thiết kế hệ thống của bạn. Biết trước bạn đang phỏng vấn ở cấp độ nào sẽ chuẩn bị tốt nhất cho bạn để tập trung vào những thứ quan trọng. Chúng ta đều biết rằng các cấp độ này có thể tùy ý, nhưng biết cách công ty tổ chức nhân viên thế nào sẽ giúp bạn rất nhiều.

Biết những kỹ năng sẽ được kiểm tra. JavaScript là một ngôn ngữ rộng lớn với nhiều phiên bản và khả năng dường như không giới hạn. Nhưng không phải tất cả trong số này sẽ được kiểm tra trong một cuộc phỏng vấn. Điều quan trọng là phải hiểu những kỹ năng nào thường được bao gồm trong các câu hỏi phỏng vấn JavaScript nói chung. Như bạn có thể biết, ví dụ, các cấu trúc dữ liệu và thuật toán xuất hiện thường xuyên trong các cuộc phỏng vấn, trong khi các câu hỏi ngôn ngữ cơ bản ít phổ biến hơn.

Biết những gì công ty mong đợi. Một số công ty sẽ mong đợi các kỹ năng khác nhau so với những người khác. Một số công ty tập trung vào một số công cụ JavaScript nhất định hơn các công cụ khác. Bạn cần biết những gì được mong đợi từ bạn. Bạn có thể thực hiện nghiên cứu này trên các trang web công ty của họ, mô tả công việc hoặc các trang web như Coding Interview. Bạn sẽ tiết kiệm được nhiều thời gian và năng lượng.

hw7ah143n0gw6iidmls6

Bước 2: Lập kế hoạch

Nhiều người bỏ lỡ bước này và cuối cùng chuẩn bị một cách không có kế hoạch. Lập kế hoạch sớm để đảm bảo rằng bạn trang trải mọi thứ bạn cần và nó giúp bạn có thêm động lực. Nói chung, bạn sẽ cần ba tháng để chuẩn bị cho một cuộc phỏng vấn coding.

Có rất nhiều thứ để học cho các câu hỏi phỏng vấn JavaScript, và bạn không muốn nhồi nhét bất cứ điều gì vào phút cuối. Dành đủ thời gian để làm như vậy và lập một kế hoạch vào đầu giai đoạn đó.

Điều quan trọng là không bỏ qua việc bồi dưỡng hoặc thực hành ban đầu. Nhiều người không xem xét các nguyên tắc JavaScript cơ bản và cuối cùng bị bối rối khi được hỏi trong cuộc phỏng vấn. Xây dựng từ những điều cơ bản đến những thứ phức tạp, và việc học của bạn sẽ tập trung và tự nhiên hơn.

Bước 3: Đừng quên cuộc phỏng vấn hành vi

Các câu hỏi phỏng vấn JavaScript sẽ được đi kèm với một cuộc phỏng vấn hành vi. Đây là nơi những người phỏng vấn làm quen với bạn như một người và xem giá trị của bạn có phù hợp với tổ chức của họ không. Những cuộc phỏng vấn này là rất quan trọng để đưa ra quyết định việc làm. Nhiều ứng viên quên chuẩn bị cho các cuộc phỏng vấn hành vi và chỉ tập trung vào các kỹ năng kỹ thuật.

Đây là một sai lầm lớn.

Mặc dù phỏng vấn hành vi mất ít thời gian hơn để chuẩn bị so với các câu hỏi phỏng vấn JavaScript, nhưng nó vẫn rất quan trọng đối với thành công của bạn và cần được tính đến trong kế hoạch.

Bây giờ bạn đã có ý thức về cách chuẩn bị cho các cuộc phỏng vấn của mình, hãy đi sâu vào các câu hỏi JavaScript quan trọng nhất bạn có thể mong đợi trong một cuộc phỏng vấn.

Câu hỏi về khái niệm cơ bản JavaScript

Hoisting

Một câu hỏi về Hoisting có thể được hỏi ở cấp senior hoặc cấp junior. Để kiểm tra hiểu biết của bạn về Hoisting trong JavaScript, bạn có thể được hỏi một câu hỏi như thế này:

Output của code sau đây?

function Add(){
    console.log(answer)
    var answer = 2
};
Add()Code language: JavaScript (javascript)

Output: undefined

Trong JavaScript, chúng ta có thể khai báo một biến sau khi nó được sử dụng vì các khai báo biến sử dụng var được đưa lên đầu phạm vi chức năng của chúng tại thời điểm biên dịch. Điều này có nghĩa là một biến có thể được khởi tạo trước khi nó được khai báo. Hãy xem xét một ví dụ khác.

var temp = "hi"
function display(){
  var temp
  console.log(temp)
  temp = "bye" 
}
display()Code language: JavaScript (javascript)

Ở đây, var temp = ‘bye’ là một biến phạm vi chức năng. Khai báo của nó var temp được nâng lên đỉnh của hàm display( ) tại thời gian biên dịch. Vì giá trị bye nằm sau dòng 4, đầu ra không được xác định.

Kiểm tra dấu ngoặc đơn

Kiểm tra các dấu ngoặc đơn cân bằng là một câu hỏi phổ biến được hỏi trong các cuộc phỏng vấn JavaScript. Bạn có thể được hỏi một câu như thế này:

Viết hàm kiểm tra dấu ngoặc đơn để xác định xem dấu ngoặc mở và đóng của chuỗi đầu vào có được lồng đúng cách không.

function balancedParentheses(str) {
    let stack = [];
    let map = {
        '(': ')',
        '[': ']',
        '{': '}'
    }

    for (let i = 0; i < str.length; i++) {
        // If character is an opening brace add it to a stack
        if (str[i] === '(' || str[i] === '{' || str[i] === '[' ) {
            stack.push(str[i]);
        }
        //if closing brace, pop from stack
        else {
            let lastEle = stack.pop();
            //Return false if the element popped doesn’t match the corresponding closing brace in the map 
            if (str[i] !== map[lastEle]) {return false};
        }
    }
    //if stack not empty at end, return false
    if (stack.length !== 0) {return false};

    return true;
}
console.log(balancedParentheses("{[]()}" ));
console.log(balancedParentheses("{[(])}"));
console.log(balancedParentheses("{[}"));Code language: JavaScript (javascript)

Output: true false false

Giải pháp cho vấn đề này đơn giản hơn vẻ ngoài của nó. Đầu tiên, chúng tôi khai báo một stack ở dòng 2, chứa tất cả các dấu ngoặc đơn mở. Sau đó, chúng tôi khai báo một đối tượng map ở các dòng 3-6. Điều này giữ ba loại dấu ngoặc đơn mở và dấu ngoặc đơn đóng của chúng.

Sau đó, chúng ta duyệt biểu thức chuỗi được truyền vào hàm ở dòng 9. Nếu ký tự hiện tại đang mở, chúng ta sẽ đẩy nó vào stack. Nếu nó là một khung đóng, chúng tôi pop nó từ stack. Nếu ký tự đó không khớp với dấu ngoặc bắt đầu, chúng tôi sẽ bảo chương trình trả về false. Khi chúng tôi đạt đến ký tự cuối, mọi dấu ngoặc mở còn lại trong stack sẽ trở lại false.

Array Destructuring

Một thách thức chung trong một cuộc phỏng vấn JavaScript yêu cầu bạn loại bỏ hai yếu tố đầu tiên của một mảng bằng cách sử dụng array destructuring. Hãy xem xét giải pháp.

function removeFirstTwo(list) {
  const [, , ...arr] = list; 
  return arr;
} 
var arrLiteral = [8,9,10,11,12]
console.log("arr contains: " + removeFirstTwo(arrLiteral))Code language: JavaScript (javascript)

Output: arr contains: 10,11,12

Destructing một mảng sử dụng một cú pháp tương tự như một mảng bằng chữ. Ở bên trái của phương trình, chúng tôi xác định giá trị nào chúng tôi muốn truy xuất từ phía bên phải.

const [value1, value2] = arrLiteralCode language: JavaScript (javascript)

Chúng ta hãy xem nó được lưu trữ như thế nào.

var arrLiteral = [8,9,10,11,12]
const [value1, value2] = arrLiteral
console.log("value1 is: " + value1)
console.log("value2 is: " + value2)Code language: JavaScript (javascript)

Output: value1 is:8 value2 is:9

value1 lưu trữ các giá trị trong arrLiteral, 8, và value2 lưu trữ các giá trị tương ứng của nó trong arrLiteral, 9. Chúng ta có thể bỏ qua hai giá trị đầu tiên bằng dấu phẩy. Do đó, value1 và value2 lưu trữ hai giá trị tiếp theo, 10 và 11.

Sau đó chúng ta có thể sử dụng tham số phần còn lại arr để thu thập các giá trị còn lại thành một mảng. Chúng tôi trả lại arr vào cuối. Hãy nhìn dưới đây.

function removeFirstTwo(list) {
 const [, , ...arr] = list; 
 return arr; // line 3 of original code
}Code language: PHP (php)

Destructure undefined

Thách thức chung này yêu cầu bạn destructure undefined trong JavaScript. Giả sử bạn nhập vào biến point và chúng tôi muốn các giá trị đầu ra là thuộc tính name và age. Hãy xem.

function pointValues(point){
    const {name:n,age:a} = {...point} 
    console.log(n)
    console.log(a)
}
pointValues({name:"jerry", age:2})
pointValues(undefined)Code language: JavaScript (javascript)

Nếu nó là một đối tượng, code sẽ hiển thị các giá trị name và age của point, và sẽ báo lỗi undefined. Chúng ta cần phải truyền point vào một đối tượng trước khi chúng ta có thể destructure nó.

const {name:n,age:a} = {...point}Code language: JavaScript (javascript)

Chúng tôi làm điều đó bằng cách sử dụng {…point}, tạo ra một đối tượng mới bằng cách sử dụng các thuộc tính của point. Bây giờ, đối tượng mới sẽ chứa tất cả các giá trị giống như một loại bản sao. Các giá trị undefined và null được bỏ qua. Khi undefined được trải rộng, không có giá trị nào được lưu trữ trong đối tượng mới, do đó không có lỗi nào được đưa ra. Vì vậy, chúng ta thấy undefined khi truy cập name và age.

Có nhiều câu hỏi phỏng vấn JavaScript khác để kiểm tra kiến thức cơ bản về ngôn ngữ của bạn. Một số trong đó bao gồm:

  • Xác định hàm, createPhoneNumber, chấp nhận một mảng gồm 10 số nguyên (từ 0-9) và trả về một chuỗi các số đó dưới dạng số điện thoại.
  • Đưa ra một mảng coins, viết một hàm để tính số cách bạn có thể thực hiện amount bằng cách sử dụng các đồng tiền đó.
  • Hàm mũi tên khác với các hàm khác như thế nào?
  • Sự khác biệt đáng chú ý giữa call và Function.apply là gì?
  • Có thể chạy mã không đồng bộ trong JavaScript không?
  • Bạn được cung cấp một hàm returnNthCat có một biến n và có một đối tượng state được xác định trong nó. Trả về giá trị name của đối tượng mèo thứ n.

Câu hỏi về Type coercion

instance of

Một câu hỏi phỏng vấn JavaScript phổ biến hỏi về toán tử instanceof. Bạn có thể gặp một vấn đề như thế này:

Output của code dưới đây?

var names = ["Tom","Anna",2,true]
console.log(names instanceof String)
console.log(names instanceof Number)
console.log(names instanceof Object)
console.log(names instanceof Array)Code language: JavaScript (javascript)

Output: false false true true

Các instanceof kiểm tra nếu một operand là một thể hiện của đối tượng thông qua bên phải hoặc một thể hiện của bất kỳ ancestor của nó. Câu trả lời false false true true là đúng bởi vì chúng tôi đang sử dụng một mảng, names có chứa các giá trị của các kiểu chuỗi, số và boolean.

Names không phải là một instance của chuỗi hoặc số, mà là một mảng là instance của Array. Trong JavaScript, Array là một đối tượng, names cũng là một instance của Object.

Mảng hay không?

Một vấn đề phổ biến được phỏng vấn trông như thế này:

Thực hiện một hàm check lấy một đối tượng và xác định xem nó có phải là một mảng hay không. Nó sẽ trả lại true hoặc false.

Hãy xem câu trả lời:

function check(obj) {
  if (Object.prototype.toString.call(obj) === "[object Array]") {
    return true;
  } else {
    return false;
  }
}
console.log(check(123));
console.log(check("cat"));
console.log(check([1, 2, 3, 4]));Code language: JavaScript (javascript)

Output: false false true

Để kiểm tra xem một đối tượng có phải là một mảng không, chúng ta phải sử dụng phương thức Object.prototype.toString, nó trả về một chuỗi dưới dạng [object Type]. Nếu chúng ta gọi nó 123, chúng ta trả về chuỗi [object Number]. Nếu chúng tôi gọi nó { }, chúng tôi sẽ trở lại [object Object]. Nếu chúng ta gọi nó trên một mảng, chúng ta nên trả về [object Array].

Trên dòng 2, hãy xem cách chúng tôi so sánh chuỗi trả về từ Object.prototype.toString với [object Array]. Nếu chúng phù hợp, chúng tôi trả lại true, nếu không, false.

Instance của mảng?

Câu hỏi phỏng vấn JavaScript này, kiểm tra kiến thức của bạn về instanceof, là một chút khó khăn hơn. Hãy xem code dưới đây:

function check(){
    var tempFunc = function () {}

    return new tempFunc instanceof Array; 
}
console.log(check())Code language: JavaScript (javascript)

Output: false

Các chức năng check chứa các định nghĩa về tempFunc, và trên dòng 4, chúng tôi đang kiểm tra nếu một instance của tempFunc là một instance của Array. Nhiệm vụ của bạn là viết code trên dòng 3 để câu lệnh trả về true. Hãy xem giải pháp.

function check(){
    var tempFunc = function () {}
    tempFunc.prototype = Array.prototype
    return new tempFunc instanceof Array; 
}
console.log(check())Code language: JavaScript (javascript)

Output: true

Chúng ta cần sửa đổi code để đối tượng mới trở thành một instance của mảng. Chúng ta cần thực hiện một sửa đổi để có Array.prototype trong chuỗi nguyên mẫu tempFunc.

tempFunc.prototype = Array.prototype //line 3Code language: JavaScript (javascript)

Bây giờ, chúng tôi đặt tempFunc.prototype như Array.prototype. Bây giờ nó sẽ trả lại true.

Có nhiều câu hỏi phỏng vấn JavaScript khác để kiểm tra kiến thức của bạn về type coercion. Một số trong đó bao gồm:

  • Code sau đây sẽ hiển thị những gì?
console.log(Object.prototype.toString.call(new (function Custom(){})));Code language: JavaScript (javascript)
  • Mục đích của typeof là gì?
  • Xác thực các kỹ năng đối số bằng typeof trong JavaScript
  • Xác thực các kỹ năng ngày sử dụng toString và các chức năng mũi tên
  • Và hơn thế nữa

77-javascript

Câu hỏi về DOM và Trình duyệt web

Để kiểm tra kiến thức về các kỹ năng JavaScript và DOM, bạn có thể được hỏi các câu hỏi phỏng vấn JavaScript như,

Sự khác biệt giữa detection và inference là gì?

Chúng tôi có thể sử dụng tính năng detection và inference để xác định xem công nghệ web có tồn tại trong trình duyệt hay không. Detection dùng để ra nếu một tính năng tồn tại trong một trình duyệt cụ thể. Inference giả định rằng nếu một tính năng khả dụng trong một trình duyệt thì nó có sẵn trong các trình duyệt khác. Câu hỏi này có thể được hỏi trong các câu hỏi phỏng vấn JavaScript cấp junior.

Bạn cũng có thể được hỏi về attributes và properties. Một attribute được viết trong tài liệu HTML, trong đó các thẻ HTML có thể có các thuộc tính. Khi tài liệu đó được trình bày theo mô hình đối tượng DOM, các attributes được chuyển đổi thành properties.

Ẩn và hiển thị

Bạn cũng sẽ được kiểm tra khả năng thực hiện các chức năng liên quan đến DOM, chẳng hạn như để ẩn và hiển thị văn bản. Ví dụ: bạn sẽ được yêu cầu thực hiện chức năng ẩn văn bản, trong đó nhấp vào nút sẽ ẩn dòng chữ Hello World!. Hãy xem giải pháp.

function hideShow() {
  var ele = document.getElementById("hideDiv");
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}Code language: JavaScript (javascript)

Chúng ta tạo một button thực thi hàm hideShow và một div với văn bản. Chúng tôi sử dụng getElementById để truy cập vào div đó. Trên dòng 3, chúng tôi kiểm tra nếu thuộc tính style.display là none (còn gọi là ẩn). Nếu true, chúng tôi hiển thị phần tử bằng cách đặt thuộc tính display thành block. Nếu false, chúng tôi ẩn nó bằng cách đặt display thành none.

Có nhiều câu hỏi phỏng vấn JavaScript khác để kiểm tra kiến thức của bạn về DOM và các kỹ năng trình duyệt web về JavaScript. Một số trong đó bao gồm:

  • Các hàm liên quan đến DOM để tạo getElementByAttribute
  • Thực hiện query selector để thêm một lớp
  • Phá hủy và tạo các nút mới
  • Thực hiện chức năng liên quan đến DOM để tìm xem một phần tử có phải là con không
  • Và hơn thế nữa

Bạn cũng có thể mong đợi các câu hỏi phỏng vấn JavaScript liên quan đến bảo mật, thậm chí xử lý và các cuộc gọi lại không đồng bộ trong JavaScript. Hãy xem xét một vài khái niệm phổ biến mà bạn sẽ biết.

Xử lý sự kiện

  • Vòng lặp sự kiện, hàng đợi sự kiện và stack cuộc gọi trong JavaScript
  • Sự khác biệt giữa call stack và task queue là gì?
  • Sự kiện bubbling và đầu ra giao diện điều khiển
  • Nắm bắt sự kiện và đầu ra giao diện điều khiển
  • Những phương pháp nào sẽ ngăn chặn sự kiện bubbling?

Asynchronous callbacks

  • Thực hiện chức năng checkName kiểm tra lỗi
  • Sửa đổi code có lỗi Cannot read property ‘text’ of undefined
  • Khái niệm cơ bản về promise, chaining, câu lệnh .then và .catch in các số 0-9 theo cách liên tiếp để mỗi số được in sau một thời gian chờ ngẫu nhiên.

Security

  • Chính sách same origin là gì?
  • Hiểu / thực hiện strict keyword trong JavaScript
  • Sửa đổi code để bắt lỗi cho các thay đổi cụ thể

Kết luận

Chuẩn bị cho các câu hỏi phỏng vấn JavaScript tốn rất nhiều thời gian và công sức, nhưng cuối cùng nó cũng xứng đáng! Javascript tiếp tục là một trong những ngôn ngữ lập trình phổ biến và được trả lương cao nhất. Hãy lập một kế hoạch chi tiết, học tập chăm chỉ và thành công trên con đường bạn chọn.

Nguồn: https://nordiccoder.com/blog/thanh-cong-trong-cac-cau-hoi-phong-van-javascript/

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận