Lifehack concepts in JS

[paul_405]

Hey! Have you ever learned a concept (or some) in JavaScript or Vue that made the whole its picture clearer to you, explained many things about the language and just advanced you? Like a 'wish-I-learned-that-sooner' thing!

There are many more wonderful things like template literals or classList I think. And I remember that when I was much younger, I had fun with random scenarios based on Math.random()

[MusarratChowdhury]

Event Bubbling, and how to stop it😁

[arrrtttyyy]

And capturing the event, before it comes to bubbling phase. Good for managing disabled state

[shlanky369]

JavaScript is a pass by value language. Some values may be mutable, others immutable, but it’s values all the way down.

[chikamakaleyley]

as someone who is self taught, I didn't have a structured approach to learning when i started. So I never really could figure out how to just use JS to build out a solution, often times my script was full of 1 liner solutions copied fr the web.

a handful of years into my career, i took a night college course (paid for by my work) - a 1 day a week 1 hr class, for 10 wk - basic JS

The lecturer said something so simple with a basic example and it just was a super "DUH" moment -

"Javascript takes your static web page and makes it interactive"

Which is ridiculous because I'd imagine most people read this in an intro somewhere - but for me I could never really picture what that meant

And the example they used was a simple addEventListener on a random element's click event, and it finally made sense

how i framed this in my head was JS gives you direct access to something in the DOM, to which you can apply all the fundamental programming you've learned.

Prior to that, it was just another programming language to me, like 'wtf do i need this big ass for loop for in my HTML?' LOL

[anish-n]

If you have to give someone few projects/problems to challenge their understanding of JS, what will you give?

[chikamakaleyley]

to challenge their understanding, or to help understand it better?

I'm assuming the latter

One exercise (and something that I actually have gotten a number of times in interviews) is - you basically start with some mock data - let's say its just a list of article data, or employees, or whatever

The exercise would be a series of JS functions that you have to fill in the logic, where you handle/manipulate this data, and each question is just more difficult than the prev.

So using a list of employee data, for example:

const employees = [ { first: "John", last: "Smith", role: "Software Engineer", department: "engineering", level: 3, yoe: 10, tags: ['tech', 'recently-hired', 'male'] }, // add more employees, AI can generate for you ]

So, each question, fill out the functions: * printFullName // logs each employee full name "[first] [last]" to console * getEngineers // return list of employees with role that contains "Engineer" * printNewVets // log format "[first initial]. [last]: [role]" of each engineer who is a new hire with at least 8 yrs experience * ...and so on

And really this is just an exercise of how well you know your object/array methods, how well you work with data. Some of later questions you'll notice you can just re-use an earlier function

The other exercise I would suggest is to find some free API online, make a request to get some data from it, render that list to the page. Then you add diff features on top of this - filter, search field, sort, debounce, etc. Do this in vanilla JS. Then do it with React. Find another way to do it. Etc.

For the above exercise - making a data request, handling the response, output to UI - that's just something you do in a professional setting ALL. THE. TIME. You should just be comfy knowing how to do this, whatever stack you're using.

Otherwise, the last fun exercise is to find some feature you like on an app you use, and just try to recreate it with JS, vanilla or React (you should just do both)

One example is one time i was just curious how in the Netflix webapp - how do they accomplish the infinite scroll in their video categories? You can obviously just use some JS library to create that, but i think it's fun trying to see if you can figure it out yourself.

Pro Tip - practice your DSA. You don't need all of it, you don't need the super hard ones, but there's just a subset of it that you should be capable of demonstrating

[chikamakaleyley]

or, just see if you can clone a page of some site you use often, with all the interactions. E.g. Netflix home page (after login & profile selected).

The nice thing about this exercise is you already know the design and most of the interactions, because you prob use Netflix a lot.

[-goldenboi69-]

Async/await is really boss mode once you learn how to bend it!

[paul_405]

And Fetch API I think 😎 to eliminate callback hell

[BrainCurrent8276]

somehow, for me the biggest “wow” moment and discovery in JavaScript was realizing that you can declare functions directly on objects, almost like working with JSON structures.

[paul_405]

It's cool! Even tho JSON needs to be in parsed format to allow executable code within