JavaScript Basics

The absolute basics every developer should know about JavaScript.

Watch User Created Playlist (39)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Use Some as a Ternary Operator or Conditional

P

Create a Shallow Copy of an Array with Slice

P

Advanced Function Scope

P

JavaScript Function Scope Basics

Create an Array concatAll method

The "this" keyword: The new and window Binding

Array.prototype.reduce in JavaScript by example

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

JavaScript's Call Stack

Unit Testing with Mocha and Chai

Sort an Array Alphabetically or Numerically

P

Setting up Unit Testing with Mocha and Chai

What is JavaScript Function Currying?

Intro to Recursion - The Problem

"Private" Variables with Closures and Factory Functions

P

Hoisting in JavaScript

Advanced Flattening

The "this" keyword: Introduction and Implicit Binding

Refactoring: Array.prototype by example [filter, some, forEach]

The Array forEach method

Check if a Value is in an Array with indexOf

P

Chaining the Array map and filter methods

The "this" keyword: Explicit Binding with call, apply, and bind

Double && (and) Double || (or) = Double Functionality

Log Levels and Semantic Methods

P

Intro to Recursion - The Solution

Combine Values of an Array into a String with Join

P

Immutable.js: Introduction - Easing the Pains of Mutability

Advanced Reduce: Composing Functions with Reduce

P

The Factory Pattern for Javascript Modules

The Array map method

Use Concat to Add Values to an Array

4 common ways to get a substring from a string in JavaScript

P

The Array filter method

Understanding function bind() in JavaScript

P

Using JSHint for Linting with Gulp

Using console.count to Count Events

P

Filter an Array with Truthy Values

Add Elements onto an Array with Push

js tutorial about Use Some as a Ternary Operator or Conditional

Use Some as a Ternary Operator or Conditional

5:43 js PRO

some returns a boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple yes or no answer. In this lesson we look at 2 practical use-cases for some. The first shows how it can be used with a ternary operator to switch a class on an element & the second shows how some can be used in an if conditional.

js tutorial about Create a Shallow Copy of an Array with Slice

Create a Shallow Copy of an Array with Slice

9:15 js PRO

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

js tutorial about Advanced Function Scope

Advanced Function Scope

7:06 js PRO

Function scope and closures in JavaScript can be tricky. This lesson builds on the Function Scope Basics video to dive deeper into JS function scope.

js tutorial about JavaScript Function Scope Basics

JavaScript Function Scope Basics

5:45 js

This or that? Javascript scoping can be confusing. This lesson covers the very basics of function scoping.

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function "concatAll" which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

js tutorial about The "this" keyword: The new and window Binding

The "this" keyword: The new and window Binding

3:09 js

In this lesson we talk about the "new binding" as well as the "window binding" for rules three and four of how to understand the "this" keyword in JavaScript.

js tutorial about Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 js

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
js tutorial about The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

5:05 js

Javascript modules are a design pattern that allow you to encapsulate your code into smaller self managing pieces. They help you separate your code, protect your variables, and provide an easy way to expose only the parts of your component that you want to be exposed.

js tutorial about JavaScript's Call Stack

JavaScript's Call Stack

3:45 js

JavaScript has a concurrency model based on an "event loop". Yet, we know that JavaScript is single-threaded, which means only one task can happen at a time. To understand how JavaScript has a concurrent model yet is single threaded, we'll take a look at how the browser is working to interpret your JavaScript.

Specifically, we'll start by looking at the Stack implemented by browser engines (e.g. V8 or SpiderMonkey). The JavaScript engines use the call stack to keep track of what functions are running -- a function is added to a stack when the engine reaches a function that needs to be executed, and it cleared from the stack when the function returns.

js tutorial about Unit Testing with Mocha and Chai

Unit Testing with Mocha and Chai

3:01 js

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use describe and it to outline your tests and make sure you don't break your library in the future.

js tutorial about Sort an Array Alphabetically or Numerically

Sort an Array Alphabetically or Numerically

6:23 js PRO

Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort in action, but also how it can be chained together with other array methods such as map and join.

js tutorial about Setting up Unit Testing with Mocha and Chai

Setting up Unit Testing with Mocha and Chai

2:44 js

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

js tutorial about Intro to Recursion - The Problem

Intro to Recursion - The Problem

6:15 js

Recursion is a technique well suited to certain types of tasks. In this first lesson we’ll look at solving a problem that requires the flattening of arrays without using recursion. Showing the shortcoming of a non-recursive solution first will help you to understand why it’s so valuable and why sometimes it's the only solution to many problem.

js tutorial about "Private" Variables with Closures and Factory Functions

"Private" Variables with Closures and Factory Functions

3:01 js PRO

By making use of closures and lexical scope, we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

js tutorial about The "this" keyword: Introduction and Implicit Binding

The "this" keyword: Introduction and Implicit Binding

5:58 js

In this lesson we introduce the "this" keyword in JavaScript as well as talk about "implicit binding" or the first rule in discovering what the "this" keyword is referencing.

js tutorial about Refactoring: Array.prototype by example [filter, some, forEach]

Refactoring: Array.prototype by example [filter, some, forEach]

5:42 js

Refactoring is a great opportunity to learn and we have an existing Javascript function that is lengthy, hard to understand, and overcomplicated. We'll take a look at putting some of Javascript's built in Array.prototype methods to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the Array methods:

js tutorial about The Array forEach method

The Array forEach method

4:03 js

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

js tutorial about Check if a Value is in an Array with indexOf

Check if a Value is in an Array with indexOf

5:21 js PRO

indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a whitelist array.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

js tutorial about The "this" keyword: Explicit Binding with call, apply, and bind

The "this" keyword: Explicit Binding with call, apply, and bind

4:32 js

In this lesson we talk about .call, .apply, and .bind in order to understand "explicit binding", or the second rule of discovering what the "this" keyword is referencing in JavaScript.

js tutorial about Double && (and) Double || (or) = Double Functionality

Double && (and) Double || (or) = Double Functionality

3:24 js

The and (&&) and or (||) operators in javascript do not function like traditional logical operators. We can use them to our advantage to eliminate some boilerplate code when writing conditional expressions.

Additional jsbin: https://jsbin.com/qipina/edit?js,output

js tutorial about Log Levels and Semantic Methods

Log Levels and Semantic Methods

4:38 js PRO

Go beyond console.log by learning about log levels, filtering log output and structuring your output to be meaningful and concise. The JavaScript console object offers many methods to make your life easier - start learning them here!

js tutorial about Intro to Recursion - The Solution

Intro to Recursion - The Solution

4:39 js

In this lesson we manage to remove all of the nested loops that helped us towards a partial solution in the first lesson. We create a function getTasks, that can, only under certain conditions, call itself. This is the basis of recursion and often leads to cleaner, shorter code that can handle more dynamic input.

js tutorial about Combine Values of an Array into a String with Join

Combine Values of an Array into a String with Join

4:42 js PRO

The join() method joins all elements of an array into a string. In this lesson we first look at why join is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.

js tutorial about Immutable.js: Introduction - Easing the Pains of Mutability

Immutable.js: Introduction - Easing the Pains of Mutability

3:22 js

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's Immutable.js library, let's take a moment to examine some of the pains and obstacles that mutable data structures present.

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native Array to use Immutable.List in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

js tutorial about Advanced Reduce: Composing Functions with Reduce

Advanced Reduce: Composing Functions with Reduce

8:19 js PRO

Learn how to use array reduction to create functional pipelines by composing arrays of functions.

js tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 js

Javascript modules are a great way to isolate your code, but they are not very re-usable. If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.

js tutorial about The Array map method

The Array map method

3:02 js

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

js tutorial about 4 common ways to get a substring from a string in JavaScript

4 common ways to get a substring from a string in JavaScript

2:38 js PRO

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

js tutorial about The Array filter method

The Array filter method

4:42 js

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

js tutorial about Understanding function bind() in JavaScript

Understanding function bind() in JavaScript

3:03 js PRO

Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

js tutorial about Using JSHint for Linting with Gulp

Using JSHint for Linting with Gulp

6:01 js

We will look at linting your JavaScript files using jsHint with Gulp to check for errors and warnings.

js tutorial about Using console.count to Count Events

Using console.count to Count Events

2:16 js PRO

Learn how to user console.count in order to log out how many times a given thing has happened.

js tutorial about Filter an Array with Truthy Values

Filter an Array with Truthy Values

6:44 js

Array filter creates a new array with all elements that pass the test implemented by the provided function. In this lesson we discuss how only a truthy or falsey value is required as the return value to the function, which in turns allows us to be creative in how we perform the filter. We end the lesson by looking at an example showing how chaining multiple array methods together can lead to very nice, declarative code.

js tutorial about Add Elements onto an Array with Push

Add Elements onto an Array with Push

3:26 js

Array push is used to add elements to the end of an Array. In this lesson we'll see how the push method accepts multiple arguments, can be used to merge two arrays, and how it can be used to represent user input.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?