link685 link686 link687 link688 link689 link690 link691 link692 link693 link694 link695 link696 link697 link698 link699 link700 link701 link702 link703 link704 link705 link706 link707 link708 link709 link710 link711 link712 link713 link714 link715 link716 link717 link718 link719 link720 link721 link722 link723 link724 link725 link726 link727 link728 link729 link730 link731 link732 link733 link734 link735 link736 link737 link738 link739 link740 link741 link742 link743 link744 link745 link746 link747 link748 link749 link750 link751 link752 link753 link754 link755 link756 link757 link758 link759 link760 link761 link762 link763 link764 link765 link766 link767 link768 link769 link770 link771 link772 link773 link774 link775 link776 link777 link778 link779 link780 link781 link782 link783 link784 link785 link786 link787 link788 link789 link790 link791 link792 link793 link794 link795 link796 link797 link798 link799 link800 link801 link802 link803 link804 link805 link806 link807 link808 link809 link810 link811 link812 link813 link814 link815 link816 link817 link818 link819 link820 link821

ES6 Interview Questions and Answers

image

What is javascript ES6

  • ES6 — also known as Harmony, es-next, ES2015 — is the latest finalized specification of the language
  • The ES6 specification was finalized in June 2015, (hence ES2015)
  • Future versions of the specification will follow the ES[YYYY] pattern, e.g ES2016 for ES7

What is Arrow Functions

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code.

  • Terse way to declare a function like param => returnValue
  • Useful when doing functional stuff like [1, 2, 3].map(x => x * 2)
  • You can’t name arrow functions statically, but runtimes are now much better at inferring names for most methods
    1
    2
    // e.g.
    var odds = evens.map(v => v + 1);

how to use Classes in ES6

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

What is Template Strings(Template Literals)

Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

  • You can declare strings with ` (backticks), in addition to " and '
  • Strings wrapped in backticks are template literals
  • Template literals can be multiline
  • Template literals allow interpolation like `ponyfoo.com is ${rating}` where rating is a variable
  • You can use any valid JavaScript expressions in the interpolation, such as `${2 * 3}` or `${foo()}`
  • You can use tagged templates to change how expressions are interpolated
    • Add a fn prefix to fn`foo, ${bar} and ${baz}`
    • fn is called once with template, …expressions
    • template is ['foo, ', ' and ', ''] and expressions is [bar, baz]
    • The result of fn becomes the value of the template literal
    • Possible use cases include input sanitization of expressions, parameter parsing, etc.
  • Template literals are almost strictly better than strings wrapped in single or double quotes
    e.g
    1
    2
    var name = "node.js", time = "today";
    `hi${name}, how are you ${time}?`

How to use Multi-line Strings in ES6

In ES5, we had to use one of these approaches:

1
2
var hello = 'Welcome to \n'
+ 'http://top10webjs.com';

While in ES6, simply utilize the backticks:

1
2
var hello = `Welcome to 
http://top10webjs.com`;

What is Destructuring Assignment in ES6

Destructuring in the ES6 refers to the use of patterns to effectively match values to variables or properties. It’s hard to describe in words, so an example using the more common array pattern should help:

1
2
3
4
5
6
7
8
// e.g. in ES5
var data = $('body').data(), // data has properties house and mouse
house = data.house,
mouse = data.mouse;

// In ES6, we can replace the ES5 code above with these statements:
// we'll get house and mouse variables
var { house, mouse} = $('body').data();

This also works with arrays. e.g.

1
2
var [col1, col2] = $('.column'),
[line1, line2, line3, , line5] = file.split('\n')

Let v.s. Const

  • let and const are alternatives to var when declaring variables
  • let is block-scoped instead of lexically scoped to a function
  • let is hoisted to the top of the block, while var declarations are hoisted to top of the function
  • const is also block-scoped, hoisted, and constrained by TDZ semantics
  • const variables must be declared using an initializer, const foo = 'bar'
  • Assigning to const after initialization fails silently (or loudly – with an exception – under strict mode)
  • const variables don’t make the assigned value immutable
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function f() {
    {
    let x;
    {
    // okay, block scoped name
    const x = "sneaky";
    // error, const
    x = "foo";
    }
    // error, already declared in block
    let x = "inner";
    }
    }

How to use Default Parameters

In ES6, we can simply supply default values for parameters in a function, like this:

1
2
3
function add(x=0, y=0) {
return x + y;
}

Iterators + For..Of

Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don’t require realizing an array, enabling lazy design patterns like LINQ.

Map, Set, WeakMap, WeakSet

Efficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

what is Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.
e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}

var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})

New string functions in ES6

In ES6, the standard library has grown immensely. Along with these changes are new methods which can be used on strings, such as .includes() and .repeat(). e.g.

1
2
console.log("abcd".includes("abc")); // true
console.log("abc".repeat(3); // 'abcabcabc'

What is Proxy

Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc. e.g.

1
2
3
4
5
6
7
8
9
var foo= function () { return 'in foo()'; };
var handler = {
apply: function (receiver, …args) {
return 'in proxy';
}
};

var p = new Proxy(foo, handler);
p() === 'in proxy';

What is Modules & Module Loaders

Language-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model — no code executes until requested modules are available and processed.

Module loaders support:

  • Dynamic loading
  • State isolation
  • Global namespace isolation
  • Compilation hooks
  • Nested virtualization
    The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.