Js-A.m.a601 (Es6 01)

Front-end Advanced
T ra in in g As s ig n men t
Document Code 25e-BM/HR/HDCV/FSOFT
Version 1.1
Effective Date 7/1/2019
Hanoi, mm/yyyy
Training Assignments Front-end Advanced Issue/Revision: x/y
RECORD OF CHANGES
No Effective Date Change Description Reason Reviewer Approver
1 30/May/2019 Create a new assignment Create new DieuNT1 VinhNV
2 07/Jun/2019 Update Fsoft Template Update DieuNT1 VinhNV
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 2/6

Contents
Day 9-10. Unit 5: ES6 New Syntax ....................................................................................................................4
Objectives: ..................................................................................................................................................4
Problem 01 .................................................................................................................................................4
Problem 02 .................................................................................................................................................5
Problem 03 .................................................................................................................................................5
Problem 04 .................................................................................................................................................5
Problem 05 .................................................................................................................................................6

CODE: FEA.M.A501 (ES6 01)

TYPE: Medium
LOC: 300
DURATION: 180
Day 9-10. Unit 5: ES6 New Syntax

Objectives:
 Understand the History of JavaScript and ES6 (the most populator JavaScript version)
 Understand ES6 features: Arrow function, Classes, Block scope, Rest/Spread, Destructuring,
Template string, Map/Set
 Able to use ES6 features to create more readable and cleaner code
Problem 01
Given the following code, your task is to change function declaration/function expression of ES5 to Arrow
Function syntax, however you have to make sure the output is still `true`
1. (function IIFE() {
2. function foo(x) {
3. var y = x * 2;
4.
5. return function bar(z) {
6. if (z.length > 3) {
7. return z.map(function baz(v) {
8. if (v > 3) return v + y;
9. else return baz(v * 4);
10. });
11. } else {
12. var obj = [];
13.
14. setTimeout(
15. function bam() {
16. obj.length = 1;
17. obj[0] = this.w;
18. }.bind(this),
19. 100
20. );
21.
22. return obj;
23. }
24. };
25. }
26.
27. var p = foo(2);
28. var list1 = [1, 3, 4];
29. var list2 = list1.concat(6);
30.
31. list1 = p.call({ w: 42 }, list1);
32. list2 = p(list2);
33.
34. setTimeout(function() {
35. console.log(
36. list1[0] ===
37. list2.reduce(function(s, v) {
38. return s + v;
39. }, 0)
40. );
41. }, 200);
42. })();

Problem 02
Fix the following code, so the output is `true`.
1. var x = 2,
2. fns = [];
3.
4. (function() {
5. var x = 5;
6.
7. for (var i = 0; i < x; i++) {
8. // ..
9. }
10. })();
11.
12. // DO NOT MODIFY BELOW CODE
13. console.log(x * 2 === fns[x * 2]());
14. // true
Problem 03
Use rest/spread operator so the code below display `true`
1. function foo() {}
2.
3. function bar() {
4. var a1 = [2, 4];
5. var a2 = [6, 8, 10, 12];
6.
7. return foo();
8. }
9.
10. // DO NOT MODIFY BELOW CODE
11. console.log(bar().join('') === '281012');
12. // true
Problem 04
Given the following code, you must use ES6 Destructuring feature to construct a data for function check so
the output is `true`.
1. function ajax(url, cb) {

2. // fake ajax response:
3. cb({
4. foo: 2,
5. baz: [6, 8, 10],
6. bam: {
7. qux: 12
8. }
9. });
10. }
11.
12. function check(data) {
13. console.log(
14. 56 ===
15. data.foo +
16. data.bar +
17. data.baz[0] +
18. data.baz[1] +
19. data.baz[2] +
20. data.bam.qux +

21. data.bam.qam
22. );
23. }
24.
25. var defaults = {
26. foo: 0,
27. bar: 4,
28. bam: {
29. qux: 0,
30. qam: 14
31. }
32. };
33.
34. // YOUR CODE HERE
35. function response(...) {
36. check(...); // true
37. }
38.
39. // DO NOT MODIFY
40. ajax('http://fun.tld', response);
Problem 05
Given the following code, you must complete the upper function and use it as a tag function for the template
string `Hello ____ (@____), welcome to the ____!!!` so the output is `true`
1. function upper(strings, ...values) {}

2.
3. var name = 'Nguyen Van A',
4. account = 'ANV',
5. classname = 'Fresher FrontEnd';
6.
7. console.log(
8. `Hello ____ (@____), welcome to the ____!!!` ===
9. 'Hello NGUYEN VAN A (@ANV), welcome to the FRESHER FRONTEND!!!'
10. );

Js-A.m.a601 (Es6 01)

Uploaded by

Copyright:

Available Formats

Js-A.m.a601 (Es6 01)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Js-A.m.a601 (Es6 01)

Uploaded by

Copyright:

Available Formats

Front-end Advanced

Document Code 25e-BM/HR/HDCV/FSOFT

Effective Date 7/1/2019

No Effective Date Change Description Reason Reviewer Approver

1 30/May/2019 Create a new assignment Create new DieuNT1 VinhNV

2 07/Jun/2019 Update Fsoft Template Update DieuNT1 VinhNV

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 2/6

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 3/6

CODE: FEA.M.A501 (ES6 01)

Day 9-10. Unit 5: ES6 New Syntax

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 4/6

1. function ajax(url, cb) {

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 5/6

1. function upper(strings, ...values) {}

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 6/6

You might also like