Forem: Marlon Munoz

Differences between: forEach(), filter() and map() methods and its case uses.

Marlon Munoz — Mon, 10 Mar 2025 06:07:05 +0000

Here are the use cases for forEach(), filter() and map()in JavaScript:

forEach()

Use forEach() when you need to execute a function on each element of an array without returning a new array.
it is typically used for side effects, such as modifying each element, logging, or updating external variables

const nums = [1,2,3,4];
nums.forEach((num) => {
    console.log(num * 2); // Side effect: logging each element multiplied by 2
});

filter()

Use map() when you need to create a new array containing only the elements that meet a certain condition.
It returns a new array with all the elements that pass the test implemented by the provided function

const nums = [1, 2, 3, 4];
const evenNums = nums.filter((num) => num % 2 === 0);
console.log(evenNums); // Output: [2, 4]

map()

Use map() when you need to create a new array by transforming each element of the original array.
It returns a new array with the results of calling a provided function on every element in the calling array.

const nums = [1, 2, 3, 4];
const halfNums = nums.map((num) => num / 2);
console.log(halfNums); // Output: [0.5, 1, 1.5, 2]

The performance differences between forEach(),filter(), and map() in JavaScript are generally minimal for most use cases, but there are some key points to consider:

forEach():

Performance: forEach() is typically the fastest of the three because it does not create a new array. It simply iterates over the existing array and performs the specified operation
Use Case: Best used for operations that do not required a new array, such as logging, modifying elements in place, or performing side effects.
Summary: Fastest for side effects without creating a new array.

filter():

Performance: creates a new array containing only the elements that pass the test implemented by the provided function. This involves iterating over the array and potentially allocating memory for the new array, which can be slightly slower than forEach().
Use Case: Best used when you need to extract a subset of elements from an array based on a condition.
Summary: Slightly slower due to creating a new array with elements that pass a test

map():

Performance: creates a new array with the result of calling a provided function on every element in the original array. This also involves iterating over the array, which can be slightly slower than forEach().
Use Case: Best used when you need to transform each element of an array into a new form.
Summary: Slightly slower due to creating a new array with transformed elements.

REACT x FLASK setup

Marlon Munoz — Sun, 29 Sep 2024 06:04:26 +0000

WHAT IS FLASK?
FLASK is a lightweight web framework for Python that allows you to build a web app quickly and with minimal boilerplate code. Let's go step-.

LETS START STEP-BY-STEP
Let's start by creating the necessary set up. Go to Vite and copy this command:

npm create vite@latest

I use MAC only, so the setup for WINDOWS might be a bit different. Next, open up the terminal and paste the code you copy from Vite website. Once you run the code you will be prompt to the following:

? Project name: › vite-project

Replace the vite-project with your own project name. After you've given it a name, you are prompt to select the framework, in my case I will select REACT as my framework, but you can select your the framework you are familiar with and hit enter:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Once you've selected your framework, now you can select your variant (language) of choice. I'm familiar with JavaScript so I will choose that. Remember: you need to choose the variant you dominate more and hit the enter tab.

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

After these prompts have been chosen, there are these following commands that are given to you to run them:

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

if you ran those above codes successfully, you will arrive to your local host:

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

You can copy the http address and paste it in your browser and you will see the Vite + React page, that you can now use for your project.

Now open up your code editor, I'm using Visual Studio Code as my code editor. Once again, you can use your favorite editor. Next, inside VSCode's integrated terminal, you need to run these commands separately to get your local host address, to edit and start building your app.

npm install
npm run dev

Let's cd inside src and you will see the following files

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

Inside 'App.jsx' you can edit and/or erase the code inside that file and add your own code accordingly. These file contains the Vite and React logo.

Once you have become familiar with the files you have created, now we can set up the frontend and backend directories. Let's create then by running this code:

mkdir backend; mkdir server; mkdir frontend

Let's get our project setup to look more or less like this:

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

Open two terminal:
One terminal will be for the backend/server and the other will be for the frontend/src.
Inside backend/server run the following commands:

pipenv install && pipenv shell

to ensure all the dependencies are install and to create our Pipfile.

Inside frontend/src run the following commands:

npm install
npm run dev

to ensure all the necessary files such as our package.json files are created.

Part 2 Coming....

PYTHON: OOP {Beginner's Edition}

Marlon Munoz — Mon, 09 Sep 2024 08:14:19 +0000

Python: Object-Oriented Programming [OOP]: is a programming paradigm (model) that uses objects and classes to structure software in a way that models real-world entities and relationships. This is based on the idea that objects can contain data and code that manipulates that data.

There are key concepts you need to know about Object-Oriented Programming:

Class
Object
Attributes
Methods
Inheritance
Encapsulation
Polymorphism
Abstraction

The example below, is an example to help you reference the concepts being explained and to give you a graphical idea of how each concept looks like inside of on object, if you are starting to learn OOP, this will help you grasp what each concept is doing.

class Car:
    def __init__(self, make, model, year, color):
        self.__make = make
        self.model = model
        self.year = year
        self.color = color

    def drive(self):
        print(f"The {self.year} {self.__make} {self.model} is driving")

# GETTER method for make
    def get_make(self):
        return self.__make

# SETTER method for make
    def set_make(self, make):
        self.__make = make


class ElectricCar(Car):
    def __init__(self, make, model, year, battery_size):
        super().__init__(make, model, year)
        self.battery_size = battery_size

    def drive(self):
        print(f"The {self.year} {self.make} {self.model} with a 
{self.battery_size}-kWh battery is driving silently.")

my_car = Car("McLaren Automotive", "Artura Spider", 2024, "Red/Black")
my_electric_car.drive()

What is a Class:?
In Python, a Class: is a blueprint for creating objects. It defines a set of attributes and methods that the created objects will have. For instance, you can quickly define a class like this:

class Car:

What is an Object?
In Python, and object is an instance of a class. It is created using the class blueprint and can have its own unique data. For example you can create an object like this:

my_car = Car("McLaren Automotive", "Artura Spider", 2024, "Red/Black")
my_electric_car

What are Attributes?
In Python, attributes are variables that belong to a class or an object. They represent the state or data of the object. An example of an attribute looks like this:

    self.color = color

What are Methods?
In Python, methods are functions that belong to a class. They define behaviors or actions that the objects can perform. An example of a method looks like this:
TIP: when defining a method, you can add pass; temporally so that python won't throw an error when running the file.

    def drive(self):
        pass;

What is Inheritance?
In Python, an Inheritance is a mechanism where a new class (child class) inherits attributes and methods from an existing class (parent class). An example:

ElectricCar inherits from Car

class ElectricCar(Car):

What is Encapsulation?
Encapsulation in a bundling of data (attribute) and methods that operate on the data into a single unit (class), and restricting access to some of the object's components. In addition, you can make it a private variable by prefixing it with double underscores __. Additionally, you should provide a getter and a setter methods to access and modify the private variable.
For example, you can set a private variable like this:

self.__make = make

And add the Setter and Getter to access and modify the private variable

    # Getter method for make
    def get_make(self):
        return self.__make

    # Setter method for make
    def set_make(self, make):
        self.__make = make

Getter Method: get_make method is added to access the private variable __make

Setter Method: set_make method is added to modify the private variable __make

This encapsulates the make attribute, ensuring it is not directly accessible from outside the class, thus providing better encapsulation and control over the attribute.

{useState} HooK { Briefly Explained};

Marlon Munoz — Mon, 09 Sep 2024 04:49:57 +0000

useState is a React Hook that allows you to add state to your components by returning an array with two variables: state, setState. The current state and the function that becomes the setter function when it is called. It can be used to track data or properties that need to be tracked in an application, such as strings, numbers, booleans, arrays, or objects.
Example:

const [state, setState] = useState();

In simple terms, state will change at some any point and it needs to be updated, therefore 'setState' will update the state, triggering a re-render of your components over time.

In addition, useState can hold any kind of Javascript value, including objects. Something to ALWAYS keep in mind is that you should never change objects that you hold in React state directly. First, you need to create a new one or create a copy of an existing one and then setState to the new copy. For example:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

To use useState in a React component, first you need to import it form React by writing the following code in the top of the component's page in two different ways, both work perfectly so you can choose your poison.

import React from 'react'; 
import {useState} from 'react';

or you can write in one line

import React, {useState} from 'react';

React Hook useState can be called at the top level of a component or within custom hooks but not inside loops or conditions.

const [initialState, setInitialState] = useState();

the initialState is only used during the initial render and will be disregard in subsequent renders.

React HooK= { Briefly Explained};

Marlon Munoz — Mon, 19 Aug 2024 05:17:50 +0000

const [state, setState] = useState();

In simple terms, state will change at some any point and it needs to be updated, therefore 'setState' will update the state, triggering a re-render of your components over time.

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

import React from 'react'; 
import {useState} from 'react';

or you can write in one line

import React, {useState} from 'react';

React Hook useState can be called at the top level of a component or within custom hooks but not inside loops or conditions.

const [initialState, setInitialState] = useState();

the initialState is only used during the initial render and will be disregard in subsequent renders.
The initialState function is passed to the setInitialState function, it takes the previous state as an argument, and returns a newState.

Furthermore, in my opinion, there are no special rules about where you can and cannot use Hooks in React. Of course, you have to be cautious and tactical to keep you code organized.

In one of my projects, building a SPA(Single Page App) there were various components to achieve my goal. The secret to be well organize, is to keep track of your components. For instance, your App.js component will use {useState} depending on what type of data needs updating.
Let's introduce another powerful hook from React called: {useEffect} and use it along {useState} to explain how these hook perform operations on data. The following example comes from my App.js component I used in a recent project. I was working with a db.json file data for toys that will help children development for the first year. This is my endpoint http://localhost:4000/toys to help you understand the process of how {useState} and {useEffect} work inside inside of an application component.

First: Initialize State:

const [toys, setToys] = useState([]);

This line initializes a state variable toys with an empty array [] as the initial value.
setToys is a function that will be used to update the toys state.

Second: Fetch Data on Component Mount:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

The {useEffect} hook is used to perform side effects in the component.
The function inside {useEffect} will run once when the component mounts because the dependency array ([]) is empty.

Third: Fetch Toys Data:

fetch("http://localhost:4000/toys")
- This line makes a GET request to the specified URL to fetch toys data.
.then(response => response.json())
- the response from the fetch request is converted to JSON format.
.then(toysData => setToyData(toysData));
- The JSON data (toysData) is used to update the toys state using the setToys function.

To understand more in depth how both {useState, useEffect} work you can visit the official React website. In addition, another helpful source is w3schools website, that is my personal favorite. It goes straight to the point with examples that you can try in their own browser. Lastly, if you need a more technical source, the mdn web docs will help you.

let, var or const, what's the difference?

Marlon Munoz — Sun, 28 Jul 2024 07:24:11 +0000

let, var , const? when do we use this variables really?
Back in 2018, I got the opportunity to play around a little bit with JavaScript. During that year, I was thrilled to learn how this language performs. The first thing I learned was to declare a variable. My first variable was var name = 'el marlo' after I so this variable be used within my function and console.log(name) // => el marlo. As a beginner programmer, I got excited. Fast forward to 2024, officially starting my journey into Software Engineering, getting my hands into JavaScript after so many years and a lot of this have changed. The first thing I noticed, there were more options to declare a variable? What is let and const, I was only familiar with var.

`var`

var is the oldest keyword for declaring variable. Therefore, let's address the difference against the other two: let and const to help us decide which one should go into our code.

I learned that var was a keyword that if you are planning to use, to be very careful or don't use it at all due to a lacking in block scope or in plain english, the code that goes inside the curly braces {}. In addition, it can create bugs in your code because var variables can be re-declared and updated:

var favHobby = "Eskate";
var favHobby = "Sleeping";
var favHobby = "Joking";

console.log(favHobby); // => Joking
console.log(favHobby); // => Joking
console.log(favHobby); // => Joking

`let`

letis the update version of var. This variable is blocked scoped, which means that unlike var, anything that we declare within {curly braces will only be available within this scope}:

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // Expected output: 2
}

console.log(x);
// Expected output: 1

Example from: mdn web docs
In addition, let can be updated but NOT re-declared.

`const`

const is the more reliable variable to used for the following reasons: const declarations are block scoped: which means it is only accessible {within the block}. Another strong reason is, const cannot be updated or re-declared unless it is an object. If const was an object, then properties could be added, removed or updated.

const number = 42;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // Expected output: TypeError: invalid assignment to const 'number'
  // (Note: the exact output may be browser-dependent)
}

console.log(number);
// Expected output: 42

Example from: mdn web docs