new Promise(function(resolve, reject) { setTimeout(() => { throw new Error("Whoops!"); }, 1000); }).catch(alert);

My gut told me calling an async function from the setTimeout callback was a bad thing. Since the setTimeout machinery ignores the return value of the function, there is no way it was awaiting on it. This means that there will be an unhandled promise. An unhandled promise could mean problems if the function called in the callback takes a long time to complete or throws an error.

The callback executed by setTimeout is not expected to return anything, it just ignores the returned value. Since once you enter the promise/async world in JavaScript you cannot escape, I was left to wonder what happens when the setTimeout callback returns a promise?

test2 being marked async does wrap your return value in a new promise:

const rejectedP = Promise.reject('-'); const finallyP = rejectedP.finally(); const result1 = rejectedP; const result2 = new Promise(resolve => { const rejectedP = Promise.reject('-'); const finallyP = rejectedP.finally(); resolve(rejectedP); }); we can see that the first snippet creates two promises (result1 and rejectedP being the same) while the second snippet creates three promises. All of these promises are rejected, but the rejectedP rejection is handled by the callbacks attached to it, both through ….finally() and resolve(…) (which internally does ….then(resolve, reject)). finallyP is the promise whose rejection is not handled in the both examples. In the second example, result2 is a promise distinct from rejectedP that is also not handled, causing the second event.

You basically did var a = promise.then(…); var b = promise.catch(…); creating a branch in the chain. If promise is getting rejected now, the catch callback will be called and b will be a fulfilled promise just fine, but the a promise is getting rejected too and nobody handles that. Instead, you should use both arguments of then and write Requirement.create({id: id, data: req.body.data, deleted: false}) .then(requirement => { res.json(requirement); }, reason => { let err = {'error': reason}; res.json(err); });

Just "ignoring" a Promise result if it is not longer needed is an antipattern in my opinion.

but has a critical difference: the expression console.log("before 2"); does not and cannot depend on the resolved value result. The throw propagates through all chained promises, and when it stops, there is no remaining undefined behavior! No piece of code is left in an unclear state, and therefore there is no reason to crash.

Node is entirely at liberty to limit the design the same way we crash the process on errors (which browsers do not).

co(function* () {  var result = yield Promise.resolve(true);  return result;}).then(function (value) {  console.log(value);}, function (err) {  console.error(err.stack);});

Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

The power of await is that it lets you write asynchronous code using synchronous language constructs.

Yes, precisely because I've been involved in maintaining codebases built without real full stack frameworks is why I say what I said.The problem we have in this industry, is that somebody reads these blog posts, and the next day at work they ditch the "legacy rails" and starts rewriting the monolith in sveltekit/nextjs/whatever because that's what he/she has been told is the modern way to do full stack.No need to say those engineers will quit 1 year later after they realize the mess they've created with their lightweight and simple modern framework.I've seen this too many times already.It is not about gatekeeping. It is about engineers being humble and assume it is very likely that their code is very unlikely to be better tested, documented, cohesive and maintained than what you're given in the real full stack frameworks.Of course you can build anything even in assembler if you want. The question is if that's the most useful thing to do with your company's money.

The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character

Decoding query parameters from a URL decodeURIComponent cannot be used directly to parse query parameters from a URL. It needs a bit of preparation. function decodeQueryParam(p) { return decodeURIComponent(p.replace(/\+/g, ' ')); } decodeQueryParam('search+query%20%28correct%29'); // 'search query (correct)'

The old versions of JavaScript had no import, include, or require, so many different approaches to this problem have been developed. But since 2015 (ES6), JavaScript has had the ES6 modules standard to import modules in Node.js, which is also supported by most modern browsers. For compatibility with older browsers, build tools like Webpack and Rollup and/or transpilation tools like Babel can be used.

import La sentencia import se usa para importar funciones que han sido exportadas desde un módulo externo. Por el momento, esta característica sólo está comenzando a ser implementada de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y Babel, y en empaquetadores como Rollup y Webpack.

Just last year Grunt was effectively dethroned by Gulp. And now, just as Gulp and Browserify are finally reaching critical mass, Webpack threatens to unseat them both. Is there truly a compelling reason to change your front-end build process yet again?

IE will block appending any element created in a different window context from the window context that the element is being appending to. var childWindow = window.open('somepage.html'); //will throw the exception in IE childWindow.document.body.appendChild(document.createElement('div')); //will not throw exception in IE childWindow.document.body.appendChild(childWindow.document.createElement('div'));

The actual problem is that when the page is loaded with document.write, IE will always load inline javascript blocks before external javascript files, regardless of which one get defined first. This is described in dynamicdrive.com/forums/blog.php?bt=173 (section II). A good workaround is to put everything as external javascript files. – sayap Jan 5 '12 at 5:05

The first thing you need to know is that JavaScript and Java are two totally different languages. If you are trying to learn JavaScript, you cannot follow instructions intended for Java. The best way I've seen this explained is: "Java is to JavaScript as car is to carpet."

When fixing problem code, only change one thing at a time.

A JavaScript wrapper for the Hypothesis API The HelloWorldAnnotated example uses functions from a library, hlib, to post an annotation to the Hypothesis service.

Programming tools

function intersperse<T>(this: T[], mkT: (ix: number) => T): T[] { return this.reduce((acc: T[], d, ix) => [...acc, mkT(ix), d], []).slice(1); }

A Map of root-level context key-value pairs to supply to the component

Welcome to Accessibility WeeklyA weekly dose of web accessibility to help you bring it into your everyday work. Delivered to your inbox each Monday, curated by David A. Kennedy.

querySelector is the newer feature. getElementById is better supported than querySelector. querySelector is better supported than getElementsByClassName. querySelector lets you find elements with rules that can't be expressed with getElementById and getElementsByClassName

arr.sort([compareFunction]) 参数 compareFunction 可选 用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。

默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。

sort() 方法对数组的项目进行排序。

比如你有一个有值的数组，你想去 map 遍历每一项，这时使用箭头函数非常理想： JavaScript 代码: 12const words = ['hello', 'WORLD', 'Whatever'];const downcasedWords = words.map((word) => word.toLowerCase());

如果您尝试使用内联单行表达式语法，但您返回的值是对象字面量。您可能会认为这看起来应该是这样的： JavaScript 代码: 1(name, description) => {name: name, description: description}; 问题是这种语法比较含糊不清，容易引起歧义 ： 看起来好像你正试图创建一个传统的函数体。 如果你碰巧想要一个对象的单个表达式，请用括号包裹该对象： JavaScript 代码: 1(name, description) => ({ name: name, description: description }); 或者就是直接用 return 123(name, description) => { return { name: name, description: description };};

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错： // SyntaxError: x => { foo: x } 因为和函数体的{ ... }有语法冲突，所以要改为： // ok: x => ({ foo: x })

参数不是一个，就需要用括号()括起来

箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

arguments 是一个对应于传递给函数的参数的类数组对象。

1、当分支较多时，当时用switch的效率是很高的。因为switch是随机访问的，就是确定了选择值之后直接跳转到那个特定的分支，但是if...else是遍历所以得可能值，知道找到符合条件的分支，如此看来switch的效率确实比ifelse要高的多。 2、switch…case只能处理case为常量(是不可以改变的值)的情况，对非常量的情况是无能为力的。例如 if (a > 1 && a < 100)，是无法使用switch…case来处理的。所以，switch只能是在常量选择分支时比if...else效率高，但是if...else能应用于更多的场合，if...else比较灵活。

continue和break有点类似，区别在于 continue只是终止本次循环，接着还执行下一次循环 break用于完全结束一个循环，跳出循环体执行循环后面的语句。

方法 参数 返回值 slice(start, end) start(必需) -起始位置； end(可选)-结束位置，若未指定，则默认到末尾所有元素 返回 [start,end)之间的元素 substring(start, end) start(必需) -起始位置；end(可选)-结束位置，若未指定，则默认到末尾所有元素 返回 [start,end)之间的元素 substr(start, length) start(必需)-起始位置；length(可选)-所截取的元素的个数，若未指定，则默认到末尾 返回[start, start+length)之间的元素 当传的参数都为正数的时候，substring和slice没有区别。当参数为负数时，三个函数的行为不尽相同。 slice() - 将传入的负参数与字符串长度相加； substring() - 把所有的负值置为0； substr() - 将负的第一个参数与字符串长度相加，负的第二个参数置为0。

charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串，返回连接后的字符串 fromCharCode() 将 Unicode 转换为字符串 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 localeCompare() 用本地特定的顺序来比较两个字符串 match() 找到一个或多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLowerCase() 把字符串转换为小写 toString() 返回字符串对象值 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白 valueOf() 返回某个字符串对象的原始值

=== 为绝对相等，即数据类型与值都必须相等。

\n 换行 \r 回车 \t tab(制表符) \b 退格符 \f 换页符

事件句柄，又称事件处理函数 event handlers.指事件发生时要进行的操作。将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。

事件 描述 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

JavaScript 数据类型 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

7 Most Popular JavaScript Libraries in 2021

Even if it's const, an object can still have properties added later returning any arbitrary type. Indexing into the object would then have to return any - and that's an implicit any.

fresh (i.e. provably do not have properties we don't know about)

Check whether a value is defined (non-nullable), meaning it is neither `null` or `undefined`. This can be useful as a type guard, as for example, `[1, null].filter(Boolean)` does not always type-guard correctly.

const str = 'mañana mañana' const strReverse = str.split('').reverse().join('') // => "anãnam anañam" // notice how the first word has an ã rather ñ

A model for understanding equality comparisons

For those coming from Ruby, Javascript has no builtin method like Ruby’s Array#compact.

let bookmarkList = Array.from(document.querySelectorAll('.widget>.vbox')) .map(e => e.shadowRoot) .map(e => e && e.querySelector('.device-page-list')) .find(e => e); let bookmarks = Array.from(bookmarkList.querySelectorAll('.vbox')) .map(e => `[${e.querySelector('.device-page-title').innerHTML}](${e.querySelector('x-link').innerHTML})`); copy(bookmarks.join('\n'));

Lean Canvas in JavaScript

Vue.js vs React: Comparison of Two Most Popular JS FrameworksEugeneFrontend DeveloperVueReactHomeBlogDevelopmentVue.js vs React: Comparison of Two Most Popular JS FrameworksSep 23, 202126 min readNowadays, every company aims to create a high-quality web solution within a short time frame. To put it into practice, the developers’ community chooses from many JavaScript libraries and frameworks and debates to find the best one. At Codica, we consider Vue.js and ReactJS the most rapidly developing tools for the front-end development for many reasons. While these technologies can help create the same products and applications, both of them have pros and cons. The purpose of this article is to compare Vue.js vs React.js in different aspects: from general information to technical features. Both these web development tools have mature communities, wide support and popularity, but Vue.js is a framework and React is a library. So, why do we compare oranges and apples?

How to build Currency Converter in JavaScript

Array.from(Array(10).keys()) //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

A neural network will predict your digit in the blue square above. Your image is 784 pixels (= 28 rows by 28 columns with black=1 and white=0). Those 784 features get fed into a 3 layer neural network; Input:784 - AvgPool:196 - Dense:100 - Softmax:10.

though we recommend Jest as our preference, the library works with any framework

the bug is actually in webpack, related to fs in the web target.

You can help make Node.js and browsers more unified. For example, Node.js has util.promisify, which is commonly used. I don’t understand why such an essential method is not also available in browsers. In turn, browsers have APIs that Node.js should have. For example, fetch, Web Streams (The Node.js stream module is awful), Web Crypto (I’ve heard rumors this one is coming), Websockets, etc.

The main reason I love Node.js is that I don’t have to deal with the awfulness that is JS front-end tooling.

Webpacker used to configure Webpack indirectly, which lead to a complicated secondary configuration process. This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.

Javascript required? In other words, one cannot do this on cross-site iframes (due to cross-site scripting restrictions), is that right? As @clankill3r is suggesting, this demonstrates the need for a pure CSS solution to this problem

Please read https://stackoverflow.com/questions/41750390/what-does-all-legal-javascript-is-legal-typescript-mean

However instead of using array.length for latter items; e.g. array[array.length-1] for the last item, you can call array.at(-1)

function omit(obj, ...props) { const result = { ...obj }; props.forEach(function(prop) { delete result[prop]; }); return result; }

You can use computed properties along with the omit keyword in this case like so. const varName = 'name'; const { [varName]:omit, ...updatedUser } = user;

function omit(key, obj) { const { [key]: omitted, ...rest } = obj; return rest; }

"modern environments" meaning if you're shipping un-transpiled code, this will work on 93% of browsers. See full compatibility at caniuse.com/…

Here is an example run of the QnA model:

"dividing n-dimensional space with a hyperplane."

TensorFlow.js provides theLayers API,which mirrors the Keras API as closely as possible, in-cluding the serialization format.

Emit clean, idiomatic, recognizable JavaScript code.

The encapsulation is enforced by the language. It is a syntax error to refer to # names from out of scope.

in languages (like JavaScript and Java) where external objects do have direct access to instance vars

Note: there’s no way to define private methods, getters and setters. but a proposal is there https://github.com/tc39/proposal-private-methods

Private instance accessors (getters and setters)

class Person { #firstname = "Babel"; #lastname = "JS"; get #name() { return this.#firstname + " " + this.#lastname; } sayHi() { alert(`Hi, ${this.#name}!`); } }

If an access modifier is not specified it is implicitly public as that matches the convenient nature of JavaScript 🌹.

import { knex } from 'knex' // this is a function that you call to instantiate knex import { Knex } from 'knex' // this is a namespace, and a type of a knex object

get: function(target, prop, receiver) { return "world"; }

With the help of the Reflect class we can give some accessors the original behavior and redefine others:

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in.

Unlike browsers, you can access raw Set-Cookie headers manually using Headers.raw(). This is a node-fetch only API.

We implemented isomorphic fetching (i.e. fetching with the browser's implementation on the client and node-fetch on the server)

Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. SvelteKit does all the boring stuff for you so that you can get on with the creative part.

makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).

All you need is an email address or phone number associated with an account and you will get a magic link or one-time password each time you want to log in. As soon as you click the link, you'll get redirected to the app and you'll already be logged in. After that, the magic link isn't valid so no one else can use it.

The reason Final Form does this is so that pristine will be true if you start with an uninitialized form field (i.e. value === undefined), type into it (pristine is now false), and then empty the form field. In this case, pristine should return to true, but the value that the HTML DOM gives for that input is ''. If Final Form did not treat '' and undefined as the same, any field that was ever typed in would forever be dirty, no matter what the user did.

One part of React that I've always championed is how it's just JavaScript. I like that in React you don't use a distinct template syntax and instead embed JavaScript, compared to Svelte's templating language

I will always find React's approach easier - at least in my head - and I think more friendly to people familiar with JavaScript who are learning a library.

What are the current trends in JavaScript development?

JavaScript needs to fly from its comfy nest, and learn to survive on its own, on equal terms with other languages and run-times. It’s time to grow up, kid.

If JavaScript were detached from the client and server platforms, the pressure of being a monoculture would be lifted — the next iteration of the JavaScript language or run-time would no longer have to please every developer in the world, but instead could focus on pleasing a much smaller audience of developers who love JavaScript and thrive with it, while enabling others to move to alternative languages or run-times.

Despite a growing variety of languages that compile to JavaScript, the language itself remains the dominant language in both client-side and server-side eco-systems for web development. The idea of replacing JavaScript with languages that compile to JavaScript, has been explored, and for whatever reasons, it hasn’t really liberated anyone from JavaScript.

We standardize on a finite subset of JS (such as asm.js) — and avoid the endless struggle through future iterations of the JavaScript language, competing super-sets and transpilers

agree to accept JavaScript for what it is, but start to think of it as a kind of VM for other languages

JavaScript, as a language, has some fundamental shortcomings — I think the majority of us agree on that much. But everyone has a different opinion on what precisely the shortcomings are.

As to opinions about the shortcomings of the language itself, or the standard run-times, it’s important to realize that every developer has a different background, different experience, different needs, temperament, values, and a slew of other cultural motivations and concerns — individual opinions will always be largely personal and, to some degree, non-technical in nature.

Another important MicroJS attribute is independence. Ember, Backbone—even Bootstrap to a degree–have hard dependencies on other libraries. For example, all three rely on jQuery. A good MicroJS library stands by itself with no dependencies. There are exceptions to the rule, but in general, any dependency is another small MicrojJS library.

D3 now passes events directly to listeners, replacing the d3.event global and bringing D3 inline with vanilla JavaScript and most other frameworks.

ECMAScript is a programming language itself, specified in the document ECMA-262. In other words, ECMA-262 is the specification of the programming language ECMAScript. JavaScript is an implementation of ECMAScript which conforms to the ECMAScript specification. JavaScript implementations can also provide additional features not described in the specification.

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.

Opal is a Ruby to JavaScript source-to-source compiler. It comes packed with the Ruby corelib you know and love. It is both fast as a runtime and small in its footprint.

we used `backticks` to jump into native Javascript to use moment.js

Hyperstack gives you full access to the entire universe of JavaScript libraries and components directly within your Ruby code.Everything you can do in JavaScript is simple to do in Ruby; this includes passing parameters between Ruby and JavaScript and even passing Ruby methods as JavaScript callbacks.There is no need to learn JavaScript, all you need to understand is how to bridge between JS and Ruby.

Think JavaScript is your only option for the front-end? Think again. Hyperstack is a Ruby DSL, compiled by Opal, bundled by Webpack, powered by React.

Emscripten is an LLVM/Clang-based compiler that compiles C and C++ source code to WebAssembly

The Unity, Godot, and Unreal game engines provide an export option to HTML5, utilizing Emscripten.