How to Stand Out as a JavaScript Developer
Anyone can develop using JavaScript. It’s one of the most accessible and widely published programming languages in the world, which also means that the job market is oversaturated with those who claim to know JavaScript. Increasingly, you’ll see individuals who put JavaScript on their resume in an offhand fashion, saying “Oh yeah, I can do JavaScript”. However, just because you can make something work in a language does not mean that you’re competent in it.
Because of this saturation in the job market around JavaScript, there is a tremendous opportunity to differentiate yourself as a JavaScript developer. In this article, I’m going to outline some core programming competencies I find useful in JavaScript, that help me navigate a codebase faster and more efficiently.
Get really good at these things and you’ll find yourself a lot more comfortable in any JavaScript environment including when you work with:
- Node
- React
- Angular
- Vue
- Express
- Svelte
- NextJS
- jQuery…?!?!
I’ll go through some areas in JavaScript that I see in all the team members I work with that differentiate themselves. I’m not going to try and explain all of the nuances I point out, but I hope if you don’t understand something you take the opportunity to learn something new and improve your own skills!
With that…
Get Really Good at Loops
If this gives you shivers because you’re immediately remembering CS101, it shouldn’t. Loops are core to any programming language, but specifically in JavaScript you’ll find tons of scenarios where understanding how you want to go about looping through data will make you seem like a guru to others who aren’t as familiar.
Are you looping through items in an Angular template using `ngFor` or through a database response that you’ll then send as JSON to a client? Either way, you want to understand your best way to get through that data efficiently. At a minimum you need to know when you should use any one of the following:
for (let i = 0; i < myArray.length; i++)
for (let arrayItem of myArray)
myArray.forEach()
myArray.map()
myArray.filter()You’ll find different use cases for each method, and knowing which one to use will improve the readability of your code tremendously.
Additionally, understanding which array methods will mutate the original array vs returning a new array is key to using them properly, so invest some time in knowing your loops!
Understand Objects
This may seem obvious, but even if it is, I’m going to drive it home.
Do me a favor, open up https://jsconsole.com/ and type `typeof {}`.
You’ll see a response:
Now type `typeof []`, think you know what will come? Yep,
Let’s do it one more time. Take a simple constructor function:
function getObject (name) {
this.name = name
}Paste that into your console, and new up an instance of that constructor:
let myObj = new getObject(‘Chris’);Now… let’s get back to what we started with, go ahead and type `typeof myObj` to see your result:
Work in JavaScript and you will almost always be working with an object. To do this well, you need to ensure you understand, at a minimum:
- Prototypes
- Keys
- Object methods including Object.assign(), Object.entries(), Object.freeze()
The more you understand how the different aspects of JavaScript objects work, the more you’ll be able to navigate code AND understand what frameworks are doing behind the scenes.
Understand Promises
“But wait!” You say. “This is 2021, we use async/await, none of that promise stuff.”
Let me remind you, from the Mozilla docs on async functions:
Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.
So, if you didn’t know you were working with Promises while you were doing your async/await thing, you’ve proven my point.
Back to our handy https://jsconsole.com/.
Define an async function that returns a value passed to it:
async function myAsyncFunc(value) { return value; }If I then call that function and assign it to a value, if I do not `await` that function, you won’t get an expected result. For instance, run this next:
let myResult = myAsyncFunc(1);console.log(myResult); // You’ll see this is a Promise
And you’ll see you just returned a promise, you just didn’t know it.
Let’s be clear, the async/await keywords are syntactic sugar around Promises that make us all more sane since we don’t have to write something like this anymore:
myPromise.then(() => {
return mySecondPromise;
}).then(() => {
return myThirdPromise.then(() => {
return aNormalValueHere;
});
}).then(() => { /// WHAA?????});
Understand Mocks in Unit Tests
If there’s one thing that I see JavaScript developers wasting the most time on, it’s a tossup between forgetting to `await` an async function or not being able to figure out how to mock everything in a unit test.
There are two types of developers that write unit tests. Those who can mock anything and those who will spend hours hating unit testing until they then ask the first type for help. Be the first type.
In JavaScript unit testing, you’ll find a lot of flexibility in the references that make up JavaScript objects. Use this to your advantage and understand how you can use the different JavaScript testing frameworks to help yourself in a unit test. For instance, if I want to test a function that has one or more dependencies:
const myReferencedFunction = require(‘./myReferencedFunction’);myFunction (myReferencedFunction) {
this.computation = function (value) {
return myReferencedFunction.computeThisThing(value);
}
}
For this contrived example, say we’re using Jest as our testing framework. I could import the actual dependency, mock a method on it and pass it as is to the function I’m trying to test. Something like:
const myReferencedFunction = require(‘./myReferencedFunction’);jest.spyOn(myReferencedFunction, ‘computeThisThing’).mockReturnValueOnce(‘myValue’);const functionToTest = new myFunction(myReferencedFunction);
Or… I could bypass stubbing it or importing it at all by just passing a completed mocked object to the function:
const myMockedReferencedFunction = {
computeThisThing: () => { return ‘myValue’; }
}const functionToTest = new myFunction(myReferencedFunction);
I’m not concerned about which is a better pattern. Instead, I want to make the point that there is a LOT of flexibility around how you can mock objects, classes, functions, arrays, etc in JavaScript unit tests. Knowing the options will allow you to navigate those scenarios much faster.
Bonus Section
Understand variable scopes
Do you know the difference between `var`, `let`, and `const`? Do you know which will be referenced and what their scope will be in loops and methods? Make sure you do.
Keep up with new handy methods
let myFirstObject = {
one: 1,
two: 2
};let mySecondObject = {
three: 3,
four: 4
};let myMergedObject = { …myFirstObject, …mySecondObject };// Results in {one: 1, two: 2, three: 3, four: 4}
const myArray = [‘a’, ‘b’, ‘c’];for (const [index, element] of myArray.entries())console.log(index, element);// 0 ‘a’
// 1 ‘b’
// 2 ‘c’
Instead of this:
if (myObject && myObject.prop1 && myObject.prop1.prop2) { /// }Do this:
if (myObject?.prop1?.prop2) { /// }Summary
This is a high level overview and by no means covers the wide breadth of areas that will help you excel as a JavaScript developer. Make sure you are always keeping up to date with the latest initiatives in the community, including the ECMAScript standardization process. Don’t be the person who “also” does JavaScript. Be the one who is constantly learning to improve yourself and your team members.
Think I missed something key in JavaScript? Leave a comment below and let me know!
