CodeNewbie Community

Kingsley Odibendi
Kingsley Odibendi

Posted on • Updated on

JavaScript Chronicles..

Documenting my JavaScript Journey starting today 16/6/2022

I’ll be the using “TheOdinProject” website as my resource.

Today i learnt about variables.

A variable is a storage container that holds data in your code. I also learnt that there was an old-school format using “var” and the more new-school format using the “let”

An Illustration:
let message = ‘Hello World!’;

Here;
let is our variable keyword
message is the name of the variable
= means an “assignment operator”
Hello World is the data
; is very important also, so never miss it

I also learnt that we could copy data into another. Example:
If we declare let hello = ‘Hello World’;
To copy this data into another variable, we can declare..
let message;
message = hello;
** in this illustration above, we have successfully copied the data in hello into message.

I also learnt that declaring the same variable twice would lead to a syntax error eg:
If we say let message = ‘Hello’;
and also type let message = ‘World’;...we would get a syntax error in our code because we declared the message variable twice..

Lastly, i learnt that we could use symbols like $ and _ as our variable name.

DAY 2 (17/6/22)
Today, i first went through yesterday’s learning briefly.
Then i learnt about Variable naming, and how there are limitations on variable names in JS which are:
1)The name must contain only letters, digits or the symbols ‘$’ and ‘_’
2)The first character must not be a digit.

A side note when naming is that when the name contains multiple words, “camelCase” is commonly used ie every other word starts with a capital letter except the first word eg ‘myCurrentAddress’

Next, i got to know that there are a list of reserved words like “let,class,function,return” that can not be used as variable names because they’re already used by the language itself.
Using this reserved words would result in a syntax error
eg: let return = 5; is an error cause ‘return’ is a reserved word.

I also got to know that in the old times, it was technically possible to create a variable by a mere assignment of the value without using “let”. How?
This works of you don’t put “use strict” in our scripts to maintain compatibility with old scripts. It is a good practice to declare..
num = 7;
alert(num); // 7
...Because we did not include “use strict”
Doing this instead is a bad practice..
“use strict”;
num = 7;

Next, i learnt about “Constants”
•Constants are unchanging variable that cannot be reassigned. Doing so would result in an error. To declare a constant, use ‘const’ instead of ‘let’. Eg:
const myBirthday = ‘19.12.1998’;

•There is a general practice to use constants as alliases for difficult-to-remember values that are known prior to execution. Such constants are named using Capital Letters and Underscores. Eg:
const COLOR_RED = “#F00”;
Benefits of this includes:

  • ‘COLOR_RED’ is easier to remember than “#F00”
  • when reading the code, COLOR_RED is much more meaningful than #F00.

I also learnt about when to use capitals for a constant and when to name it normally..
• We use capitals for constants that are “hard-coded” ie when the value is known prior to execution and directly written into the code. eg: COLOR_RED in the illustration above...whereas
• We name constants normally for those constants that are calculated in run-time during the execution, but do not change after their initial assignment. Eg: const age = someCode(birthday);
Here, age is evaluated in run-time. It is calculated, so we use a lowercase for it.

Lastly, i did some tasks on variables, giving the right name and constants to solidify my learning.

Day 3 (18/6/22)
Firstly, i briefly reviewed yesterday’s lesson and re-did the tasks.

Today, i learnt about “Numbers”
• Numbers are the building blocks of programming logic and there’s hardly any programming task that doesn’t require at least a little basic math. I love math to some extent so this wasn’t scary lol😂.
• Numbers can be ‘literals’ or ‘variables’...egs of literals are 1,2,3 and egs of variables are a,b,c.

The Arithmetic Operators were basic operators like: + - / * etc..some other newer ones like % which is remainder, ** which is exponentiation, ++ which is increment, —- which is decrement etc...
NOTE: The numbers in an arithmetic operation are called “operands”.

Some simple arithmetic examples:
1) ADDITION: The addition operator (+) adds numbers..
<br> let x = 100 + 50;<br> document.getElementById(“demo”).innerHTML = x;<br>
...The output of this arithmetic operation would be 150. p/s:the “demo” would be referenced in the .html file.

2) REMAINDER: The modulus operator (%) returns the division remainder..
<br> let x = 5;<br> let y = 2;<br> let z = x % y;<br> document.getElementById(“demo”).innerHTML = z;<br>
...The output of this arithmetic operation would be 1 because the symbol % means remainder, and 5 divided by 2 gives 2 R 1..

3) EXPONENTIATION: The exponentiation operator (**) raises the first operand(number) to the power of the second operand..

let x = 5;
let z = x ** 2;
document.getElementById(“demo”).innerHTML = x ** 2;

...The output of this arithmetic operation would be 25 because 5 raised to the power of 2 is 5*5 which is 25..

NOTE: There are multiple other operators that could be used for more complex math.

Day 4 (20/6/22)
Happy Coding Week!
•Today i got into more details on “Numbers” referencing MDN web docs and also tested out the console in the dev tools..

I learnt about the different types of numbers in programming which includes:

  • Integers which are floating-point numbers without a fraction, and they can be either positive or negative eg 10,7,-2.
  • Floats which are floating point numbers that have decimal points and decimal places eg 11.25,1.25,56.7724351...
  • Doubles which are specific type of floating point number that have greater precision than standard floating point numbers ie it means that they’re accurate to a greater no of decimal places..

•Also learnt about different types of number systems which includes:

  • Decimal: They are base 10 meaning it comprises of 0-9..
  • Binary: The lowest level computer language which comprises 0s and 1s..
  • Octal: They are base 8 and uses 0-7 in each column..
  • Hexadecimal: came across these in css..they are base 16 and uses 0-9, and a-f in each column.

NOTE: JavaScript only has one data type for numbers, both integers and decimal and it’s “Number”..this means that whatever type of no you’re dealing with in JS, you handle them in exactly the same way.

Next, i walked through some examples to reacquaint with basic syntax, which are:
1) Declare a couple of variables and initialize them with an integer and a float respectively, then type the variable names back in to check everything is in order:
const myInt = 6;
const myFloat = 1.197;
myInt; // this returned 6
myFloat; // this returned 1.197
NOTE: number values are typed in without quotes..

2) To check that both our original variables are of the same datatype, we use an operator called “typeof”:
typeof myInt;
typeof myFloat;
// ‘number’ was returned in both cases..

Next, i learnt about Useful Number Methods..
• The “Number” object represents all standard numbers you’ll use in JS, and has a no of useful methods available on it to manipulate numbers.
For eg, To round your number to a fixed number of decimal places, use the “toFixed()” method. Eg:
const lotsOfDecimal = 1.76658958675746364;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

Next, i learnt about Converting to number data types..
•Sometimes you might end up with a no that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered in a form input, and input type is ‘text’..The way to fix this problem is —- passing the string value into the Number() constructor to return a no version of same value. Eg:
If you declare,
let myNumber = ‘74’;
myNumber += 3;
..The result is 743, not 77 because “myNumber” is actually defined as a string. To test this, type the following in the console:
typeof myNumber;
// this will return ‘string’
To fix the calculation, do this instead:
let myNumber = ‘74’;
Number(myNumber) + 3;
// the result is then 77 as expected..

Next, i learnt about Arithmetic operators which I’ve previously touched on..did basic calculations on addition, multiplication, remainder, exponentiation, increment and decrement and lastly touched on Operator Precedence (this is simply BODMAS where for eg division precedes multiplication and vice versa..)

Day 5 (21/6/22)
Firstly, i reviewed yesterday’s lessons..
Next, i learnt about “Assignment Operators”

• Assignment Operators are operators that assign a value to a variable. The most basic and common one being ‘=‘ — it assigns the variable on the left the value stated on the right. Eg: if you declare,
let x = 7; // this assigns x the value of 7
let y = 9; // this assigns y the value of 9
x = y; // here, x contains the same value as y which is 9..

• There are some more complex types, which provides useful shortcuts to keep our code neater and more efficient. They include:

  • ‘+=‘ this is an addition assignment that adds the value on the right to the variable value on the left, then returns the new variable value. Eg: x += 4; this means that x = x + 4;

  • ‘-=‘ this is a subtraction assignment that subtracts the value on the right from the variable value on the left, then returns the new variable value. Eg: x -= 4; this means that x = x - 4;

  • ‘*=‘ this is a multiplication assignment that multiplies the value on the left by the variable value on the right, then returns the new variable value. Eg: x *= 4; this means that x = x * 4;

  • ‘/=‘ this is a division assignment that divides the value on the left by the variable value on the right, then returns the new variable value. Eg: x /= 4; this means that x = x / 4;

•Next, i learnt about “Comparison Operators”..
We use Comparison operators to run true/false tests then act accordingly depending on the result of that test..
• Some egs of this includes:

  • ‘===‘ this is a strict equality that tests whether the left and right values are identical to one another. Eg: 5 === 2 + 4 // this will return “false” cause 2+4 isn’t equal to 5.

  • ‘!==‘ this is a strict-non-equality that tests whether the left and right values are not identical to one another. Eg: 5 !== 2 + 3 // this will return “false” cause 2+3 is identical to 5.

  • ‘<‘ this is less than, that tests whether the left value is smaller than the right one. Eg: 10 < 6 // this will return false cause 10 is not smaller than 6.

  • ‘>’ this is greater than, that tests whether the left value is greater than the right one. Eg: 10 > 20 // this will return false cause 10 is not greater than 20.

  • ‘<=‘ this is less than or equal to, that tests whether the left value is smaller than or equal to the right one. Eg: 3 <= 2; // this will return false cause 3 is not less than or equal to 2.

  • ‘>=‘ this is greater than or equal to, that tests whether the left value is greater than or equal to the right one. Eg: 5 >= 4; // this will return true cause 5 is greater than 4.

Day 6 (22/6/22)
• Today, i first reviewed yesterday’s lessons.

• Next i started the “Test your math skills” on MDN. This comprises of 3 Math tests to access whether I’ve understood the Basic math in JS - Numbers and Operators.

• Lastly, i asked for feedback in the MDN community..

Day 7 (23/6/22)
• Firstly, i reviewed the feedback i got on my first math test by one of the community leaders, implemented them and updated my code.

•Next, i completed both the second and third math tests. Links below ⤵️
https://www.codepen.io/thewebking_/pen/XWZLGJG
https://www.codepen.io/thewebking_/pen/ZErdPRd

Day 8 (24/6/22)
• Today, i touched more on basic math operators..Also learnt another method to convert strings to numbers besides the Number() function, which is using the unary+ (Also the plus operator)..The unary+ applied to a single value doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number..eg:

// No effect on numbers
let x = 2;
alert (+x); // 2
let y = -4;
alert (+y); // -4
// Converts non-numbers
alert ( +true ); // 1
alert ( +”” ); // 0

• A real application of this is when you have “strings” and convert them to numbers, and sum them up normally. For eg:

If we declare;
let grapes = “3”;
let oranges = “4”;
alert ( grapes + oranges ); // “34”..this is because the binary plus concatenates(merges) strings.
To treat them as numbers instead of strings, we need to convert them and sum them:
let grapes = “3”;
let oranges = “4”;
// both values converted to numbers before binary plus..
alert ( +grapes + +oranges ); //7
// A longer approach would be..
// alert( Number(grapes) + Number(oranges) ); // 7

** This might be confusing to non-programmers, but i learnt that unary plus are applied first cause they have a higher precedence than binary plus.. The unary pluses converts strings to numbers, then the binary pluses sums them up.

•Next, i touched more on the assignment operator(=).. Learnt that Chained assignments evaluate from right to left. Eg:
let a,b,c;
a = b = c = 2 + 2;
alert(a); // 4
alert(b); // 4
alert(c); // 4
First, the rightmost expression 2 + 2 is evaluated then assigned to the variable and on the left: c,b,a..
NOTE: For the purpose of readability, write the code above this way:
c = 2 + 2;
b = c;
a = c;

Day 9 (25/6/22)
• Today, i learnt more on Increment and Decrement..
Increment ++ increases a variable by 1. Eg:
let counter = 2;
counter++; // same as saying counter = counter + 1 but shorter..
alert(counter); // 3 is the output
..The same applies to decrement - - that decreases a variable by 1..
NOTE: increment/decrement only applies to variables. Trying to use it on a value like 5++ will give an error.

• Also, the operators ++ and - - can be placed either before or after a variable.

  • it is in “postfix form” when the operator goes after the variable: counter++ counter—-
  • it is in “prefix form” when the operator goes before the variable: ++counter —-counter

• Looked through a couple of examples and also saw differences between the postfix and prefix form

• Next, i learnt about the BitWise operators which are not commonly used and the comma operators that allows us to evaluate several expressions, dividing them with a comma ,.
Each of the values are evaluated, but only the result of the last one is returned. Eg:
let a = (1 + 2,3 + 4);
alert(a); // 7(the result of 3 + 4)

• Lastly, i attempted the tasks at the end of the article.

Day 10 (26/6/22)
• Today was short, but still put some little work in..
• Did a couple of practice test at the end of theodinproject JavaScript fundamentals part 1.. getting the right outputs in the console felt good, and i feel I’m getting somewhere with this..

Day 11 (27/6/22)
• Firstly, i attempted the knowledge check at the end of the foundation fundamentals part 1..This tests your overall knowledge on each lesson thus far..

• Next, i was referenced to the javascript.info article on “Data Types” which includes Number, String, BigInt, ‘null’ value, “undefined value” and so on...
NOTE: will write a note on this when i finish this article..

Day 12 (28/6/22)
• Today i completed the article on “Data Types”...will publish my summary on the article tomorrow

• Next, i started learning “Strings” specifically in details referencing MDN web docs.

Day 13 (29/6/22)
Data Types
There are 8 basic data types in JS which includes 7 primitive data type and 1 non-primitive data type..

• Number: The number data type represents both integer and floating point numbers. Eg:
let n = 123;
n = 12.345;
NOTE:Besides regular numbers, there are so-called “special numeric values” which also belong to this data type: infinity, -infinity and NaN(not a number)..we can get it as a result of division by zero:
alert( 1 / 0 ); // Infinity or
just reference it directly:
alert( Infinity); // Infinity

  • NaN represents a computational error as a result of an incorrect or an undefined mathematical operation. NaN is sticky, any further mathematical operation on NaN returns NaN. Eg: alert( NaN + 1 ); // NaN alert( 3 + NaN); // NaN ** There’s only one exception to this which is: NaN ** 0 // 1

• BigInt: The BigInt type is used to represent integers of arbitrary length by appending ‘n’ to the end of an integer.
Eg: const bigInt = 12345678901234567890123456789n;

• String: A string must be surrounded by quotes. In JS, there are 3 types of quotes:

  • Double quotes: “Hello”
  • Single quotes: ‘Hello’
  • Backticks: ‘Hello’(symbol isn’t available on mobile) ** Double and single quotes are “simple” quotes, and there’s no difference b/w them in JS. Backticks are “extended functionality” quotes. They allow us to embed variables and expressions into a string by wrapping them in ${..}..For eg: let name = “John”; // embed a variable alert( ‘Hello, ${name}!’ ); // Hello, John! // embed an expression alert( ‘the result is ${1 + 2}’ ); // the result is 3

• Boolean (logical type): The boolean type has only two values: true and false. This type is commonly used to store yes/no values: true means “yes, correct” and false means “no, incorrect”..For instance:
let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked
It can also be used for comparisons:
let isGreater = 4 > 1;
alert (isGreater); // true (the comparison is “yes”)

• The “null” value: The special null value does not belong to any of the above types. It forms a seperate type of its own which contains only the null value.
let age = null;
** null represents “nothing”, “empty” or “value unknown”.

• The “undefined” value: The meaning of undefined is “value is not assigned”. If a variable is declared but not assigned, then its value is “undefined”..
Eg: let age;
alert( age ); // shows “undefined” cause value wasn’t assigned.

• Objects and Symbols: The Object type is special as all other types are called “primitive” because their values can contain only a single thing(be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities.

  • The symbol type is used to create unique identifiers for objects.

• The typeof operator allows us to see which type is stored in a variable..

  • Usually used as typeof x, but typeof(x) is also possible.
  • Returns a string with the name of the type, like “string”.
  • For null returns “object” - this is an error in the language, it’s not actually an object.

Day 14 (30/6/22)
• Today marks 2weeks I’ve been learning javascript..Big milestone for me, and so far so good!!

• I learnt the Basics of “Strings” in details referencing MDN web docs. Things like:

  • Creating a String.
  • Using Single quotes vs Double Quotes.
  • Escaping characters in a string. To do this, we use backlash() just before the character.
  • Concatenating Strings..this involves joining strings together using a different type of string called “template literal” ie backtick characters. It works just like a normal string, except you can include variables in it, wrapped inside ${} characters.
  • Concatenation in Context
  • Concatenation using “+”
  • Numbers vs Strings
  • Including expressions in strings
  • Multiline Strings

Day 15 (1/7/22)
• A new month, and today i learnt a bit more about what i could do with strings, by referencing a W3Schools article on ‘JavaScript string methods’.
...I’ll admit that this was a tad confusing and I couldn’t get a grasp of it..fell asleep couple times too but i believe if i go through the article again and attempt some exercises, I’ll get it.

Day 16 (3/7/22)
• Usually take breaks on Saturdays, and yesterday wasn’t an exception..

• Today, i completed the w3schools article on “JavaScript String Methods” and did the exercises.. My takeaway was that I’m getting to the business side of JavaScript, and while I’ll need to re-read a couple times to really digest this article, learning JS isn’t something to cram or memorize because there’s a lot to know. So my goal is to be able to atleast get a basic grasp of each concept, and i can always reference different articles when i need them in future.

Day 17 (4/7/22)
• Nearly missed journaling today, but better late than never..

• Today, i learnt “Exhaustive list of methods that can be using on Strings”...detailed article on MDN docs, and one I’ll revisit in future to better solidify the concepts.

Day 18 (5/7/22)
• Today, i started learning about “Conditionals”

•Conditionals teach the computer how to make decisions in order to do more involved things.
The first step in learning about conditionals is to have a good grasp of comparisons. In JavaScript, comparisons are written like this:
-Greater/less than: a > b a < b
-Greater/less than or equals: a >= b a <= b
-Equals: a == b the “==“ means equality sign
-Not Equals: a != b

NOTE: All comparison operators return a boolean value ie true or false.

•I also learnt about different types of comparisons which includes:

  • String Comparison: Here, strings are compared letter by letter
  • Comparison of different types: Here, JavaScript converts the values to numbers.
  • Strict Equality: A strict equality === checks the equality without type conversion.
  • Comparison with null and undefined.

** Looked through some examples, tested it on my console and did the tasks at the end. **

Referenced JavaScript.info article..

• Next, I learnt about if, else and else if conditional statements..
In JavaScript, we have the following conditional statements:

  • Use ‘if’ to specify a block of code to be executed if a specified condition is true.
  • Use ‘else’ to specify a block of code to be executed if the same condition is false.
  • Use ‘else if’ to specify a new condition to test if the first condition is false.
  • Use ‘switch’ to specify many alternative blocks of code to be executed

• Referenced w3schools.com article

Day 19 (6/7/22)
• Today, i first revised my summary on yesterday’s lesson.
Next, i learnt about “Logical Operators” which includes:

  • || (OR)
  • && (AND)
  • ! (NOT)
  • ?? (Nullish Coalescing) PS: I only covered the first three today..

• The OR || does the following:

  • Evaluates operands from left to right
  • For each operand, converts it to boolean. If the result is true, stops and returns the original value of that operand.
  • If all operands have been evaluated (ie all were false), it returns the last operand.

• The AND && operator does the following:

  • Evaluates operands from left to right
  • For each operand, converts it to a boolean. If the result is false, stops and returns the original value of that operand.
  • If all operands have been evaluated(ie all were truthy), it returns the last operand.

• The NOT ! operator accepts a single argument and does the following:

  • Converts the operand to boolean type: true/false
  • Returns the inverse value.

NOTE: I referenced JavaScript.info article for this lesson...possibly the best javascript based website. The last task “Check the login” was tricky for me, and had me scratching my head a couple times..it was a combination of variables, comparisons, if conditions and logical operators. I’ll attempt it again tomorrow, this time without looking at the solution to be sure i have it embedded in my head. I can officially say I’m getting to the really business side of JS😬

Day 20 (7/7/22)
• Today, i really took time to re-attempt the “Check the login” task I mentioned yesterday. I made sure I attempted it without first looking at the solution, then while reviewing my mistakes, i ensured I understood the “why” of each step.

• Next, i referred to MDN web docs article that reinforces all these concepts and provided several examples of how to use these concepts in building websites... Not done with the article yet, will continue from “switch statements” tomorrow.

Discussion (0)