> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/redux/repos/learning-react/chapter-02.md).

# Chapter 2 : Emerging JavaScript

If you haven't made the switch to the latest JavaScript syntax yet, now is a good time to get started.

## Samples

### Declaring Variables in ES6

#### const

1. Without const ([run it](http://jsbin.com/gapoxa/1/edit?js,console))
2. With const ❌ ([run it](https://jsbin.com/gapoxa/2/edit?js,console))

#### let

1. Without let ([run it](https://jsbin.com/gapoxa/3/edit?js,console))
2. With let ([run it](https://jsbin.com/gapoxa/4/edit?js,console))
3. Loops with var ([run it](http://jsbin.com/gapoxa/5/edit?js,output))
4. Loops with let ([run it](http://jsbin.com/gapoxa/6/edit?js,output))

#### template strings

1. Without Template Strings - Simple Concatenation ([run it](https://jsbin.com/gapoxa/7/edit?js,console))
2. With Template Strings - Simple concatenation ([run it](https://jsbin.com/gapoxa/8/edit?js,console))
3. Template Strings - Email ([run it](https://output.jsbin.com/gapoxa/9))
4. Template Strings - HTML ([run it](https://jsbin.com/gapoxa/10/edit?js,output))

### Default Parameters

1. Default Parameters ([run it](http://jsbin.com/yeqexu/1/edit?js,console))
2. Default Parameters with Objects ([run it](http://jsbin.com/yeqexu/2/edit?js,console))

### Arrow functions

1. Regular Function ([run it](http://jsbin.com/tegefa/1/edit?js,console))
2. Arrow Function ([run it](http://jsbin.com/tegefa/2/edit?js,console))
3. Arrow Function - Multiple Args ([run it](http://jsbin.com/tegefa/3/edit?js,console))
4. Multiple Args - One Line ([run it](http://jsbin.com/tegefa/4/edit?js,console))
5. Arrow Functions with if statements ❌ ([run it](http://jsbin.com/tegefa/5/edit?js,console))
6. Arrow Functions with errors ❌ ([run it](http://jsbin.com/tegefa/6/edit?js,console))
7. setTimeout ❌ ([run it](http://jsbin.com/tegefa/7/edit?js,console))
8. setTimeout with .bind ([run it](http://jsbin.com/tegefa/8/edit?js,console))
9. setTimeout with Arrow Function ([run it](http://jsbin.com/tegefa/9/edit?js,console))
10. setTimeout with 'this' problem ❌ ([run it](http://jsbin.com/tegefa/10/edit?js,console))
11. Showing 'this' problem ([run it](http://jsbin.com/tegefa/11/edit?js,console))

### Objects and Arrays

#### Destructuring Assignment

1. Destructuring Assignment ([run it](http://jsbin.com/jukokaf/1/edit?js,console))
2. Destructuring with Arguments ([run it](http://jsbin.com/jukokaf/2/edit?js,console))
3. Destructured Object Arguments ([run it](http://jsbin.com/jukokaf/3/edit?js,console))
4. Destructuring Arrays ([run it](http://jsbin.com/jukokaf/4/edit?js,console))
5. Destructuring with Comma Placeholders ([run it](http://jsbin.com/jukokaf/5/edit?js,console))

#### Object Literal Enhancement

1. Object Literal Enhancement ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/6/edit?js,console))
2. Object Literal Enhancements with Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/7/edit?js,console))
3. Literal Enhancements: The Old Way ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/8/edit?js,console))
4. Literal Enhancements Now ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/9/edit?js,console))

#### The Spread Operator

1. Spread Operator with Arrays ([run it](http://jsbin.com/jukokaf/10/edit?js,console))
2. Array Destructuring with .reverse() ([run it](http://jsbin.com/jukokaf/11/edit?js,console))
3. Spread Operator with Destructuring and .reverse() ([run it](http://jsbin.com/jukokaf/12/edit?js,console))
4. Destructuring and the Spread Operator ([run it](http://jsbin.com/jukokaf/13/edit?js,console))
5. Directions Functions ([run it](http://jsbin.com/jukokaf/14/edit?js,console))
6. Spread Operator with Objects ([run it](http://jsbin.com/jukokaf/15/edit?js,console))

### Promises

1. getFakeMembers ([run it](http://jsbin.com/pupojik/1/edit?js,console))
2. fetch members ([run it](http://jsbin.com/haguhe/1/edit?js,console))

### ES6 Class Syntax

1. The Constructor and the Prototype ([run it](http://jsbin.com/hoqileh/1/edit?js,console))
2. Classes ([run it](http://jsbin.com/hoqileh/2/edit?js,console))
3. Class Inheritance ([run it](http://jsbin.com/hoqileh/3/edit?js,console))