Scribd
Upload
530 views6 pages

Js-A.m.a601 (Es6 01)

The document outlines 5 problems focused on learning new ES6 syntax features including arrow functions, classes, block scope, rest/spread parameters, destructuring, template strings, and maps/sets. The problems challenge the learner to refactor code using these new syntax features to produce expected output and results. Sample code is provided for each problem along with instructions to update the code using specific ES6 features.

Uploaded by

Nguyễn Công Tuấn Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
530 views6 pages

Js-A.m.a601 (Es6 01)

The document outlines 5 problems focused on learning new ES6 syntax features including arrow functions, classes, block scope, rest/spread parameters, destructuring, template strings, and maps/sets. The problems challenge the learner to refactor code using these new syntax features to produce expected output and results. Sample code is provided for each problem along with instructions to update the code using specific ES6 features.

Uploaded by

Nguyễn Công Tuấn Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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


Training Assignments Front-end Advanced Issue/Revision: x/y

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

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


Training Assignments Front-end Advanced Issue/Revision: x/y

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. })();

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


Training Assignments Front-end Advanced Issue/Revision: x/y

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 +

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


Training Assignments Front-end Advanced Issue/Revision: x/y

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. );

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

You might also like