Preface
Welcome, my dear friends, to a hilariously entertaining journey through the magical world of JavaScript! I was an indecisive programmer who was always tempted to learn different libraries and switch languages. However, it is good to explore new technologies and keep improving by learning new things every day if you are experienced with what you already have.
Since you clicked this post, I don’t have to persuade you to learn JavaScript despite its curly braces syntax, wired equality operation, dynamically and weakly typing causes bugs everywhere. (TypeScript might be the cure.) However, we all know that if you want to do Web development in 2023, you must learn JavaScript. So let’s accept our fate and stop complaining about our partner.
Stop browsing YouTube videos and online courses! They are valuable as extra resources but also give you the illusion that you have learned something after watching a video. Read a good book about your programming language instead. But not just simply read through it; you must code all the examples and understand the concepts. Many start reading Eloquent JavaScript, but few actually FINISH all 21 chapters.
Oh, it is too hard… I have no time… Let me take an online course instead.
I have been there before. It was challenging to understand all the concepts at first. So I am here to help you with my dry humour and Dad jokes. (But you still have the read the book.) Okay, cut the crap and let’s get started!
Meet the Family Members
In JavaScript, values are like the characters in our favourite sitcoms, each with unique quirks and personalities. Whether it’s numbers, strings, booleans, or objects, these values bring life to your code.
Numbers
Numbers are… numbers. Just like what you learnt in kindergarten. 1 apple, 2 oranges. However, JavaScript uses a fixed number of bits, 64 of them, to store a single number value. There are only so many patterns you can make with 64 bits, which means the number of different numbers that can be represented is limited. The actual maximum whole number that can be stored is more in the range of 9 quadrillion (15 zeros). Well, that’s not too bad. But calculations with fractional numbers are generally not accurate.
// Try on your browser console
0.1 + 0.2
// 0.30000000000000004You can do arithmetic operations in JavaScript. The only thing you might not know is the remainder/modulo operation with a % symbol. It gives you the remainder of the dividing result.
1 + 1 // 1 + 1 = 2
1 - 1 // 1 - 1 = 0
2 * 2 // 2 x 2 = 4
4 / 2 // 4 ÷ 2 = 2
5 % 2 // 5 ÷ 2 = 2R1
2 ** 3 // 2 x 2 x 2 = 8
(1 + 2) * 3 // 3 * 3 = 9Let’s not forget three special numbers Infinity, -Infinity and NaN(not a number). They are the side characters. You always forget they exist until they become a supervillain.
String
Strings are text. You can use single quotes, double quotes, or backticks to mark strings.
'Hey, we should go out for a coffee sometime.'
"How about 9 tomorrow?"
`No! that is too many.`We can use a backslash(\) to escape a character. It helps us to use quotes in a sentence or start a new line. Let’s break down an example from the book.
"A newline character is written like \"\\n\"."
// A newline character is written like "\n".
/*
Since the string uses double quotes to wrap the text,
any any double quote in the text will close the wrapping.
Let's focus on the [ \"\\n\" ] part.
[ \" ] => a backslash escapes the double quote
[ \\ ] => a backslash escapes a backslash
[ n ] => since the previous backslash has been escaped, n is just a n
[ \" ] => another a backslash escapes the double quote
*/Interestingly, you can use + operator with string. It concatenates two string together.
"cat" + "fish"
// "catfish"Backtick-quoted strings, usually called template literals. We can use ${} in template literals to compute a value and converted it to a string.
"Your salary would be ${(5000 * 12 * ( 2 + 0.33) - 500) * (20-20)} dollars."Boolean
Boolean might seem a strange word to you. But it is simply what you want to know in the last episode of “Love is blind”. Yes or No. In JavaScript, we call it true and false. There are serval way to produce boolean.
// Comparison
10 > 9// true
8 < 9 // true
5 >= 5 // true (greater than or equal to)
5 =< 5 // true (less than or equal to)
"single" !== "sad" // true (not equal to)
"sad" == "sad" // true (equal to)
// conditional operator
true ? "left" : "right"
// It simply says, if something before ? symbol is true,
// we take the left-hand value.
// Otherwise, we take the right-hand value.We can use logical operation to perform short-circuiting. By converting the value to Boolean type, it will return either the original left-hand value or the right- hand value. (Reminder: a non-empty string is considered a truthy value.)
// Logical operation
// && and
// || or
// ! not
"Mary loves John" && (!"John loves Mary") || "Single is better"
/*
Let's break it down.
"Mary loves John" && (!"John loves Mary") || "Single is better"
true && (!"John loves Mary") || "Single is better"
true && (!true) || "Single is better"
true && false || "Single is better"
false || "Single is better"
false || true
Now we know what is always true.
*/
// "Single is better"Empty Values
There are two special members in our JavaScript family. null and undefined. They represent nothing. What? So they are meaningless? Well, nothing is something. They indicate the absence of a meaningful value. So when you are getting undefined as your return value, no panic. It just means your program returns nothing at the moment.
Automatic type conversion
One thing people hate about JavaScript is type coercion, which is the automatic or implicit conversion of values from one data type to another (such as strings to numbers).
// See the examples in the book
console.log(8 * null) // → 0
console.log("5" - 1) // → 4
console.log("5" + 1) // → 51
console.log("five" * 2) // → NaN
console.log(false == 0) // → trueYou can check the JavaScript Equality Table. I always use three equals signs (=== and !==) for JavaScript equality to avoid confusion. It checks the value and the type equality. (Or switch to TypeScript once you master JavaScript)
Conclusion
There is a lot of information to cover the basics. But just like meeting new friends in college, the more you hang out together, the more you understand each other. Just make sure you are not Regina George, and try to boycott specific data types. See you next time!