5 sai lầm phổ biến của javascript dev mới

Không phải tất cả các điểm dưới đây thực sự là những sai lầm nhưng tránh chúng sẽ làm cho bạn một lập trình tốt hơn cho chắc chắn.

1. Truthy And Falsy Values

Đây là một trong những sai lầm phổ biến mà mỗi lập trình viên đã có thể làm ít nhất một lần trong sự nghiệp viết mã của họ. Hãy nhìn vào mã dưới đây.

let foo = 0;
let boo = 0;
if (foo === 0) {
  boo = 1;
} else {
  boo = 2;
}

Các mã trên có vẻ đúng, phải không? nhưng có một cái gì đó nhiều hơn chúng ta có thể làm với nó. Bây giờ nhìn vào mã.

let foo = 0;
let boo = 0;
if (!foo) {
  boo = 1;
} else {
  boo = 2;
}

Điều này có tốt hơn không? Vì vậy, đối với thực tế, chúng ta không cần phải kiểm tra một cách rõ ràng cho 0 ở đây như một giá trị giả tạo của nó. Chúng tôi chỉ có thể kiểm tra, nếu không foo sau đó đi vào trong điều kiện. Hãy xem dưới đây về các giá trị đúng và sai trong javascript.

// falsy values in JavaScript
undefined --> "undefined" is true since its a string
null --> "null" same as "undefined"
0 --> "0" same as "undefined"
false --> "false" same as "undefined"
NaN --> "NaN" same as "undefined"
' or "" --> Empty String
// truthy values in JavaScript
"String" -->  Any string
[] --> Empty Array
{} --> Empty Object
function() {} --> Empty Function

2. Ternary Operator

Mỗi lập trình đã được sử dụng nếu điều kiện ít nhất một lần trong đời của họ nhưng ở những nơi mà không có logic nhiều bên trong điều kiện chúng ta chỉ đơn giản là có thể thay thế nó với các nhà khai thác ba thứ. Tại sao? Để tiết kiệm một vài dòng, và để dễ đọc hơn. Cho phép lấy ví dụ từ trên và thực hiện nó bằng cách sử dụng toán tử bậc ba.

let foo = 0;
let boo = 0;
!foo ? boo = 1 : boo = 2;
// to make it even better
boo = !foo ? 1 : 2;

Vì vậy, ở đây trong đoạn code trên thay vì 5 dòng mã chúng tôi đã chỉ đơn giản thực hiện logic tương tự trong một dòng đơn. Cho phép xem một đoạn mã khác.

if (whatever condition) {
  ----------------
  some logic here
  ----------------
  return foo ? true : false;
}

Không có gì sai trong đoạn code trên, nhưng bạn chỉ có thể tránh các nhà điều hành thứ ba ở đây. làm sao? nhìn vào mã dưới đây.

if (whatever condition) {
  ----------------
  some logic here
  ----------------
return foo; // if you are sure foo is boolean
return !!foo; // if foo can be anything other than boolean
}

Vì vậy, từ phía trên chúng ta có thể thấy rằng chúng ta không phải lúc nào cũng cần toán tử thứ ba và cố gắng không bao giờ sử dụng toán tử lồng nhau lồng nhau.

3. Equality Check

hãy nhìn vào mã trực tiếp để hiểu nó tốt hơn.

if (false == 0) {
  return true;
} else {
  return false;
}
if (false === 0) {
  return true;
} else {
  return false;
}

Cả hai nên trở lại sự thật? Xin lỗi để làm bạn thất vọng nhưng đầu tiên nếu điều kiện sẽ trở lại đúng và thứ hai sẽ trở lại sai. Sự khác biệt trong cả hai chỉ là một '=', mà làm cho một sự khác biệt rất lớn. Double Equal '==' chỉ kiểm tra giá trị nhưng Triple Equal '===' kiểm tra cả giá trị lẫn kiểu.

4. Addition and Concatenation

Bổ sung và nối tiếp sẽ phụ thuộc vào các kiểu dữ liệu vì chúng ta không định nghĩa rõ ràng biến với kiểu dữ liệu trong javascript.

var a = 10;
var b = '20';
var c = 30;
return a + b; // returns 1020
return b + c; // returns 2030
return a + c; // returns 40

Vì vậy, chúng ta có thể nhìn thấy trong ví dụ trên, nếu chúng ta cố gắng thêm một chuỗi và số nguyên nó sẽ trả về một chuỗi nối nhưng trong trường hợp của hai số nguyên nó trả về tổng của cả hai.

5. Using variable as key in object

Có thể có những trường hợp nhất định khi chúng ta được yêu cầu sử dụng các biến như là chìa khóa. cho phép lấy một ví dụ.

const a = 1;
let b = ';
if(a) {
  b = 'first Name';
} else {
  b = 'Last Name';
}
const myObject = {
  b : 'Emily'
};
return myObject;

Ở đây trong đoạn mã trên, chúng ta muốn trả lại đối tượng là {'First Name': 'Emily'} nhưng nó trả về là {b: 'Emily'} vì b được dùng làm khoá. Vì vậy, để giải quyết vấn đề trên chúng ta sử dụng dấu ngoặc vuông [].

if(a) {
  b = 'first Name';
} else {
  b = 'Last Name';
}
const myObject = {
  [b] : 'Emily'
};
return myObject;

Bây giờ nó trả về những gì chúng tôi muốn nó trở lại ('First Name': 'Emily'}.

source: https://codeburst.io/5-common-mistakes-that-every-new-javascript-programmer-does-d0559770d345