Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Nội dung bài viết

Video học lập trình mỗi ngày

Tại sao Undefined và Null nó đơn giản như vậy mà có nhiều bài viết lại mất nhiều thời gian giải thích đến như vậy. Chỉ cần 1 phút thôi là xong. Và hãy hiểu đơn giản rằng undefined là mộ trong 7 kiểu giá trị nguyên thuỷ của javascript.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Một biến hoặc một object có giá trị Undefined khi không có giá trị nào được gán trước khi sử dụng nó, hay rõ hơn là Undefined chính là thiếu giá trị hoặc giá trị đó không xác định. Undefined khi không có giá trị nào được gán trước khi sử dụng nó, hay rõ hơn là Undefined chính là thiếu giá trị hoặc giá trị đó không xác định. 

Undefined xuất hiện khi nào?

Xem ví dụ:

let number;
number;     // => undefined

let movie = { name: 'Interstellar' };
movie.year; // => undefined

let movies = ['Interstellar', 'Alexander'];
movies[3];  // => undefined

OK chưa? Xuất hiện undefined khi xem 3 ví dụ trên. Check undefined JS Có 2 cách phổ biến đó là:

let number;
if(number === undefined){
    console.log(true)
}

Và cách hai sử dụng typeof.

let number;
if(typeof number === 'undefined'){
    console.log(true)
}

Cách 1 gây tranh cãi rất nhiều vì liên quan đến "undefined can be redefined" hãy xem tại đây! "undefined can be redefined" hãy xem tại đây! 

Hết, xem thêm nhiều mẹo javascript.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Đã đăng vào thg 4 17, 2020 4:38 SA 2 phút đọc 2 phút đọc

Lời chào

Chào tất cả các bạn, hôm nay mình sẽ mang đến cho các bạn một bài viết về undefined trong javascript. Nó có thực sự là cái undefined mà bạn đã biết hay không? Nào cùng mình tìm hiểu nhé!

Vấn đề chính

Như các bạn đã biết thì undefined trong javascript có nghĩa là khi sử dụng 1 variable nào đó mà chưa được định nghĩa hoặc một function void không trả về giá trị. Ví dụ:

const obj = {};
console.log(obj.name); // undefined

function example() {}
console.log(example()); // undefined

console.log(void(0)); // undefined

Điều gây nhầm lẫn

Vậy điều gì sẽ xảy ra nếu như chúng ta defined ra 1 variable "undefined" )) Với các trình duyệt hiện nay thì undefined là readonly tức là ta sẽ không định nghĩa lại được nó nữa. Ví dụ:

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định
)) Với các trình duyệt hiện nay thì undefined là readonly tức là ta sẽ không định nghĩa lại được nó nữa. Ví dụ:

const undefined = 10; // SyntaxError
let undefined = 10; // SyntaxError
var undefined = 10;
console.log(undefined); // undefined

Như ví dụ ở trên thì chúng ta ko thể định nghĩa lại variable undefined bởi vì nó là giá trị readonly. Vậy thì làm sao để định nghĩa được nó. Các bạn hãy xem ví dụ tiếp theo sau đây.

function myFunction() {
    const undefined = 10;
    console.log(undefined);
}

myFunction(); // 10;

Các bạn đã thấy sự vi diệu ở đây chưa Lúc đầu chúng ta không thể định nghĩa ở scope là global nhưng với scope local của 1 function thì vẫn định nghĩa lại được. Hãy thử với ví dụ khác. Trong scope là 1 cấu trúc điều kiện if

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định
Lúc đầu chúng ta không thể định nghĩa ở scope là global nhưng với scope local của 1 function thì vẫn định nghĩa lại được. Hãy thử với ví dụ khác. Trong scope là 1 cấu trúc điều kiện if

if (true) {
    var undefined = 10;
    console.log(undefined); // undefined
}

if (true) {
    let undefined = 10;
    console.log(undefined); // 10
}

Tổng kết

Theo như mình đã trình bày ở trên thì trong scope local của 1 function nào đó thì undefined hoàn toàn có thể trở thành 1 variable có giá trị. Như vậy có nghĩa rằng.

  • Hãy chắc chắn rằng mình không được đặt tên variable là undefined ở bất cứ đâu.
  • Nếu được hãy sử dụng void thay vì undefined để so sánh.
  • Trong dự án hãy sử dụng linter: Eslint, Tslint, ... để hạn chế điều này.
  • Trong trường hợp bắt buộc dụng undefined để sao sánh giá trị thì có thể gán variable undefined thành "undefined" để chắc chắn undefined chính là "undefined" ))))
    Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định
    ))))

Cảm ơn các bạn đã dành thời gian để đọc bài viết của mình. Chúc các bạn có ngày làm việc và học tập hiệu quả.

All rights reserved

Tác giả: Kuba Michalski

Nếu bạn đang dấn thân vào JavaScript, một trong những thứ bạn cần học đầu tiên chính là các loại data. Như khi chúng ta nói về Numbers, Strings và Booleans khá rõ ràng, các object cũng ổn nhưng khi null và indentified nhập cuộc thì mọi thứ sẽ trở nên rối hơn một chút.

Nếu bạn muốn hiểu rõ các ví dụ dưới đây, hãy mở DevTools Console bằng cách nhấn Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

null

null value đại diện cho reference dẫn đến môt object hoặc address không tồn tại hoặc không có giá trị (source: MDN). Cho dù dẫn đến một thứ không tồn tại, bản thân nó lại là một global object (và là một trong những value đầu tiên của JavaScript).

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Phủ nhận null sẽ return 

let number;
if(number === undefined){
    console.log(true)
}
1, nhưng khi so sánh nó với false (hoặc cả true) thì đưa về false.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Theo công thức toán căn bản, null value chuyển về 0.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

undefined

let number;
if(number === undefined){
    console.log(true)
}
3 property đại diện cho giá trị ban đầu 
let number;
if(number === undefined){
    console.log(true)
}
4. Đây là một trong những type nguyên thủy của JavaScript (nguồn: MDN). Căn bản nó nói rằng một cái gì đó không xác định được. Bạn có thể xem ví dụ sau, hiển thị giá trị của một biến mà trước đó không được gán giá trị.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Khi bạn nêu biến nhưng không nêu giá trị cho nó, JavaScript sẽ gán giá trị “undefined” cho nó.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định
Nếu bạn thử theo phương pháp toán tin bằng 
let number;
if(number === undefined){
    console.log(true)
}
3, bạn sẽ nhận về 
let number;
if(number === undefined){
    console.log(true)
}
6. Tương tự như null, phủ nhận undefined sẽ trả về true, nhưng so nó với hoặc true hoặc false sẽ trả về false.
Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Vậy điểm khác biệt là gì? null vs undefined

Giống nhau:

  • Cả hai khi bị phủ nhận đều tra về true, nhưng không có cái nào bằng true hoặc false.
  • Chúng đều đại diện cho một cái gì đó không tồn tại…

Khác nhau:

  • null đại diện cho “nothing”, hoàn toàn không tồn tại, không xác định được thứ không được xác định.
  • undefined thì có dạng data của riêng nó (undefined), null thì chỉ là một object
  • null đưa về 0 khi vận hành bằng toán, undefined trả về NaN

Ngoài ra còn một vài thứ khác cần lưu ý.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Dòng đầu tiên: undefined == null, trả về true vì JavaScript cố gắng chuyển đổi cả hai giá trị về cùng loại.

Dòng thứ hai: undefined === null, cho chúng ta biết “Hãy so sánh với các loại data” (căn bản là check xem cả hai có giống nhau không) và JavaScript cũng đủ thông minh để thấy được sự khác biệt nên nó trả về “false”.

Và dòng cuối cùng: !undefined === !null, cái này thì đơn giản hơn. Vì cả hai giá trị bị phủ nhận đều trả về true, bạn có hai giá trị true, thì cuối cùng nó là true.

Nghe có vẻ hơi sai sai, và thật ra, đó là cái hay của ngôn ngữ này.

NaN (Not a Number)

Sau ki đã hiểu null và unidentified là gì, và sự khác nhau của chúng, chúng ta sẽ nói về giá trị NaN.

Property

let number;
if(number === undefined){
    console.log(true)
}
6 có nghĩa là Not-A-Number (nguồn: MDN).

Tôi nghĩ định nghĩa này cũng đủ dễ hiểu. JavaScript return giá trị này khi cái chúng ta nhận được không phải số. Ví dụ, bạn muốn lấy giá trị “cucumber” trừ 10 hoặc lấy “R2D2” chia cho 12 vậy.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Dưới đây là một số trường hợp bạn nghĩ sẽ nhận dược giá trị này nhưng thật ra thì không:

  • Khi bạn add cái gì đó vào string. Khi JavaScript thấy và sign vào một string, nó cũng tự động chuyển đổi element thứ hai của cả string được add.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

  • Khi bạn làm việc với number và boolean. Boolean được chuyển thành 0 và 1. True = 1. False = 0.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

true * false giống như 1 * 0 bằng 0 giống như 1 * 0 bằng 0

Bây giờ mới là phần hack não. NaN thật ra là một số.NaN thật ra là một số.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Vậy là, nó đại diện cho cái nó thiếu. Nói cho thông minh là nó là cái đối nghịch của chính nó.

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

Vậy nếu như NaN tự so và trả về false, vậy thì ta có so nó với cái gì đi nữa cũng sẽ trả về false. May thay là chúng ta có một function để check xem nó có phải NaN hay không — isNaN().

Hướng dẫn 0 is undefined javascript - 0 là javascript không xác định

let là một variable block scoped. là một variable block scoped.

Tóm gọm nhanh

Giá trị null đại diện cho nothing, một object hoặc address không tồn tại hoặc không có giá trị. Nó chuyển đổi từ 0 trong phương pháp vận hành toán đơn giản và là một global object.null == false cho chúng ta false.
null == false cho chúng ta false.

Property global

let number;
if(number === undefined){
    console.log(true)
}
3  đại diện cho gá trị ban đầu 
let number;
if(number === undefined){
    console.log(true)
}
4. Nó cho biết một cái không được gán giá trị; không được xác định. 
let number;
if(number === undefined){
    console.log(true)
}
3 không chuyển đổi bất cứ gì thành số, nên khi dùng nó dùng tính toán số học sẽ trả về NaN.NaN.

let number;
if(number === undefined){
    console.log(true)
}
6 (Not-A-Number) đại diện một cái không phải là số, mặc dù bản thân nó thật ra là một số. Nó không bằng chính nó và để check xem có NaN không chúng ta sẽ dùng isNaN() function. (Not-A-Number) đại diện một cái không phải là số, mặc dù bản thân nó thật ra là một số. Nó không bằng chính nó và để check xem có NaN không chúng ta sẽ dùng isNaN() function.

Tất cả những cái trên đều là các giá trị mang tính false nên nó sẽ trả về false.

JavaScript rất giỏi chuyển đổi giá trị vì thế bạn cần phải dùng dấu bằng đến 3 lần (===) để đảm bảo cả hai elements không giống nhau.

Bài viết gốc được đăng tải tại codeburst.io