Skip to content

Commit 29a3595

Browse files
loianeloiane
committed
chapter 01: ES2015 (ES6) examples
1 parent f9ed7d8 commit 29a3595

17 files changed

+194
-148
lines changed

‎examples/chapter01/11-ES6letconst.html ‎examples/chapter01/11-ES2015-ES6-letconst.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title></title>
66
</head>
77
<body>
8-
<script type="text/javascript" src="11-ES6letconst.js"></script>
8+
<script type="text/javascript" src="11-ES2015-ES6-letconst.js"></script>
99

1010
</body>
11-
</html>
11+
</html>

‎examples/chapter01/11-ES2015-ES6-letconst.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// @ts-check
2+
3+
//* ****** EcmaScript 2015 (ES6): let and const keywords
4+
5+
//* ****** EcmaScript 2015 (ES6): let is the new var (https://goo.gl/he0udZ)
6+
var framework = 'Angular';
7+
var framework = 'React';
8+
console.log(framework);
9+
10+
let language = 'JavaScript!'; // {1}
11+
// let language = 'Ruby!'; // {2} - throws error
12+
console.log(language);
13+
14+
//* ****** EcmaScript 2015 (ES6): variables scope (https://goo.gl/NbsVvg)
15+
let movie = 'Lord of the Rings'; // {1}
16+
// var movie = 'Batman v Superman'; //throws error, variable movie already declared
17+
18+
function starWarsFan() {
19+
const movie = 'Star Wars'; // {2}
20+
return movie;
21+
}
22+
23+
function marvelFan() {
24+
movie = 'The Avengers'; // {3}
25+
return movie;
26+
}
27+
28+
function blizzardFan() {
29+
const isFan = true;
30+
let phrase = 'Warcraft'; // {4}
31+
console.log('Before if: ' + phrase);
32+
if (isFan) {
33+
let phrase = 'initial text'; // {5}
34+
phrase = 'For the Horde!'; // {6}
35+
console.log('Inside if: ' + phrase);
36+
}
37+
phrase = 'For the Alliance!'; // {7}
38+
console.log('After if: ' + phrase);
39+
}
40+
41+
console.log(movie); // {8}
42+
console.log(starWarsFan()); // {9}
43+
console.log(marvelFan()); // {10}
44+
console.log(movie); // {11}
45+
blizzardFan(); // {12}
46+
47+
// output
48+
// Lord of the Rings
49+
// Star Wars
50+
// The Avengers
51+
// The Avengers
52+
// Before if: Warcraft
53+
// Inside if: For the Horde!
54+
// After if: For the Alliance!
55+
56+
//* ****** EcmaScript 2015 (ES6): const (https://goo.gl/YUQj3r)
57+
const PI = 3.141593;
58+
// PI = 3.0; //throws error
59+
console.log(PI);
60+
61+
const jsFramework = {
62+
name: 'Angular'
63+
};
64+
jsFramework.name = 'React';
65+
66+
// error, cannot reassign object reference
67+
/*
68+
jsFramework = {
69+
name: 'Vue'
70+
};
71+
*/

‎examples/chapter01/11-ES6letconst.js

-50
This file was deleted.

‎examples/chapter01/15-ES6EnhancedObjectProperties.html ‎examples/chapter01/12-ES2015-ES6-StringTemplates.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title></title>
66
</head>
77
<body>
8-
<script type="text/javascript" src="15-ES6EnhancedObjectProperties.js"></script>
8+
<script type="text/javascript" src="12-ES2015-ES6-StringTemplates.js"></script>
99

1010
</body>
11-
</html>
11+
</html>

‎examples/chapter01/12-ES2015-ES6-StringTemplates.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @ts-check
2+
3+
//* ****** EcmaScript 2015 (ES6): Template literals (https://goo.gl/4N36CS)
4+
const book = {
5+
name: 'Learning JavaScript DataStructures and Algorithms'
6+
};
7+
8+
console.log('You are reading ' + book.name + '.,\n and this is a new line\n and so is this.');
9+
10+
console.log(`You are reading ${book.name}.,
11+
and this is a new line
12+
and so is this.`);
13+

‎examples/chapter01/12-Es6StringTemplates.js

-9
This file was deleted.

‎examples/chapter01/13-ES6ArrowFunctions.html ‎examples/chapter01/13-ES2015-ES6-ArrowFunctions.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title></title>
66
</head>
77
<body>
8-
<script type="text/javascript" src="13-ES6ArrowFunctions.js"></script>
8+
<script type="text/javascript" src="13-ES2015-ES6-ArrowFunctions.js"></script>
99

1010
</body>
11-
</html>
11+
</html>

‎examples/chapter01/13-ES2015-ES6-ArrowFunctions.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// @ts-check
2+
3+
//* ****** EcmaScript 2015 (ES6): arrow functions (https://goo.gl/nM414v)
4+
var circleAreaES5 = function circleArea(r) {
5+
var PI = 3.14;
6+
var area = PI * r * r;
7+
return area;
8+
};
9+
console.log(circleAreaES5(2));
10+
11+
const circleArea = r => { // {1}
12+
const PI = 3.14;
13+
const area = PI * r * r;
14+
return area;
15+
};
16+
console.log(circleArea(2));
17+
18+
const circleArea2 = r => 3.14 * r * r;
19+
console.log(circleArea2(2));
20+
21+
const hello = () => console.log('hello!');
22+
hello();

‎examples/chapter01/13-ES6ArrowFunctions.js

-12
This file was deleted.

‎examples/chapter01/14-ES6ParameterHandling.html ‎examples/chapter01/14-ES2015-ES6-ParameterHandling.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<title></title>
66
</head>
77
<body>
8-
<script type="text/javascript" src="14-ES6ParameterHandling.js"></script>
8+
<script type="text/javascript" src="14-ES2015-ES6-ParameterHandling.js"></script>
99
</body>
10-
</html>
10+
</html>

‎examples/chapter01/14-ES2015-ES6-ParameterHandling.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// @ts-check
2+
3+
//* ****** EcmaScript 2015 (ES6): Default Parameter Values (https://goo.gl/AP5EYb)
4+
function sum(x = 1, y = 2, z = 3) {
5+
return x + y + z;
6+
}
7+
console.log(sum(4, 2)); // outputs 9
8+
9+
// function above is the same as
10+
function sum2(x, y, z) {
11+
if (x === undefined) x = 1;
12+
if (y === undefined) y = 2;
13+
if (z === undefined) z = 3;
14+
return x + y + z;
15+
}
16+
console.log(sum2(4, 2)); // outputs 9
17+
18+
// or
19+
function sum3() {
20+
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
21+
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
22+
var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
23+
24+
return x + y + z;
25+
}
26+
console.log(sum3(4, 2)); // outputs 9
27+
28+
//* ****** EcmaScript 6: spread operator ('...') (https://goo.gl/8equk5)
29+
let params = [3, 4, 5];
30+
console.log(sum(...params)); // ES2015
31+
console.log(sum.apply(undefined, params)); // ES5
32+
33+
let numbers = [1, 2, ...params]; // pushing values into array
34+
console.log(numbers);
35+
36+
//* ****** EcmaScript 6: rest parameter ('...') (https://goo.gl/LaJZqU)
37+
function restParamaterFunction(x, y, ...a) {
38+
return (x + y) * a.length;
39+
}
40+
console.log(restParamaterFunction(1, 2, 'hello', true, 7)); // outputs 9;
41+
42+
// code above is the same as ES5:
43+
function restParamaterFunction2(x, y) {
44+
var a = Array.prototype.slice.call(arguments, 2);
45+
return (x + y) * a.length;
46+
}
47+
console.log(restParamaterFunction2(1, 2, 'hello', true, 7));

‎examples/chapter01/14-ES6ParameterHandling.js

-36
This file was deleted.

‎examples/chapter01/15-ES2015-ES6-EnhancedObjectProperties.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script type="text/javascript" src="15-ES2015-ES6-EnhancedObjectProperties.js"></script>
9+
10+
</body>
11+
</html>

‎examples/chapter01/15-ES6EnhancedObjectProperties.js ‎examples/chapter01/15-ES2015-ES6-EnhancedObjectProperties.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
// @ts-check
22

3-
// Destructuring Assignment + Property Shorthand
4-
var [x, y] = ['a', 'b'];
5-
var obj = { x, y };
3+
//* ****** EcmaScript 2015 (ES6): Destructuring Assignment + Property Shorthand (https://goo.gl/VsLecp )
4+
let [x, y] = ['a', 'b'];
5+
let obj = { x, y };
66
console.log(obj); // { x: "a", y: "b" }
77

8+
// swap (https://goo.gl/EyFAII)
89
[x, y] = [y, x];
910
var temp = x;
1011
x = y;
1112
y = temp;
1213

1314
// code above is the same as
14-
var x = 'a';
15-
var y = 'b';
16-
var obj2 = { x: x, y: y };
15+
var x2 = 'a';
16+
var y2 = 'b';
17+
var obj2 = { x2: x2, y2: y2 };
1718
console.log(obj2); // { x: "a", y: "b" }
1819

19-
// Method Properties
20-
var hello = {
20+
// Method Properties (https://goo.gl/DKU2PN)
21+
const hello = {
2122
name: 'abcdef',
2223
printHello() {
2324
console.log('Hello');

‎examples/chapter01/12-Es6StringTemplates.html ‎examples/chapter01/16-ES2015-ES6-Classes.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<title></title>
66
</head>
77
<body>
8-
<script type="text/javascript" src="12-Es6StringTemplates.js"></script>
9-
8+
<script type="text/javascript" src="16-ES2015-ES6-Classes.js"></script>
109
</body>
11-
</html>
10+
</html>

0 commit comments

Comments
 (0)