Each programming language has its own corresponding data types. In Javascript too, we have two large groups: primitive data types and reference data types. Correspondingly we will have primitive data types such as string
, number
, boolean
, null
, undefined
, symbol
and reference data types such as object
, array
, function
. Each data type will have its own characteristics that other types do not have. Therefore, if we do not carefully check the input data type of an action, there is a possibility that our code will cause bugs, even crash the system. Today let’s try to learn some function
in Javascript to minimize this, help us always determine the correct input of our processing.
I. Has the input check been declared?
When we write a function to handle a certain job. It is really necessary to check whether the function’s input variable has been declared or not. So when writing code we will branch accordingly for the declared and undeclared instance. At the same time when there are abnormal input data, our processing still produces the desired output instead of causing bugs or crashes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <span class="token comment">// Tại đây chúng ta định nghĩa một giá trị là được khai báo khi và chỉ khi</span> <span class="token comment">// giá trị đó khác `undefined` (được khởi tạo nhưng chưa được khai báo giá trị)</span> <span class="token comment">// và `null` (được hiểu là chưa được gán giá trị)</span> <span class="token comment">// Function này sẽ nhận tham số đầu vào là `value`</span> <span class="token comment">// và trả về một giá trị `boolean` cho biết</span> <span class="token comment">// tham số đầu vào `value` đã được khai báo hay chưa</span> <span class="token comment">// `true` => Chưa được khai báo</span> <span class="token comment">// `false` => Đã được khai báo</span> <span class="token keyword">function</span> <span class="token function">isUndefined</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> value <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> <span class="token comment">// Function này tương tự nhưng ngược lại so với function `isUndefined`</span> <span class="token comment">// Function này cũng nhận tham số đầu vào là `value`</span> <span class="token comment">// và trả về một giá trị `boolean` cho biết</span> <span class="token comment">// tham số đầu vào `value` đã được khai báo hay chưa</span> <span class="token comment">// `true` => Đã được khai báo</span> <span class="token comment">// `false` => Chưa được khai báo</span> <span class="token keyword">function</span> <span class="token function">isDefined</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">&&</span> value <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> <span class="token comment">// Ở function này chúng ta sẽ đưa giá trị trả về</span> <span class="token comment">// theo hai hướng là `valid` và `invalid`</span> <span class="token comment">// Nếu `valid` thì sẽ trả về giá trị (hoặc tiếp tục xử lý)</span> <span class="token comment">// Nếu `invalid` thì ngững xử lý và trả về giá trị mặc định (hoặc trả về một cảnh báo)</span> <span class="token keyword">function</span> <span class="token function">greeting</span> <span class="token punctuation">(</span> <span class="token parameter">message</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> isInvalidMessage <span class="token operator">=</span> <span class="token function">isUndefined</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token comment">// const isValidMessage = isDefined(message)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> isInvalidMessage <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">'Please define your message before greeting'</span> <span class="token comment">// if (!isValidMessage) return 'Please define your message before greeting'</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Greetings! </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> message <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> |
Checking the declaration of the input will help our code work more efficiently with abnormal input data. It also helps us to divide processing easier and the probability of bugs will be less.
So let’s carefully examine the input declaration. Although we will code more, it will save time investigating and handling bugs later (if dealing with bugs).
II. Check the correct data type as desired?
In the first part we took the step of verifying the declaration. And it makes our code more efficient, reducing bugs and unexpected crashes. But besides that when we write a script we all want it to work properly. Therefore, checking the data type of the input is also a prerequisite for proper processing.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <span class="token comment">// Đối với những kiểu nguyên thủy chúng ta sẽ cần dùng `typeof` để kiểm tra</span> <span class="token comment">// string - 'string'</span> <span class="token comment">// number - 'number'</span> <span class="token comment">// symbol - 'symbol'</span> <span class="token comment">// boolean - 'boolean'</span> <span class="token comment">// Đối với những kiểu tham chiếu khi dùng `typeof` kết quả sẽ đều là 'object'</span> <span class="token comment">// ngoại trừ function - 'function'</span> <span class="token comment">// Function này dùng để kiểm tra đầu vào của chúng ta</span> <span class="token comment">// có phải là kiểu nguyên thủy hay không</span> <span class="token comment">// `true` nếu giá trị là một trong 4 kiểu:</span> <span class="token comment">// - `string`</span> <span class="token comment">// - `number`</span> <span class="token comment">// - `boolean`</span> <span class="token comment">// - `symbol` (thường dùng để định danh key trong object)</span> <span class="token comment">// `false` nếu giá trị không thuộc 4 kiểu trên</span> <span class="token comment">// Note: Kiểu dữ liệu `undefined` và `null` sẽ không được đề cập</span> <span class="token comment">// vì 2 kiểu dữ liệu này dùng cho giá trị chưa được khai báo, gán giá trị</span> <span class="token keyword">function</span> <span class="token function">isPrimitive</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'number'</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'symbol'</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'boolean'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// Function này kiểm tra đầu vào của chúng ta</span> <span class="token comment">// có phải là một object hay không</span> <span class="token comment">// Một giá trị được xem là `object` khi:</span> <span class="token comment">// - Kiểu dữ liệu là object</span> <span class="token comment">// - Và cần được khai báo, gán giá trị</span> <span class="token keyword">function</span> <span class="token function">isObject</span> <span class="token punctuation">(</span> <span class="token parameter">object</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> object <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&&</span> <span class="token keyword">typeof</span> object <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token punctuation">}</span> <span class="token comment">// Function này dùng để thêm một cặp `key, value`</span> <span class="token comment">// vào một object vì thế đầu vào `key` sẽ cần là kiểu nguyên thủy.</span> <span class="token comment">// và đầu vào `value` sẽ cần được khai báo giá trị</span> <span class="token keyword">function</span> <span class="token function">addObjectKey</span> <span class="token punctuation">(</span> <span class="token parameter">object <span class="token punctuation">,</span> key <span class="token punctuation">,</span> value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">isObject</span> <span class="token punctuation">(</span> object <span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">isPrimitive</span> <span class="token punctuation">(</span> key <span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">isDefined</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">)</span> object <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">=</span> value <span class="token punctuation">}</span> |
Above are some functions used to check primitive data type and reference type (object). Next, let’s add some other data type checking functions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <span class="token comment">// Khai báo biến `toString` để lưu trữ</span> <span class="token comment">// function `toString` của Object</span> <span class="token comment">// Thường để tránh nhầm lẫn với những `key` khác khi thực thi trong một object</span> <span class="token keyword">const</span> toString <span class="token operator">=</span> <span class="token class-name">Object</span> <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> toString <span class="token punctuation">;</span> <span class="token comment">// Function này sẽ trả về chính xác kiểu dữ liệu</span> <span class="token comment">// của một giá trị tham chiếu</span> <span class="token comment">// Ví dụ như `array` khi chúng ta dùng `typeof` thì sẽ là `object`</span> <span class="token comment">// nhưng khi áp dụng function này nó sẽ trả về `Array`</span> <span class="token keyword">function</span> <span class="token function">getRawType</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">toString</span> <span class="token punctuation">.</span> <span class="token function">call</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// Function này sẽ kiểm tra chặt chẽ hơn</span> <span class="token comment">// việc giá trị đầu vào là một `object` chứ không phải `array`</span> <span class="token comment">// hay là một kiểu dữ liệu like object</span> <span class="token keyword">function</span> <span class="token function">isPlainObject</span> <span class="token punctuation">(</span> <span class="token parameter">object</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">getRawType</span> <span class="token punctuation">(</span> object <span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'Object'</span> <span class="token punctuation">}</span> <span class="token comment">// Function này dùng để kiểm tra</span> <span class="token comment">// việc giá trị đầu vào là một biểu thức chính quy `RegExp`</span> <span class="token keyword">function</span> <span class="token function">isRegExp</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">getRawType</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'RegExp'</span> <span class="token punctuation">}</span> <span class="token comment">// Function này dùng để kiểm tra</span> <span class="token comment">// việc giá trị đầu vào là một `Promise`</span> <span class="token comment">// `Promise` có đặc điểm sẽ có function `then`, `catch`</span> <span class="token keyword">function</span> <span class="token function">isPromise</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token function">isDefined</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token keyword">typeof</span> val <span class="token punctuation">.</span> then <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">&&</span> <span class="token keyword">typeof</span> val <span class="token punctuation">.</span> catch <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token punctuation">)</span> <span class="token comment">// return getRawType(value) === 'Promise'</span> <span class="token punctuation">}</span> |
We have gone through a number of functions that help ensure the correct input of the actions, create the direction of anomalies, reduce bugs and crashes.
Its effects are very good so please apply it to the code and in combination with Unit test
it will help our code be clearer, more transparent and cover as much of anomalous as possible. .
III. Conclude
So my article here is over. Hope it is a little but also helps you a certain part in your working process. In the following article we will take a look at some of the functions that are useful when working with arrays as well as some of the more commonly used techniques in arrays. Thank you for your reading. See you in the next article. Hello!!!