Eloquent JavaScript Video Tutorials

Eloquent Javascript Video Tutorials (Updated Ch.6) 2017 Aug

Eloquent JavaScript is one of the most popular handbook for JavaScript. Many programmers use this book to begin their journey with JavaScript. Besides the great content, Eloquent JavaScript is also available free online. If you want to learn JavaScript, this book is definitely a good start.

However, reading is frustrating to many people. So many people just couldn’t finish the whole book. This is why I created this series of video tutorials. I’m going through every chapter to explain everything in the book so that you can finish it by watching these videos.


Now let’s dive into the book with videos:

Chapter 1: Values, Types, and Operators

Eloquent Javascript Value Types

Summary of chapter 1:
The first chapter of Eloquent JavaScript is to introduce the 6 basic value types in JavaScript and the most important operators that you can use with them. 4 of the 6 value types are explained in this chapter and the rest deserve their own chapters, which will be covered other videos later.

6 basic value types:

  1. Numbers
  2. Strings
  3. Boolean
  4. Object
  5. Function
  6. Undefined Values

Operators

  1. Unary operators:
    : minus
    ! : not
    typeof : find the type of the value
  2. Binary operators:
    Arithmetic: +, -, *, /, %
    Comparison: ==, !=, ===, !===, <, >, <=, >=
    Logical: &&, ||
  3. Ternary operators:
    ? :

Download the slides of chapter 1:

Chapter 1 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 1

Chapter 2: Program Structure

Eloquent Javascript Loop Flow Control

In this chapter, you will learn more basic concepts about JavaScript programming, including flow control, loop and function.

Summary of chapter 2:
Concepts:

  • Expression & Statement
  • Variable, Keyword & Environment
  • counter++; counter += 3; ; -=; *=
  • comment: //single line; /* multiple line */
  • Indentation and capitalization (lowCapCap)

Functions:

  • alert(“Good Morning!”);
  • confirm(“Shall we leave?”);
  • prompt(“Tell me everything you know.”, “…”);
  • console.log(“Print to the JavaScript Console.”);
  • isNaN(“String is Not a Number”); //returns true;
  • Math.max(4, 3);

Control Flow:

  • Conditional execution: if … else & switch
  • Loop: while, do, for
  • break;

Download the slides of chapter 2:

Chapter 2 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 2

Chapter 3: Functions

Eloquent JavaScript Functions

In this chapter, you will learn more details about functions, including how to create functions, the difference between side effects and return values, the scopes of functions, etc.

Summary of Chapter 3:

  1. Creating a function:
    
// Create a function value
    var f = function(a) {
    
 console.log(a + 2);

    };
    // Declare g to be a function

    function g(a, b) {
    
 return a * b * 3.5;
    
}
  2. Side Effects & Return Value:
    Side Effects: a function does something for you, like print out something, but doesn’t return anything.
    Return value: a function returns something.
  3. Parameters: JavaScript is very flexible with parameters, you can pass extra parameters(will be ignored) to a function.
  4. Scopes:
    • Every function has its own scope. All parameters and variables created in a function belongs to the scope of that function.
    • Outer functions(scopes) can’t access variables of inner functions(scopes), but inner functions can access variables of outer functions.

Download the slides of chapter 3:

Chapter 3 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 3

Chapter 4: Objects and Arrays

Objects Arrays Eloquent JavaScript

In this chapter, you will learn the concepts of objects and arrays in JavaScript. As well as the related methods/functions.

Summary of Chapter 4:

  1. Arrays
    • Arrays are a specific type of object for storing sequences of values.
    • The Index of an array starts from zero. myArray[0]
    • Properties/methods of arrays:

      • [1, 2, 3, 2, 1].length // 5

      • [1, 2, 3, 2, 1].indexOf(2) // 1

      • [1, 2, 3, 2, 1].lastIndexOf(2) // 3
      • 
[0, 1, 2, 3, 4].slice(2, 4) // [2,3]

      • [2,3].concat([4,5]) // [2,3,4,5]

      • push, pop, join, shift, unshift
  2. Properties and Methods
    • All JavaScript values have properties, except for null and undefined.
    • The function properties of a value are called methods of the value.
    • value.x vs value[x]
  3. Objects
    • Objects allow us to group values—including other objects
    • {} indicate an object or a block of statements.
    • Undefined vs Delete
    • for (var prop in obj)
    • Objects are mutable; 
numbers, strings, and Booleans are immutable.
  4. String Methods
    • “coconuts”.slice(4, 7) // nut
    • “coconut”.indexOf(“u”) // 5
    • “one two three”.indexOf(“ee”) // 11
    • ” okay \n “.trim() // okay
    • “abc”.length // 3
    • “abc”.charAt(0) // a
    • “abc”[1] // b
  5. Namespace & Other Objects
    • namespace: Using one object as a container to group a bunch of related functionality.

      myObject.max

      Math.max
    • arguments: arguments.length
    • Math
    • window


Download the slides of chapter 4:

Chapter 4 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 4 Objects Arrays

Chapter 5: High-order Functions

Eloquent JavaScript High-order Functions

High-order functions are functions operate on other functions. Hight-order functions are very powerful and complicated in JavaScript.

Summary of Chapter 5:

  1. Abstraction: Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.
  2. High-order functions: Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.
  3. JSON
    • Property names: double quotes
    • Simple data expressions
    • No comments
    • JSON.stringify() & JSON.parse()
  4. Arrays Methods
    • array.forEach(): runs a function on each element.
    • array.filter(): returns a new array, uses a function to filter out some elements.
    • array.map(): returns a new array, use a function to modify each element.
    • array.reduce(
 func(accumulator, currentValue, currentIndex, array), 
initialValue): reduces an array to a single value.
  5. Function Methods
    • function.apply(): with an array as arguments.
    • function.bind(): with preset arguments.

Download the slides of chapter 5:

Chapter 5 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 5 High-order Functions

Chapter 6: The Secret Life of Objects

Eloquent JavaScript Chapter 6 Objects

In this chapter, you will learn more about Objects in JavaScript, including concepts about Object-oriented programming(OOP), such as encapsulation, polymorphism, and inheritance. We will also learn more about what’s behind a JavaScript Object, like prototypes, constructors and so on.

Summary of Eloquent JavaScript chapter 6:

  1. Object-oriented programming
    • Encapsulation
    • Polymorphism
    • Inheritance
  2. The this variable
  3. The call method
  4. Prototypes
    • Object.prototype, Function.prototype & Array.prototype
    • Object.getPrototypeOf()
    • Object.create()
  5. Constructor, new & instance
  6. Object.defineProperty() & hasOwnProperty() & Object.keys()
  7. Prototype-less object: Object.create(null)
  8. Getters and Setters:
    • get height() {…}
    • set height() {…}
    • Object.defineProperty(TextCell.prototype, “heightProp”, { get: function() { return this.text.length; } });
  9. [1] instanceof Array

Download the slides of chapter 6:

Download Chapter 6 Slides

DOWNLOAD PDF of Eloquent JavaScript Chapter 6 Objects

I add a video every week, subscribe so that you will be noticed when a new video is released.

Get the paperback copy of Eloquent JavaScript:

Get a paperback copy

Tagged with: , ,

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website