DEV Community: Mazin Idris

JavaScript Loops

Mazin Idris — Wed, 01 Feb 2023 02:40:58 +0000

Do you think you understand for-loops in JavaScript? Do you want to test your JavaScript for-loops knowledge? You came to the right place!

What are JavaScript For-Loops
JavaScript For-Loops are just loops. They exist in almost every single programming language. Like the name suggests, loops will loop and in our case it would loop JavaScript code! So you can run a certain set of JavaScript code x number of times! However there two important things in regards to for-loops that one must be aware of.

Index in JavaScript For-Loops
When you have a for-loop you will have access to something called an index. Index is an integer (plain number). You can start at 0 or 1 or 2 or even -35. Your choice! You will have access to this index which by the way you can call anything you want in the set of code that you loop through. Most developers choose to call this index “i” without the quotes.

JavaScript For-Loops are Mostly Used in Arrays!
Make no mistake. JavaScript for-loops are mostly used in Arrays. Remember what arrays are. They are just a collection of stuff. So if you want to go through every single element in your array you can use a for-loop! Simple right? You have a bunch of data in an array and you want to…let’s say….print them out to the screen or console. You can use a for-loop for that!

How a JavaScript For-Loop Looks Like

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

This prints

Simple right? Well, let’s break it out real quick.

JavaScript For-Loop Syntax
I am just going to focus on the inner part of the parenthesis ()

Part 1) i = 1

Start our “count” at 1

Part 2) i <= 10

Keep going as long as i is less than or equal to 10

Part 3) i++

Increase i by one everytime

That’s it!

JavaScript For-Loops with Arrays
I feel like any description of JavaScript for-loops without including arrays is an inadequate description. So here we go.

We have an array

let arr = ["Ricciardo", "Verstappen", "Bottas"];

So now let’s print out every single element to the console or screen.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

This will print

Ricciardo

Verstappen

Bottas

Simple right? At least I hope it is.

Now to the exercise! Don’t be nervous. No one is watching you and it is not timed. In fact, no one gives a shit if you do well or not so…no pressure!

JavaScript for-loop Exercise
Using a for loop output the elements in reverse order

let arr = [43, "what", 9, true, "cannot", false, "be", 3, true];

// Example output:
// true 3.5 be false cannot true 9 what 43 OR each item on a new line

Conclusion
Hope JavaScript for-loops make just a little more sense now. If it doesn’t, feel free to schedule a one-on-one tutoring session with me. I would love to help you understand it better.

Routing in Rails

Mazin Idris — Mon, 12 Dec 2022 18:19:19 +0000

What exactly is routing?

When there's an HTTP request from the user to the application, it should be directed to the right controller. You can picture a router as a receptionist at who connects you to the right person to talk to.

How is routing done in Ruby on Rails?

In Rails, the routes of your application live in config/routes.rb. The Rails router recognizes URLs and dispatches them to a controller's action. It can also generate paths and URLs, avoiding the need to hardcode strings in your views. Let's consider an application to book rooms in different Hotels and take a look at how this works.

Types of HTTP request methods:

The application receives an HTTP request which carries along with it a method which could be:

GET - Retrieve a resource
POST - Create a resource
PUT - Completely update a resource
PATCH - Partially update a resource
DELETE - Delete a resource

These methods determine which controller action method is called.

Decoding the http request

If the application receives the request, GET /players/1. The request is dispatched to the players controller's show action with { id: '1' } in params.

get '/teams/:id', to: 'teams#show'

Similarly,

get '/teams', to: 'teams#index'
get '/teams/:id', to: 'teams#show'
get '/teams/new', to: 'teams#new'
post '/teams', to: 'teams#create'
get '/teams/:id/edit', to: 'teams#edit'
put '/teams/:id', to: 'teams#update'
delete '/teams/:id', to: 'teams#destroy'

Defining resources

Like how the team manger holds a record of all the players, the application too has its own record in config/routes.rb.

Rails.application.routes.draw do
  resources :teams
end

By writing resources :teams we create all seven different routes in your application, all mapping to the Teams controller like mentioned above.

If your controller has only a few of these actions you can alter the same with the following keywords.

The keyword only includes only the actions mentioned. resources :teams, only: [:edit]

There's also the keyword except to name the ones you don't want to include.

resources :teams, except: [:index]

resources :players,
resources :teams

Nested Resources
Sometimes we have nested routes, /teams/:id/players which are a result of resources that are logically children of other resources. For example, suppose your application includes these models:

class Team < ApplicationRecord
  has_many :players
end

class Player < ApplicationRecord
  belongs_to :teams
end

In which case we will declare our resources this way,'

resources :teams do
  resources :players
end

This declaration helps us access the nested URLs such as /teams/:id/players , /teams/:id/players/:id , /teams/:id/players/new etc

Ruby Migration.

Mazin Idris — Wed, 16 Nov 2022 02:22:46 +0000

What’s a Rails migration?
A Rails migration is a tool for changing an application's database schema. Instead of managing SQL scripts, you define database changes in a domain-specific language (DSL). The code is database-independent, so you can easily move your app to a new platform.

Migrations are additive. Each one represents a new version of your database schema. Rails applications can evolve, and publishing a new migration with a new release of your application isn’t unusual.

Migrations provide lot of benefits, including:

When working on a large project with different team members, it gets easier to keep track of all the changes that the schema goes through.
Migrations make it easier to rollback to an older schema version, undoing specific migrations.
Rails migrations make changes more readable and easier to understand.
Each developer will know whenever a schema is updated, and they can use migrations to speed up to the latest version.

How to create a migration:

rake db:create_migration NAME=maz

bundle exec rake db:create_migration NAME=maz

Migration table:

class CreateMaz < ActiveRecord::Migration[6.1]
  def change
    create_table :Maz do |t|
      t.string :name
      t.string :address
      t.string :img_url
    end
  end
end

Rolling back migrations

In case a migration has been executed and is now a part of the application’s database schema, it can always be rolled back or reverted to a state prior to when that particular migration altered the schema.

rails db:rollback STEP=1

The command shown above will undo the most recently executed migration. The STEP=1 portion of the command makes sure that only the most recent migration needs to be rolled back. In case we want more than one migration to be rolled back, we can change the number of the STEP flag. For example, STEP=3 would roll back the three most recent executed migrations.

Add a column
One of the most common changes in an app is adding a field to an existing object. So adding a column to a database is a typical migration. If you’re working with Active Records, Rails will create the migration for you.

You can use all of the Rails basic data types with migrations, and it’ll be matched to the corresponding type in the database you migrate to. Here’s a list of data types:

string
text
integer
bigint
float
decimal
numeric
datetime
time
date
timestamp
binary
primary_key
boolean

You can also specify a database-specific data type for a column, but this may cause problems if you try to migrate your application to a new platform.

Conclusion:

Rails migration helps interacting with the Database easier.

By taking advantages of this layer, the app can perform very fast, hence we may consider to understand Rails migration and Database well.

No SQL Database and reactive programming also open new ways to fix some missing features of SQL database. With new technologies, it may outdate? the migration layer in Rails.

Map() Method In React JS.

Mazin Idris — Fri, 04 Nov 2022 02:50:14 +0000

The map() method ? A map is a data collection type where data is stored in the form of pairs. It contains a unique key. The value stored in the map must be mapped to the key. We cannot store a duplicate pair in the map(). It is because of the uniqueness of each stored key. It is mainly used for fast searching and looking up data.

In React, the ?map? method used to traverse and display a list of similar objects of a component. A map is not the feature of React. Instead, it is the standard JavaScript function that could be called on any array. The map() method creates a new array by calling a provided function on every element in the calling array.

How to render an array of objects with Array.map in React?

To render an array of objects in react with JSX we need to use Array.map() to transform the object into something react can make use of because you cannot directly render an object into React. Instead, by using Array.map() to convert each object in the array into something else, like a string or a component we can then render it.

Here is an example of how to render data using Array.map:

import React from 'react';   
import ReactDOM from 'react-dom';   

function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((myList) =>  
    <li>{myList}</li>  
  );  
  return (  
    <div>  
          <h2>React Map Example</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = ['Soccer', 'Basketball', 'Swimming'];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById('app')  
);  
export default App;

In React, map() can be used to generate lists.

How do you map objects in React?
To map through an object's value in React: Use the Object. values() method to get an array of the object's values. Call the map() method on the array of values.

Is map a callback function?
The map() method calls a callback function on every element of an array and returns a new array that contains the results. The map() method takes two named arguments, the first one is required whereas the second one is optional.

What are 3 purposes of a map?

Maps represent the real world on a much smaller scale

They help you travel from one location to another.
They help you organize information.
They help you figure out where you are and how to get where you want to go.

What is map and its advantages?

Two advantages of maps:

Maps are easier to use and easier to carry around.
They can show the earth's entire surface or just a small part and can show even a small locality in a great detail.

What is map in JS?
Map is a collection of elements where each element is stored as a Key, value pair. Map object can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.

How do I map data from API?

Getting Started With API Data Mapping

Data Discovery.
Define a Default Map.
Map Custom Data From Each Instance.
Make Your “Default” A Guideline, Not a Requirement.
Leverage Self-Service Data Mapping Tools.

Here is my final results of my project after Map() to render the data to the home page:

Conclusion:

Using the map() function, you can pretty much do all sorts of manipulations without mutating the original array. The non-mutation part is essential, as it does not cause any side effects by default and makes it easy to debug your code. If you want to mutate the original array, you can use the traditional for or any other type of loop, or you can use the forEach() function which will need another blog to talk about.

Different ways of writing functions in JavaScript

Mazin Idris — Tue, 11 Oct 2022 05:26:20 +0000

in My first phase with Flatiron school i learned how to write functions in a deferent way.

What is a Function?

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

Types of writing a function:

Function Declaration
Function Expression
Arrow Function

What is a Function Declaration:

The function declaration (function statement) defines a function with the specified parameters. You can also define functions using the Function constructor and a function expression
An example of a function declaration:

functions are declared with the following syntax.

function functionName(parameters) {
  // code to be executed
}

Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).

function myFunction(a, b) {
  return a * b;
}

What is a Function Expression:

Function Expression is another way to define a function in JavaScript. Here we define a function using a variable and store the returned value in that variable.
An example of a function expression:

A function expression can be stored in a variable:

const x = function (a , b) {return a * b};

After a function expression has been stored in a variable, the variable can be used as a function:

const x = function (a, b) {return a * b};
let z = x(4, 3);

What is an Arrow Function:

Arrow functions are a new way to write anonymous function expressions, and are similar to lambda functions in some other programming languages, such as Python.
An example of a function arrow:

Before Arrow function

Piece = function() {
  return "One Piece!";
}

After Arrow function

Piece = () => {
  return "One Piece!";
}

It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:

Piece = () => "One Piece!";