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

Một cách nhanh chóng sẽ là dùng hàm isInteger. Tuy nhiên hàm này không cho biết đó là số nguyên dương hay số nguyên âm.

Một cách khác là lấy số đo chia số cho 1 và xem có phần dư hay không.

function isAnInt(num) {

   return num % 1 === 0;

}

console.log(isInt(10)); // true

console.log(isInt(1.1)); // false

console.log(isInt(0.5)); // false

Các phần của URL(Uniform Resource Locator) như sau:

• Phần đầu tiên của URL, http hoặc https, được gọi là giao thức. Giao thức xác định cách trình duyệt của bạn giao tiếp với máy chủ web. Trong ví dụ này, https là Hypertext Transfer Protocol Secure. Kết nối https được mã hóa và an toàn hơn http thông thường. Lược đồ được phân tách bằng dấu: và // bắt đầu tên miền.
• www.movies.com là tên miền hoặc máy chủ lưu trữ. Đây là máy chủ web mà dữ liệu đang được yêu cầu. Domain luôn bao gồm miền cấp cao nhất. Trong trường hợp này, miền cấp cao nhất là .com, các miền cấp cao nhất khác là .gov .net .org .vn, v.v.
• :443  là port. Port được sử dụng để truy cập tài nguyên trên máy chủ web. Nếu máy chủ web ở trên một port tiêu chuẩn (: 80 cho http và: 443 cho https), bạn sẽ không thấy nó trong URL. Nếu không, nó là bắt buộc và nó sẽ cấp quyền truy cập vào các tài nguyên trên máy chủ web đó.
• movie/index.html được gọi là đường dẫn đến tập tin. Nó chỉ ra đường dẫn đến tài nguyên cụ thể trên máy chủ web mà client (trình duyệt) đang yêu cầu truy cập.
• ? type = Horti & imdb = 8 là các tham số (parameters) của URL. Về cơ bản, đây là các cặp giá trị khóa được phân tách bằng ký hiệu &. Vì trong URL cụ thể này có một? bạn có thể tham khảo? type =ror & imdb = 8 làm chuỗi truy vấn. Các máy chủ web đều là duy nhất và xử lý các thông số khác nhau.
• #Blockbusters là mỏ neo (anchor). Một số có thể gọi đây là mã nhận dạng phân đoạn (fragment identifier). Nó sẽ luôn bắt đầu bằng dấu thăng #. Về cơ bản nó là một tài liệu tham khảo trang nội bộ. Anchor sẽ đưa bạn đến vị trí cụ thể trên một trang web. Nếu đó là một trang web dài có thể nó sẽ đưa bạn đến một phần hoặc một phần cụ thể của trang.

Propagation (lan truyền) xảy ra với việc capturing trước sau đó bubbling .
Trong giai đoạn capturing các sự kiện truyền từ Window qua  DOM tree cho đến khi nó đến nút đích. Ví dụ: nếu bạn nhấp vào một hyperlink, nó có thể đi từ  phần tử, đến , đến, và đến

Sau đó, sau khi phần tử mục tiêu được truy cập (trong đoạn code này có thể là event.target), giai đoạn bubbling xảy ra.

Bubbling ngược lại với giai đoạn capturing. Trong giai đoạn bubbling, các sự kiện nổi bong bóng (buble up) lên cây DOM. Vì vậy, nó sẽ đi từ phần tử đích đến tận Window. Trong ví dụ của chúng ta ở trên, sau khi siêu liên kết được nhấp vào, nó sẽ đi từ phần tử

có liên kết, đến phần tử

Từ khóa this của JavaScript là một trong những khái niệm cơ bản nhưng cũng dễ gây nhầm lẫn nhất của ngôn ngữ này, không chỉ khi bạn phải trả lời câu hỏi “this” là gì trong phỏng vấn về JavaScript.

Từ khóa this đại diện cho một đối tượng. Cụ thể nó là đối tượng đang thực thi  cose JS hiện tại. Có nghĩa là mọi hàm JS đều có một tham chiếu đến ngữ cảnh thực thi của nó (cách hàm được gọi) được gọi là this.

function state() {

   console.log(this.name);

}

var name = "NY";

var obj1 = { name: "IN", state: state };

var obj2 = { name: "CA", state: state };

state();                   // "NY"

obj1.state();           // "IN"

obj2.state();           // "CA" 

Công việc của hàm state () là kiểm tra giá trị của this.name. Điều này có nghĩa là nó in giá trị của thuộc tính name của ngữ cảnh thực thi hiện tại (this object).

Câu trả lời là True! Bạn sẽ nghĩ MIN_Value là 0 nhưng thực tế Number.MIN_VALUE là 5e-234. Đây là số dương nhỏ nhất có thể được biểu diễn dưới dạng số thực. Về cơ bản, nó là giá trị gần nhất mà bạn có thể nhận được là 0. Vậy giá trị nhỏ nhất là bao nhiêu? Number.NEGATIVE_INFINITY.

Việc Math.max ()> Math.min () trả về false nghe có vẻ sai, nhưng nó đúng là như vậy.

Nếu không có đối số nào được đưa ra, Math.min () trả về infinity và Math.max () trả về -infinity. Đây chỉ đơn giản là một phần của đặc tả cho các phương thức max () và min (), nhưng nó có logic đằng sau. Để hiểu tại sao, hãy xem đoạn code sau:

Math.min(1)

// 1

Math.min(1, infinity)

// 1

Math.min(1, -infinity)

// -infinity

Nếu -infinity được coi là đối số mặc định của Math.min (), thì mọi kết quả sẽ là -infinity, điều này khá vô dụng! Trong khi đó, nếu đối số mặc định là infinity, thì việc thêm bất kỳ đối số nào khác sẽ trả về số đó và đó là hành vi mà chúng ta muốn.

Việc 018 – 017 trả về 3 là kết quả của việc chuyển đổi kiểu. Trong trường hợp này, chúng ta đang nói về số bát phân (octal numbers).

Trong JavaScript, tiền tố 0 sẽ chuyển đổi bất kỳ số nào thành bát phân. Tuy nhiên, 8 không được sử dụng trong hệ bát phân và bất kỳ số nào có chứa 8 sẽ được chuyển đổi âm thầm thành số thập phân thông thường.

Do đó, 018 – 017 trên thực tế tương đương với biểu thức thập phân 18 – 15, vì 017 là bát phân nhưng 018 là thập phân.

Lưu ý: để hiểu hơn về số bát phân để trả lời tốt câu hỏi phỏng vấn JavaScript này bạn nên tìm hiểu thêm về octal numbers

Một Function declaration (khai báo hàm) sử dụng từ khóa function, theo sau là tên của hàm. Ngược lại, một Function Expression (biểu thức hàm)  bắt đầu bằng var, let hoặc const,  theo sau là tên của hàm và toán tử gán = . Dưới đây là một số ví dụ:

// Function Declaration

function sum(x, y) {

   return x + y;

};

// Function Expression: ES5

var sum = function(x, y) {

   return x + y;

};

// Function Expression: ES6+

const sum = (x, y) => { return x + y };

Trong cách sử dụng, sự khác biệt chính là Function declaration được thực hiện theo cơ chế hoisting, trong khi Function Expression thì không. Điều đó có nghĩa là các khai báo hàm được trình thông dịch JavaScript chuyển lên đầu phạm vi của chúng và do đó bạn có thể xác định một khai báo hàm và gọi nó ở bất kỳ đâu trong code của bạn. Ngược lại, bạn chỉ có thể gọi một biểu thức hàm theo trình tự tuyến tính: bạn phải xác định nó trước khi gọi nó.

Ba từ khóa này có các cách tiếp cận khác nhau trong phép gán (assignment), cơ chế hoisting và phạm vi (scope) – vì vậy chúng ta sẽ so sánh theo 3 từ khóa này.

1/ Assigment (phép gán)

Sự khác biệt cơ bản nhất là let và var có thể được gán lại (re-assigned) trong khi constthì không. Điều này làm cho const trở thành lựa chọn tốt nhất cho các biến không cần thay đổi và nó sẽ ngăn ngừa những sai lầm như vô tình gán lại. Lưu ý rằng const cho phép biến thay đổi (variable mutation), có nghĩa là nếu nó đại diện cho một mảng hoặc một đối tượng, nó có thể thay đổi. Bạn chỉ không thể chỉ định lại chính biến đó.

Cả let và var đều có thể được gán lại, nhưng let có những lợi thế đáng kể so với var, khiến nó trở thành lựa chọn tốt hơn trong hầu hết, nếu không phải là tất cả các trường hợp mà một biến cần thay đổi.

2/ Hoisting

Tương tự như sự khác biệt giữa khai báo hàm và biểu thức (câu hỏi 18), các biến được khai báo bằng var luôn được đưa lên đầu phạm vi tương ứng của chúng, trong khi các biến được khai báo bằng const và let được cũng được đưa lên, nhưng nếu bạn cố gắng truy cập chúng trước khi chúng đã khai báo, bạn sẽ gặp lỗi ‘vùng chết tạm thời’ (temporal dead zone).  Đây là hành vi hữu ích, vì var có thể dễ bị lỗi hơn, chẳng hạn như tình cờ bị gán lại. Hãy xem ví dụ sau:

var x = "global scope";

function foo() {

   var x = "functional scope";

   console.log(x);

}

foo(); // "functional scope"

console.log(x); // "global scope"

Ở đây, kết quả của foo () và console.log (x) đúng như chúng ta mong đợi. Nhưng điều gì sẽ xảy ra nếu chúng ta bỏ var thứ hai?

var x = "global scope";

function foo() {

   x = "functional scope";

   console.log(x);

}

foo(); // "functional scope"

console.log(x); // "functional scope"

Mặc dù được định nghĩa trong một hàm, x = "function scope" đã ghi đè biến toàn cục. Chúng ta cần lặp lại từ khóa var để chỉ định rằng biến thứ hai x chỉ được xác định phạm vi cho foo ()

3/ Scope

Trong khi var là phạm vi chức năng (function-scoped), let và const là phạm vi khối (block-scoped). Nói chung, một khối là bất kỳ code nào trong dấu ngoặc nhọn {}, bao gồm các hàm, câu lệnh điều kiện và vòng lặp. Để xem sự khác biệt, hãy xem đoạn mã sau:

var a = 0;

let b = 0;

const c = 0;

if (true) {

  var a = 1;

  let b = 1;

  const c = 1;

}

console.log(a); // 1

console.log(b); // 0

console.log(c); // 0

Trong khối điều kiện trên, biến toàn cục var a đã được định nghĩa lại, nhưng let b và const c trong phạm vi toàn cục thì không. Nói chung, việc đảm bảo các nhiệm vụ cục bộ vẫn là cục bộ sẽ giúp mã sạch hơn và ít lỗi hơn.

Điều gì sẽ xảy ra nếu bạn xác định một biến mà không sử dụng từ khóa? Về mặt kỹ thuật, nếu x chưa được xác định, thì x = 1 là viết tắt của window.x = 1. và đó là nguyên nhân phổ biến gây ra rò rỉ bộ nhớ.

Để ngăn chặn hoàn toàn việc viết tắt này, bạn có thể sử dụng chế độ strict mode– được giới thiệu trong ES5 – bằng cách sử dụng use strict ở đầu tài liệu hoặc một hàm cụ thể. Khi đó, nếu bạn khai báo một biến mà không có từ khóa, bạn sẽ gặp lỗi:Uncaught SyntaxError: Unexpected indentifier.

Event delegation được sử dụng để phản hồi các sự kiện (event) của người dùng thông qua một node cha thay vì mỗi node con. Với Event Delegation, bạn có thể liên kết một trình xử lý sự kiện (event handler) với một phần tử parent mà phần tử đó sẽ xử lý bất kỳ sự kiện nào xảy ra trên một trong các phần tử con của nó.

Điều này cũng hữu ích khi chúng ta thêm các  node bổ sung thông qua JavaScript vì theo cách này, chúng ta không cần phải liên kết lại các sự kiện.

Chúng ta đã đê cập đến hoisting ở câu hỏi phỏng vấn JavaScript 19 bên trên. Hoisting có nghĩa là JavaScript sẽ di chuyển các khai báo lên đầu mọi phạm vi (scope). Nó thường là một khía cạnh không xác định của JavaScript, vì vậy để tránh tạo ra lỗi, bạn nên khai báo tất cả các biến ở đầu mọi phạm vi. Nó chỉ đơn giản là bạn có thể sử dụng một biến trước khi nó được khai báo.

Điều quan trọng là chỉ các biến được khai báo với var mới được lưu trữ, các khai báo let và const thì không. Các khởi tạo (Initializations) cũng không được hoisting, chỉ có các khai báo (decleration) là theo cơ chế này.

Hãy xem một ví dụ:

// Initializations are not hoisted, therefore

// This will log out undefined

console.log(x);

var x = 5;

// Declarations are hoisted, therefore

// This will log out 5

console.log(y);

var y;

y = 5;

Bản chất JavaScript là weak typed language. Điều này cho phép chúng ta sử dụng chuyển đổi kiểu ngầm định. Hãy xem ví dụ sau:

// This will return "12" as 1 will be converted into a string

1 + "2"

typeof (1 + "2") // Will return "string"

// This will return 12 as "12" will be converted into a number

"12" * 1

typeof ("12" * 1) // Will return "number"

Mặc dù chúng ta không chỉ rõ rằng mình muốn chuyển đổi chuỗi / số sang định dạng khác, nhưng JavaScript đã ngầm thực hiện việc đó.

Kế thừa (inheritance) trong JavaScript được gọi là kế thừa nguyên mẫu (prototypal inheritance). Khi bạn cố gắng truy cập thuộc tính của một đối tượng, thuộc tính đó sẽ không chỉ được tìm kiếm trong đối tượng mà còn trên nguyên mẫu của đối tượng, trên nguyên mẫu của nguyên mẫu và điều này tiếp tục cho đến khi tìm thấy một thuộc tính phù hợp hoặc chúng ta tiếp cận cuối của chuỗi nguyên mẫu.

Điều tương tự cũng xảy ra đối với các phương pháp. Trong JavaScript, mọi thứ đều được kế thừa từ Object.

DOM (Document Object Model) là một API liên kết các phần tử tài liệu HTML và XML – được gọi là các nút (node) – thành một cấu trúc cây.Nó cũng chứa thông tin về các mối quan hệ con-cha giữa các nút trong tài liệu.Các nút này là các đối tượng có thể được thao tác thông qua JavaScript và mọi thay đổi được thực hiện đối với chúng như kiểu (styles), nội dung (Content) hoặc thay đổi vị trí (placement changes)- đều được phản ánh.

Có nhiều cách khác nhau để kiểm tra xem một thứ có thực sự là một mảng array)  hay không:

// Check the constructor

variable.constructor === Array

// Check if the variable is an instance of Array

variable instanceof Array

// Check its prototype

Object.prototype.toString.call(variable) === '[object Array]';

// Use the built in isArray

Array.isArray(obj);

Bạn có thể sử dụng cấu trúc lại  Array.concat () hoặc ES6 để hợp nhất hai array:

// Using Array.concat

const array1 = ['', ''];

const array2 = ['', ''];

array1.concat(array2);

// Using ES6 destructuring

const array1 = ['', ''];

const array2 = ['', ''];

[...array1, ...array2];

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