These theories give you a list of frequently asked JavaScript interview questions with answers for beginners. The questions aren't arranged in difficult order, you can go through everything to challenge yourself.
If you have a good JavaScript interview question, share it with everyone by creating issue or pull request for me 🚀.
List of available languages:
Let's go !!!
JavaScript, according to the current version, is an interpreted programming language developed from prototype ideas. This language is widely used for website (client-side) as well as server-side (use Nodejs)
Simply, you can say JScript same as JavaScript but it is provided by Microsoft
The window object is automatically created by the browser representing a browser window. This is used to display dialog box that pops up like alert, confirm , v.v. and everything in Javascript as object, functions, variables can all become window object including HTML DOM.
Example:
window.document.getElementById("header");
or:
document.getElementById("header");
== checks only for equality in value whereas === is a stricter equality test and returns false if either the value or the type of the two variables are different.
var number1 = 12;
var number2 = '12';
console.log('log 1: ', number1 == number2)
console.log('log 2: ', number1 === number2)Answer:
log 1: true
log 2: false
Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero. When to use it, when it is a number or Number object and it will return to undefined.
var my_number = 100;
my_number.NEGATIVE_INFINITY;
console.log(my_number)Answer:
undefined
Using the try / catch block, we can handle exceptions in JavaScript. JavaScript supports keywords try, catch, finally, throw to handle exceptions.
function check(x) {
try {
if (x == "") throw "empty";
if (isNaN(x)) throw "not a number";
x = Number(x);
if (x < 5) throw "too low";
if (x > 10) throw "too high";
}
catch (err) {
console.log("catch ", err)
}
}
console.log(check(""))
console.log(check("test"))
console.log(check(55))Answer:
catch empty
undefined
catch not a number
undefined
catch too high
undefined
isNaN() function returns true if the argument is not a number otherwise it is false.
console.log(isNaN(123))
console.log(isNaN(0))
console.log(isNaN('Hello'))
console.log(isNaN('2005/12/12'))
console.log(isNaN(''))
console.log(isNaN(true))
console.log(isNaN(undefined))Answer:
false
false
true
true
false
false
Use // for single line
or
use /* nội dung */ for multi line
// Declare variable
var number = 2;
/*
This is case
use comment
multi line
*/
var girl_friend = null;Vấn đề này liên quan đến việc Javascript lưu trữ dữ liệu float ở dạng nhị phân chính xác tới từng con số sau dấu phẩy.
Giải pháp:
- Sử dụng hàm toFixed()
- Mẹo nhỏ là nhân với 10 và chia cho 10
- Tham khảo các hàm làm tròn như round(), v.v.
console.log(0.1 + 0.2)
// Amazing !
var x = (0.2 * 10 + 0.1 * 10) / 10;
console.log(x)
// Sử dụng toFixed()
var number = 0.1 + 0.2;
console.log(number.toFixed(2))Answer:
0.30000000000000004
0.3
0.3
Function declaration sử dụng từ khóa function rồi đến tên hàm. Còn Function expression bắt đầu bằng var, let hoặc const, theo sau là tên của hàm và toán tử =.
// 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 };Khi chạy code Math.max() > Math.min(), giá trị trả về là False, nghe có vẻ không hợp lý. Tuy nhiên, nếu không có tham số nào được truyền vào, Math.min() trả về Infinity và Math.max() trả về -Infinity. Vậy nên Math.max() < Math.min().
Nếu tham số xuất hiện là infinity và một số nào khác, kết quả trả về sẽ là số có giá trị đó.
var infinity = 5
var value1 = Math.min(1)
var value2 = Math.min(1, infinity)
var value3 = Math.min(1, -infinity)
console.log(value1)
console.log(value2)
console.log(value3)Answer:
1
1
-5
Dể hiểu, closure là 1 hàm nội truy cập đến các biến bên ngoài phạm vi của nó. Closure có thể được sử dụng để implement privacy và tạo ra các function factory.
const arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log(i);
}, 10);
}Answer:
4
4
4
4
Lý do là bởi vì hàm setTimeout sẽ tạo ra 1 function (closure) có thể truy cập phạm vi bên ngoài nó, vòng loop sẽ chứa index i. Sau 10ms, hàm được thực thi và nó sẽ log ra giá trị của i, là giá trị cuối cùng của vòng lặp (4).
Hàm này mã hóa các ký tự đặc biệt, ngoại trừ :, /? : @ & = + $ #
Để mã hóa ngược chuỗi đó lại mình sử dụng hàm decodeURI().
var uri = "my test.asp?name=ståle&car=saab";
var res = encodeURI(uri);
console.log(res)Answer:
my%20test.asp?name=st%C3%A5le&car=saab
Nếu sử dụng cách tạo array initializer nó sẽ tạo ra danh sách các phần tử trong mảng và được ngăn cách bởi dấu phẩy.
var arr1 = [5]
var arr2 = new Array(5)
console.log(arr1)
console.log(arr2)Answer:
[ 5 ]
[ <5 empty items> ]
Strict theo nghĩa tiếng Việt là "nghiêm khắc". Strict Mode là một quy mẫu nghiêm khắc trong Javascript. Nếu như việc viết code bình thường là Normal mode, thì Strict Mode sẽ có thêm các quy định khác so với Normal mode.
"use strict";
function foo(){
var bar = 0;
return bar;
}
bar = 1;Answer:
Xảy ra lỗi:
ReferenceError: bar is not defined
JavaScript là một ngôn ngữ rất lỏng lẻo. Biến chỉ được xác định khi giá trị được gán và có thể thay đổi khi biến xuất hiện trong các ngữ cảnh khác nhau. Lên đơn giản nó là kiểu dữ liệu của biến đó.
Để kiểm tra kiểu dữ liệu của biến đó ta dùng typeof trong Javascript.
var length = 16;
var lastName = "Johnson";
var x = { firstName: "John", lastName: "Doe" };
console.log(typeof length)
console.log(typeof lastName)
console.log(typeof x)Answer:
number
string
object
Javascript có những kiểu dữ liệu sau:
- Number
- String
- Boolean
- Object
- Undefined
var a = 5;
var b = "Hello";
var c = true;
var d = { id: 1, name: "Lyly" };
console.log(typeof a)
console.log(typeof b)
console.log(typeof c)
console.log(typeof d)
console.log(typeof e)Answer:
number
string
boolean
object
undefined
Từ khóa this dùng để chỉ đối tượng từ nơi nó được gọi.
var Student = {
name: "Lyly",
age: 20,
getName: function(){
return this.name;
}
};
console.log(Student.getName())Answer:
Lyly
-
ViewState là dành riêng cho một trang trong phiên.
-
SessionState dành riêng cho dữ liệu cụ thể của người dùng có thể được truy cập trên tất cả các trang trong ứng dụng web.
Có thể sử dụng document để thay đổi style/class.
document.getElementById("myId").style.fontSize = "20px";
// or
document.getElementById("myId").className = "newclass";Có các vòng lặp sau:
- for
- while
- do-while loops
var arr = ["apple", "banana", "mango", "cherry"]
// Sử dụng for
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// Sử dụng while
let j = 0;
while (j < arr.length) {
console.log(arr[j]);
j++;
}
// Sử dụng do-while loops
let k = 0;
do {
console.log(arr[k]);
k++;
} while (k < arr.length)Answer:
cherry
apple
banana
mango
Vì 3 và 2 là số nguyên, chúng sẽ cộng vào với nhau và kết quả là số. Còn 7 là một chuỗi, nên Javascipt sẽ hiểu thành nối chuỗi. Vì vậy, kết quả sẽ là 77.
console.log(5 + 2 + "7");Answer:
77
delete dùng để xóa các property cũng như các giá trị.
var student = { name: 'Lyly', age: 20 };
delete student.age;
console.log(student)Answer:
{ name: 'Lyly' }
pop() trong Javascript dùng để lấy phần tử cuối cùng trong mảng. Điều này thì trái ngược với hàm shift().
var number = ["one", "two", "three", "four"]
console.log(number.pop())
console.log(number.shift())Answer:
four
one
var myArray = [[[]]];
console.log(myArray)Answer:
Là một mảng 3 chiều
[ [ [] ] ]
Từ khóa let & const được giới thiệu trong phiên bản ES6 với tầm nhìn tạo ra hai loại biến khác nhau trong javascript, một loại là bất biến và loại khác là có thể thay đổi.
-
const: Nó được sử dụng để tạo ra một biến bất biến. Biến không thay đổi là các biến có giá trị không bao giờ thay đổi trong vòng đời hoàn chỉnh của chương trình.
-
let: let được sử dụng để tạo một biến có thể thay đổi. Các biến có thể thay đổi là các biến bình thường như var có thể thay đổi bất kỳ số lượng thời gian nào.
let name = "Lyly";
const age = 18;
name = "John";
age = 20;
console.log(name)
console.log(age)Answer:
John
TypeError: Assignment to constant variable.
Ta có thể thêm một thuộc tính vào một đối tượng bằng object.property_name = value, delete object.property_name để xóa một thuộc tính.
let user = new Object();
user.name = 'Lyly';
user.age = 20;
console.log(user);
delete user.age;
console.log(user);Answer:
{ name: 'Lyly', age: 20 }
{ name: 'Lyly' }
Dưới đây là một số cách:
var array = [1, 2, 6, 5, 3, 2, 6];
// Sử dụng Set
console.log(...new Set(array))
// Sử dụng filter
console.log(
array.filter((item , index ) =>
array.indexOf(item) === index
)
)
// Sử dụng reduce
console.log(
array.reduce((uniq, item) =>
uniq.includes(item) ? uniq : [...uniq, item], []
)
)Answer:
1 2 6 5 3
[ 1, 2, 6, 5, 3 ]
[ 1, 2, 6, 5, 3 ]
Khi bạn khởi tạo ra một biến nhưng không gán giá trị cho nó thì sẽ là undefined. Còn null là một object.
var a;
console.log(typeof a)
console.log(typeof null)Answer:
undefined
object
Các framework phổ biến nhất hiện nay:
- Unit.js
- Jasmine
- Karma
- Chai
- AVA
- Mocha
- JSUnit
- QUnit
- Jest
// Sử dụng Chai
var answer = 43;
expect(answer).to.equal(42);Answer:
AssertionError: expected 43 to equal 42.
export hay import là cách để ta tạo ra các module trong Javascript. Bằng cách đó, ta có thể chia các phần nhỏ trong dự án để dễ quản lý. import cho phép ta lấy một số biến hoặc một phương thức nào đó của file. Còn export là biến một file thành một module. Xem Example để hiểu hơn.
// person.js
let name = 'Lyly', occupation = 'developer', age = 20;
export {
name,
age,
};
//index.js
import { name, age } from './person';
console.log(name);
console.log(age);Answer:
Lyly
20
Hàm toISOString() được sử dụng để chuyển đổi ngày javascript thành tiêu chuẩn ISO. Nó chuyển đổi đối tượng Ngày JavaScript thành một chuỗi, sử dụng tiêu chuẩn ISO.
var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZHàm Object.assign() được sử dụng để clone một đối tượng trong Javascript. Ngoài ra bạn cũng có thể sử dụng clone của lodash. Lodash là một framework sử lý mạnh mẽ mảng và object. Xem thêm tại Lodash
var x = { name: "Lyly" };
var y = Object.assign({}, x);
console.log(y)Answer:
{ name: 'Lyly' }
Có 3 cách khác nhau để tạo mảng trong Javascript. Xem Example
var arr1 = [1, 2, 3, 4];
var arr2 = new Array();
var arr3 = new Array(1, 2, 3, 4);
console.log(arr1)
console.log(arr2)
console.log(arr3)Answer:
[ 1, 2, 3, 4 ]
[]
[ 1, 2, 3, 4 ]
Một số sự kiện chuột trong DOM như:
- onclick
- ondblclick
- mousemove
- mousedown
- mouseover
- mouseout
- mouseup
console.log(undefined * 2)
console.log(null * 2)
console.log("" * 2)Answer:
NaN
0
0
Việc 018 - 017 trả về 3 là kết quả của chuyển đổi loại im lặng. Trong trường hợp này, ta nói về số bát phân.
console.log(018 - 017)Answer:
3
Cả test() và exec() đều là biểu thức RegExp. Xem chi tiết
-
Sử dụng test() sẽ search chuỗi trong theo giá trị ta truyền vô, nếu chuỗi đó tồn tại thì sẽ return về Boolean giá trị là 'true' hoặc 'false'.
-
Sử dụng exec() sẽ search chuỗi trong theo giá trị ta truyền vô, nếu chuỗi đó tồn tại thì sẽ return về chuỗi đó, nếu không sẽ return về giá trị 'null'.
var str = "The best things in life are free";
var patt = new RegExp("b");
var res_test = patt.test(str);
var res_exec = patt.exec(str);
console.log(res_test)
console.log(res_exec)Answer:
true
[ 'b', index: 4, input: 'The best things in life are free' ]
setTimeout(function () {
console.log('first line');
}, 0);
console.log('second line');
console.log('third line');Answer:
second line
third line
first line
Khi có setTimeout() tiến trình trở thành bất đồng bộ. Ta cần chờ mọi thứ trong stack hoàn thành trước.
Có những cách sau:
- getElementById() lấy một element bằng tên id.
- getElementsByClass() lấy một element bằng tên class.
- getElementsByTagName() lấy một element bằng tên của tag name.
- querySelector() đây là function css style selector và sẽ return về giá trị đầu tiên.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<p class="demo">Click the button to change the text in this paragraph.</p>
<h5>Click the button to change the text in this paragraph.</h5>
<p class="example">Click the button to change the text in this paragraph.</p>
<script>
// Sử dụng getElementById()
document.getElementById("demo").innerHTML = "Hello World";
// Sử dụng getElementsByClassName()
document.getElementsByClassName("demo")[0].innerHTML = "Hello World!";
// Sử dụng getElementsByTagName()
document.getElementsByTagName("h5")[0].innerHTML = "Hello World!";
// Sử dụng querySelector()
document.querySelector(".example").style.backgroundColor = "red";
</script>
</body>
</html>Có 3 cách sau:
- Inline
- Internal
- External
<!-- Inline -->
<a href="#" onclick="(function(){alert('Hello world');})()">Click Me</a>
<!-- Internal -->
<script>
console.log('Hello world')
</script>
<!-- External -->
<script type="text/javascript" src="external.js">
// file external.js
console.log('Hello world')Một số framework UI nổi tiếng của Javascript hiện nay là:
- React
- Angular
- Vue
- Meteor
- Ember
// React
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);Answer:
Hello Taylor
var a = (! +[] + [] + ![])
console.log(a.length)Answer:
9
Đây là điều thú vị của Javascript.
.forEach
- Vòng lặp dựa vào các phần tử có trong mảng.
- Thực hiện callback cho mỗi vòng lặp.
- Không trả về giá trị.
.map
- Vòng lặp dựa vào các phần tử có trong mảng.
- Hàm map sẽ lặp qua từng phần tử nhưng sẽ tạo ra một mảng mới dựa trên các giá trị trong vòng lặp.
const a = [1, 2, 3];
const ex1 = a.forEach((num, index) => {
// Làm 1 điều gì đó
});
const ex2 = a.map(num => {
return num * 2;
});
console.log(ex1)
console.log(ex2)Answer:
undefined
[ 2, 4, 6 ]
JSON là một định dạng dữ liệu dựa trên văn bản theo cú pháp đối tượng JavaScript.
// Chuyển object qua JSON
var obj1 = [{ id: 1, name: 'Lyly' }, { id: 2, name: 'May' }];
console.log(JSON.stringify(obj1))
// Chuyển JSON về object
var obj2 = '{ "id": 9, "name": "Lyly", "age": "20", "city": "New York" }'
console.log(JSON.parse(obj2))Answer:
[{"id":1,"name":"Lyly"},{"id":2,"name":"May"}]
{ id: 9, name: 'Lyly', age: '20', city: 'New York' }
| slice | splice |
|---|---|
| Không làm thay đổi mảng ban đầu | Có thể bị thay đổi mảng ban đầu |
| Trả về tập hợp con của mảng ban đầu | Trả về các phần tử bị xóa khỏi mảng ban đầu |
| Sử dụng để lấy các phần tử con trong mảng | Sử dụng để thêm hoặc xóa phần tử của mảng |
// Sử dụng slice
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(fruits)
console.log(citrus)
// Sử dụng splice
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits)Answer:
[ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ]
[ 'Orange', 'Lemon' ]
[ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
Higher order function là hàm chấp nhận hàm khác làm đối số hoặc trả về hàm dưới dạng giá trị trả về.
const higherOrderFunc = () => console.log("Hello world !");
const higherOrder = ReturnHigherOrderFunc => ReturnHigherOrderFunc();
higherOrder(higherOrderFunc);Answer:
Hello world !
Hàm unary (monadic) là một hàm chấp nhận chính xác một đối số. Nó là viết tắt của một đối số được chấp nhận bởi một hàm.
const unaryFunction = a => console.log(a + 10);
unaryFunction(5)Answer:
15
IIFE (Immediately Invoked Function Expression) là một hàm JavaScript chạy ngay khi được định nghĩa.
Lý do chính để sử dụng IIFE là để có được quyền riêng tư dữ liệu vì bất kỳ biến nào được khai báo trong IIFE đều không thể được truy cập bởi bên ngoài. Tức là, nếu bạn cố gắng truy cập các biến bằng IIFE thì nó sẽ xuất hiện một lỗi như dưới đây:
// Example IIFE
(function () {
// logic here
}
)();
// Báo lỗi khi chạy
(function () {
var message = "IIFE";
console.log(message);
}
)();
console.log(message);Answer:
ReferenceError: message is not defined
Ta có thể sử dụng EventSource để nhận thông báo sự kiện do máy chủ gửi. Xem chi tiết EventSource
// Example mẫu
if (typeof (EventSource) !== "undefined") {
var source = new EventSource("sse_generator.js");
source.onmessage = function (event) {
document.getElementById("output").innerHTML += event.data + "<br>";
};
}Promise.all là một hàm sẽ lấy một loạt các Promises làm đầu vào (có thể lặp lại). Phương thức này nhận vào một mảng các promises và chỉ resolve khi tất cả các promises này hoàn thành, hoặc reject khi một trong số chúng xảy ra lỗi.
Promise.all([Promise1, Promise2, Promise3])
.then(result => {
console.log(result);
})
.catch(error => {
console.log(`Error in promises ${error}`);
})Promise.race nghĩa là hàm promise chạy đua (LOL). Phương thức này nhận vào một mảng các promises và sẽ resolve/reject ngay khi một trong số các promises này hoàn thành/xảy ra lỗi.
var promise1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then(function (value) {
console.log(value);
});Answer:
two
Hàm eval() dùng để tính toán một chuỗi trong Javascript. Nó sẽ nhận vào một chuỗi và biến nó qua phép tính. Chuỗi có thể là biểu thức JavaScript, biến, câu lệnh hoặc chuỗi câu lệnh.
var a = "1 + 5 - 3";
var b = "10 / 2" + 6;
console.log(eval(a))
console.log(eval(b))Answer:
3
0.38461538461538464
Để so sánh 2 object có khá nhiều cách khác nhau. Tuy nhiên có một cách rất đơn giản đó là parse qua JSON bằng cách sử dụng JSON.sstringify().
var user1 = { name: "Lyly", org: "dev" };
var user2 = { name: "Lyly", org: "dev" };
var dog = { name: "dog", age: 10 };
var cat = { name: "cat", age: 10 };
var compare_user = JSON.stringify(user1) === JSON.stringify(user2);
var compare_animal = JSON.stringify(dog) === JSON.stringify(cat);
console.log(compare_user);
console.log(compare_animal);Answer:
true
false
Các parameter là tên biến của định nghĩa hàm, trong khi các argument là các giá trị được cung cấp cho hàm khi nó được gọi.
function myFunction(parameter1, parameter2) {
console.log(arguments[0])
}
myFunction("argument1", "argument2")Answer:
argument1
const a = [1, 2, 3]
const b = [1, 2, 3]
const c = "1,2,3"
console.log(a == c)
console.log(a == b)Answer:
true
false
console.log đầu tiên sẽ trả về là đúng vì trình biên dịch của JavaScript thực hiện chuyển đổi type của biến và do đó, nó so sánh với các chuỗi theo giá trị của chúng. Mặt khác, console.log thứ hai sẽ trả về sai vì Mảng là object và object được so sánh bằng tham chiếu.
function greet() {
return
{
message: "hello"
}
}
var a = greet();
console.log(a)Answer:
undefined
Do tính năng chèn dấu chấm phẩy tự động (ASI) của JavaScript, trình biên dịch đặt dấu chấm phẩy sau từ khóa trả về và do đó, nó trả về undefined mà không bị lỗi.
console.log(typeof typeof 0);Answer:
string
Do typeof 0 là "number" nên typeof của "number" sẽ là chuỗi. Javascript thật đáng sợ !!!
Có 2 thư viện xử lí array và object nổi tiếng nhất hiện nay là:
- lodash Xem chi tiết
- underscore.js Xem chi tiết
// underscore.js
_.map([1, 2, 3], num => num * 3);
// lodash
_.map([4, 8], x => x * 2);
// Cách sử dụng khá giống nhauAnswer:
[3, 6, 9]
[8, 16]
Khi xét thuộc tính cho object, JavaScript sẽ ngầm định stringify parameter. Trong trường hợp này, vì b và c là cả hai là object, nên sẽ được chuyển đổi thành "[Object Object]". Kết quả là, cả [b] và [c] đều tương đương với ["[Object Object]"] và có thể được sử dụng thay thế cho nhau. Do đó, khi ta tham chiếu [c] cũng giống như là tham chiếu [b].
var a = {},
b = { key: 'b' },
c = { key: 'c' };
a[b] = 123;
a[c] = 456;
console.log(a[b]);Đáp án:
456
var a = [1,2,3];
a[10] = 99;
console.log(a)
console.log(a[6])Đáp án:
[ 1, 2, 3, <7 empty items>, 99 ]
undefined
var output = (function (x) {
delete x;
return x;
})(0);
console.log(output);Đáp án:
0
Kết quả trả về là 0. Bởi vì delete dùng để xóa property của object. Nhưng ở đây x không phải là object, nó là biến local variable nên delete không thể xóa được.
var x = 1;
var output = (function () {
delete x;
return x;
})();
console.log(output);Đáp án:
1
Kết quả trả về là 1. Bởi vì delete dùng để xóa property của object. Nhưng ở đây x không phải là object, nó là biến global variable có typeof number.