Skip to content

Commit

Permalink
Init gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@usmaanalii
usmaanalii committed Aug 4, 2017
0 parents commit a3bb259
Show file tree
Hide file tree
Showing 808 changed files with 136,034 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
5 changes: 5 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"extends": [
"prettier"
]
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
5 changes: 5 additions & 0 deletions ES6ForEveryone/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
.eslintrc
.tern-project
.tags
.tags1
24 changes: 24 additions & 0 deletions ES6ForEveryone/.tags
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
html /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^<html lang="en">$/;" function line:2
head /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^<head>$/;" function line:3
meta /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^ <meta charset="UTF-8">$/;" function line:4
title /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^ <title>The ...Spread Operator<\/title>$/;" function line:5
style /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^ <style>$/;" function line:6
body /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^<body>$/;" function line:29
h /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^ <h2 class="jump">SPREADS!<\/h2>$/;" function line:30
script /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^<script>$/;" function line:32
sparanWrap /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/jumping-letters.html /^ function sparanWrap(word) {$/;" function line:35
html /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^<html lang="en">$/;" function line:2
head /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^<head>$/;" function line:3
meta /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <meta charset="UTF-8">$/;" function line:4
title /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <title>Spread Examples<\/title>$/;" function line:5
body /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^<body>$/;" function line:7
div /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <div class="people">$/;" function line:8
p /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <p>Wes<\/p>$/;" function line:9
p /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <p>Kait<\/p>$/;" function line:10
p /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^ <p>Randy<\/p>$/;" function line:11
script /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/more-spread-examples.html /^<script>$/;" function line:13
Say Hello to ...Spread and ...Rest /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^# Say Hello to ...Spread and ...Rest$/;" function line:1
Spread Operator Introduction /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## Spread Operator Introduction$/;" function line:3
More Spread Examples /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## More Spread Examples$/;" function line:35
Spreading into a function /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## Spreading into a function$/;" function line:76
The ...rest param in Functions and destructuring /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## The ...rest param in Functions and destructuring$/;" function line:83
11 changes: 11 additions & 0 deletions ES6ForEveryone/.tags1
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
!_TAG_FILE_FORMAT 2 /extended format; --format=1 will not append ;" to lines/
!_TAG_FILE_SORTED 0 /0=unsorted, 1=sorted, 2=foldcase/
!_TAG_PROGRAM_AUTHOR Darren Hiebert /[email protected]/
!_TAG_PROGRAM_NAME Exuberant Ctags //
!_TAG_PROGRAM_URL http://ctags.sourceforge.net /official site/
!_TAG_PROGRAM_VERSION 5.8 //
Say Hello to ...Spread and ...Rest /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^# Say Hello to ...Spread and ...Rest$/;" function line:1
Spread Operator Introduction /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## Spread Operator Introduction$/;" function line:3
More Spread Examples /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## More Spread Examples$/;" function line:35
Spreading into a function /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## Spreading into a function$/;" function line:76
The ...rest param in Functions and destructuring /Applications/XAMPP/xamppfiles/htdocs/xampp/repos/javascript/ES6ForEveryone/08 - Say Hello to ...Spread and ...Rest/analysis.md /^## The ...rest param in Functions and destructuring$/;" function line:83
144 changes: 144 additions & 0 deletions ES6ForEveryone/01 - New Variables/analysis.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
# ES6 For Everyone - New Variables: Creation, Updating and Scoping

## var Scoping Refresher

The introduction of `let` and `const` fixes a particular associated with `var`.

When `var` is used to declare a variable, it belongs to the functions scope.

**But what happens when var isn't used within a function definition?**

It get's applied to the functions parent scope, which could cause issues
elsewhere (particularly if it's parent is the global namespace).

New keywords `let` and `const` add a more precise scoping rule to their variable declarations, by fixing it to the `block`.

``` javascript
if (!true) {
let x = 1;
}

console.log(x); // 1
```

You can't access `x` outside the block.

``` javascript
if (!true) {
let x = 1;
}

console.log(x); // error
```

[Back to top](#top)
**********
## let VS const

If you wish to declare a variable that you intend on changing within your code then `let` assignments should be used.

``` javascript
let x = 0

if (x < 1) {
x = 2;
}
```

On the other hand, `const` which stands for **constant** is designed to handle declarations for things that you wish to leave untouched.

``` javascript
const x = 0

if (x < 1) {
x = 2; // error
}
```

One interesting use case for const, is how it handles objects. The same
functionality applies to the entire object, i.e you can't reassign it. But much like humans have the ability to change their characteristics, objects properties can be changed.

``` javascript
const person = {
name: 'usy',
age: 22
};

person = {name: 'ali'}; // error
person.age = 23;

console.log(person.age); // 23
```

### Aside

Javascript has a method called `freeze` that takes an object as a parameter, that will prevent it from being modified (adding further constraints to a typical const declared object).

``` javascript
const usy = Object.freeze(person);

person.age = 21;

console.log(person.age); // 23
```

[Back to top](#top)
**********
## let and const in the Real World

Dealing with scoping conflicts was a common issue for many programmers using `ES2015`. To counteract this, using `IIFE's` was fairly common. This would basically wrap any variables you declare inside a function scope resulting in
a less poluted global namespace.

``` javascript
(function() {
var x = 1;
}());
```

Now, wrapping declarations in braces and capitalising
on the new block scoping rules makes for a more elegent solution.

``` javascript
{
x = 1;
}
```

For loops are also beneficiaries of this scoping mechanism. By using
`let` instead of `var`, each iteration is given it's own scope,
so intermediate results can be handled more effectively. This is much different to using `var`, where each iteration will overwrite the variables defined each cycle.

``` javascript
for (let i = 0; i < 10; i++) {
console.log(i);
setTimeout(function () {
console.log('The number is ' + i);
}, 1000);
}
```

[Back to top](#top)
**********
## Temporal Dead Zone

One thing to look out for when using `const` and `let`, is that unlike
`var`, trying to use the variable **before** it was declared,
will result in an error.

``` javascript
console.log(pizza); // Reference Error
let pizza = 'Deep dish 🍕🍕🍕';
```

When using `var` variables before declaration, you will get `undefined`, this
is because the actual assigned value can't be accessed, but the fact that
it has been assigned is acknowledged.

## Is var Dead? What Should I use?

There are many different methodologies to choose from, but I will be using
the following guideline.

1. Use `const` by default
2. Use `let` if rebinding is needed
3. Don't use `var`
25 changes: 25 additions & 0 deletions ES6ForEveryone/01 - New Variables/let-const-real-life.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let and const real world</title>
</head>
<body>
<script>

{
const name = 'wes';
console.log(name);
}


for (let i = 0; i < 10; i++) {
console.log(i);
setTimeout(function () {
console.log('The number is ' + i);
}, 1000);
}

</script>
</body>
</html>
22 changes: 22 additions & 0 deletions ES6ForEveryone/01 - New Variables/let-const.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let and const</title>
</head>
<body>
<script>
const key = 'abc123';
let points = 50;
let winner = false;

const person = {
name: 'Wes',
age: 28
};

const wes = Object.freeze(person);

</script>
</body>
</html>
13 changes: 13 additions & 0 deletions ES6ForEveryone/01 - New Variables/temporal-dad-zone.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let and const real world</title>
</head>
<body>
<script>
console.log(pizza);
let pizza = 'Deep dish 🍕🍕🍕';
</script>
</body>
</html>
25 changes: 25 additions & 0 deletions ES6ForEveryone/01 - New Variables/var-let-const.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let and const</title>
</head>
<body>
<script>
function setWidth() {
var width = 100;
console.log(width);
}
setWidth();

var age = 100;
if (age > 12) {
const dogYears = age * 7;
console.log(`You are ${dogYears} dog years old!`);
}

let height = 200;
const key = 'abc123';
</script>
</body>
</html>
Loading

0 comments on commit a3bb259

Please sign in to comment.