3 things that give away that you're a beginner developer

Everyone wants to build an amazing portfolio of projects or submit an awesome solution to an interview take-home assignment.

But if your code screams that it was built by an inexperienced developer, it won't get your through the door.

So what are the most common signals that give away the fact that you're new to coding?

Spelling mistakes and inconsistent capitalisation

It's such an easy thing to fix, and yet so few developers do this.

Here's an excerpt from a solution someone submitted:

const lenght = prop.images.length;
const [Match, setMatch] = useState([]);
const [sucess, setSucess] = useState("");

This does not look very professional.

Instead:

• ✅ make sure to always check the spelling in your code - VSCode usually highlights typos!
• ✅ use lowercase to name your variables (e.g. match) and use uppercase for naming your components - e.g. Accordion
• ✅ use camelCase when a name is composed of multiple words - e.g. isLoading, MemoryGame

Unclear variable names

When reading someone else's code, the way the name the variables can really matter in how easy it is to comprehend what the code does.

• It's a good practice to use full words instead of shortcuts when naming - e.g. accordion instead of accord.

const [isExpand, setisExpand] = useState(false);
// vs const [isExpanded, setisExpanded] = useState(false);

<SmallAccords accord={i} />
// vs <SmallAccordion accordion={i} />

const [hide, setHide] = useState([]);
// vs const [isHidden, setIsHidden] = useState([]);

const ToDoList = ({ todosI }) => { // vs `initialTodos`
  const [todos, setTodos] = useState(todosI); // vs `useState(initialTodos);`
  // ...
}

• It helps to be as specific as possible with the variable name - which snippet is more readable?

  const [click, setClick] = useState([]);
  const [Match, setMatch] = useState([]);
  const [sucess, setSucess] = useState("");

// vs
  
  const [placeholderArray, setPlaceHolderArray] = useState(new Array(shuffledImages.length).fill(placeholder));
    const [selectedImages, setSelectedImages] = useState([]);
    const [matchedPairs, setMatchedPairs] = useState([]); 

Breaking encapsulation

In React, on a high level, everything is a component.
And you would want each component to be responsible for just one thing, to make it easy to reuse and to maintain. This is called the single responsibility principle.

But many times, when reviewing code, either the component is too big and does too many things, or the logic of the component lives partly outside of it.

Here is an example where the logic could have lived inside the TimeCounter itself:

function App() {
  const [isRunning, setIsRunning] = useState(false);
  const [isReset, setIsReset] = useState(false);
  
  //...

  return (
    <>
      <h1>Simple Timer</h1>
	  <TimeCounter isRunning={isRunning} isReset={isReset} />
    </>
  )
}

Ask yourself:

• If I wanted to add another instance of this component on the same page, how easy would it be?
• If another developer would want to use this component in his project, could he just use or it or would he need to re-create a lot of logic himself?
• Is it easy to reason about this component or does it do too many things?

What are some things that you find give away code was written by an inexperienced developer?
Share your thoughts in the comments below!