Functional JavaScript First Steps


Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Functional JavaScript First Steps

Check out a free preview of the full Functional JavaScript First Steps course

The "Introduction" Lesson is part of the full, Functional JavaScript First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Anjana Vakil walks through the outline and provides links to the slides and exercises for the course. All exercises are hosted on Observable HQ and can be coded in the browser.


Transcript from the "Introduction" Lesson

>> Hello, everybody, welcome to functional JavaScript first steps. I'm Anjana Vakil, I'm coming to you from San Francisco, California. And I'm really excited to spend the day with you going over the basic concepts of functional programming. And really the core ideas that we need to get started in our journey, which may be lifelong as functional programmers.

So just a couple words about myself, I am a software developer and developer advocate. I do not have a formal computer science background, I studied philosophy and was an English teacher before I got into coding. And so, when I started working in software development, I found that different programming paradigms, different styles or mindsets for coding were really interesting to me, perhaps because of that philosophy background.

And functional programming in particular, just was really cool when I first learned about it. So what I would like to do with you all today is take you along on some of the things that I learned in my journey as a newbie functional programmer, just starting out. And really just focus on wrapping our heads around functional programming in its most basic form, so that we can then go on and continue our learning journey with other great courses on front end masters with other great books and resources that are out there and be in really good shape to continue diving into functional programming after this course.

So what we're gonna talk about today is basically what is functional programming, what does it mean to do functional programming? What does functional code look like compared to non functional code? And what are the tools that we need to write functional programs, in particular as JavaScript developers? So since we have a lot of web developers, a lot of JavaScript folks here, we're gonna be doing everything in JavaScript, which is actually although not usually considered a functional language is a really great language for learning functional programming, in my opinion.

And I'm gonna say a little bit more later why I think that it's such a great fit for functional code. And so we're going to talk about some of these concepts like pure functions, we're gonna talk about side effects and why we want to avoid them, we're gonna talk about treating programs as pipelines through which data flows between functions.

And we're gonna be talking about some of these words that we might have heard but don't really understand yet like higher order functions, or first class functions, things like closure and currying and whatnot. Our focus is not gonna be on the terminology so much, but again, on those core ideas, we're gonna talk about immutability and changing data in a way that's functional, that works with functional programming.

And we're gonna get some hands on practice with some coding exercises, that will allow us to hopefully grapple with those concepts and ask any questions and talk to each other about how we can wrap our heads around some of these tricky ideas. What we're not gonna be doing today [LAUGH] Is covering everything there is in the world to know about functional programming, not possible.

And you could definitely spend your life studying this stuff plenty of people have and will continue to. But we're gonna just again, get those basics under our belts so that we can go on and continue learning everything you could ever possibly know about functional programming, although, again, it'll take you a lifetime.

Again, we're not gonna really focus on the jargon, we'll look at a few terms that are helpful to know, and helpful to understand what to google for, but we're gonna focus more on those ideas instead of the academic mathematical side of things. But at the end of the day, you'll be in really good shape to go on and dive in deeper to that mathematical notation and things like that.

And again, we're gonna be focused on JavaScript, so we're not gonna talk about other languages that are usually considered more pure functional languages. We're just gonna be using the tools that we have as JavaScript developers to again, really focus on the concepts that we need to understand a lifestyle of functional programming.

So, today, what we're gonna be doing is a lot of coding in our browser. This course, and all of the exercises that we're gonna be doing are written in a platform called observable which you're looking at right now. What we're seeing right here, is a observable notebook. Now, I full disclosure I work at observable as a developer advocate.

But I think it's an amazing tool for doing this functional programming workshop together, because what observable is, is a platform for working with code and data and visualizations, interactively live in the browser. So it runs totally in your browser and requires no setup or installation, it uses JavaScript and web technologies, so we should be right at home as web developers and JavaScript folks.

And what's really great about observable is it's reactive, as you enter new code, you get the rest of your programs updated instantly. Actually, this is powered by functional concepts under the hood. We're not gonna dig into that, but if you're curious, you can read more about how observable works.

You don't need an observable account to do the coursework today, you can edit all of the code right in your browser. However, if you do wanna save your progress, if you want to save the copy your own copies of the notebooks that we're going to be looking at today, you can sign up for a free account, totally free.

You can log in with your GitHub or your Twitter or Google accounts, there's a big signup button at the top right of the pages that we'll see here. And you can create a copy of each of our exercise notebooks called a fork, that is your own place to play with and change and refer back to however you want.

So all of the materials for the course are available on, you can go to this URL, observable slash collection slash at ongina, slash functional minus JavaScript minus first steps. If that's too much to type out, you can also go to slash at ongina, and you should see in my collections the functional JavaScript first steps collection.

And that will bring you to a page with all the different slides and exercises that we're gonna work through today. I'm gonna be taking us through one by one, so hopefully it will be clear where we are in the course. But if at any point, anybody has a question about what notebook we're looking at or which exercise we're working in, please don't hesitate to ask.

And remember, you can always come back to this collection page, functional JavaScript, first steps to find all of the materials linked here. Everything is also linked out from our introduction, which is this document that we're looking at right now, which also has a great outline of all of the things that we're gonna cover today.

Wow, so, much stuff, but hopefully this is going to be functional programming. So, hopefully time will fly and we will get through all of this stuff in just a single day. So just really quickly to go over the plan for the day, we're gonna start out by taking a kind of step back and thinking about what functional programming even is.

And it turns out that it is actually one basic idea that everything else follows from which we will then through the rest of the day kind of explore in more depth. So once we establish that main idea, we're gonna take a look at some additional tools and techniques that make working in functional programming a lot easier, things like recursion, things like higher order functions.

We're gonna talk about closure what that means and why it's useful. We're gonna talk about building programs out of function, so, composing or merging functions together to create more complex programs. And we're gonna talk about immutable data and why it is sort of goes hand in hand with functional programming.

And then the end of the day again, we should be left with probably a very exhausted brain but lots of great concepts and questions, hopefully that we can take to continue our journey. So I've got some great resources and links for you in some next steps. In our notebooks, there is at the top, you're gonna see this functional JavaScript first steps with a list of all the notebooks and you can click, Next and Previous to go back and forth between notebooks and the collection.

They're all in the order that we're gonna walk through them in the course.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now