DEV Community

Cover image for Javascript Literals
Emmanuel Onah
Emmanuel Onah

Posted on • Updated on

Javascript Literals

Good day the wonderful Js community,

my name is Emmanuel Onah and i will be breaking down some little doubt of javascript literals to a level of ultimate understanding for all js programmers(Sorry i don't have the beginner or senior word in my vocabulary 😊)

Table of Content

Literals Explanation
MDN contradiction
Types of Literals
Practical Codebase

So without hesitation, lets hit the boat and get floating😊.

1. Literals:

According to Wikipedia or google(: not too show): a literal is a notation for representing a fixed value in source code.

According to MDN: Literals represent values in JavaScript. These are fixed values—not variables—that you literally provide in your script.

According to Me(Emmanuel Onah): A literal is a pattern of declaring and defining a temporal or assumed-permanent value(it's assumed permanent because it can still be mutated unless extra mechan is applied) using its value structural paradigm.

Explanation of some of my keywords used in my definition above

value structural paradigm: What i mean by this is that during literals you use "" when defining strings, {} when defining object,[]when defining arrays, does are the value-structural paradigm(i.e the way they are defined)

Important Notice About Variable and Value Declaration + Definition which led to the birth or born of the word "Literals"

I want you to know that Javascript is functional base first and the class base is just a sugarcoated way of implementing a constructional function which you can find in my personal blog here=>https://www.youmustknowjs.com/article (just search for "constructional class program")

So for the fact that we can implement things using a normal function and constructional function(class) in javascript, the keyword literals came to play.

So what am i trying to say here?

What i am trying to say is that you can create things directly or by using the constructional way which is simply done by invoking the new keyword on the constructional function.

Example of what am saying

  1. Using string literals to define "I am a boy and humanity is my religion":

const strLiteral = "I am a boy and humanity is my religion";

  1. Using the constructional function to define "I am a boy and humanity is my religion":

const strLiteral = new String("I am a boy and humanity is my religion");//note: this returns a string object behind the hood

So now, i hope you understand what i meant in my definition which says "using the value structural paradigm to define the value". E.g if you are asked to define object literal of staffs name, all you need to know first is nothing but using the structural paradigm of objects e.g:

const staffsDetail = {

staffOne:{name:"Emmanuel Onah",age:20},

staffTwo:{name:"Jude Joseph",age:25}

}

2. MDN contradiction:

So what is my contradiction about MDN explanation of literals(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals)?

My one and only contradiction which i think might have alot of effect about the whole literal thing is the sentence on MDN explanation which says:"fixed values—not variables". But i might be wrong with what is meant in the MDN explanation, i will appreciate if someone has a different thought of that explanation if so, kindly comment to this article thanks in advance.

So my question to MDN explanation is, what is fixed values(let's keep variable aside)?

For me, a fixed value is a value that can't be unfixed!

Unfortunately, i think that's not the case of js literals, that might be the case in other languages. But for Js, i think even after literal design, the value can still be unfixed to something else or even ejected in the case of object literals.

Below is a backup screen-grap of what fixed values are:)

Alt Text

Read about Fixed

3. Types of Literals:

I think its better to redirect you to read about this on MDN site because they have a nice doc on the types of literals which doesn't make any sense writing it or simplifying it because it is ultimately simplified already:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals

4. Code Sample:

Alt Text

Link to Codepen To execute the code

Thanks for reading this, have a great day!.

Top comments (0)