Tin tức chung

1001 câu hỏi trắc nghiệm về JavaScript có đáp án (phần 1)

05 May 2020

Một số câu hỏi và đáp án dành cho người đang học JavaScript

Array Compare 1

var a = [1, 2, 3];
var b = [1, 2, 3];
var c = '1,2,3';

console.log(a == c);
console.log(b == c);
console.log(a == b);
  • true, true, false
  • true, true, true
  • true, false, false
  • false, false false

Giải thích

Đáp án: A

Khi so sánh Double Equals (==) giữa array và string, cụ thể là a hoặc b với c, Javascript sẽ tự động gọi arr.toString() để chuyển đổi array sang string trước khi so sánh, hai mảng a và b convert sang string sẽ là '1,2,3', vì thế a == c và b == c cho kết quả true.

Khi so sánh Double Equals (==) hay Triple Equals (===) giữa các đối tượng là kiểu dữ liệu tham chiếu (Reference Type), như object, array, function, chúng ta không quan tâm đến giá trị mà đối tượng đang chứa, mà chỉ quan tâm đến chúng có cùng trỏ đến một địa chỉ ô nhớ hay không mà thôi. Trong trường hợp này, a và b là hai array trỏ đến hai ô nhớ khác nhau, vì thế a == b cho kết quả false.


Array Compare 2

var a = [9];
var b = [10];

console.log(a == 9);
console.log(b == 10);
console.log(a < b);
  • true true true
  • false false false
  • true true false
  • false false true

Giải thích

Đáp án: C

Khi so sánh Double Equals (==) giữa array và number, Javascript sẽ chuyển đổi array sang number trước khi so sánh ([9] -> 9 và [10] -> 10), vì thế [9] == 9 và [10] == 10 cho kết quả true.

Nhưng khi so sánh hai array với toán tử < hoặc >, lúc này array sẽ không được chuyển đổi sang number mà là sang string ([9] -> "9" và [10] -> "10"). Khi so sánh hai string thì sẽ so sánh theo alphabet với từng ký tự một, vì thế "9" < "10" cho kết quả là false vì "9" < "1" là sai.


Array Constructor

let i = 0;

const arr = new Array(5);
arr.forEach(() => i++);

console.log(i);
  • 5
  • 4
  • 1
  • 0

Giải thích

Đáp án: D

Bạn nghĩ là 5 à, không, bạn nên xem lại cách hoạt động của Array constructor, khi truyền vào một tham số là number từ 0 đến (2^32 - 1), nó sẽ tạo ra một array chỉ có thuộc tính length là number vừa truyền vào chứ nó không chứa các phần tử nào (empty slots), array này còn được gọi là sparse array. Vì array không chứa phần tử nào nên hàm forEach sẽ không được duyệt qua bất kỳ lần nào, vậy kết quả là 0.


Array Loop

Hàm greatestNumberInArray dưới đây có get được phần tử lớn nhất cho mọi array không?

function greatestNumberInArray(arr) {
  let greatest = 0;
  for (let i = 0; i < arr.length; i++) {
    if (greatest < arr[i]) {
      greatest = arr[i];
    }
  }
  return greatest;
}
  • Yes
  • No

Giải thích

Đáp án: B

Coi chừng bị lừa nhé, function trên chỉ đúng trong trường hợp các phần tử của mảng lớn hơn 0 mà thôi, còn nhỏ hơn 0 thì chắc là sai rồi, vì biến greatest được gán mặc định bằng 0 mà.


Array Reduce 1

Hai cách a và b dưới đây đều trả về một object có cùng thuộc tính và giá trị. Theo bạn thì cách nào tối ưu hơn?

const arr = [1, 2, 3];

const a = arr.reduce(
  (acc, el, i) => ({ ...acc, [el]: i }),
  {}
);

const b = {};
for (let i = 0; i < arr.length; i++) {
  b[arr[i]] = i;
}
  • a
  • b

Giải thích

Đáp án: B

Nhiều bạn nghĩ rằng đây là thời đại của ES2015 rồi, dùng reduce sẽ gọn và tối ưu hơn. Nhưng hãy nhìn kỹ vào code, với phương án b, qua mỗi vòng lặp ta chỉ việc set một thuộc tính mới vào b, còn ở phương án a, với mỗi lần lặp, spread operator (...) sẽ tạo ra thêm một shallow copy của acc và sau đó mới set một thuộc tính mới, điều này rõ ràng làm tốn bộ nhớ và không tối ưu.


Array Reduce 2

const arr = [
  x => x * 1,
  x => x * 2,
  x => x * 3,
  x => x * 4
];

console.log(arr.reduce((agg, el) => agg + el(agg), 1));
  • 1
  • 60
  • 100
  • 120

Giải thích

Đáp án: D

Hàm reduce của array cho phép chúng ta truyền vào một giá trị ban đầu ở tham số thứ hai, trong trường hợp này là 1 và ta có các bước tính toán sau:

1 + 1 * 1 = 2

2 + 2 * 2 = 6

6 + 6 * 3 = 24

24 + 24 * 4 = 120


Array Reverse

const ar = [5, 1, 3, 7, 25];
const ar1 = ar;
console.log(ar1.sort());
([5, 25].indexOf(ar[1]) != -1 &&
  console.log(ar.reverse())) ||
  (ar[3] == 25 && console.log(ar));
console.log(ar1);
  • [1, 3, 5, 7, 25] [7, 5, 3, 25, 1] [1, 25, 3, 5, 7] [1, 25, 3, 5, 7]
  • [1, 25, 3, 5, 7] [5,1,3,7,25]
  • [1, 25, 3, 5, 7] [7, 5, 3, 25, 1] [7, 5, 3, 25, 1] [7, 5, 3, 25, 1]
  • An error is thrown

Giải thích

Đáp án: C

const ar1 = ar có nghĩa ar1 và ar cùng tham chiếu đến một array trong bộ nhớ. ar1.sort() sẽ sắp xếp chính nó và ar1 cũng sẽ thay đổi theo.

Bạn nên nhớ hàm sort của array sẽ chuyển đổi các phần tử sang string trước khi sắp xếp chúng theo alphabet, vậy dòng console.log đầu tiên là [1, 25, 3, 5, 7].

Tiếp theo [5, 25].indexOf(ar[1]) != -1 trả về true nên (ar.reverse()) sẽ được gọi. ar.reverse() sẽ sắp xếp arr theo chiều ngược lại, ar bây giờ sẽ là [7, 5, 3, 25, 1], và được in ra ở console.log thứ hai.

console.log không trả về giá trị nào nên ta có thể viết lại như sau:

undefined || (ar[3] == 25 && console.log(ar));

undefined là falsy, nên ar[3] == 25 được gọi và kết quả là true vì phần tử thứ 3 của ar giờ là 25, tiếp theo thì console.log(ar) thứ ba được in ra với kết quả là [7, 5, 3, 25, 1].

Cuối cùng vì ar1 và ar cùng tham chiếu đến một array nên dòng console.log(ar1); thứ tư cũng sẽ in ra ([7, 5, 3, 25, 1]).


Array Sort

const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];

console.log(
  arr1.sort() === arr1,
  arr2.sort() == arr2,
  arr1.sort() === arr2.sort()
);
  • true true true
  • true true false
  • false false false
  • true false true

Giải thích

Đáp án: B

Hàm sort sẽ sắp xếp lại array và đồng thời trả về chính tham chiếu đến array đó. Vì vậy arr1.sort() và arr1 tham chiếu đến cùng một object trong bộ nhớ, điều này cũng đúng cho arr2.sort() và arr2.

Với arr1.sort() và arr2.sort() thì rõ ràng chúng tham chiếu đến hai object khác nhau trong bộ nhớ.


Array Type Conversion

function ArrayBoolean() {
  if ([] == true && [1] == true) return [true, true];
  else if ([] == true && [1] == false) return [true, false];
  else if ([] == false && [1] == true) return [false, true];
  else return [false, false];
}
ArrayBoolean();
  • [true, true]
  • [true, false]
  • [false, true]
  • [false, false]

Giải thích

Đáp án: C

Trong Javascript, các array (rỗng hoặc có phần tử) đều là truthy, tức là khi chúng ta kiểm tra với điều kiện if ([]) { return true; } sẽ cho kết quả là true. Nhưng xin hãy chú ý khi chúng ta so sánh Double Equals (==) giữa array với boolean, Javascript sẽ chuyển đổi dữ liệu trước khi so sánh (Type Conversion), khi đó arr.toString() sẽ được gọi [].toString() = "", vì thế [] == false cho kết quả true.


Arrow Functions

let dog = {
  breed: 'Border Collie',
  sound: 'Wooh',
  getBreed: () => {
    return this.breed;
  },
  getSound: function() {
    return this.sound;
  }
};
console.log(dog.getBreed(), dog.getSound());
  • Border Collie, Wooh
  • Border Collie, undefined
  • undefined, Wooh
  • undefined, undefined

Giải thích

Đáp án: C

this trong một Arrow functions không được bind như trong một function bình thường mà this được thừa hưởng từ scope bên ngoài của nó (lexical scoping). Đó là lý do tại sao this trong function getBreed không phải là object dog mà là global object, ở trình duyệt là window object, nên this.breed trả về undefined.


Bind - Call

const person = { name: 'duthaho' };

function sayHi(age) {
  return `${this.name} is ${age}`;
}

console.log(sayHi.call(person, 69));
console.log(sayHi.bind(person, 69));
  • undefined is 69 duthaho is 69
  • function function
  • duthaho is 69 duthaho is 69
  • duthaho is 69 function

Giải thích

Đáp án: D

Chúng ta đã biết cả hai hàm call và bind đều được dùng để thay đổi this context của hàm.

Tuy nhiên, với call thì hàm sẽ được gọi ngay lập tức, còn bind thì nó sẽ trả về một hàm mới với context mình truyền vào chứ không gọi ngay lúc đó.


Closure - Hoisting

function withVar() {
  const b = () => a;
  var a = 24;
  return b;
}

function withLet() {
  const b = () => a;
  let a = 24;
  return b;
}

function changingValue() {
  let a = 24;
  const b = () => a;
  a = 42;
  return b;
}

console.log(withVar()()); // ??
console.log(withLet()()); // ??
console.log(changingValue()()); // ??
  • undefined Error 42
  • 24 Error 24
  • 24 24 42
  • undefined Error 24
  • 24 Error 42

Giải thích

Đáp án: C

Closure là khi một inner function có thể ghi nhớ và truy cập đến các thành phần ở scope của outer function, thậm chí outer function đã thực thi xong. Ở trong ba ví dụ trên, thì function b vẫn ghi nhớ và truy cập đến biến a ở bên ngoài scope của nó, mặc dù các outer function đã được thực thi xong.


Date Constructor

let a = new Date('2019,1,1').toLocaleDateString();
let b = new Date(2019, 1, 1).toLocaleDateString();
console.log(a, b);
  • 1/1/2019 2/1/2019
  • 1/1/2019 1/1/2019

Giải thích

Đáp án: A

Date Constructor new Date() trong Javascript được dùng để tạo một date object, dựa vào tham số đầu vào mà sẽ cho các kết quả khác nhau. Nếu tham số là một string, Javascript sẽ tự động parse chuỗi string thành ngày tương ứng, trong trường hợp này "2019,1,1" được parse thành ngày 1/1/2019, nếu tham số là ba numbers thì ố thứ nhất là năm, số thứ hai là tháng, số thứ ba là ngày, tuy nhiên cần chú ý, tháng ở đây được bắt đầu từ 0, vậy truyền vào 1 có nghĩa là tháng 2.


Fetch

console.log(fetch);
  • The fetch function
  • A reference error
  • It depends

Giải thích

Đáp án: C

Tùy vào environment bạn chạy đoạn code trên mà kết quả sẽ khác nhau. Nếu chạy trên trình duyệt đã hổ trợ fetch thì kết quả là the fetch function, còn nếu chạy trên các trình duyệt cũ như IE hoặc trên môi trường node, chúng ta sẽ thấy lỗi ReferenceError.


Floating-Point

const a = 0.1;
const b = 0.2;
const c = 0.3;

console.log(a + b === c);
  • true
  • false

Giải thích

Đáp án: B

Như chúng ta đã biết trong hệ thập phân, chúng ta không thể biểu diễn chính xác 1/3 dưới dạng dấu phẩy động (floating-point). Kết quả của 0.333 + 0.333 + 0.333 không thể nào bằng 1 được.

Tương tự, trong máy tính các số được biểu diễn dưới dạng nhị phân. Đôi khi chúng chỉ biểu diễn được gần đúng số thực tế chứ không thể biểu diễn một các chính xác được, ví dụ như 0.10.2 hay 0.3. Điều này dẫn đến các kết quả không mong muốn, trong trường hợp 0.1 + 0.2, kết quả ta nhận được là 0.30000000000000004.


Function Constructor

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const ti = new Person('du', 'ti');
const teo = Person('du', 'teo');

console.log(ti);
console.log(teo);
  • Person {firstName: "du", lastName: "ti"} undefined
  • Person {firstName: "du", lastName: "ti"} Person {firstName: "du", lastName:"teo"}'
  • Person {firstName: "du", lastName: "ti"} {}
  • Person {firstName: "du", lastName: "ti"} ReferenceError

Giải thích

Đáp án: A

Khi gọi một Function Constructor, this sẽ được tạo và trả về một cách ngầm định nếu chúng ta gọi bằng từ khóa new, nếu không this sẽ không được tạo và sẽ là global window object (trong trình duyệt).


Function Hoisting

bar();

var bar;

function bar() {
  console.log('first');
}

bar = function() {
  console.log('second');
};

bar();

foo();

function foo() {
  console.log(1);
}

var foo = function() {
  console.log(2);
};

function foo() {
  console.log(3);
}

foo();
  • second first 1 3
  • first second 3 2
  • second first 3 3
  • first second 3 3


Giải thích

Đáp án: B

Cơ chế hoisting trong Javascript được áp đụng khi khai báo biến (variable declaration) và khai báo function (function declaration), trừ khi gán một function cho biến (function expression).

Function declaration sẽ có độ ưu tiên hơn variable declaration khi hoisting, vì thế function bar sau khi hoisted sẽ giống thế này:

function bar() {
  console.log('first');
}

bar(); // 'first'

bar = function() {
  console.log('second');
};

bar(); // 'second'

Trong trường hợp chúng ta có các khai báo trùng lặp (duplication declaration) hoặc gặp một phép gán (assignment) thì giá trị sẽ của biến hay function sẽ được thay thế, Vì vậy function foo sẽ giống thế này:

function foo() {
  console.log(1);
}

function foo() {
  console.log(3);
}

foo(); // 3

foo = function() {
  console.log(2);
};

foo(); // 2

Immediately Invoked Function

function sayHi() {
  return (() => 0)();
}

console.log(typeof sayHi());
  • object
  • number
  • function
  • undefined

Giải thích

Đáp án: B

immediately invoked function (IIFE) là hàm được gọi ngay lập tức lúc khai báo, có cú pháp như trong ví dụ trên (() => 0)(). Ở đây hàm sayHi trả về một IIFE và nó được gọi ngay lập tức khi hàm sayHi được gọi, vì thế sayHi() sẽ trả về số 0 với type là number.

Xem thêm: 1001 câu hỏi trắc nghiệm về JavaScript có đáp án (phần 2)

Theo Duthaho - Kipalog: https://kipalog.com/posts/1977-cau-hoi-xoay-dap-xoay-trong-JavaScript

Đánh giá của học viên đã tốt nghiệp

  • Các anh chị nhiệt tình, thân thiện. Em được mở mang nhiều kiến thức

    Nguyễn Hằng ly
  • Các chị dạy rất dễ hiểu và nhiệt tình. Các kiến thức như trong thực tế khi em đi thực tập tại RikkeiSoft. Cám ơn các anh chị nhiều ạ. Chúc Dev có nhiều học viên hơn nữa.

    Vũ Thị Hà Phương
  • Học ở DevPro đã giúp mình có nhiều kinh nghiệm lập trình android thực tế. Tại đây mình được các thầy dạy rất chi tiết theo một lộ trình rõ ràng của dự án cụ thể nên sau này đi làm mình rất dễ bắt nhịp với công việc.

    Nguyễn Trọng Duy
  • Qua khoá học ở DevPro thì em đã có một “ít” vốn trong tay để có thể "bò" trong lĩnh vực vạn người mê này Trong qúa trình học thì em cảm thấy trung tâm suppost rất nhiệt tình từ đồ ăn tối, event và đầu ra :p. Có chị Quyên "sinh gái" siêu nhây và siêu lầy dụ dỗ bán rẻ học viên cho các nhà tuyển dụng :3 **** Đặc biệt các thầy có rất nhiều kinh nghiệm chỉ dạy và giúp đỡ rất nhiệt tính < mấy tháng liền bám càng đi nhờ thấy :p>

    PhạmTiến Đạt
  • Tôi sẽ không khuyên các bạn phải đến DevPro để học tập thay vì những chỗ khác nhưng tôi đã từng là một người giống các bạn. Tôi băn khoăn không biết chọn nơi đâu làm ngọn đèn chỉ lối và tôi đến với Devpro . Mọi người khá hoà đồng , các thầy cũng cực nhiệt tình nhưng cũng có vốn kiến thức rất rộng còn lại là phụ thuộc vào sự nỗ lực của các bạn nữa thôi. Cố lên nhé. #ATran

    Trần Xuân Ái
  • em thấy mọi thứ đều ổn, thầy giáo nhiệt tình trong cách giảng dậy, dev cũng rất quan tâm học viên . Nhưng theo quan điểm của em và nhìn từ sự phát triển của các trung tâm khác , em nghĩ mỗi khóa học ở dev nên có bài tập cũng như dự án giao cho học sinh làm để tạo áp lực cho học viên code, giữa học viên và công ty cần có những buổi giao lưu nhiều hơn, và cũng nên có 1 số bạn trợ giảng giúp thầy đi fix những lỗi cơ bản cho những bạn hay sai , chứ nhiều khi 1 mình thầy mà phải chạy đến từng bàn fix lỗi cũng k xuể , Xin chúc devpro ngày càng phát triển hơn

    Nguyễn Đình Thành
  • Thầy giáo dạy rất nhiệt tình rất dễ hiểu, các chị quản lý vui vẻ, tạo động lực học viên. Bài giảng phong phú bao gồm nhiều kiến thức nền tảng. .., giúp học viên nắm chắc kiến thức. Có điều lớp toàn nam, ko có nữ ạ

    Vũ Văn Thủy
  • -Thầy giáo rất nhiệt tình trong công tác giảng dạy , cũng như vui tính , thầy luôn giúp đỡ bọn e rất nhiệt tình ! Tuy chỉ học với lớp 1 thời gian không quá dài nhưng e cũng cảm thấy tuyệt vời vì đã từng là học trò của thầy ! - Chị Hằng và Chị Quyên rất vui tính và nhiệt tình giúp đỡ bọn e nữa ạ - e chúc trung tâm ngày càng đông học viên hơn nữa

    Phan Trung Phú
  • DevPro là một môi trường tốt để cho những ai chưa biết gì về lập trình theo học. Bên cạnh đó, đội ngũ giảng viên rất chất lượng, nhiệt tình chỉ bảo cả trên lớp lẫn ở nhà. Ngoài ra tôi rất thích chính sách giới thiệu việc làm cho học viên sau khi tốt nghiệp để có thể tiếp với các doanh nghiệp uy tín. Sau hơn 4 tháng học tập tại công ty, tôi đã hoàn toàn tự tin rằng mình có thể tự học hỏi và bắt đầu làm việc ở một công ty mới với vai trò Web Developer. Cảm ơn DevPro vì tất cả!!

    Nguyễn Đức Huy
  • Học một lúc 2 trường, nhưng mình vấn chưa biết tìm đam mê từ đâu. Từ lúc gặp chị Hằng mình đã quyết chọn theo android, và bây giờ mình chưa bao giờ thấy hạnh phúc đến thế. Mình có công việc ổn định, chuẩn bị onsite ở nhật 1 năm hi hi.

    Trần An Hưng
  • 1.Thầy đẹp trai thì không phải bàn rồi!! Lại được cái nhiệt tình!! ok. 2. Công ty có nhiệt tình hỗ trợ không? Công ty có nhiệt tình hỗ trợ sinh viên, vd:tiền học phí được chia làm 3 đợt giúp đỡ những sv khó khăn,.....

    Trương Quang Trường
  • Em thấy trung tâm dạy tốt và chất lượng ạ. Thầy và các chị đều tận tâm, nhiệt tình và hòa đồng. Đặc biệt là giải lao giữa giờ chúng em còn được ăn nhẹ, e rất thích khoản này.

    Trần Thị Hồng Nhung
  • Tại DevPro mình còn được học code trên tool mới nhất của Android, điều đó càng khiến mình thích thú hơn và trở nên say mê từ lúc nào không biết nữa. Không khí học ở đây rất vui vẻ, ngoài giờ học mình cùng các bạn còn được giải lao ăn nhẹ và trò chuyện cùng nhau nên rất thoải mãi.

    Trương Ngọc Đức
  • Dev chính là nơi giúp mình tìm thấy niềm yêu thích code, cũng chính là nơi đã cho mình những bước đi đầu tiên, cho mình những kiến thức nền tảng tốt nhất trên con đường theo đuổi nghề Dev.

    Nguyễn Thanh Hằng
  • Thầy giáo vui tính, nhiệt tình trả lời và giúp đỡ các bạn khi các bạn có thắc mắc hay khi gặp khó khăn. Các anh chị vui tính, thân thiện tạo cảm giác thoải mái và vui vẻ cho các bạn khi học ở đây.

    Cao Minh Lâm
  • Nghĩ lại hồi đấy, không có Devpro thì chắc giờ em phát rồ mất thôi! Em vốn nghĩ mình có thể tự học được, nhưng kiến thức vốn là vô tận, không có người hướng dẫn thì mình sẽ chẳng biết bắt đầu dư lào, bước tiếp là gì? Nhờ DevPro, sự tận tâm của các thầy mà em mới biết à hóa ra mọi thứ thật đơn giản.

    Kim Erico
  • Hồi học ở DevPro, mình rất quý thầy Việt và những người bạn. Từ kiến thức học được từ trung tâm mình đã mạnh dạn đi thực tập ở một công ty lớn của Nhật Bản và đến giờ đã là nhân viên chính thức ở đây rồi. Vui hơn nữa là có bạn học cùng lớp đó giờ đang là đồng nghiệp cùng mình luôn rồi. Hihi

    Nguyễn Thanh Việt
Nguyễn Hằng ly Vũ  Thị Hà Phương Nguyễn Trọng Duy PhạmTiến Đạt Trần Xuân Ái Nguyễn Đình Thành Vũ Văn Thủy Phan Trung Phú Nguyễn Đức Huy Trần An Hưng Trương Quang Trường Trần Thị Hồng Nhung Trương Ngọc Đức Nguyễn Thanh Hằng Cao Minh Lâm Kim Erico Nguyễn Thanh Việt