mbeaudru / modern-js-cheatsheet Goto Github PK

Bonjour! Can I translate your modern-js-cheatsheet into Chinese, by pulling request a new file named readme_CN.md to your repo? Or any other way is ok. 😁😁

If needed I can help with romanian translation

in arrow function implicit return, if you want to just return an object like {a: 1}, you may need to surround it in parentheses, otherwise it will conflict with the block braces {}:
x => ({value: x})

Hello,

I would like to raise a PR to add the Udacity course for Javascript under Complementary Resources section. I believe this course is really useful.

Let me know if this sounds good, I will raise a PR for the same.

Regards,
Harshita Kasera

Lots of unwanted stuff happening after line 144.

This is the origin sample code, the result is 1.

function myFunc() {
  this.myVar = 0;
  setTimeout(() => {
    this.myVar++;
    console.log(this.myVar);
  }, 0);
}

myFunc(); // 1

And the following code has the same reuslt 1.

function myFunc() {
  this.myVar = 0;
  setTimeout(function() {
    this.myVar++;
    console.log(this.myVar);
  }, 0);
}

myFunc(); // 1

And i think use an object manner write this example maybe better? Like this:

myVar = 123;

var object= {
  myVar: 0,
  f: function () {
    setTimeout(() => {
      this.myVar++;
      console.log(this.myVar);
    }, 0);
  }
}

object.f(); // 1

And this is the comparing code:

myVar = 123;

var object= {
  myVar: 0,
  f: function () {
    setTimeout(function() {
      this.myVar++;
      console.log(this.myVar);
    }, 0);
  }
}

object.f(); // 124

Alguém pra colaborar em uma tradução?
Someone here to colaborate in a translation?

Declarations get hoisted, including let and const.

From the documentation:

13.3.1 Let and Const Declarations

let and const declarations define variables that are scoped to the running execution context's LexicalEnvironment. The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated. A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created. If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.

So variables declared with let and const are created when accessing the enclosing scope, but remain uninitialized until the code containing the actual declaration is executed.

The TDZ article linked in this cheatsheet is also mentioning this.

And therefore, calling const variables is just plain wrong. Whole section in variables refers to them this way.

Also, telling someone to declare their variable as const is just completely incorrect based on any programming principles. That might be your preference and opinion, but it's definitely not based on any programming books or recommendations.

I haven't got to read the rest, so far, but if this issue is right in the beginning, I don't want to know, what else is lurking in your manual.

https://github.com/mbeaudru/modern-js-cheatsheet#class

there's 2x links to:

Understanding Prototypes in JS - Yehuda Katz
A plain English guide to JS prototypes - Sebastian Porto
Inheritance and the prototype chain - MDN

Not sure which you wanted to keep.

/*
To do an implicit return, the code must be written in a one-line sentence.

const double = (x) => {
return x * 2; // Explicit return here
}
Since there only is a return value here, we can do an implicit return.

const double = (x) => x * 2;

*/

I think the sentence explaining the implicit return should be written:
Since there is only one line here, we can do an implicit return. Or:
Since there is only one line here, there is no need to add the return keyword.

This is ace, bu not really a cheatsheet as its too long form, would it be useful to actually attempt to put the same information (in short hand) on a page or couple of pages for "quick" reference? This woud probably mostly be a design challenge TBH. And happy to help

There's no reference to how to use it as a function.
The included google's link also links to https://leanpub.com/understandinges6/read#leanpub-auto-multiline-strings which has some good stuff, but a basic example -- or at least saying it exists -- would be useful.

function tag(literals, ...substitutions) {
    // return a string
}
tag`some text${substitution}`

If so the table that shows Scope/Reassignable/Mutable/Hoisting for const/let/var should be updated

I wonder if it would be better if every translation had its have branch in the commit tree. In case of updating master branch, it was easier to make corrections to translations.

Hey there! Thanks for the nice cheatsheet. Is there any chance that I can help translate it to Chinese(Traditional)?

Hi, on modules you write:

You can only name-export variables (not functions or class), so if you want to name-export a function, you have to store it in a variable before.

But on one of the examples on MDN I can see a function cube being directly exported (as opposed to what you said above that you can't export it directly):

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

Can you clarify this?

A const, as well as let, declared variables are block scoped and not accessible before being assigned, but they can't be reassigned nor re-declared afterwards.

->

A const, as well as let, declared variables are block scoped, not accessible before being assigned and can't be re-declared afterwards. const also can't be reassigned later, while let can be reassigned later .

It's a long document, and maybe a bit more text than I would expect of a cheatsheet ;) so it would be nice to use githubs folding syntax for all detailed explanations like so:

<details>
  <summary>Click to expand</summary>
  whatever
</details>

I find it dangerous to encourage people to use not yet standardized features of the language.

For example, object rest/spread is still in stage 3, but that is not mentioned in the guide.

Hey, I'm going to translate this wonderful cheat sheet into Russian. If someone else is going to do the same, then first check out my repository. 🙂

Hi, I'm a pythonista who's been tinkering with JavaScript a lot lately and I would love to translate your amazing guide into Polish. I'm already halfway through.

You are a real hero bro

Thanks Manuel for your great work in the team.
You have learn a lot here but also contributed to create great widgets used at high level of management.
Keep your motivation and willingness to work well.

FluidGrid power!

Guillaume, Jean-Max, Remi

class Example {
static Callme() {
console.log("Static method");
}
}
Example.Callme();

Output:
Static method

Missing yield keyword and generators

Advanced example :- Tree walking

function * elements (tree) {
  yield tree.label;
  if (tree.children)
    for (const child of tree.children)
      yield * elements(child);
}

[...elements(tree)]
  //=> [ 1, 2, 4, 5, 3, 6]

http://raganwald.com/2016/11/30/anamorphisms-in-javascript.html

Hi,

Found a spelling error at both markdown files, introduction>motivation second and third paragraph.

Developers, not developpers. Recommendation, not recommandation. Could be more, just skimmed through the first few parts.

Great job at the cheatsheet by the way.

Issue origin: PR #29

Resources:

• Special case import statements - Ponyfoo.com
• ES6 Modules - Ponyfoo.com
• Misunderstanding ES6 Modules - Kent C. Dodds

The Async/Await section spreads some misinformation and bad practices. It explains that try/catch must be used whenever an await expression is used, but that is not the case. For example, this snippet:

function getGithubUser(username) {
  return new Promise((resolve, reject) => {
    fetch(`https://api.github.com/users/${username}`)
      .then(response => {
        const user = response.json();
        resolve(user);
      })
      .catch(err => reject(err));
  })
}

getGithubUser('mbeaudru')
  .then(user => console.log(user))
  .catch(err => console.log(err));

is the same as:

function getGithubUser(username) {
  return fetch(`https://api.github.com/users/${username}`).then(response => response.json());
}

getGithubUser('mbeaudru')
  .then(user => console.log(user))
  .catch(err => console.log(err));

You don't need to wrap it in another Promise, fetch already returns a promise.

This snippet is really bad, which I'll explain:

async function getGithubUser(username) { // promise + await keyword usage allowed
  try { // We handle async function errors with try / catch
    const response = await fetch(`https://api.github.com/users/${username}`); // Execution stops here until fetch promise is fulfilled.
    const user = response.json();
    return user; // equivalent of resolving the getGithubUser promise with user value.
  } catch (err) {
    throw new Error(err); // equivalent of rejecting getGithubUser promise with err value.
  }
}

getGithubUser('mbeaudru')
  .then(user => console.log(user))
  .catch(err => console.log(err));

You don't need to have a try/catch block every time you have an await expression. You're already catching the error with .catch() on the last line. Any function that getGithubUser calls that throws, and any function the functions getGithubUser() calls that throws, and so on, will be caught by the last .catch(). It should be rewritten:

async function getGithubUser(username) { // promise + await keyword usage allowed
  const response = await fetch(`https://api.github.com/users/${username}`); // Execution stops here until fetch promise is fulfilled.
  const user = response.json();
  return user; // equivalent of resolving the getGithubUser promise with user value.
}

getGithubUser('mbeaudru')
  .then(user => console.log(user))
  .catch(err => console.log(err));

Additionally, the throw new Error(err); is super bad because you lose the original error type and whatever custom stack trace implementation it has. For example:

class TlsHandshakeError extends Error {}

async function throws () {
  throw new TlsHandshakeError("key mismatch");
}

async function doSomething () {
  try {
    await throws()
  } catch (e) {
    throw new Error(e);
  }
}

doSomething.catch(e => console.error(e));

The error written to console will be Error: Error: key mistmatch rather than TlsHandshakeError: key mismatch.

The above could be:

class TlsHandshakeError extends Error {}

async function throws () {
  throw new TlsHandshakeError("key mismatch");
}

async function doSomething () {
  await throws()
}

doSomething.catch(e => console.error(e)); // TlsHandshakeError: key mismatch

The code below will catch the error and not crash the application:

async function throws () {
  throw new Error("error");
}

async function step1 () {
  await throws();
}

async function step2 () {
  await step1();
}

async function step3 () {
  await step2();
}

step3().catch((err) => {
  // Error is caught here
  console.log(err); // Error: error
});

Same with the last snippet:

async function fetchPostById(postId) {
  try {
    const token = await fetch('token_url');
    const post = await fetch(`/posts/${postId}?token=${token}`);
    const author = await fetch(`/users/${post.authorId}`);

    post.author = author;
    return post;
  } catch(e) {
    throw new Error(e);
  }
}

fetchPostById('gzIrzeo64')
  .then(post => console.log(post))
  .catch(err => console.log(err));

should be:

async function fetchPostById(postId) {
  const token = await fetch('token_url');
  const post = await fetch(`/posts/${postId}?token=${token}`);
  const author = await fetch(`/users/${post.authorId}`)

  post.author = author;
  return post;
}

fetchPostById('gzIrzeo64')
  .then(post => console.log(post))
  .catch(err => console.log(err));

This will probably improve the view of the document and will allow sharing with ease.

Need to update the jekyll theme title to the appropriate name.

• I'm working on this.

The "cheatsheet" seems to be missing async and await keywords and their usage.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

The last console.log(myVar) throw an error because myVar is not in the global variable (outside of all functions).

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar);

In variable mutation:

var myVar = "Nick";
myVar = "John" // here myVar is being mutated

Though this is a reassignment, not a mutation, a distinction that is made in Notions: Variable declaration.

It should say myVar is said to be reassigned (variables are assigned, values are mutated).

Hi

A promising guide I think!
I found a little mistake in https://github.com/mbeaudru/modern-js-cheatsheet#promises. You say:
a) "So it doesn't have a current state."
b) "When called, the promise body runs".

But, according to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

a) the promise Object is immediately in pending state after instance creation (also Promise A+ says this)
b) the executor is executed immediately during promise object construction (Promise A+ spec did not say anything about when executor is to be executed)

Resources:

• Temporal dead zone - wesbos
• Guide to JS variable hoisting

Hello ! I’m a native French speaker and I’m currently translating this project. If anyone wants to join in, here’s my fork : https://github.com/Nicolapps/modern-js-cheatsheet/tree/french-translation

While I'm sure it's a good resource, people coming here looking for an actual sheet or sheet-like document (which limits the amount of information it can contain) would be disappointed. Sorry to be so pedantic, but maybe consider renaming it to guide, compendium, or something?

Edit: just read that you're calling it "guide" in the README already..

Hey Manuel, Great job here! I would like to help with the translation to Spanish. Is that something you would be interested?

In the var demo:

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Undefined, myVar is not accessible outside the function.

Is the last line should throw an exception? instead of undefined since it's not accessible: