DEV Community: Min

Building a Full Stack Application with Ruby on Rails and React within the MVC Architecture

Min — Fri, 20 Oct 2023 17:44:04 +0000

In the ever-evolving landscape of web development, constructing user-friendly platforms is crucial. One key to achieving this lies in understanding and implementing architectural patterns like the Model-View-Controller (MVC) architecture. MVC divides an application into three interconnected components: the Model, the View, and the Controller.

Understanding the Model-View-Controller (MVC) Architecture:

Model: The Model represents the application's data and logic. In our case, it's the backend logic and the database in Ruby on Rails. In the example below, the Post model encapsulates the data structure, defining attributes like title and content. It ensures data integrity, validating user inputs and managing interactions with the database.
View: The View focuses on presenting the data to users. In our setup, React components, such as the PostsList, act as the View. They render the data fetched from the backend, providing the visual interface users interact with.
Controller: The Controller serves as an intermediary between the Model and the View. In our architecture, the Rails PostsController takes center stage. It receives requests from the frontend, interacts with the Model to retrieve or store data, and then sends the processed data to the View for display. The Controller ensures seamless communication between the backend and the frontend.

Now, Let's Dive Deeper:

Set up the Backend with Ruby on Rails:
Ruby on Rails is renowned for its convention-over-configuration approach. Here's how we initiate our backend development:

Step 1: Generate a new Rails application:

$ rails new myapp

Step 2: Create a Post model:

$ rails g model Post title:string content:text
$ rails db:migrate

Step 3: Define the API endpoints in the controller:

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
    render json: @posts
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      render json: @post, status: :created
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

In the above code, we define the PostsController with the index and create actions. The index action retrieves all posts from the database and renders them as a JSON response. The create action creates a new post based on the parameters received and returns the created post or error messages in JSON format.

Configuring the Frontend with React:
React, a popular JavaScript library for building user interfaces, integrates seamlessly with our Rails backend. Here's how you set it up:

Step 1: Set up a React application using Create React App

npm create-react-app myapp_frontend

Step 2: Create a PostsList component to fetch and display posts:

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

function PostsList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default PostsList;

In the PostsList component, we use React's useEffect hook to fetch the posts data from the Rails backend API endpoint (/posts) when the component mounts. The fetched data is stored in the posts state variable and then mapped to render each post's title and content.

Integrating Backend and Frontend in the MVC Architecture:
To unify our Rails backend and React frontend, we configure the frontend to communicate with the backend API endpoints via the routes.rb file. Linking React components to these endpoints enables seamless data exchange between the frontend and backend.

# config/routes.rb
Rails.application.routes.draw do
  resources :posts, only: [:index, :create]
end

This sets up the necessary routes for the PostsController actions.

Lastly, incorporate the PostsList component into your React application to display the posts.

Conclusion:
By harnessing the capabilities of Ruby on Rails as the backend framework and React as the frontend library within the MVC architecture, we establish a solid foundation for a full stack web application. This overview only covers the essentials of this integration. Rails manages the backend intricacies, ensuring data accuracy and consistency, while React empowers us with a dynamic and interactive user interface. Although this overview provides just a glimpse, the potential of this integration in web development is vast and exciting.

Happy coding!

Query Like a Pro: Active Record for Database Queries

Min — Sun, 24 Sep 2023 00:46:06 +0000

Ruby on Rails is a popular web application framework known for its convention over configuration approach. One of the key components of Rails is Active Record, which provides an intuitive and powerful way to interact with relational databases. In this blog, we will explore the fundamentals of Rails Active Record and delve into querying data using a relational database. Code examples are alsp provided to help better understand code examples to help you understand and utilize Active Record effectively.

Understanding Active Record:
Active Record is the Object-Relational Mapping (ORM) layer in Ruby on Rails. It facilitates the interaction between Ruby objects and the underlying relational database. Active Record automatically maps database tables to Ruby classes and provides methods for data manipulation, querying, and establishing relationships between models.

Connecting to a Database:
To establish a connection with a relational database, Rails uses the config/database.yml file, which contains database configuration details. By default, Rails supports popular databases like PostgreSQL, MySQL, and SQLite.

Defining Models and Migrations:
Models in Rails represent database tables. They encapsulate business logic and provide an interface for querying and manipulating data. Migrations are used to define and modify the database schema. Here's an example of creating a User model and its corresponding migration:

# Create User model
rails generate model User name:string email:string

# Run migration
rails db:migrate

Querying Data with Active Record:
Active Record provides a concise and readable syntax for querying data from the database. It offers a wide range of querying methods to fetch records that match specific conditions. Let's look at some common querying scenarios using Active Record:

Retrieving All Records:
To fetch all records from the users table, you can use the following code:

users = User.all

Retrieving Specific Records:
To retrieve records that meet specific conditions, you can use the where method. For example, to get all users with the name "John":

johns = User.where(name: "John")

Chaining Conditions:
Active Record allows you to chain multiple conditions together. For example, to find users named "John" with an email ending in "@example.com":

johns = User.where(name: "John").where("email LIKE ?", "%@example.com")

Ordering Results:
You can order the query results using the order method. To retrieve users in ascending order of their names:

users = User.order(:name)

Limiting and Offsetting:
To limit the number of records returned or skip a certain number of records, you can use the limit and offset methods. For example, to fetch the first five users:

users = User.limit(5)

Aggregating Data:
Active Record provides methods for aggregating data, such as counting records, calculating averages, and summing values. For instance, to count the number of users:

count = User.count

Finding a Single Record:
To find a single record based on a specific condition, you can use the find_by method. For example, to find a user with the email "john@example.com":

user = User.find_by(email: "john@example.com")

This will return the first user that matches the condition.

Selecting Specific Columns:
You can specify which columns to retrieve from the database using the select method. This is useful when you only need specific attributes of the records. For example, to get the names of all users:

names = User.select(:name)

This will return an array of user objects with only the name attribute loaded.

Using OR Conditions:
Active Record allows you to construct complex queries with OR conditions using the or method. For example, to find users named "John" or "Jane":

johns_and_janes = User.where(name: "John").or(User.where(name: "Jane"))

This will retrieve users with the name "John" or "Jane."

Count with Conditions:
You can count records that meet specific conditions using the where method in combination with count. For example, to count the number of users with the name "John":

count = User.where(name: "John").count

This will return the count of users with the name "John."

Finding Records Within a Range:
You can find records within a numeric or date range using the where method. For instance, to find all users created between two dates:

start_date = Date.parse("2023-01-01")
end_date = Date.parse("2023-12-31")

users_in_range = User.where(created_at: start_date..end_date)

This retrieves users whose creation dates fall within the specified range.

Grouping and Counting:
Active Record enables you to group records by a specific attribute and count the occurrences. For example, to count the number of users per email domain:

email_counts = User.group(:email_domain).count

This will return a hash with email domains as keys and the corresponding count of users.

As you can see, Active Record simplifies database interactions in Ruby on Rails by providing a convenient and intuitive way to query and manipulate data. The examples above showcase the versatility of Active Record in querying data from relational databases. This blog only scratches the surface of what Active Record can do, but it should provide you with a foundation to start working with relational databases in Rails.

Happy coding!

Object-Oriented Ruby Programming: A Beginner's Guide

Min — Sun, 24 Sep 2023 00:30:11 +0000

Object-Oriented Programming (OOP) is a powerful paradigm that allows developers to organize code into reusable and modular structures. Ruby, with its elegant syntax and dynamic nature, is an excellent language for implementing OOP principles. In this blog, we will explore the foundations of Object-Oriented Ruby and how it enables us to build efficient and scalable applications. We will dive into classes, objects, instance variables and methods, class variables and methods, self, and demonstrate how these concepts come together to enhance code organization and reusability. Let's get started!

Classes and Objects:
In Ruby, everything is an object, and classes act as blueprints for creating objects. Let's take a closer look at classes and objects:

class Person
  def initialize(name)
    @name = name
  end

  def greet
    puts "Hello, #{@name}!"
  end
end

person = Person.new("John")
person.greet # Output: Hello, John!

In the above code, we define a Person class with an initialize method that takes a parameter name and assigns it to the instance variable @name. The initialize method is a special method in Ruby that gets called when a new object of the class is created using the new method. We create a new object of the Person class and call the greet method on it. This demonstrates the fundamental concept of OOP, where objects are instances of classes and can invoke methods defined within those classes.

Instance Variables and Methods:
Instance variables, denoted with the @ symbol, are used to store data that is unique to each object instance. Instance methods are defined within the class and can access and manipulate instance variables. Let's see an example:

class Person
  def initialize(name)
    @name = name
  end

  def introduce
    puts "Hello, my name is #{@name}."
  end
end

person = Person.new("Jane")
person.introduce # Output: Hello, my name is Jane.

In the above code, the Person class has an instance variable @name, which stores the name of the person. The introduce method accesses the @name instance variable and outputs a greeting along with the name of the person.

Class Variables and Methods:
In addition to instance variables and methods, Ruby also supports class variables and methods. Class variables, denoted with @@, are shared among all instances of a class. Class methods are defined at the class level and can be called on the class itself rather than an instance of the class. Let's see an example:

class Person
  @@count = 0

  def initialize(name)
    @name = name
    @@count += 1
  end

  def self.total_count
    puts "Total number of people: #{@@count}"
  end
end

person1 = Person.new("John")
person2 = Person.new("Jane")

Person.total_count # Output: Total number of people: 2

In the above code, the Person class has a class variable @@count, which keeps track of the total number of instances created. The initialize method increments the @@count variable whenever a new object is created. The total_count method is a class method denoted with self, which can be called on the class itself to display the total count.

Self:
The keyword self refers to the current object or class within Ruby code. It allows us to access the current object's instance variables and invoke its methods. Let's see an example:

class Person
  def initialize(name)
    @name = name
  end

  def introduce
    puts "Hello, my name is #{self.name}."
  end

  def name
    @name
  end
end

person = Person.new("Alice")
person.introduce # Output: Hello, my name is Alice.

In the above code, the introduce method uses self.name to access the instance variable @name of the current object. Using self allows us to differentiate between local variables and instance variables of the object.

Object-Oriented Ruby provides a powerful and flexible approach to building efficient and scalable applications. By leveraging classes, objects, instance variables and methods, class variables and methods, self, and other OOP concepts, we can organize code into reusable and modular structures. Understanding and applying these concepts allows us to write cleaner, more maintainable, and extensible code.

Happy coding!

Building Cool Features with ReactJS

Min — Mon, 26 Jun 2023 20:49:29 +0000

ReactJS has revolutionized the way we build user interfaces, offering a component-based approach that enhances reusability, maintainability, and scalability. To effectively build out features in ReactJS, it's essential to understand the core principles that govern its design. In this blog, we'll explore the fundamentals of ReactJS and delve into the decision-making process for implementing features by considering the need for state, state placement, required props, and data passing mechanisms. Along the way, we'll provide code examples and pro tips to assist you in your React journey.

1] Understanding the Need for State:
ReactJS embraces the concept of state as a fundamental building block. State represents the data that changes over time and affects the behavior and appearance of components. When considering whether to utilize state for a feature, ask yourself: Does this feature have dynamic data that can change during runtime? If the answer is yes, state is likely necessary.

Pro Tip:

Avoid overusing state and keep it minimal to maintain a clear and manageable codebase.

2] Determining the Optimal State Placement:
Identifying where to store state within a React application is crucial for proper component design. React offers two primary options: local component state and shared state using a state management library like Redux or React Context.

Local Component State: For features that are confined to a single component and do not require sharing data with other components, local component state is often sufficient. State is declared and managed within the component itself using the useState hook, ensuring that only the relevant component has access to and controls the state.

Code Example:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

Shared State: In cases where multiple components need access to the same data or when state management becomes complex, utilizing a state management library is beneficial. Redux and React Context provide mechanisms to create a shared global state accessible across components, simplifying data flow and allowing efficient updates.

Pro Tip:

When using shared state management libraries, consider using selectors to derive data from the global state and pass it as props to individual components, reducing unnecessary re-rendering.

3] Identifying Required Props:
Props (short for properties) are used to pass data from parent components to their children. When building features, carefully consider the data that each component needs to render correctly or perform its functionality. Determine the specific props required by each component and ensure they are defined and passed down accordingly.

Pro Tip:

Destructure props in function components to improve code readability and avoid unnecessary repetition.

Code Example:

import React from 'react';

const UserCard = ({ name, email, role }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
      <p>Role: {role}</p>
    </div>
  );
};

export default UserCard;

4] Passing Data to Components:
React offers several ways to pass data between components effectively. The choice depends on the relationship between the components and the complexity of the data being shared.

Parent-to-Child Data Passing: The most common method is passing data from a parent component to its child component using props. Parent components include the necessary data as props when rendering the child component, enabling it to access and utilize that data as needed.

Code Example:

import React from 'react';
import UserCard from './UserCard';

const UserList = () => {
  const users = [
    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
  ];

  return (
    <div>
      {users.map(user => (
        <UserCard
          key={user.email}
          name={user.name}
          email={user.email}
          role={user.role}
        />
      ))}
    </div>
  );
};

export default UserList;

Child-to-Parent Data Passing: To pass data from a child component to its parent, callbacks or event handling functions can be employed. The parent component passes a function as a prop to the child, which the child can then call, passing any relevant data as arguments.

Pro Tip:

Consider using the useCallback hook to memoize callbacks in order to optimize performance.

Code Example:

import React, { useState } from 'react';

const CommentBox = ({ onAddComment }) => {
  const [comment, setComment] = useState('');

  const handleSubmit = () => {
    onAddComment(comment);
    setComment('');
  };

  return (
    <div>
      <textarea value={comment} onChange={e => setComment(e.target.value)} />
      <button onClick={handleSubmit}>Add Comment</button>
    </div>
  );
};

export default CommentBox;

As you can see, React allows us to build features that are efficient, maintainable, and scalable. Understanding when and where to utilize state, deciding on state placement, identifying required props, and implementing effective data passing mechanisms are key aspects of this process. Remember, React is a versatile library, and various scenarios may require different approaches.

Happy coding!

Demystifying Active Record Associations

Min — Wed, 10 May 2023 19:03:30 +0000

As a programmer, understanding how to work with databases is crucial for building robust web applications. One fundamental concept in database management is Active Record associations. In this beginner's guide, we'll explore the world of Active Record associations, how they simplify data relationships, and how to use them effectively in your Ruby on Rails applications.

What are Active Record Associations?

Active Record Associations define relationships between database tables/models.
They enable you to create connections such as one-to-one, one-to-many, and many-to-many between different models.
Associations provide methods to retrieve and manipulate associated data, simplifying complex database queries.

One-to-One Associations:

One-to-One relationships exist when a record in one table is associated with exactly one record in another table.
Explore examples like User and Profile models, where a User has one Profile.
Learn how to define a one-to-one association using the has_one and belongs_to methods in Rails.

# app/models/user.rb
class User < ApplicationRecord
  has_one :profile
end

# app/models/profile.rb
class Profile < ApplicationRecord
  belongs_to :user
end

One-to-Many Associations:

One-to-Many relationships occur when a record in one table is associated with multiple records in another table.
Examine scenarios like User and Post models, where a User can have multiple Posts.
Discover how to define a one-to-many association using the has_many and belongs_to methods in Rails.
Explore additional features like dependent options (e.g., dependent: :destroy) and foreign key customization.

# app/models/user.rb
class User < ApplicationRecord
  has_many :posts
end

# app/models/post.rb
class Post < ApplicationRecord
  belongs_to :user
end

Many-to-Many Associations:

Many-to-Many relationships are used when multiple records in one table are associated with multiple records in another table.
Discuss examples like User and Role models, where a User can have many Roles, and a Role can have many Users.
Understand how to define a many-to-many association using the has_many :through method in Rails.
Explore the concept of a join table and how it facilitates the relationship between models.

# app/models/user.rb
class User < ApplicationRecord
  has_many :user_roles
  has_many :roles, through: :user_roles
end

# app/models/role.rb
class Role < ApplicationRecord
  has_many :user_roles
  has_many :users, through: :user_roles
end

# app/models/user_role.rb
class UserRole < ApplicationRecord
  belongs_to :user
  belongs_to :role
end

Querying and Eager Loading with Associations:

Learn how to retrieve associated data efficiently using methods like joins, includes, and eager_load.
Understand the difference between eager loading and lazy loading.
Explore examples of querying and manipulating associated data using ActiveRecord methods.

Best Practices and Common Pitfalls:

Gain insights into best practices for naming associations, table structures, and model relationships.
Discuss potential pitfalls like circular dependencies and the necessity of indexing foreign keys.
Understand the importance of testing and validating your associations.

Here are some code snippets illustrating best practices and common pitfalls when working with Active Record associations:

Best Practice: Naming Conventions
It's important to follow Rails' naming conventions for associations and foreign keys.

# Good example
class User < ApplicationRecord
  has_many :posts
end

class Post < ApplicationRecord
  belongs_to :user
end

Common Pitfall: Missing Index on Foreign Key
Adding an index on foreign keys can significantly improve query performance.

# Migration file
class AddIndexToPosts < ActiveRecord::Migration[6.1]
  def change
    add_index :posts, :user_id
  end
end

Best Practice: Validations
Apply necessary validations to maintain data integrity in your associations.

class User < ApplicationRecord
  has_many :posts
  validates :username, presence: true, uniqueness: true
end

class Post < ApplicationRecord
  belongs_to :user
  validates :title, presence: true
end

Common Pitfall: Inefficient Queries
Avoid inefficient queries by selecting only the necessary fields when working with associations.

# Bad example (selecting all fields)
@users = User.includes(:posts).all
@users.each do |user|
  user.posts.each do |post|
    puts post.title
    puts post.content
    puts post.created_at
    # ...
  end
end

# Good example (selecting specific fields)
@users = User.includes(:posts).select(:id, :username)
@users.each do |user|
  user.posts.each do |post|
    puts post.title
  end
end

As you can see, by following these best practices and avoiding common pitfalls, you'll ensure your Active Record associations are well-structured, efficient, and maintainable. Understanding how to define and utilize associations is essential for building dynamic and interconnected web applications with Ruby on Rails. By leveraging Active Record associations, you can simplify complex data relationships and unlock the full power of your database.

Happy coding!

The World of CRUD: Understanding HTTP Methods for Web Development

Min — Mon, 27 Feb 2023 11:54:01 +0000

When it comes to web development, understanding the Request-Response cycle and the role of HTTP methods is crucial. In this article, we'll explore the basics of the Request-Response cycle, the HTTP protocol, and the CRUD operations associated with HTTP methods. This knowledge forms the foundation for building robust web applications.

The Request-Response Cycle:
At its core, the Request-Response cycle is the process of communication between a client (such as a browser) and a server. The client sends a request to the server, which then processes the request and generates a response. The response is then sent back to the client, where it is rendered on the browser.

HTTP: The Language of the Web:
HTTP (HyperText Transfer Protocol) is the language used for communication between clients and servers. It enables fetching resources and exchanging data. HTTP operates within the architectural style called REST (Representational State Transfer), which provides a standardized approach to building web applications.

Understanding CRUD Operations:
CRUD is an acronym for Create, Read, Update, and Delete - four fundamental operations used to manipulate data in a system. These operations align with the HTTP methods and form the basis for interacting with a relational database.

GET: Read/Retrieve

The GET method is used to retrieve a representation of a resource from the server. It does not modify any resources. When a client sends a GET request, the server responds with the requested data.

POST: Create

The POST method is used to send data to the server to create a new resource. When a client sends a POST request, the server processes the data and creates the requested resource.

PATCH: Update

The PATCH method is used to update an existing resource on the server. It involves sending data that represents the changes to be made to the resource. The server then applies those changes to the specified resource.

DELETE: Destroy

The DELETE method is used to remove an existing resource from the server. When a client sends a DELETE request, the server identifies and deletes the specified resource.

To confirm your resource has been deleted, send a GET request to that specific endpoint. Your response should be null.

In web development, the Request-Response cycle, HTTP methods, and CRUD operations play a vital role. Understanding how these components work together is essential for building efficient and robust applications. The GET method retrieves data, the POST method creates new resources, the PATCH method updates existing resources, and the DELETE method removes resources.

Happy coding!

Inverse Data Flow in React: Updating Parent from Child Components with Callback Functions

Min — Mon, 19 Dec 2022 06:18:48 +0000

In React, data typically flows down from parent to child components through props. However, there may be scenarios where we need to update the parent component when changes occur in the child component. In this tutorial, we'll explore inverse data flow in React and learn how to update the parent component by using callback functions. We'll build a simple example where a button click in the child component updates the state and changes the heading in the parent component.

Setting up the Components:
We'll create two components: Parent and Child. The Parent component will render the Child component and display a heading. The Child component will have a button that triggers the state update in the parent component.

Parent.js

import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
   const [header, setHeader] = useState('I am a Parent');

   return (
     <div className="parent">
        <h1>{header}</h1>
        <Child handleClick={(newHeader) => setHeader(newHeader)} />
     </div>
   );
}

export default Parent;

Child.js

import React from 'react';

const Child = (props) => {
    return (
      <div className="child">
        <h1>I am a Child</h1>
        <button onClick={() => props.handleClick("I am a Changed Parent")}>Click</button>
      </div>
    );
}

export default Child;

Explanation:

In the Parent component, we use the useState hook to create a state variable called header and its corresponding setter function, setHeader. The initial value of header is set to "I am a Parent".
The Parent component renders the Child component and passes a callback function handleClick as a prop.
In the Child component, we have a button with an onClick event that invokes the handleClick function passed from the parent. When the button is clicked, it triggers the callback function and passes the new header value as an argument.
Inside the callback function in the Parent component, we update the state by calling setHeader with the new header value.
The updated state causes a re-render, and the new header value is displayed in the parent component.

Inverse data flow in React allows us to update the parent component when changes occur in the child component. By passing callback functions as props from the parent to the child, we can modify the state in the parent component based on child interactions. This approach allows for better separation of concerns and modularization of components, as the child component doesn't directly modify the parent's state but instead notifies the parent to handle the state update. Understanding this concept is essential for managing data and state across different components in a React application.

Happy Coding!

Resources:

Thinking in React

React Interactivity: Events and State

Lifting State Up

JavaScript Arrays: Exploring Methods and Immutability

Min — Thu, 29 Sep 2022 23:57:45 +0000

Arrays are a fundamental data structure in JavaScript that allow us to store and manipulate collections of elements. In this article, we'll explore arrays, learn about accessing elements by index, and delve into some commonly used array methods. Additionally, we'll discuss array mutability and techniques to create immutable arrays.

Creating and Accessing Elements in Arrays:
Arrays are created using square brackets and can hold various data types, including numbers, strings, booleans, functions, and even other arrays. Each element in an array is assigned an index, with the first element starting at index 0. To access elements in an array, we use bracket notation.

// An array containing numbers
const numberArray = [1, 2, 3, 4, 5];

// An array containing strings
const stringArray = ['one', 'two', 'three', 'four', 'five'];

// Accessing elements in the array
console.log(stringArray[0]); 
// "one"
console.log(stringArray[1]); 
// "two"
console.log(stringArray[2]); 
// "three"

Commonly Used Array Methods:
JavaScript provides several built-in methods that make working with arrays more convenient and efficient. Let's explore three useful array methods: map, filter, and forEach.

1) map: This method transforms each element in an array and returns a new array with the modified elements. It executes a callback function on each item and replaces it with the result.

Example:

const numbers = [1, 2, 3, 4, 5] 
numbers.map(num => num * 2); 
// [2, 4, 6, 8, 10]

2) filter: The filter method creates a new array containing elements that satisfy a given condition. It executes a callback function on each item and returns a new array with only the elements that meet the condition.

Example:

const movies = [
   {
      title: 'Golden Eye',
      category: 'Thriller',
      rating: 95,
      year: 2010
   },
   {
      title: 'The Avengers',
      category: 'Action',
      rating: 98,
      year: 2020
   },
   {
      title: 'Love Actually',
      category: 'Romantic comedy',
      rating: 85,
      year: 1998
   },

]


movies.filter(movie => movie.title); 
// [{title: 'Golden Eye'}, {title: 'The Avengers'}, {title: 'Love Actually'}]

3) forEach: The forEach method executes a callback function on each element in an array. It is useful for performing operations on each item without creating a new array.

Example:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number); 
// [1, 2, 3, 4, 5];

Array Mutability and Immutable Techniques:
Arrays in JavaScript are mutable, meaning their elements can be changed. However, we can create a copy of an array to preserve the original data while making modifications. The spread operator (...) can be used to create a shallow copy of an array.

Example:

const array = [1, 2, 3];
const newArray = [...array, 4];
console.log(newArray); // [1, 2, 3, 4]

As you can see, arrays are a powerful data structure in JavaScript that allow us to store and manipulate collections of elements. We learned how to create arrays, access elements by index, and explored some commonly used array methods like map, filter, and forEach.

It's important to understand array mutability. Although arrays are mutable by default, we can create immutable arrays by making copies of the original array using techniques like the spread operator (...). This allows us to modify the copied content while leaving the original array unchanged. Alternatively, Object.freeze() can be used to make the array itself immutable, but not its contents.

By leveraging arrays and their methods, we can efficiently manipulate and transform data, making our code more readable and maintainable. Understanding arrays and their methods is essential for effective JavaScript programming.

Happy coding!

MDN Web Docs