7 posts tagged with "javascript"

const keyword is used to declare variables in JavaScript.

const a = 10;

We can declare multiple constants at the same time.

const a = 10,
  b = 20;

We have learned that Array is a data structure that stores its elements in contiogous memory locations. Look the code below:

const arr = ["Apple", "Banana", "Orange"];

JavaScript supports Unicode character set. We can name identifiers using unicodes. We can also use unicodes in strings and comments.

Unicode in Identifiers​

Names of variables, constants or functions are examples of identifiers. We normally give meaningful identifier names in English. Since, JavaScript supports unicode, we can even name variables in non-english language like Japanese.

There are different ways to try JavaScript. In order to understand and run JavaScript code, we need a JavaScript compiler. Every browser available in the market has a JavaScript compiler or engine. We also have a standalone JavaScript run time, which is called Node.js.

Testing Code​

We are going to understand different ways using which we can run JavaScript and see the output. Here is the JavaScript code that we are going to try:

Modern browsers have event listeners to listen for touchstart, touchmove and so on. These are related to scrolling events. Here is an example that logs hi in console when the touch starts.

document.addEventListener("touchstart", function (e) {
  console.log("hi");
});

We can prevent the default scrolling behavior inside the event listener using e.preventDefault() like shown below.

document.addEventListener("touchstart", function (e) {
  console.log("hi");
  e.preventDefault();
});

Because of this reason, browsers wait for the event listener logic to finish. Then only they actually scroll the page. That will cause an unnecessary bad user experience. If the developer can inform the browser before hand that, there is no code in my listener that prevents scrolling, that will be a big help for browsers.

passive flag helps developers to do that. Here is how we apply the passive flag.

document.addEventListener(
  "touchstart",
  function (e) {
    console.log("hi");
    e.preventDefault();
  },
  { passive: true }, // highlight-line
);

In the above code, even if there is a preventDefault() line, it does not have an impact because will go ahead with the scrolling by seeing the passive flag.

You can find the browser support of passive flag usage here in this MDN page.

Class Field Declarations feature is in Stage 4 of TC39 process. It is expected to be launched in the year 2022. This proposal was authored by Daniel Ehrenberg. Kevin Gibbons is the champion for this proposal.

Field Declarations​

In ES2015 we can declare classes using class keyword. Here is a simple class for counter.

class Counter {
  constructor() {
    this.count = 0;
  }

  incrementCount() {
    this.count++;
    console.log(this.count);
  }
}

count is used to keep track of the count. Each time, incrementCount() is called, the value of count is incremented by 1.

const counter1 = new Counter();
counter1.incrementCount();
counter1.incrementCount();

Above code prints 1 and 2 in the console.

1
2

Field Declarations helps to declare the fields(count) immediately under Counter and improve code readability. Above class can be modified using field declarations as shown below.

class Counter {
  count = 0; // highlight-line

  incrementCount() {
    this.count++;
    console.log(this.count);
  }
}

The output will be same, but the code is now more readable. In the above example, we have initialized the value of count. We can also just declare a variable without initialization.

class Counter {
  count; // highlight-line

  print() {
    console.log(this.count);
  }
}

const counter = new Counter();
counter.print(); // undefined

Private Fields​

By default, any fields in a class are public. For example, consider below code.

class Counter {
  count = 0;

  increment() {
    this.count++;
    console.log(this.count);
  }
}

Here count is a field declared to keep track of the count. Each invocation of increment() updates the count value and prints it. What if someone updates the count value outside of increment() method?

const counter = new Counter();
counter.increment(); // 1
counter.count = 5;
counter.increment(); // 6
counter.increment(); // 7

Since the count field is updated to 5, last 2 increment() methods print 6 and 7. How can we keep the count field private?. Only increment() method should update the value of count. We can set count as private by adding # before the field.

class Counter {
  #count = 0;

  increment() {
    this.#count++;
    console.log(this.#count);
  }
}

Now let us see how previous invocation works. The output of each line is shown as comment.

const counter = new Counter();
counter.increment(); // 1
counter.count = 5;
counter.increment(); // 2
counter.increment(); // 3

We can see that counter.count = 5 does not throw any error. But there is no effect. The count field is udpated only through increment() method.

By making private fields, ECMAScript classes provides better encapsulation. There is no chance of accidental updation of internal fields.

Dynamic Private Fields​

Dynamic creation of private fields are not allowed. If we want to use any private fields, we need to declare it first on top of the class.

Here is a class that has one field(count1) declared on top. If we call setCount() method, two more fields, count2 and count3 are added to the instance object.

class Counter {
  count1 = 0;

  setCount() {
    this.count2 = 0;
    this.count3 = 0;
  }
}

const counter = new Counter();
console.log(Object.keys(counter).length); // 1
counter.setCount();
console.log(Object.keys(counter).length); // 3

As we can see, before setCount() invocation, there was only one field. After the invocation, the field count is 3.

Now, let us convert all the fields as private.

class Counter {
  #count1 = 0;

  setCount() {
    this.#count2 = 0;
    this.#count3 = 0;
  }
}

When setCount() is invoked, this.#count2 throws following error.

Uncaught SyntaxError: Private field '#count2' must be declared in an enclosing class

This says that, we can create public fields dynamically, but not private fields.

Implementations​

If you want to try this feature, it is available in following software versions at the time of writing.

• Babel 7.0+
• Node 12
• Chrome/V8
  • Public fields from Chrome 72
  • Private fields from Chrome 74
• Firefox / SpiderMonkey
  • Public fields from Firefox 69
  • Public static fields from Firefox 75
• Safari/JSC
  • Public instance fields are enabled in Safari 14
  • Public static fields are enabled in Safari Technology Preview 117
  • Private fields are enabled in Safari Technology Preview 117
• Moddable XS
• QuickJS
• TypeScript 3.8

TC39 is the 39th technical committee of an organization called ECMA International. ECMA(European Computer Manufacturers Association) is a standardizing body like ISO. TC39 is the committee that designs ECMAScript.

TC39 Members​

The TC39 committee is made up of people who are sent by member organizations that are companies and non-profits who are part of ECMA. The companies include browser manufacturers also. So the TC39 committee members either work for or are associated with these companies that are part of ECMA International.

Proposal Progress​

A new feature or a proposal to ECMAScript can be suggested by anyone. The proposal then goes through 5 stages before standardization, starting with stage 0. To move the proposal from one stage to next stage, approval from TC39 is required.

Stage 0​

Stage 0 is also know as strawperson stage. This is the start for submitting a proposal. A proposal is submitted in a free-form way. The submission can be done either by a TC39 member or a non-member through this discourse group or connecting through Matrix chat room.

Stage 1​

TC39 Committee owns proposals at stage 1 and beyond. At stage 1, a champion is identified for a proposal who takes care of the advancement of the proposal. During this stage following things happen:

• Identify the need of the proposal and a general shape of the solution
• Create illustrative examples of the usage
• Discuss key algorithms and abstractions required for this proposal
• Identify cross-cutting concerns, implementation challenges and complexities
• Create a publicly available repository for the proposal that captures above requirements

We can view the proposals that are in stage 1 here. In the list of proposals, you can also see the name of author and champion.

Stage 2​

By the time a proposal reaches Stage 2, the initial specification for the proposal should be ready. During this stage, the TC39 precisely describe the syntax and semantics using the formal specification.

So, if a proposal reaches Stage 2, it means that the committee is expecting this proposal to be included in the standard eventually.

You can view the list of proposals that are in Stage 2 in TC39 Proposals repository.

Stage 3​

If a proposal enters Stage 3 means,

• the specification is complete for this proposal
• Designated reviewers assigned by TC39 team have signed off on the current specification
• All ECMAScript editors have approved the spec

We start seeing this specification implemented in some browsers. The feedback from implementation is then used to further refine the proposal.

Stage 4​

Whenever a new feature is added to the standard, corresponding test scripts are added to Test262. For a stage 4 proposal, the test scripts should be complete. If you are interested, you can see the report of running the test suites online.

There should be atleast two compatible implementations which pass the acceptance test. Also, a pull request is sent to ecma262 repo with updated spec text. All ECMAScript editors needs to approve this pull request.

After all the approvals, the proposal is shipped as part of the standard. Now, the JavaScript engines like SpiderMonkey or V8 will start implementing these features.

Once a proposal reaches Stage 4, it will be included in the specification. ECMAScript General Assembly approves the new standard in July every year.