DEV Community: Zouhair Sahtout

JavaScript - Loops and iteration

Zouhair Sahtout — Fri, 15 Sep 2023 01:00:19 +0000

Loops offer a quick and easy way to do something repeatedly and for loop and if else statement are one of the other control structure.

Control Structures are just a way to specify flow of control in programs.
Any algorithm or program can be more clear and understood if they use
self-contained modules called as logic or control structures.
It basically analyzes and chooses in which direction a program flows
based on certain parameters or conditions.

Use let variable because this counter will later be updated it by for loop
for loop keeps running while the condition rep <= 10; is TRUE
It verifies the condition first rep <= 10;

Example:
for loop and its practical application.

Now let's learn about two important statements: continue and break

continue: is to exit the current iteration of the loop,
and continue to the next one.

Let's say we want to only log strings to the console.

break : is used to completely terminate the whole loop.
Let's say I want to stop logging, after I find the first number

Looping backwards and Nested loops

We are gonna loop over this array backwards: 3, 2, 1, 0

We are gonna create a nested loop

The while loop

Whenever you do need a loop without a counter variable
You can reach out to for the while loop

Basically that happens, when you do NOT know beforehand how many

iteration the loop will have, in your program.

All the while loop what really needs, is the condition.
In this example it's while(rep <= 10)

and that condition, can be any condition, it does NOT have to be related to any counter at all.

Small game with while loop

JavaScript - Object methods

Zouhair Sahtout — Thu, 14 Sep 2023 00:07:15 +0000

We already said that a "function" is just a value, so we can add function to object as a value

We should avoid passing something manually if we already have it.
In this example we already have the birth year in our object
So to access the birth year property from the object we use **this** keyword.
Which is equal to the object that we calling it from.

Example:

The power of this keyword

Let's say that we need to access the age in our object multiple times throughout our program.
So that would be calling the zouhair.calcAge() multiple times.

In this computation here:
return new Date().getFullYear() - this.birthYear;

it's not big deal, but what if it was a bit heavier, that’s a problem.

Instead when calculate the age once, then store it in the object.

Finally:

Having the exact same code in both of these objects we fall into DRY

Solution:

there's a better way which can avoid this called: Object-Oriented-Programming

JavaScript Objects

Zouhair Sahtout — Wed, 13 Sep 2023 22:34:31 +0000

In JavaScript, an object is a non-primitive, structured data type used to store various keyed collections and more complex entities.

There is many ways of declaring objects, this one called:
The Object Literal Syntax

There's two different ways of accessing to the properties of an object

Using: dot notation:
console.log(zouhair.firstName);

Using: bracket notation:
console.log(zouhair['lastName']);

Different

The big difference between these two up here, in the "bracket notation" we can put an "expression" - (expression produce a value).
Any time we try access a property on an object does NOT exists we get undefined.

Adding properties

Adding new properties to the object using both: dot notation and bracket notation

Operator precedence

In terms of "operator precedence":
. and [] : they have the same precedence which is 17,
and both from left-to-right

Arrays - JavaScript

Zouhair Sahtout — Mon, 11 Sep 2023 12:33:40 +0000

In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index:
1- An array can hold values of mixed types.
For example, you can have an array that stores elements with the types number, string, boolean, and null.
2- The size of an array is dynamic and auto-growing.
In other words, you don’t need to specify the array size up front.

Ways of declaring an array

It does NOT have to be a number, like here we have an expression
An expression produce a value
We can NOT put a statement inside the []. it expect a value (expression).
console.log(friends[friends.length - 1]);

Change or mutate the array

Even I declared the array with const, I still can make changes, this is because only primitive values, are immutable.
Arrays, they are NOT a primitive values, so we can mutate them.

Array - methods

We are gonna use push(), but there's more actually
The push() method in JavaScript adds new items to the end of an array.
The push() method returns the new value of the length property of the array object on which you call the method.

Function - JavaScript

Zouhair Sahtout — Sun, 10 Sep 2023 12:19:33 +0000

Functions are one of the fundamental building blocks in JavaScript.
In JavaScript we have three type of function:
function declaration, function expression, arrow function

Function Declaration:

function declaration (also called a function definition, or function statement) consists of the function keyword:
With function declaration, I can call the function before I define it in the code

Function Expression:

function expression(anonymous function) || remember expression produce a value, that's why we did store in a variable.
With function expression I can NOT call the function before I define it in the code.
Internally this happens because of a process called Hoisting.

Arrow Function

arrow function (just added to JavaScript in ES6).
In one line, without explicitly write the "return"

What type of function should I use?

Arrow functions, since they are easy to write, the answer is NO.
Because there is a fundamental difference, between the arrow function and more traditional functions (function declaration).
In fact the arrow function do NOT get so called this keyword

Function Calling other function

Summary
Most of the time you are gonna use function expression a lot, in JavaScript functions are actually just values.
So just as a number or a string or a boolean value.
Function is NOT a type:
It's not like a string or number type, it's a value
And because it's a value, that's why we can store it in a variable as we did above, the whole function get store it in a variable calcAge2.

I hope that helps I tried my best to explain the main different there's actually more that I did not cover.
And thank you if you read till here really appreciate it.

Strict Mode

Zouhair Sahtout — Sat, 09 Sep 2023 13:19:14 +0000

Using strict mood to write secure JavaScript.

Strict Mode makes it easier for us developers to avoid accidental errors.

Without the strict mode being active it's hard for me to guess where my code is broken.

Strict Mode also introduce a short list of variable names that are reserved for features, that might be added to the language a bit later.

Summary:

Strict mode allows the JavaScript interpreter to make some optimization that it can't do when using non-strict mode.
With that said under strict mode your code may well run faster.
Plus strict mode makes the rules of the language clearer so you are less likely to make a wrong assumption about your code.
Many people using strict mode without even knowing it since ES modules are inherently strict.
So if you're writing code in modules, which is generally how modern JavaScript is written these days, you're using it.

I hope that help clarify what strict mode is and how helpful can be.

Type Conversion and Type Coercion - JavaScript

Zouhair Sahtout — Thu, 07 Sep 2023 08:04:11 +0000

Type Conversion:

In programming, type conversion or type casting is the process of explicitly converting a value from one type to another.
For instance, you may have a string value of '5' and you want to convert it to a number value of 5 so that you can do some arithmetic operations on it.

Converting a string into a number using Number() or the unary plus (+) operator.

Trying to convert the string 'Zouhair' into a number results in NaN (Not-a-Number).

NaN is a special value in JavaScript, representing an "Invalid Number."

We actually get a special "number" called NaN, which stands for Not a Number... Yeah, that's JavaScript for you. A number that is "not a number". There are some really strange and quirky aspects of JavaScript. The good news is that most of it doesn't get in your way in practical development. It's just when we start to dig down deeper.

Type Coercion

Type Coercion is when data types are converted implicitly by JavaScript.
Although the conversion that we did mention above can also be called explicit coercion. There's so many different words for the same thing in programming.
Typically coercion happens when you apply operators to values of different types.

The "+" operator trigger a coercion to strings so whenever an operation between a string and number, the number will convert to a string, and that's exactly what's happen in the template literals.

The "-" operator triggers coercion to numbers converting strings to numbers.

In summary: Type Conversion involves explicitly changing the data type of a value using functions like Number() and String().

On the other hand, Type Coercion is the automatic conversion that occurs during operations between values of different types, such as when the "+" operator converts numbers to strings and the "-" operator converts strings to numbers.

Operator Precedence

Zouhair Sahtout — Wed, 06 Sep 2023 18:48:15 +0000

Hello everyone, I hope you're doing well.

Starting from now, I'm going to dive into some JavaScript do some review after finally completing my associate degree as a Web Full Stack Developer.
I thought it might be a good idea to fill in the gaps that I may have missed during these past two years, where I covered almost everything from HTML, CSS, and JavaScript to Docker and Microservices.

And because I'm now a huge fan of JavaScript, my plan is to dive deep into its intricacies, so let's jump in:
Operator precedence for those who aren't familiar, essentially determines how operators are parsed in relation to each other.
An example of this is when you have an arithmetic operation like 3 + 4 * 5.
The higher the precedence, the earlier the operation is performed with respect to operators with lower precedence.

In the example above, the operation begins with multiplication because it has a precedence of 12 (from left to right), followed by addition with a precedence of 11 (from left to right), which is lower. This is why in mathematics, multiplication and division typically take precedence over addition and subtraction. It's also worth noting that grouping or parentheses have a higher precedence, around 18, so they can change the order of operations.

Now, let's shift our focus to the code below:

Again, the "+" and "-" operators take precedence with a value of 11.
On the other hand, the ">" operator has a precedence of 9.

Usually, all the mathematical operators are executed before the comparison operators, and they are evaluated from left to right.
This is different from the assignment operators, which execute from right to left and have a lower precedence of 2, this behavior is normal.
Let's assume it executed from left to right; then, "x" would be assigned the value of "y," which is undefined.

Alright with that said, if you read till here, thank you so much, that really means a lot.