DEV Community: Mohammed Awad

You Don't Know CSS Specificity: Writing Efficient CSS Code

Mohammed Awad — Fri, 06 Oct 2023 10:30:03 +0000

As web developers, we're all familiar with the fundamental role CSS plays in styling web pages. But in the ever-evolving world of web development, mastering the art of writing efficient and maintainable CSS code has become more crucial than ever. One of the key concepts that holds the key to this mastery is CSS specificity.

Understanding the Concept

CSS specificity is like the rulebook that determines which styles should be applied to an element when multiple styles are competing for its attention. In simpler terms, it's the referee that resolves conflicts among different style declarations for the same element. The more specific a selector is, the higher priority it receives when it comes to styling.

The Components of Specificity

Let's break down the components of specificity:

Element selectors carry a specificity value of 1.
Class selectors step up with a specificity of 10.
ID selectors pack a punch with a specificity of 100.
Inline styles wield the ultimate power, with a specificity of 1000.

Example in Action

Consider this example:

<!-- HTML -->
<header class="header" id="main-header" style="background-color: aqua;">
    <h1>Hello World!</h1>
</header>

In this case, we have conflicting styles applied to the header element. The background color seems like a battlefield with different specificity values vying for control.

The <style> block provides styles for the body, .header, and #main-header.
The inline style attributes add another layer of styling.

When comparing specificity, remember this rule: The selector with the highest value wins. So, when an ID and a class selector go head-to-head, the ID selector takes the crown.

However, there are subtleties. If two selectors have the same specificity, the one appearing later in the CSS file wins. And if a selector contains multiple instances of the same component (e.g., two class selectors), the counts are cumulative.

Practical Tools for Specificity

To make life easier, you can leverage tools like the Specificity Calculator. This tool simplifies the process of calculating specificity and even supports CSS Selectors level 4.

In Conclusion

CSS specificity is more than a technicality; it's a superpower every web developer should harness. By following these rules of specificity and carefully selecting your selectors, you'll be able to craft efficient and maintainable CSS code that not only styles your web pages but also ensures a smooth user experience.

HR Don't like Buzzwords: How Being Real Lands You the Job

Mohammed Awad — Tue, 03 Oct 2023 05:37:00 +0000

In the fast-paced world of job applications and interviews, standing out is key.
However, there's a fine line between making a memorable impression and drowning in a sea of buzzwords.

`Here's why HR professionals are increasingly unimpressed with buzzwords and why you should ditch them too.`

What are Buzzwords?

Buzzwords are catchy, trendy terms or phrases that are often used in resumes, cover letters, and interviews to convey certain qualities or skills. They're designed to grab attention but often fail to provide real substance.

Most Common buzzwords

Detail-Oriented: While being detail-oriented is important, simply stating it without concrete examples doesn't provide evidence of your skills.
Team Player: Everyone claims to be a team player. Instead, showcase instances of collaboration and teamwork in your work experience.
Self-Motivated: This is expected in most job roles. Instead of saying you're self-motivated, discuss specific accomplishments or projects that demonstrate your initiative.
Results-Driven: Similar to being self-motivated, it's better to show results through achievements and quantifiable data.
Excellent Communication Skills: Communication skills are vital, but without proof or examples, this statement lacks impact.
Innovative: Mentioning that you're innovative is less effective than showcasing specific innovative projects or ideas you've contributed to.
Dynamic: This term is vague and doesn't convey much information. Share concrete examples of how you've adapted to changes or challenges.
Hard Worker: Everyone wants to work hard. Instead, discuss your work ethic through achievements and dedication to projects.
Detail-Oriented: This is another common buzzword. Instead, demonstrate your attention to detail through specific achievements or examples.
Outside-the-Box Thinker: Instead of stating this, describe instances where you've brought fresh perspectives or creative solutions to problems.
Ninja/Guru/Wizard: These playful titles can come across as unprofessional. Stick to traditional titles and descriptions.
Go-Getter: While enthusiasm is great, provide examples of how your proactive attitude translated into concrete results.
Synergy: This corporate buzzword is often seen as jargon. Use clearer language to describe collaboration and teamwork.
Utilize: Instead of saying "utilized," use more straightforward verbs like "used" or "implemented."
Best in Class: This term lacks specificity and doesn't provide any context for your achievements.

The Buzzword Backlash

HR professionals are growing weary of buzzwords for several reasons:

Lack of Specificity: Buzzwords like "team player" or "innovative thinker" lack specificity. They don't tell the recruiter much about your actual abilities or experiences.
Overuse: Buzzwords are overused to the point of becoming cliché. When every candidate claims to be a "dynamic problem solver," it loses its impact.
Empty Promises: Buzzwords can come across as empty promises. Saying you're a "results-driven self-starter" means little without concrete examples to back it up.

Navigating Buzzwords in ChatGPT Conversations

When using ChatGPT or any AI tool, beware of overusing buzzwords. These terms can make your communication seem insincere, vague, and robotic. Instead, focus on clear, context-appropriate, and personalized responses for more engaging and authentic conversations.

1. Authenticity Matters: Just as in human interactions, authenticity in conversations with AI is crucial. Overusing buzzwords can make the conversation seem robotic and insincere. It's essential to maintain a natural and genuine tone.

2. Clarity Over Jargon: Buzzwords can be ambiguous and may not convey your message effectively. Opt for clear and straightforward language to ensure your point gets across without any confusion.

3. Contextual Relevance: Be cautious about inserting buzzwords without considering the context. The inappropriate use of buzzwords can lead to misunderstanding or misinterpretation.

4. Tailoring Responses: ChatGPT should be a tool to assist and enhance your communication, not a crutch. Avoid relying on buzzwords to replace well-thought-out responses tailored to the specific needs of the conversation.

5. Personalization is Key: Instead of generic buzzwords, personalize your responses to create a more engaging and meaningful conversation. Addressing specific questions or concerns can lead to a more productive exchange.

6. Authenticity and Engagement: Meaningful interactions often revolve around authenticity and engagement. Using buzzwords excessively can hinder the development of a genuine rapport with the person you're communicating with.

The Power of Real Stories

Instead of relying on buzzwords, focus on telling real stories. Share specific accomplishments, challenges you've overcome, and how you've added value in your previous roles.

For example, instead of saying you're a "detail-oriented team player," you could say something like, "I meticulously reviewed and improved our project documentation, resulting in a 20% decrease in errors and smoother teamwork."

Connecting on a Human Level

HR professionals are not just looking for a list of skills; they want to connect with you on a human level. Sharing genuine experiences and showing your personality can be far more impactful than a laundry list of buzzwords.

Now do you think we should use a few buzzwords or not at all?
Did you use some of them in your resume? tell us in the comments

In Conclusion

While buzzwords might seem like an easy way to catch a recruiter's eye, they often have the opposite effect.

HR professionals are looking for real, tangible evidence of your skills and experiences.

So, next time you're tempted to sprinkle buzzwords throughout your application, think twice and opt for authenticity instead.😉

As a React developer, I'm currently on the lookout for new opportunities. If you know of any roles where my experience could be a good fit, I would love to hear from you.

You can reach out to me anytime at my email xMohammedAwad@gamil.com, or connect with me on LinkedIn. Check out my projects on GitHub to see more examples of my work.

How to solve medium leetcode problem?[need help]

Mohammed Awad — Fri, 29 Sep 2023 11:20:00 +0000

I don't know if everyone has this problem but I took a long time to solve a medium problem in leetcode sometimes.

I needed 10-15 minutes to understand and make some ideas and maybe can not had any idea how to start until I see hints but mostly passed with 70%-80% of the tests then gave up and used ChatGpt to get a solution. with easy questions took a couple of minutes and sometimes 20-25 minutes, depending on the idea

For example I learned about the 2-pointer technique then tried solving a problem starting with the basics and init the left and right pointers then got stuck with passing all the tests what should I do with conditions that solve the problem and pass all the tests

until now I have solved 12 easy and 6 medium problems

** What should I do to be better ?**

How to solve medium leetcode problem?

Mohammed Awad — Thu, 28 Sep 2023 18:43:27 +0000

I don't know if everyone has this problem but I took a long time to solve a medium problem in leetcode sometimes.

until now I have solved 12 easy and 6 medium problems

** What should I do to be better ?**

👌 What is Git? Why do you use it? what is CIDI? git Flow or Github Flow? 10 Must-Know Questions💡🚀

Mohammed Awad — Thu, 28 Sep 2023 15:59:00 +0000

Git

is a version control system that allows multiple people to work on a project at the same time without overwriting each other's changes.

It keeps track of all changes made to a project and allows you to backtrack if necessary.

It's an essential tool for any developer because it encourages collaboration and ensures that your project's history is well-documented and retrievable.

Commonly used Git commands include:

git init: This command is used to start a new repository.
git clone: This command is used to copy a repository from a remote source to your local machine.
git add: This command is used to stage changes for a commit.
git commit: This command is used to save your changes to the local repository.
git push: This command is used to send your committed changes to a remote repository.
git pull: This command is used to fetch changes from a remote repository and merge them into your current branch.
git status: This command is used to show the status of changes as untracked, modified, or staged.
git branch: This command is used to list, create, or delete.
branches gist.github.com.
CIDI stands for Continuous Integration and Continuous Delivery. It's a practice in software development where developers regularly merge their code changes into a central repository, after which automated builds and tests are run. The key goals are to find and address bugs quicker, improve software quality, and reduce the time it takes to validate and release new software updates.

Git Flow

is a branching model for Git, created by Vincent Driessen. It's a solution to the problem of maintaining a stable code base when multiple developers are working on a project at once.

In Git Flow, there are two main branches:

main or master: This branch contains production code. All of the code that is currently in production is stored in this branch.
develop: This is the branch to which all feature branches are merged, and where all tests are performed. Only when an update is considered ready for production, it is merged into the main branch docs.syntevo.com.

There are also three types of supporting branches:

feature branches: These are used to develop new features for the upcoming or a distant future release. When starting development of a feature, the target release in which this feature will be incorporated may well be unknown at that point.
release branches: These branches support preparation of a new production release. They allow for last-minute dotting of i’s and crossing t’s.
hotfix branches: These branches are very much like release branches in that they are also meant to prepare for a new production release, albeit unplanned. They arise from the necessity to act immediately upon an undesired state of a live production version.

GitHub flow

GitHub Flow is a lightweight, branch-based workflow developed and used by GitHub. It's designed to be simple and easy to understand, especially for developers who are just getting started with Git.

The GitHub Flow has six steps:

Create a branch: From the repository, you create a new branch off the main branch to encapsulate your work. This is a core aspect of Git, and it allows you to work on separate tasks without affecting the main codebase.
Add commits: Make changes to your branch and commit them. Each commit is like a safe, small checkpoint for your work. Commit messages help document what changes were made and why.
Open a Pull Request (PR): Once you have made and committed your changes, you open a Pull Request. This is where the discussion about your proposed changes happens.
Discuss and review: Your changes can now be reviewed by others. They can comment on your code, suggest changes, or approve the PR.
Deploy: If everything is fine with your changes, you can deploy your branch to verify in production.
Merge: Once your changes have been reviewed and passed all tests, and you're happy with how they work in production, you can merge your changes into the main branch.

The GitHub Flow emphasizes the importance of deploying branches to production-like environments to test them before they're merged into the main branch. This allows for any necessary adjustments to be made before the code is merged into the main branch, reducing the chance of unexpected problems.

It's important to note that GitHub Flow is different from Git Flow. While Git Flow has specific branches for developing, testing, and releasing, GitHub Flow simplifies this to one concurrent line of development. This makes it a popular choice for continuous deployment environments, where new changes go live as soon as they're merged.

I would love to share a part of my preparation tips for job interview.

As a React developer, I'm currently on the lookout for new opportunities. If you know of any roles where my experience could be a good fit, I would love to hear from you.

You can reach out to me anytime at my email xMohammedAwad@gamil.com, or connect with me on LinkedIn. Check out my projects on GitHub to see more examples of my work.

🔥What are the differences between const, let, and var? 10 Must-Know Questions for Junior Developers💡🚀

Mohammed Awad — Wed, 27 Sep 2023 15:17:00 +0000

In JavaScript, you can declare variables using var, let, and const. They differ in terms of scope, hoisting, and reassignment.

Var

Before ES6, var was used to declare variables. var variables are either globally scoped or function scoped. A var variable is globally scoped when declared outside a function and can be accessed anywhere in the code. When declared inside a function, it's function scoped and can only be accessed within that function.

var greeter = "hey hi"; // globally scoped

function newFunction() {
    var hello = "hello"; // function scoped
}
console.log(hello); // error: hello is not defined

In terms of reassignment, var variables can be updated and re-declared within the same scope without any error.

var greeter = "hey hi";
var greeter = "say Hello instead"; // No error

var variables are hoisted to the top of their scope and initialized with a value of undefinedSource 0.

Let

let is preferred for variable declaration since ES6. A significant difference between let and var is that let is block-scoped, meaning it can only be accessed within the block where it's declared.

let greeting = "say Hi";
if (times > 3) {
    let hello = "say Hello instead";
    console.log(hello); // "say Hello instead"
}
console.log(hello) // error: hello is not defined

A let variable can be updated but not re-declared within its scope.

let greeting = "say Hi";
greeting = "say Hello instead"; // No error

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

let declarations, like var, are hoisted to the top. However, unlike var, let is not initialized, leading to a Reference Error if you try to use a let variable before declarationSource 0.

Const

const is another way to declare variables. const declarations are block-scoped like let.

const a = 10;
if (true) {
    const a = 9;
    console.log(a); // 9
}
console.log(a); // 10

The main difference between let and const is that const variables cannot be updated or re-declared.

const greeting = "say Hi";
greeting = "say Hello instead"; // error: Assignment to constant variable.

const greeting = "say Hi";
const greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, while a const object cannot be updated, the properties of this object can be updated.

const greeting = {
    message: "say Hi",
    times: 4
}

greeting.message = "say Hello instead"; // No error

Like let, const declarations are hoisted to the top but are not initializedSource 0 Source 2.

In summary:

var declarations are globally scoped or function scoped, can be updated and re-declared within its scope, and are hoisted to the top and initialized with undefined.
let declarations are block-scoped, can be updated but not re-declared within its scope, and are hoisted to the top but not initialized, and you can not use it in block-scope.
const declarations are block-scoped, cannot be updated or re-declared, and are hoisted to the top but not initialized.

I would love to share a part of my preparation tips for job interviews.

As a React developer, I'm currently on the lookout for new opportunities. If you know of any roles where my experience could be a good fit, I would love to hear from you.

You can reach out to me anytime at my email xMohammedAwad@gamil.com, or connect with me on LinkedIn. Check out my projects on GitHub to see more examples of my work.

🔥 What are falsey values in JavaScript? 10 Must-Know Questions for Junior Developers💡🚀

Mohammed Awad — Tue, 26 Sep 2023 13:15:37 +0000

In JavaScript, "falsy" values are values that are treated as false in Boolean contexts, such as conditional statements (if, while), logical operations (&&, ||, !), and other areas where a Boolean value is expected. There are seven falsy values in JavaScript:

false
0 and -0
"" (empty string)
null
undefined
NaN
document.all (for historical web compatibility reasons)

Any value that is not in this list is considered "truthy". Here is an example demonstrating how JavaScript treats falsy values:

const test1 = "" // empty string
const test2 = 0 // zero
const test3 = parseFloat("hi") // NaN 

if(!test1 && !test2 && !test3){
  console.log("falsy")
} // logs falsy

In this example, test1, test2, and test3 are all falsy values, so !test1 && !test2 && !test3 returns true, and 'falsy' is logged to the console Source 8.

It's important to note that while falsy values are treated as false in Boolean contexts, they are not the same as the Boolean value false. For example, if you use the strict equality operator === to compare a falsy value with false, the result will be false, because === checks both the value and the type. Here's an example:

const test1 = "" === false // test1 is false

In this case, test1 is false because the empty string "" and false are different types (String and Boolean, respectively) Source 8.

You can convert any JavaScript value to a Boolean value using the Boolean function or the !! (double NOT) operator. This will return true for truthy values and false for falsy values:

const value = ""; // a falsy value
console.log(Boolean(value)); // false
console.log(!!value); // false

const value2 = "hello"; // a truthy value
console.log(Boolean(value2)); // true
console.log(!!value2); // true

now after you know what falsy values record yourself answering that question and repeating it until you succeed because explaining what you know is very important for employers or HR.

I would love to share a part of my preparation tips for job interview.

As a React developer, I'm currently on the lookout for new opportunities. If you know of any roles where my experience could be a good fit, I would love to hear from you.

You can reach out to me anytime at my email xMohammedAwad@gamil.com, or connect with me on LinkedIn. Check out my projects on GitHub to see more examples of my work.

Why to Use HOCs in React

Mohammed Awad — Fri, 22 Sep 2023 22:33:45 +0000

Higher-Order Components in React (HOC)

Imagine you're a magician and you have a magic box. You can put anything into this box, say a rabbit, and the box will add a hat to it. Now, every time you pull out a rabbit, it's wearing a hat! This is what Higher-Order Components (HOCs) do in React. They're like the magic box that adds extra features or behaviors to a component.

What is a Higher-Order Component (HOC)?

In React, a Higher-Order Component (HOC) is a function that takes a component as an argument and returns a new component with added features or behaviors. It's a way of reusing component logic across multiple components without modifying their code. This makes them a flexible and reusable way to add functionality to your components.

When and How to Use HOCs?

In the real world, as a developer, you often find yourself writing code that is repetitive or similar in nature. This is where Higher-Order Components (HOCs) come to the rescue in React. I recently used a HOC in my project, an "Arab van"(rental system), and it greatly simplified my code by abstracting out common logic.

I had to fetch data in multiple components. Instead of repeating the fetching logic in each component, I created a Higher-Order Component (HOC) named withFetchData.

Every HOC name starts by with like withFetchData

This HOC takes a component (WrappedComponent) and a fetchData function as its arguments.

export default function withFetchData(WrappedComponent, fetchData) {
  return function (props) {
  const memoizedFetchData = useCallback(() => fetchData(id), [id]);
  const { value, loading, error, execute } = useAsync(
      memoizedFetchData,
      false
    );

    useEffect(() => {
      if (!loading) {
        execute();
      }
    }, [location]);

    return <WrappedComponent data={value} vanId={id} 
           {...props} />;
  };
}

And here's how you can use it:

const EnhancedComponent = withFetchData(MyComponent, fetchData);

The result is a new component (EnhancedComponent) that behaves exactly like MyComponent, but with added data fetching capabilities.

Why I Chose HOC

The reason I chose to use an HOC for this purpose was twofold:

Code Reusability: By encapsulating the data fetching logic inside a HOC, I was able to reuse this logic across multiple components, thereby reducing code duplication and making the codebase cleaner and more maintainable.
Separation of Concerns: The HOC allowed me to separate the data fetching logic from the presentation logic of my components. This made the components easier to understand, test, and maintain.

In conclusion,

Higher-order components are a powerful tool in React that allows you to write cleaner, more reusable code. I found them to be incredibly useful in my "rental van app" project, and I believe they can be beneficial in many other scenarios as well.

Remember, every line of code you write is a step towards becoming a better developer. Keep learning, keep growing, and most importantly, have fun along the way!

As a React developer, I'm currently on the lookout for new opportunities. If you know of any roles where my experience could be a good fit, I would love to hear from you.

You can reach out to me anytime at my email xMohammedAwad@gamil.com, or connect with me on LinkedIn. Check out my projects on GitHub to see more examples of my work.

Muhmmad Awd

Mastering React Forms: Building Interactive User Input

Mohammed Awad — Thu, 13 Jul 2023 05:31:39 +0000

Introduction:

React, a popular JavaScript library for building user interfaces, provides powerful tools for handling user input through forms. In this article, we will explore the essentials of building interactive forms in React. From capturing user data to handling validation and submission, we'll cover the key concepts and best practices that will help you master React forms.

1. Creating a Form Component

To start, we need to create a form component in React. A form component encapsulates the form's structure and behavior. Here's an example of a simple form component:



import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic here
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <label>
        Message:
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

2. Handling Form Input and State

In React, form input elements are controlled components. We store the form data in the component's state and update it using the handleChange function. The handleChange function uses the name attribute of each input element to identify the corresponding property in the formData state object.

3. Form Validation

Validating user input is a crucial part of form handling. React provides several options for form validation, such as using third-party libraries like Formik or Yup. Here's an example of simple validation using built-in JavaScript methods:



const handleSubmit = (e) => {
  e.preventDefault();

  // Perform validation
  if (formData.name.trim() === '') {
    // Handle name validation error
    return;
  }

  if (!formData.email.includes('@')) {
    // Handle email validation error
    return;
  }

  // Form data is valid, proceed with submission
};

4. Form Submission and Data Handling

Upon form submission, we can perform actions such as sending the form data to a server, updating application state, or displaying a success message. In the handleSubmit function, you can implement the desired logic based on your application's requirements.

5. Enhancing User Experience

To enhance the user experience, you can add features like real-time validation, displaying error messages, and providing feedback while the user fills out the form. Consider using libraries like React Hook Form or Formik for more advanced form handling and validation features.

Currently seeking new opportunities, Muhmmad is actively looking for a role where they can contribute their skills and knowledge in building cutting-edge web applications using React.js.

About Muhmmad:

Muhmmad is a passionate software engineer with expertise in frontend development and a strong affinity for React.

Muhmmad enjoys sharing knowledge and helping fellow developers grow. Connect with Muhmmad to stay updated with the latest in frontend development.

Follow Muhmmad Awd on:

كل عام وانتم بخير - eid adha mubarak

Mohammed Awad — Tue, 27 Jun 2023 21:48:16 +0000

عيد اضحى مبارك وكل عام وانتم بالف خير

eid adha mubarak

Map Or Object with Computed Properties

Mohammed Awad — Fri, 16 Jun 2023 16:52:57 +0000

If you don't know about Computed properties check out my past article on What the heck is Computed Properties in JavaScript

Computed properties in JavaScript provide an elegant solution to handle such scenarios. In this article, we'll explore computed properties and discuss their usage in two common data structures: Map and Object. We'll also discuss when to choose one over the other based on specific requirements.

1. Introduction to Computed Properties

Computed properties, introduced in ECMAScript 2015 (ES6), allow you to create object properties dynamically using an expression in square brackets ([]). Instead of specifying a fixed property name, you can use an expression to compute the property name at runtime. This provides flexibility in working with object properties and enables dynamic behaviors.

2. Computed Properties in Objects

In JavaScript, objects are a fundamental data structure used to store and manipulate data. Computed properties can be used in objects to dynamically create or access properties.

Example:

const propertyName = "dynamicPropertyName";
const obj = {
  [propertyName]: value
};

In this example, the propertyName variable contains the computed property name, which is enclosed in square brackets within the object literal. The value assigned to the computed property can be any valid JavaScript expression.

3. Maps

Maps are another data structure introduced in ES6 that provide a way to store key-value pairs. Unlike objects, which only allow string or symbol keys, Maps support any data type as a key. Computed properties can also be utilized in Maps to dynamically handle keys and values.

Example:

const map = new Map();
const key = "dynamicKey";
const value = "dynamicValue";
map.set(key, value);

In this example, the key variable contains the computed key value, and the value variable represents the associated value. By using the set method, we can dynamically assign values to map entries.

4. Choosing Between Map and Object with Computed Properties

When deciding between Map and Object with computed properties, consider the following factors:

Use Case:

If you need to associate arbitrary data types as keys or require more flexibility in key-value pair manipulation, Maps are the better choice.
If you primarily work with string keys and simple data structures, objects with computed properties can suffice.

Performance:

Maps provide efficient operations for adding, removing, and searching entries, making them suitable for scenarios requiring frequent modifications.
Objects are generally faster when it comes to direct property access using fixed keys.

Compatibility:

If you're targeting older JavaScript environments or have compatibility concerns, objects with computed properties have better support across different platforms.

5. Conclusion

In JavaScript, both Map and Object with computed properties offer powerful capabilities for dynamically assigning values and handling dynamic property names. Understanding the differences between the two will help you make an informed decision based on your specific requirements.

When choosing between Map and Object, consider the use case, performance needs, and compatibility considerations. Both options have their strengths and are designed to address different scenarios effectively.

We hope this article has provided clarity on the choice between Map and Object with computed properties. Happy coding!

Happy coding!

About the Author:

Muhmmad is a passionate JavaScript,
With a strong understanding of JavaScript concepts and a love for elegant code.

Muhmmad enjoys sharing knowledge and helping fellow developers improve their coding skills.

Connect with Muhmmad on LinkedIn to stay updated with his latest articles and projects.

Follow Muhmmad Awd on:

What the heck is Computed Properties in JavaScript

Mohammed Awad — Fri, 16 Jun 2023 16:42:03 +0000

*Have you ever come across situations where you need to dynamically assign values to object properties * or perform computations based on dynamic property names?

if Yes

Computed properties in JavaScript provide an elegant solution to handle such scenarios. In this article, we'll explore computed properties, how they work, and how they can be leveraged effectively in your JavaScript code.

*before we start *
we will discuss Choosing Between Map and Object with Computed Properties in the next article.

1. Introduction to Computed Properties

2. Syntax and Usage

The syntax for computed properties is as follows:



const propertyName = "dynamicPropertyName";
const obj = {
  [propertyName]: value
};

3. Dynamic Property Names

One common use case for computed properties is when you have dynamic property names. Consider the following example:



function createPerson(name, age) {
  return {
    name,
    age,
    [`is${name}Adult`]: age >= 18
  };
}

const person = createPerson("John", 25);
console.log(person);

In this code snippet, the createPerson function takes in name and age parameters and returns an object with properties for name, age, and a computed property [is${name}Adult] that indicates whether the person is an adult based on their age.

By using a computed property name, we can create a dynamic property that reflects the person's name and their adult status. This approach allows for flexibility in constructing object properties based on dynamic values or conditions.

4. Dynamic Property Assignment

Computed properties can also be used to dynamically assign values to object properties. Consider the following example:



function createProduct(id, name, price) {
  const product = {};
  product[id] = {
    name,
    price
  };
  return product;
}

const productId = "ABC123";
const productData = createProduct(productId, "Sample Product", 9.99);
console.log(productData);

In this example, the createProduct function takes in an id, name, and price and creates a product object. The computed property assignment product[id] dynamically assigns the object containing the name and price properties to the id property of the product object.

By using computed properties for assignment, we can handle dynamic values as property keys, allowing for more flexible and customizable object structures.

5. Benefits of Computed Properties

Computed properties offer several benefits in JavaScript programming:

Dynamic Property Handling: Computed properties allow for dynamic property names and assignments, enabling more flexible object structures based on runtime conditions or dynamic values.
Code Readability and Maintainability: By using computed properties, you can create concise and readable code, especially when dealing with dynamic property names or values. This improves code maintainability by reducing the need for explicit if-else or switch statements for property assignments.
Code Reusability: Computed properties facilitate the creation of reusable code blocks that can handle different dynamic scenarios. Instead of writing separate code logic for each property assignment, computed properties allow you to handle dynamic cases with a single code block.

6. Conclusion

Computed properties in JavaScript provide a powerful mechanism for dynamically assigning property names and

values. By using square brackets with expressions, you can create more flexible and adaptable object structures. Computed properties enhance code readability, maintainability, and reusability by handling dynamic scenarios with ease.

In this article, we explored the syntax and usage of computed properties in JavaScript. We discussed their benefits and demonstrated how they can be used to handle dynamic property names and assignments effectively.

Happy coding!

About the Author:

Muhmmad is a passionate JavaScript,
With a strong understanding of JavaScript concepts and a love for elegant code.

Muhmmad enjoys sharing knowledge and helping fellow developers improve their coding skills.

Connect with Muhmmad on LinkedIn to stay updated with his latest articles and projects.

Follow Muhmmad Awd on:

DEV Community: Mohammed Awad

You Don't Know CSS Specificity: Writing Efficient CSS Code

HR Don't like Buzzwords: How Being Real Lands You the Job

Here's why HR professionals are increasingly unimpressed with buzzwords and why you should ditch them too.

What are Buzzwords?

Most Common buzzwords

The Buzzword Backlash

Navigating Buzzwords in ChatGPT Conversations

The Power of Real Stories

Connecting on a Human Level

In Conclusion

How to solve medium leetcode problem?[need help]

How to solve medium leetcode problem?

👌 What is Git? Why do you use it? what is CIDI? git Flow or Github Flow? 10 Must-Know Questions💡🚀

Git

Commonly used Git commands include:

Git Flow

GitHub flow

🔥What are the differences between const, let, and var? 10 Must-Know Questions for Junior Developers💡🚀

🔥 What are falsey values in JavaScript? 10 Must-Know Questions for Junior Developers💡🚀

Why to Use HOCs in React

Higher-Order Components in React (HOC)

What is a Higher-Order Component (HOC)?

When and How to Use HOCs?

Why I Chose HOC

In conclusion,

Mastering React Forms: Building Interactive User Input

1. Creating a Form Component

2. Handling Form Input and State

3. Form Validation

4. Form Submission and Data Handling

5. Enhancing User Experience

Currently seeking new opportunities, Muhmmad is actively looking for a role where they can contribute their skills and knowledge in building cutting-edge web applications using React.js.

كل عام وانتم بخير - eid adha mubarak

عيد اضحى مبارك وكل عام وانتم بالف خير

Map Or Object with Computed Properties

1. Introduction to Computed Properties

2. Computed Properties in Objects

Example:

3. Maps

Example:

4. Choosing Between Map and Object with Computed Properties

Use Case:

Performance:

Compatibility:

5. Conclusion

What the heck is Computed Properties in JavaScript

if Yes

1. Introduction to Computed Properties

2. Syntax and Usage

3. Dynamic Property Names

4. Dynamic Property Assignment

5. Benefits of Computed Properties

6. Conclusion

`Here's why HR professionals are increasingly unimpressed with buzzwords and why you should ditch them too.`