DEV Community

Cover image for Share More JS / Avoid More BS
Brad Hankee for Vets Who Code

Posted on • Updated on

Share More JS / Avoid More BS

The greatest appeal for me becoming a JavaScript developer was the community. But more specifically the ability to, at any level, spread knowledge learned and also learn from others everyday. One thing that I find that correlates very strongly with imposter syndrome is ego. Just like going to the gym if you let your ego get the best of you it will slow your progress and hurt you fast usually in the form of a pulled muscle. This is no different in programming and gaining knowledge from your peers around you.
Weights in gym

Lately after two years of being a JS Dev I've been trying to get rid of all imposter syndrome and as I learn things, big or small, share those things. In my job we pretty much rely on vanilla JS for most of our App. I have known about IIFE's and pretty much how they function but never came across this particular use case until this week and had to share it. Just for a quick summary of IIFE's:

IIFE:Immediately Invoked Function Expression

Example: (function runNow(){
console.log("Hello IIFE!")
})()

So the basics are that this function will be declared and ran one time right after it is declared. When you start incorporating closure this gets really exciting. Here is the pattern I saw this week and went down a rabbit hole exploring.

let counter = (function() {

    let current = 0;

    return () => current += 1  

}());

console.log(counter()) //1
console.log(counter()) //2
console.log(counter()) //3

As you can see counter holds the value and doesn't reset but almost acts like state in a stateful component in React. This is the perfect example to show how closure works in JS.

At first it wasn't obvious what was happening until I really inspected the code. Here is a more explicit version of the above code that should make a little more sense.

let counter = (function() {

    let current = 0;

    return {
        getNext: () => current = current + 1

    };

}());

console.log(counter.getNext()); // 1
console.log(counter.getNext()); // 2
console.log(counter.getNext()); // 3

So what's really happening here, going back to the first more concise version, is the first time the IIFE runs it is declaring the counter but since the variable now has the return function on it it will run that return function (which has access to the variable due to closure) and will not reset the counter to 0 each time.

After seeing how this code functioned I had a ah-hah moment and starting to defaulting to my oh cool I want to show this to someone but then the imposter syndrome started creeping in. If you're honest with yourself you know what I mean. The "I'm going to show someone and their going to make that condescending face and be like yeah that has been around a while now." But then I thought what the hell is the point of working with a team and actually having a job with peers if we cannot share information and show each other cool things.

The approach I use for this is to show my enthusiasm while showing someone the code. Think about it. If you pull a senior dev over and be like "Hey check this out this is pretty cool" and continue showing them how the IIFE creates a closure and seems to keep state, even if they know it, they will see your enthusiasm for learning something new. So I did just that and the senior dev hasn't seen that exact use case before. This is one of the scenarios that's a win-win and should always be sought out in our profession in my opinion.

On top of that for VetsWhoCode we have a member that slacks out a code challenge daily so I hit him up about possibly using this in a challenge and his reply back was...

Comment to VetsWhoCode member recommending JS Book

He was cool enough to reply back with a great resource that I actually started reading when I first got my first JS job but at the time it didn't really make sense for me since my Javascript experience was more narrow at that time. Like many books and other resources timing is key and now after having worked in a large JS codebase for a few years I am going through it again and getting much more out of it.

When you learn something or something finally clicks share that with anyone and everyone.

--Brad

Top comments (2)

Collapse
 
vonheikemen profile image
Heiker • Edited

Something very curious happens in here. If you try this in the browser it gives you an error.

var counter = (function counterAdd() {

    let current = 0;

    return () => current = current + 1

}());

console.log(counterAdd);

Since the function has a name I would expect counterAdd to be available on scope but it isn't, it gives me a ReferenceError.

Collapse
 
bhankee profile image
Brad Hankee

Good Catch. My fault for posting late on Sunday night.... had a few codepens open I did and pulled from the wrong one.
Updated and all good now.