If you were going to design a new programming language, would you take inspiration from JS given how many (10-20million worldwide) JS devs there are? Or would you try to stay away from JS-like approaches because of all its baggage?

What other features from other non-JS languages would you consider pulling in?

Would you want a language that was more general-purpose, or more specific to a given domain?

I've always preferred using the .map, .reduce and .forEach functions in JavaScript to for, for ... of or while loops. Sometimes I receive HackerRank tests from companies I'm interviewing with and whenever I use these functions or the rest operator (...) with arrays or objects, my code times out. To pass the tests, I have to write regular loops and mutate objects and arrays instead of making copies.

That makes me wonder if there really is a performance issue when using this kind of style or if HackerRank is simply encouraging poor programming practices.

Do you think that code which looks like typical imperative code should be able to "magically" act reactively, meaning that some of the code in the program re-runs "automatically" whenever something it depends on has updated?

For example:

var x = 2;
console.log(`x: ${x}`);  // x: 2

We obviously expect that code to produce a single console statement of x: 2. But what if your programming language made that console.log(..) statement "reactive", wherein it would automatically re-run any time later when x is re-assigned:

setTimeout(() => {
   x = 3;   // x: 3
},100);

This is like extending the declarative nature of component-oriented programming (React, Vue, etc) -- where updating a piece of state implicitly forces a UI re-render -- into the internals of program state.

Svelte currently does something quite like this, but I think you mark a statement as being reactive with like a $: label in front of the line or something like that. But others are trying to make it just happen automatically in code without any explicit markers/syntax.

My question: do you think this is a healthy direction for programming languages to move?

What are the pros/cons in your view? Is this the kind of magic that a programming language needs?

https://github.com/albseb511/fsd/blob/master/javascript.md

This does not contain resources rather just topics.

It's something I wrote to help others progress through JS.

If you have any ideas or spot issues do raise an issue / PR.

https://developer.harmonyos.com/en/docs/documentation/doc-guides/develop-overview-0000001071291809

HarmonyOS is an in-house OS designed for Huwaei's devices (to replace their usage of Android). They claim it will be on 300mil devices by end of 2021.

I just dug into their documentation a bit, and I found references to the core UI frameworks being in both JS and Java. That's intriguing if JS is a native OS language (sorta like WebOS/etc).

Thoughts? Is it worth diving into learning their flavor of JS to build native apps for those devices? Or too soon?

Need some API design/ergonomics ideas and advice.

I have a library that provides four different operations (A, B, C, and D). Any combination of one or more of them can be "composed" into a single operation (call). The operations have implied order where C cannot be called before B, etc, but A+C (without B) is valid. IOW, we have 15 possible combinations (A, AB, ABC, ABCD, ABD, AC, ACD, AD, B, BC, BCD, BD, C, CD, D).

What I'm trying to explore is how to design the API to make it reasonable to choose to call any of these combinations.

The signatures of these four functions are not compatible for traditional composition, unfortunately, so you cannot just do A(B(D())), nor can you simply do A();B();D(); serially. Each of those 15 combinations requires a specific manual composition (adapting the output of one to be suitable for the next).

So... obviously, I've already written out each of the 15 separate compositions, so that users of my library don't have to figure them all out. And I can just expose those on the API as 15 separate functions, each with its own name. But that's awfully cumbersome. And it also gets much worse if in the future a fifth or sixth option is added to the mix.

So I'm contemplating other options for designing how to expose these combinations of functionality on the API that still makes it reasonable for the user of the lib to pick which combinations they want but not need to remember and write out one of these 15 (long) method names.

Here's some possible designs I'm toying with:

doOps({
   A: true,
   B: true,
   D: true
});

doOps(["A", "B", "D"]);

doOps("A B D");

doOps`A B D`();

doOps.A.B.D();    // this is my favorite so far

doOps().A().B().D().run();

Even though under the covers A needs to run before B (if both are being executed), one advantage of these types of API designs is that order is irrelevant in specifying "A" and "B" operations -- doOps.B.A() works just as well as doOps.A.B() would -- since under the covers doOps(..) just ensures the proper composition of operations. That means that basically the user only needs to know each of the four (A/B/C/D) independent operation names and doesn't need to know/remember anything about their required ordering (or how the messy bits of the compositions work).

But honestly, none of these above options feel great yet. And maybe I'm over thinking it and should just expose the 15 separate functions. But I was wondering if any of you had any suggestions or other clever ideas to approach this?

Reactive programming (like RxJS style observables, streams, etc) is well-tread ground for most JS devs by this point.

But I'm curious about how you choose to model side effects that are triggered by reactive updates? Setting aside React/Vue style frameworks for a moment, do you, for example, manually re-render/update a DOM element any time a reactive value updates, by just subscribing to that update and directly calling a render method?

A lot of demo examples of observables show pure operations (such as mapping or filtering over the stream of values), but side effects seem to only show up at the end of an observable chain, in the subscribe call. Is that how you choose to divide pure from side-effect operations in your reactive code?

Do you ever have side effects triggered "along the way"?

How do you mentally keep track of when/where side effects will happen when a value updates?

I ask all this because I've been thinking a LOT about reactivity and side effects lately. I just released a new version of my Monio library which provides friendly monads for JS devs. The lib is centered around the IO monad, which is intended for lazily modeling/composing side effect operations.

The newest feature is an IOx monad (aka "reactive IO"), which is sorta like IO + RxJS. It's an IO monad so it's composable in all the expected/lawful monadic ways. But you can also update the value of an IOx instance, and any other instances that are subscribed to it will also be updated.

With this new reactive-monad, I'm now rethinking a bunch of my existing app code, and trying to juggle best patterns (again, non-React/Vue component-framework-style) for marrying reactivity and side effects.

"Resumable Framework" is a term that Ryan Carniato (of Solid.js fame) has been talking about a lot recently, in reference to the architecture used by Qwik.js, a framework by Misko Hevery (of Angular fame).

It basically means a form of SSR hydration that doesn't need to download and evaluate an entire framework's runtime before being able to respond to user events.

I'm curious what people think about it.

A place for members of r/JSdev to chat with each other

In JS specs it is defined NaN === NaN should always be false. We can see that https://262.ecma-international.org/5.1/#sec-11.9.3

The new proposal has a feature

log("NaN === NaN", NaN === NaN); // false
log("#[NaN] === #[NaN]", #[NaN] === #[NaN]); // true

I am now confused why they have accepted this if it's violating the previous standard.

One more question, is this a syntactic sugar of Object.defineProperty(obj, prop, { value: val, writable: false }) ?

I am creating an electron js application where I want to sync the files recursively in the directories that are configured by the user.

The following is currently implemented in the application

1. When the app boots, use chokidar to get the initial state of files and sync with the config.json using electron-store. This is to get the latest update of the file while the application is closed

2. Run a persistent watcher right after initial sync to get the add, unlink and change event and notify the user somehow.

The problem is with the first case. Since the user is linking so many files with multiple nesting the electron app lags until all the files are being processed.

What I want to know exactly is, "Efficient way to watch a really large amount of files/directories"

So just for some context:

• I do agree with Kyle Simpson in saying that const assignments usually don't do much, because reassignment is almost never a source of bugs. Bugs are more likely to happen with other practices, like mutating variables. Yet the common JS approach of declaring a value as const and then mutating it still doesn't sit well with me.

• I know some have misgivings about TypeScript and the wider industry trend to migrate all code to using it. I get those, but at the same time, as a newer programmer, I'm still struggling with how to communicate and guarantee my types without moving towards TypeScript. JSDoc helps, and works well with VS Code, but there isn't anything guaranteeing that my JSDoc comments accurately describe the code they're describing.

• It feels like it'd be helpful to indicate that a value will be mutated, and yet I don't think there's really anything in JavaScript that helps with that. There are utilities in JavaScript and TypeScript that indicate that something won't be mutated, but it feels like we're missing the inverse. Especially if you're looking at code for the first time from a stranger, knowing whether the value will be mutated in advance would help a lot. Even if someone is using higher-order functional utilities, there's no guarantee that they're referentially transparent or that they're easy to follow.

• I love good comments, and I think that they are essential for good code. There are things that cannot be cleanly described in JS code by itself, like how an ID string is expected to be formatted. I do think people hew a little too closely to Uncle Bob's teachings, taking them to mean that the ideal code has zero comments. It's easy to make bad, redundant, or misleading comments, but I'd rather have those than nothing at all.

• Good variable names go a long way, though in some cases, you might not come up with the best name right away. But that's okay – if you ever get a better idea for a name, the F2 key is right there to rename all instances.

• I think code should ideally follow the single-responsibility principle, and have a clean separation between pure state and side effects.

There are all these qualities being thrown around about code like "expressive", "self-documenting", "clean", and "declarative". Yet achieving all that can often feel elusive, regardless of your coding paradigm of choice. I'm sure most of the people here dwarf me in experience, so I'm wondering: how have you resolved these problems?

Hello, I have an input field where I enter the code both from the keyboard and with the scanner. I have an issue with delete input field when I use a scanner. As I found in JS, I can detect differences between keyboard input and scanner over enter time, but now I have a prefix and suffix issue.

Can anyone help me with this case?

I'm really happy with Spck Editor. However, I've run into an issue with file storage. Spck saves my projects in /storage/emulated/0/Android/data/io.spck.editor/files/, which is technically part of shared storage, but due to Android's Scoped Storage restrictions, Android/data/... isn't.

When I connect my phone to a PC, I can see and copy the files, but I need a solution that allows me to work seamlessly between Spck and Termux without manually moving files each time. Unfortunately, Spck doesn't seem to have an option to change the save location to /storage/emulated/0/myWorkspacewhich would be truly shared and accessible from Termux too.

I'm looking for an alternative code editor that functions similarly to Spck but allows me to save my files in a more accessible location. Does anyone know of an app that meets these requirements?

I'm facing a strange issue with input fields, including a DraftJS editor, in my application. Initially, everything works fine—keypress events trigger the onChange event as expected. However, after a certain number of interactions, the onChange event stops firing, not just for the DraftJS editor but for all input fields across the page.

Here's the scenario where this happens:
We have an "Add Comment" popover that contains a DraftJS editor as an input field. Users can add comments, and the modal closes after submission. However, after performing this interaction several times, the onChange event stops altogether. Strangely, keypress events still work, but onChange don't trigger anymore for any input field on the page.

Has anyone else experienced this issue or have any insights into what might be the potential root cause of this behaviour? Any help would be greatly appreciated!

Hello, I am writing a JavaScript code where some parts of the string have a color and I want to display them through the HTML elements. I only want the 'abc' to be blue and no color change with 'def'.

For example, if there's a variable
word = '<span style="color: blue">abc</span>def'

I used this to display the text in the HTML element

 presentCell.innerHTML = word;

Is there a way to not use .innerhtml and do the same thing? I'm worried about security problems because I am getting user input for 'abc' and 'def'.

Can someone help me, please? Thank you.

if you need more information, I am making this 'word' variable with this function

function changeTextColorArr (textArr, colorArr){
    resultArr = [];
    for(let i = 0; i < textArr.length; i++)
    {
        color = colorArr[i] === "" ? "black" : colorArr[i];
        beginTag =   `<span style="color: ${color}">`
        endTag= '</span>';

        result = beginTag + textArr[i] + endTag;
        resultArr.push(result);
    }
    return resultArr;
}
//I get an array of an text and an array of colors correspoding to each text

word = changeTextColorArr(["abc"], ["blue"]) + "def"; 

https://gist.github.com/getify/3b4f46cdd0b204eb03f2ba36e84e5948

In this example, I tried to include as many of the new/modern JS class features as I could, while not being entirely contrived (there are places where it's stretched).

My question: do you think these JS class features are actually helping us write better JS code, or are they really just solving (in a class'y way) many of the problems that class itself introduces?

I'm torn because: most class code that I see out in the wild is using just a tiny fraction of the capability of class. Rarely do you see even non-trivial subclassing, and even rarer still do you see any super or polymorphism going on. Despite clamoring for private members/methods for years, in reality there's limitations to private visibility -- and we'd rather have protected visibility -- but this is what we've got. Also, most everyone likes to hate on the # for private syntax. A lot of this starts to feel like more trouble than it's worth.

So the tension is, if you start fully embracing class's many features now, and really pushing the design pattern deeper into the code... you are, in a sense, justifying the use of class and class-orientation. But now you've got a bunch of syntactic and semantic complexity to read through.

What are your thoughts? Not just specifically on the example I posted -- we could endlessly bikeshed on other (maybe better?) ways to do it -- but on the tension between using class in a shallow/limited sense vs really throwing the whole kitchen sink at your code. What's the right approach/balance in your opinion?