[{"data":1,"prerenderedAt":510},["ShallowReactive",2],{"navigation":3,"/blog/how-i-built-my-own-design-system-from-scratch":26,"/blog/how-i-built-my-own-design-system-from-scratch-surround":505},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"A Developer's Guide to Scalable API Requests with Params in JavaScript and TypeScript","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"Primitives vs. Objects in JavaScript","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"A detailed explanation of five most used CSS frameworks","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"Mastering JavaScript Array and it methods","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":14,"author":28,"body":32,"date":496,"description":497,"extension":498,"image":499,"meta":500,"minRead":501,"navigation":502,"path":15,"seo":503,"stem":16,"__hash__":504},"blog/blog/how-i-built-my-own-design-system-from-scratch.md",{"name":29,"avatar":30},"Emmanuel Abanobi",{"src":31,"alt":29},"/hero/Emma.avif",{"type":33,"value":34,"toc":470},"minimark",[35,40,44,47,52,55,58,60,64,67,78,84,89,92,95,98,100,104,107,110,114,117,123,127,130,133,139,148,151,157,164,168,171,174,180,182,186,189,192,196,199,202,208,212,215,221,224,226,230,233,237,240,250,253,259,262,265,267,271,274,277,283,286,288,292,295,298,304,306,310,313,316,319,322,325,327,331,334,337,340,346,349,351,355,450,452,456,459,462,465,467],[36,37,39],"h1",{"id":38},"understanding-javascript-data-types-a-comprehensive-guide-for-beginners","Understanding JavaScript Data Types: A Comprehensive Guide for Beginners",[41,42,43],"p",{},"In this article, I will be discussing data types in JavaScript. I'm very sure that anyone reading this should be able to comprehend JavaScript data types well enough. Firstly, I will start by defining data types for a better understanding.",[45,46],"hr",{},[48,49,51],"h2",{"id":50},"what-are-data-types","What Are Data Types?",[41,53,54],{},"Data types can be described as different types or kinds of data we will be working with while using the JavaScript programming language. Data types are used in multiple ways while writing a program; we use them mostly when storing values in variables.",[41,56,57],{},"However, there are multiple types of data we will be looking into in this article.",[45,59],{},[48,61,63],{"id":62},"string-type","String Type",[41,65,66],{},"A string is a set of alphanumeric characters that can be written with double quotes in JavaScript. Here's how a string looks in JavaScript:",[68,69,74],"pre",{"className":70,"code":72,"language":73},[71],"language-text","const str = \"string\"\n","text",[75,76,72],"code",{"__ignoreMap":77},"",[79,80,81],"note",{},[41,82,83],{},"JavaScript strings are immutable, which means that once the string is created, it cannot be changed.",[85,86,88],"h3",{"id":87},"string-indexing","String Indexing",[41,90,91],{},"It is noted that the first character of a string is at the index of 0, the second character is at the index of 1.",[41,93,94],{},"As a newbie in JavaScript programming language, you may be confused about why I started counting from 0 instead of 1. Here's why: In computer science algorithms and data structures, we do not count from 1 when looking for the index in a string or number.",[41,96,97],{},"I will talk more about this topic in my next article; for now, we are only focusing on data type basics.",[45,99],{},[48,101,103],{"id":102},"number-type","Number Type",[41,105,106],{},"JavaScript has only one number type, which can be written with or without a decimal point:",[41,108,109],{},"const num = 45 // without decimal\nconst num2 = 3.5 // with decimal",[85,111,113],{"id":112},"scientific-notation","Scientific Notation",[41,115,116],{},"Extra large and extra small numbers can be written with scientific exponent notation. Using this exponent saves you time from writing lots of zeros behind or ahead of your number type:",[68,118,121],{"className":119,"code":120,"language":73},[71],"const myNum = 35e7\nconsole.log(myNum) // returns 350000000\nconsole.log(typeof myNum) // returns \"number\"\n\nconst myNum2 = 35e-7\nconsole.log(myNum2) // returns 0.0000035\n",[75,122,120],{"__ignoreMap":77},[85,124,126],{"id":125},"integer-precision-and-floating-precision","Integer Precision and Floating Precision",[41,128,129],{},"Furthermore, I would love to dive deeper into JavaScript number types. We have two types of numbers: integer precision and floating precision.",[41,131,132],{},"Integer precision numbers are those number types that don't have a decimal or exponent notation. These numbers are accurate to 15 digits:",[68,134,137],{"className":135,"code":136,"language":73},[71],"// Integer precision number\nconst myInteger = 42\nconsole.log(myInteger) // 42\nconsole.log(typeof myInteger) // 'number'\n",[75,138,136],{"__ignoreMap":77},[41,140,141,142],{},"There are deeper explanations to this; you can read more about it here: ",[143,144,145],"a",{"href":145,"rel":146},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type",[147],"nofollow",[41,149,150],{},"Floating precision arithmetic points are numbers in JavaScript that aren't 100% accurate. For example:",[68,152,155],{"className":153,"code":154,"language":73},[71],"// Non-integer precision number\nconst myFloat = 3.14\nconsole.log(myFloat) // 3.14\nconsole.log(typeof myFloat) // 'number'\n",[75,156,154],{"__ignoreMap":77},[41,158,159,160],{},"You can also dive deeper into non-integer numbers here: ",[143,161,162],{"href":162,"rel":163},"https://developer.mozilla.org/en-US/docs/Glossary/float",[147],[85,165,167],{"id":166},"working-with-the-operator","Working with the + Operator",[41,169,170],{},"When you use the + operator with number types, it adds the numbers; when you use the + operator on a string, it concatenates the string.",[41,172,173],{},"For example:",[68,175,178],{"className":176,"code":177,"language":73},[71],"\n// Using the + operator with numbers\nconst myNum1 = 22\nconst myNum2 = 13\nconsole.log(myNum1 + myNum2) // returns 35\n\n// Using the + operator with a string\nconst myStr = \"string\"\nconst myNum3 = 13\nconsole.log(myStr + myNum3) // returns \"string13\"\n",[75,179,177],{"__ignoreMap":77},[45,181],{},[48,183,185],{"id":184},"equality-operators","Equality Operators",[41,187,188],{},"Now let's look at the equality operator. While programming, we will be using this operator constantly. As we all know, without this operator, we cannot assign a value to a variable or define a variable.",[41,190,191],{},"The equality operator comes with a strict (===) and loose (==) alternative for comparing values or data.",[85,193,195],{"id":194},"strict-equality","Strict Equality (===)",[41,197,198],{},"This operator does not perform coercion before comparing a value. For strict equality to return true, the values being compared must have the same data type and value.",[41,200,201],{},"// When comparing using strict equality",[68,203,206],{"className":204,"code":205,"language":73},[71],"\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 === myNum3) // this returns true\nconsole.log(myNum1 === myNum2) // this returns false\n",[75,207,205],{"__ignoreMap":77},[85,209,211],{"id":210},"loose-equality","Loose Equality (==)",[41,213,214],{},"This equality must perform coercion or conversion before comparing values.",[68,216,219],{"className":217,"code":218,"language":73},[71],"\n// When comparing using loose equality\n\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 == myNum3) // this returns true\nconsole.log(myNum1 == myNum2) // this returns true\n",[75,220,218],{"__ignoreMap":77},[41,222,223],{},"Please note: There are many operators in JavaScript, but we are just looking at the most frequently used ones. Check my profile for an article on all JavaScript operators for a deeper understanding.",[45,225],{},[48,227,229],{"id":228},"null-type","Null Type",[41,231,232],{},"Null is a special primitive data type that indicates an empty value or an absence of a value. When a variable is assigned null, it means that the variable is not pointing to any object or variable in memory.",[85,234,236],{"id":235},"primitive-vs-non-primitive","Primitive vs Non-Primitive",[41,238,239],{},"You might be wondering what primitive data types are:",[241,242,243,247],"ul",{},[244,245,246],"li",{},"Primitive data types are data that are predefined in JavaScript",[244,248,249],{},"Non-primitive data types are data that aren't predefined—it is the duty of the programmer to define these",[41,251,252],{},"Important: null and undefined are two different data types, although they play almost the same role in JavaScript.",[68,254,257],{"className":255,"code":256,"language":73},[71],"\nlet myVariable = null\nconsole.log(myVariable) // null\nconsole.log(typeof myVariable) // \"object\"\n",[75,258,256],{"__ignoreMap":77},[41,260,261],{},"In the example above, we assigned a variable to null, and you can clearly see what it returns. We also use the typeof operator to check for the data type, and it returns an object type.",[41,263,264],{},"The fact that typeof null is \"object\" in JavaScript is counterintuitive because we might expect it to be something like \"null\". This is because null is an empty object.",[45,266],{},[48,268,270],{"id":269},"undefined-type","Undefined Type",[41,272,273],{},"Undefined is a primitive data type that returns undefined when a variable isn't assigned a value. It represents the absence of any value, including objects or properties.",[41,275,276],{},"The difference between null and undefined is that null represents the intentional absence of an object.",[68,278,281],{"className":279,"code":280,"language":73},[71],"\nlet myVariable\nconsole.log(myVariable) // undefined\nconsole.log(typeof myVariable) // \"undefined\"\n",[75,282,280],{"__ignoreMap":77},[41,284,285],{},"Because the variable isn't defined in the example above, it automatically returns \"undefined\".",[45,287],{},[48,289,291],{"id":290},"boolean-type","Boolean Type",[41,293,294],{},"When working with programming languages, most times you will need a data type to check if a value is true or false, on or off, yes or no. This is where the boolean data type comes into play.",[41,296,297],{},"This data type only returns true or false:",[68,299,302],{"className":300,"code":301,"language":73},[71],"\nlet myBoolean1 = true\nlet myBoolean2 = false\n\nconsole.log(myBoolean1) // true\nconsole.log(typeof myBoolean1) // \"boolean\"\nconsole.log(myBoolean2) // false\nconsole.log(typeof myBoolean2) // \"boolean\"\n",[75,303,301],{"__ignoreMap":77},[45,305],{},[48,307,309],{"id":308},"symbol-type","Symbol Type",[41,311,312],{},"Symbols are primitive data types that were introduced in ECMAScript 2015 (ES6). They are unique and immutable values that can be used as keys for object properties.",[41,314,315],{},"Symbols can be created using the symbol function Symbol(), which returns a symbol. The symbol function takes an optional parameter of a string that serves as a description. These descriptions are mainly used for debugging and do not affect the uniqueness of the symbol.",[41,317,318],{},"const symbol1 = Symbol('mySymbol')\nconst symbol2 = Symbol('mySymbol')",[41,320,321],{},"console.log(symbol1 === symbol2) // false",[41,323,324],{},"From the example above, we got a falsy return value when comparing two symbols with the same description. This means two symbols with the same descriptions can never be equal.",[45,326],{},[48,328,330],{"id":329},"object-type-non-primitive-data-type","Object Type (Non-Primitive Data Type)",[41,332,333],{},"It wouldn't be cool if we only looked at primitive data types and didn't look into non-primitive data types. The object type is the only non-primitive data type we have in JavaScript.",[41,335,336],{},"Object is the only non-primitive and complex data type we have in JavaScript because you have to define it. Objects can be used to store collections of data. This data comes with property names; these property names are normally stored as strings, and the strings carry the values of the object.",[41,338,339],{},"Moreover, the values can be strings, numbers, or even arrays:",[68,341,344],{"className":342,"code":343,"language":73},[71],"\nconst person = {\n  name: \"Satochi\",\n  age: 25,\n  address: {\n    homeNum: 2,\n    street: \"Lincoln Avenue\",\n    city: \"Houston\",\n    state: \"Texas\"\n  }\n}\n\nconsole.log(person) // returns every detail: \"name\", \"age\", \"address\" of the object person\nconsole.log(typeof person) // returns \"object\"\n\n\n",[75,345,343],{"__ignoreMap":77},[41,347,348],{},"In the example above, we created an object variable called person and assigned properties of name, age, and address to it. When we log the console of person and typeof person, it brings out all the properties of person, and the typeof operator returns \"object\".",[45,350],{},[48,352,354],{"id":353},"summary","Summary",[356,357,358,374],"table",{},[359,360,361],"thead",{},[362,363,364,368,371],"tr",{},[365,366,367],"th",{},"Data Type",[365,369,370],{},"Category",[365,372,373],{},"Example",[375,376,377,389,399,409,419,429,439],"tbody",{},[362,378,379,383,386],{},[380,381,382],"td",{},"String",[380,384,385],{},"Primitive",[380,387,388],{},"\"hello\"",[362,390,391,394,396],{},[380,392,393],{},"Number",[380,395,385],{},[380,397,398],{},"42, 3.14",[362,400,401,404,406],{},[380,402,403],{},"Boolean",[380,405,385],{},[380,407,408],{},"true, false",[362,410,411,414,416],{},[380,412,413],{},"Null",[380,415,385],{},[380,417,418],{},"null",[362,420,421,424,426],{},[380,422,423],{},"Undefined",[380,425,385],{},[380,427,428],{},"undefined",[362,430,431,434,436],{},[380,432,433],{},"Symbol",[380,435,385],{},[380,437,438],{},"Symbol()",[362,440,441,444,447],{},[380,442,443],{},"Object",[380,445,446],{},"Non-Primitive",[380,448,449],{},"{name: \"John\"}",[45,451],{},[48,453,455],{"id":454},"conclusion","Conclusion",[41,457,458],{},"Now that we have come to the end of this technical article, I'm sure you all now understand data types in JavaScript.",[41,460,461],{},"Thank you for reading my article. Do not forget to follow me, share this article, and also hit that like button.",[41,463,464],{},"Sending you all peace, love, and light. Namaste",[45,466],{},[41,468,469],{},"Got questions? Drop them in the comments below!",{"title":77,"searchDepth":471,"depth":471,"links":472},2,[473,474,478,483,487,490,491,492,493,494,495],{"id":50,"depth":471,"text":51},{"id":62,"depth":471,"text":63,"children":475},[476],{"id":87,"depth":477,"text":88},3,{"id":102,"depth":471,"text":103,"children":479},[480,481,482],{"id":112,"depth":477,"text":113},{"id":125,"depth":477,"text":126},{"id":166,"depth":477,"text":167},{"id":184,"depth":471,"text":185,"children":484},[485,486],{"id":194,"depth":477,"text":195},{"id":210,"depth":477,"text":211},{"id":228,"depth":471,"text":229,"children":488},[489],{"id":235,"depth":477,"text":236},{"id":269,"depth":471,"text":270},{"id":290,"depth":471,"text":291},{"id":308,"depth":471,"text":309},{"id":329,"depth":471,"text":330},{"id":353,"depth":471,"text":354},{"id":454,"depth":471,"text":455},"2023-04-24","A Comprehensive Explanation of Primitive and Object Types","md","https://plus.unsplash.com/premium_photo-1692241076210-9e696db67fce?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDd8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},7,true,{"title":14,"description":497},"3UCeoz7xP4A4z8aVMMqe1RzT9SBUWeT6CWPh2H5uzqc",[506,508],{"title":10,"path":11,"stem":12,"description":507,"children":-1},"Build a robust, type-safe API wrapper from scratch without the bloat of external libraries. Learn to use dynamic parameters to turn complex data fetching into a lean, reusable, and zero-dependency workflow.",{"title":18,"path":19,"stem":20,"description":509,"children":-1},"Beyond just styling, CSS frameworks define the structural logic of the modern web. This deep dive explores the top five frameworks through the lens of 'vibe-first' design and scalability, helping you choose the right tool to bridge the gap between technical puzzles and beautiful, inclusive user interfaces.",1773669617328]