Search results

Arrow functions VS bind There’s a subtle difference between an arrow function => and a… We will on the chapter Class inheritance That’s because they are meant for short pieces of code that

The pattern searches for: V,… For instance: \d – is the same as [0-9], \w – is the same as [a-zA-Z0-9_], \s – is the same as [\t\n\v\… We can see their codes like this:… [<55349><56499>-<55349><56500>] (every surrogate pair is replaced with its codes… Now it’s easy to see that the range 56499-55349 is invalid: its starting code 56499 is greater than the

The code above shows its string representation, which is the source code.… Function Expression vs Function Declaration.Let’s formulate the key differences between Function Declarations… First, the syntax: how to differentiate between them in the code.… They can be assigned, copied or declared in any place of the code.… Function Declarations are processed before the code block is executed.

iframe.onload vs… To make it work, each such window should run the code:… And the support will be kept for the future, not to break old code that relies on document.domain.… the exclusion of certain actions inside an <iframe> in order to prevent it executing untrusted code… That can be used to run untrusted code in iframes from the same site.

local web-server, such as static-server or use the “live server” capability of your editor, such as VS… Code Live Server Extension to test modules.… other modules, its code is executed only once, upon the first import.… Then it can export a configuration object expecting the outer code to assign to it.… Module code is executed only once. Exports are created once and shared between importers.

That is: each character has a corresponding numeric code.… The characters are compared by their numeric code.… The greater code means that the character is greater.… The code for a (97) is greater than the code for Z (90).… Here, its code is greater than anything from a to z.

The first thing we’ll study is the building blocks of code.… We can have as many statements in our code as we want.… So, the code in the last example is treated as a single statement.… We need to put a semicolon after alert for the code to work correctly.… Comments increase the overall code footprint, but that’s not a problem at all.

Our code must be as clean and easy to read as possible.… A good code style greatly assists in that.… But a code block (the last variant) is usually more readable.… See more about that in the chapter Code structure.… code more readable and easier to understand?”

Code review gurus look for them in test tasks.… And will ultimately fail to alter your well-thought code.… A quick read of such code becomes impossible.… every code branch.… A true ninja coder will make them not obvious from the code as well.

A code editor is the place where programmers spend most of their time.… There are two main types of code editors: IDEs and lightweight editors.… If you haven’t selected an IDE yet, consider the following options: Visual Studio Code (cross-platform… For Windows, there’s also “Visual Studio”, not to be confused with “Visual Studio Code”.… The author’s personal opinion: I’d use Visual Studio Code if I develop mostly frontend.

Selection end/start vs Range There’s an important difference between a selection anchor/focus… Example: tracking selection.For example, this code uses onselect event to track selection:

The built-in eval function allows to execute a string of code.… That negatively affects code compression ratio.… If eval’ed code doesn’t use outer variables, please call eval as window.eval(...): This way the code… Summary.A call to eval(code) runs the string of code and returns the result of the last statement.… Instead, to eval the code in the global scope, use window.eval(code).

Strange result: null vs 0.Let’s compare null with a zero:

space”) A space symbol: includes spaces, tabs \t, newlines \n and few other rare characters, such as \v,

We normally use them to describe how and why the code works.… Seriously, the code should be easy to understand without them.… Such code is called self-descriptive.… And also the code structure is better when split.… Any subtle features of the code? Where they are used?

code.… A transpiler would analyze our code and rewrite height ?? 100 into (height !… Now the rewritten code is suitable for older JavaScript engines.… In some (very outdated) JavaScript engines, there’s no Math.trunc, so such code will fail.… They’ll ensure that the code works.

If the equality is found, switch starts to execute the code starting from the corresponding case, until… If no case is matched then the default code is executed (if it exists).… An example.An example of switch (the executed code is highlighted):… Grouping of “case”.Several variants of case which share the same code can be grouped.… So we’ve got a dead code in case 3! The default variant will execute.

When such function is called, it doesn’t run its code.… Then the function execution pauses, and the yielded value is returned to the outer code.… The result is returned to the outer code.… The current line of the calling code is the line with generator.throw, labelled as (2).… The outer code and the generator may exchange results via next/yield calls.

..) statement evaluates a condition in parentheses and, if the result is true, executes a block of code… We recommend wrapping your code block with… So, the code under this condition would never execute:… Instead, we execute different code depending on the condition.… Use if when you need to execute different branches of code.

Before writing more complex code, let’s talk about debugging.… It also allows to trace the code step by step to see what exactly is going on.… The Code Editor pane shows the source code.… Yes, right on the 4 digit, not on the code. Congratulations! You’ve set a breakpoint.… The “Step into” goes into their code, waiting for them if necessary.

Naturally, articles and other materials may contain source code snippets.… We find code snippets in HTML and highlight them. Now let’s go on.… If you run this code, it starts observing the element below and highlighting any code snippets that appear… Please run the previous code (above, observes that element), and then the code below.… We can add/remove code snippets in HTML without thinking about it.

That’s not how we write new code.… As we can see, var pierces through if, for or other code… So the code works essentially like this:… So the code executes right away and has its own private variables.… Let’s note again: nowadays there’s no reason to write such code.

Even when a Promise is immediately resolved, the code on the lines below .then/.catch/.finally will still… That’s why “code finished” in the example above shows first.… That is, it first gets queued, then executed when the current code is complete and previously queued… How can we make code finished appear after promise done?… So .then/catch/finally handlers are always called after the current code is finished.

JavaScript allows us to insert a character into a string by specifying its hexadecimal Unicode code with… Surrogate pairs.All frequently used characters have 2-byte codes (4 hex digits).… Technically, surrogate pairs are also detectable by their codes: if a character has the code in the interval… The next character (second part) must have the code in interval 0xdc00..0xdfff.… Most common “composite” characters have their own code in the Unicode table.

property of the event object allows to get the “physical key code”.… “KeyZ” and other key codes Every key has the code that depends on its location on the keyboard… Key codes described in the UI Events code specification.… Digit keys have codes: "Digit<number>": "Digit0", "Digit1" etc.… Main keyboard event properties: code – the “key code” ("KeyA", "ArrowLeft" and so

They allow the code to be called many times without repetition.… For instance, in the code below the function uses the local userName.… Instead of the code piece we see a name of the action (isPrime).… Sometimes people refer to such code as self-describing.… They structure the code and make it readable.

lt;script> tag has a few attributes that are rarely used nowadays but can still be found in old code… These comments hide JavaScript code from old browsers that didn’t know how to process the <script&… External scripts.If we have a lot of JavaScript code, we can put it into a separate file.… A single <script> tag can’t have both the src attribute and code inside.… We can use a <script> tag to add JavaScript code to a page.

closure (used if no code supplied), 1006 – no way to set such code manually, indicates that the connection… WebSocket codes are somewhat like HTTP codes, but different.… In particular, codes lower than 1000 are reserved, there’ll be an error if we try to set such a code.… Here’s the code: Server-side code is… Methods: socket.send(data), socket.close([code], [reason]).

That’s because import/export aim to provide a backbone for the code… That’s a good thing, as code structure can be analyzed, modules can be gathered and bundled into one… It can be called from any place in the code.… We can use it dynamically in any place of the code, for instance:

A “consuming code” that wants the result of the “producing code” once it’s ready.… A promise is a special JavaScript object that links the “producing code” and the “consuming code” together… that result available to all of the subscribed code when it’s ready.… It contains the producing code which should eventually produce the result.… Our code is only inside the executor.

That’s because the engine can’t understand the code.… So, try...catch can only handle errors that occur in valid code.… That’s wrong and also makes the code more difficult to debug.… The try...catch construct may have one more code clause: finally.… In the code above, an error inside try always falls out, because there’s no catch.

moment, passed as an argument to another function, and then called from a totally different place of code… Code blocks.If a variable is declared inside a code block {...}, it’s only visible inside that block.… A reference to the outer lexical environment, the one associated with the outer code.… As the code starts executing and goes on, the Lexical Environment changes.… We can’t get this object in our code and manipulate it directly.

All previous declarations required us, programmers, to write the function code in the script.… It is used in very specific cases, like when we receive code… The code of that function is not known at the time of writing the script (that’s why we don’t use regular… Minifiers are smart, they analyze the code structure, so they don’t break anything.… Besides, such code would be architecturally bad and prone to errors.

Pyramid of Doom.At first glance, it looks like a viable approach to asynchronous coding.… if we have real code instead of ... that may include more loops, conditional statements and so on.… So this way of coding isn’t very good.… It works, but the code looks like a torn apart spreadsheet.… That’s inconvenient, especially if the reader is not familiar with the code and doesn’t know where to

The Error class is built-in, but here’s its approximate code so we can understand what we’re extending… block only knows how to handle validation and syntax errors, other kinds (caused by a typo in the code… Wrapping exceptions.The purpose of the function readUser in the code above is “to read the user data”… The code which calls readUser should handle these errors.… So the outer code checks instanceof ReadError and that’s it.

For example, outputting goods from a list one after another or just running the same code for each number… Loops are a way to repeat the same code multiple times.… While the condition is truthy, the code… Surely, we can just wrap the code in an if block instead of using continue.… In this case, code execution jumps to the next iteration of the labeled loop.

As you can see, the "user.address" appears twice in the code.… That’s just awful, one may even have problems understanding such code.… As you can see, property names are still duplicated in the code.… E.g. in the code above, user.address appears three times. That’s why the optional chaining ?.… For example, if according to our code logic user object must exist, but address is optional, then we

When testing a code by manual re-runs, it’s easy to miss something.… Wrote some code, testing: f(1) works, but f(2) doesn’t work. We fix the code and now f(2) works.… At the end we have both the spec and the code.… Besides, a well-tested code has better architecture.… Naturally, that’s because auto-tested code is easier to modify and improve.

In the code… flow (not inside another expression) as a code block.… So here JavaScript assumes that we have a code… In the code below options has another object in the property size and an array in the property items.… Usually, IDEs try to help us, especially if the code is well-documented, but still… Another problem is

For instance, in the code below the ask function accepts a question to ask and an arbitrary number of… is that sayHi may change in the outer code.… Let’s use it to fix our code:… The outer code still has its variable sayHi or welcome.… If the function is declared as a Function Expression (not in the main code flow), and it carries the

How can we code it well? Promises provide a couple of recipes to do that.… So in the code above all alert show the same: 1.… Please note that the code is still “flat” — it grows down, not to the right.… The code below makes a request to user.json and loads its text from the server:… Finally, we can split the code into reusable functions:

functions that execute on getting and setting a value, but look like regular properties to an external code… Technically, external code is able to access the name directly by using user._name.… convenient: Now what to do with the old code… We can try to find all such places and fix them, but that takes time and can be hard to do if that code… Now the old code

To emulate such behavior, a polyfill would need to analyze the code and replace all such operators with… In other words, this approach suggests that we write code in JSBI instead of native bigints.… with numbers as with bigints internally, emulates them closely following the specification, so the code… We can use such JSBI code “as is” for engines that don’t support bigints and for those that do support

The code: Such a code doesn’t care… Here’s the improved code: Explanations… As the result, we have a fast, efficient highlighting code, that doesn’t care about the total number… We don’t need to write the code to assign a handler to each button.… Less code: when adding or removing elements, no need to add/remove handlers.

Code is prone to errors. You will quite likely make errors… Oh, what am I talking about?… There’s an error in the JavaScript code on it.… Multi-line input Usually, when we put a line of code into the console, and then press Enter… This way one can enter long fragments of JavaScript code.

That had the benefit of never breaking existing code.… To keep the old code working, most such modifications are off by default.… Browser console.When you use a developer console to run code, please note that it doesn’t use strict… Later, when your code is all in classes and modules, you may omit it.

Property value shorthand.In real code, we often use existing variables as values for property names.… So the in operator is an exotic guest in the code.… The phone codes go in the ascending sorted order, because they are integers.… , we can “cheat” by making the codes non-integer.… Adding a plus "+" sign before each code is enough.

Here’s the code, and explanations follow:… In the code… By separating caching from the main function code we also keep the main code simpler.… summarize, there are several benefits of using a separate cachingDecorator instead of altering the code… And all this without changing its code!

For example, syntax-highlighting (used to colorize code examples on this page) is quite CPU-heavy.… If you run the code below, the engine will “hang” for some time.… We can do that by wrapping the code in zero delay setTimeout.… Microtasks come solely from our code.… That’s a way to run code in another, parallel thread.

When reading the code, COLOR_ORANGE is much more meaningful than #FF7F00.… In other words, capital-named constants are only used as aliases for “hard-coded” values.… In a real project, most of the time is spent modifying and extending an existing code base rather than… When we return to some code after doing something else for a while, it’s much easier to find information… Using different variables for different values can even help the engine optimize your code.