JavaScript Primitive Data types. The Sigma Types. Undefined, null, boolean, and Symbol.
Introduction.
JavaScript has several primitive data types some of which we have already covered in this series like Strings and Numbers.
I call these undefined, null, boolean, and Symbol Sigma data types because they are used almost everywhere though they are not given as much credit in their use cases as numbers and strings.
Later on, we will look at Objects and functions. These are the building blocks of our entire life as developers in Javascript.
However, In this article, we will look at the sigma types and we will start right now.
Undefined
Their so many times when we try to look for something that does not exist in places where we might expect it to be. So undefined is what is returned when the program does not find what you have asked for.
There are also built-in methods that will return undefined if a value passed does not exist. An example is the find method.
const obj = {
name:"Rashid",
profession:"Developer"
}
console.log(obj.age) // undefined
How to check if a value is undefined
const obj = {
name:"Rashid",
profession:"Developer"
}
if(obj.age === undefined) console.log('Age does not exist');
null
This data type can be predefined or let me put this like this. You can say this valuable has nothing to it. Let's look at how to define it.
const name = null;
How to check if a value is null.
const name = null
if(name === null or !name) console.log('Name is null');
Boolean.
The boolean or bool data type is very fundamental because it's used everywhere in our programs. Talk about sigma type this is the real deal. It's in every conditional check. In every if condition. In every logic you write, you will see it showing up. so let's look at how it's defined.
const isVailable = false;
So let's say you have a challenge to find out whether a given array has an even number.
const hasEvenNumber = (nums)=>{
let isEven = false;
for(const num of nums){
if(num%2 === 0){// if condition also evaluates to either false or true
isEven = true
}
}
return isEven
}
console.log(hasEvenNumber([1,3,5,7,10]))// prints true
Note:
We will look at conditional statements, loops, and arithmetics later.
Symbol.
This by far the type that took me like forever to understand. Its use cases weren't clear to me by the time I first heard of it.
Let me put it this way. If you're looking to make unique values. This is your guy.
As we dive a little bit into its declaration and its use case, It's safe to tell you that its use cases are beyond imaginable. Now it's looking at a few of them.
Symbols are guaranteed to be unique.
let dev1 = Symbol("dev");
let dev2 = Symbol("dev");
console.log(dev1 === dev2); //prints false
Symbols and objects.
let user = { // belongs to another code
name: "John"
};
let id = Symbol("id");
user[id] = 1;
console.log( user[id] ); // we can access the data using the symbol as the key
Symbols in the react community
Now what's this? You may ask.
React using uses Symbols to uniquely identify components under the hood.
Let's see how this works on that side.
const App = () => {
return (
<div>
Muhamad Rashid
</div>
);
};
Now let us see what we see when we log this component
console.log(<App />)
// Output
{
"$$typeof": Symbol(react.element),
type: () => {...}, // This function is our component
props: {children: "Muhamad Rashid"},
key: null,
ref: null
}
You can now see that react uses a symbol to uniquely identify react components.
Source 〽️iraya's blog How React works behind the Scenes.
In my previous article about JavaScript String data type, I promised to give a solution to a leetcode challenge Find the Index of the First Occurrence in a String.
var strStr = function(haystack, needle) {
return haystack.indexOf(needle)
};
As you recall in that article, we covered the indexOf method.
Conclusion.
In this article, we looked at the undefined, null, boolean, and Symbol data types. It's my sincere hope that it will never be magic again while using these types.
Please check out this link for more info about the Symbol data type
Muhamad Rashid Mugaba
Happy coding.