Arrow Functions

[00:00] So let's get right into it. We're gonna convert this function into a arrow function with an implicit return. So what does that mean? So we're gonna say const double, and I'm gonna comment this out so we can compare, with the end number. So here are a couple of things different already.

[00:17] So first of all, we're not using the function keyword. We're using const and then double. This is like any other variable that we've created. The difference here is what comes after the equal sign. And you'll notice function declarations don't have an equal sign because they're not a a variable assigned to a function.

[00:33] They're a special type of variable that is created as a function declaration. So in the case of arrow functions, an arrow function itself is actually an expression rather than a statement which is what we're doing with the function declaration. And so you can pass this as an argument to other functions. You can use it in a ternary. You can do like all sorts of things inside of, in the process of creating an arrow function and we'll definitely do that later on.

[00:58] So, the name of the function is the name of the variable. It's going to accept our number so that part looks the same. It also returns a number and, again, we don't need to have that explicit return type because that can be inferred. So let's get rid of that. And then we have this funny looking thing.

[01:16] It looks almost like it's saying equal to or greater than or typically you would write that greater than or equal to. With arrow functions, it's the equal sign and then the greater than sign, is how you write that. And it is kinda funny. It looks a little bit interesting but it's like an arrow pointing to this function does this. I don't know.

[01:39] It was common in other languages and so they added it in JavaScript, in this way. It's just kinda interesting. So, yeah. Then we do n times two. And you'll notice the lack of a return, keyword and that is because with an arrow function, if it does not have curly braces, then whatever the arrow was pointing to is going to be returned implicitly.

[02:01] That's just how they work. This makes them really nice for simple functions like this that are just a one liner utility sort of function. If it does have curly braces, then you can put it on multiple lines and you can still use a return and that will work exactly the same. And the benefit here being that you can do other things as well whereas if you just do the implicit return, you literally cannot do anything except an expression. No statements allowed.

[02:26] Just expressions. And so, you'll sometimes see people make arrow functions and not use the explicit return because they wanna have multiple statements going on inside of, the body of that function. For myself, I don't do that. I I don't write functions that look like this a whole lot. If I've got something like this, then I'm absolutely gonna convert it to a function declaration.

[02:48] But there are situations where you'll have an arrow function that does have multiple lines and, and I use an arrow function for that, which you will see later on. So let's just bring this back to, single one liner function. Very nice for this type of thing. Alright. Great.

[03:06] Oh, one other thing before we go too far on on this. One important difference between a function declaration and all the other types of ways that you can call functions is when you can actually call them. So I'm gonna actually save this file. We're gonna come down here to actually, you know what? We'll just add a console log right here.

[03:26] We'll say console dot log double five. Sweet. Okay. Double five is 10. I comment this out.

[03:32] Same Oh. Oh. Right. Right. Comment this out.

[03:37] There we go. Okay. Same thing in either case. So here's where the difference happens. Let's go with our function declaration.

[03:46] I'm gonna move this to before the function declaration. We're still getting 10. K? So that's a really cool thing about function declarations is that, you can put them anywhere inside of the file, and as long as they are in the same block as where they're being called. So like we couldn't put this inside of a block like this because now double is outside of the block where this is defined and so we don't have access to double.

[04:12] So we can move it inside. There we go. That would be fine. So I say that because sometimes you'll say if thing then whatever, and now we're outside of that block. So when I say you can put it anywhere in the file, what I mean is you can put it anywhere inside of the, a given block.

[04:29] And anywhere else within that block, you can call it from anywhere, above, below, wherever. Even inside, actually. Don't do that. That's called recursion and that would break our program terribly. So we're not gonna bother with that.

[04:43] We'll we'll We can talk about recursion later. Okay. All of that said, you cannot do the same thing with, a variable that is, declared in this way, an expression, a function expression, or an arrow function, like this. And so for this reason, I actually really prefer function declarations for things that are are not like really basic utilities. Typically, I'll just have my utilities up at the top and I don't need to worry about it.

[05:10] But yeah, lots of the time, you're gonna find my functions are function declarations in large part because those mean that I don't have to care what order, these variables are declared and and initialized and everything. It's just nice to not have to worry about that. But in the case here, I would probably go with the arrow function just because it's a single line utility. I'm probably not gonna use it up at the top and, it's gonna work just fine. So there you go.

[05:37] That's a really, unique aspect of function declarations and why I prefer them for a lot of, the functions that I write. Okay. Whew. Let's move on. So we're gonna convert this into an arrow function.

[05:51] Same sort of deal. So there we go. And, yep. There's not really anything new there. We we can, add our return type there if we want to.

[06:02] It looks like the AI wanted to do that. So, no, we're not gonna do that. We're gonna also convert this one to an arrow function. So calculate total. Now this one has an explicit return because it has multiple lines.

[06:14] We and it's it's not so much about the lines. You can actually have multiple lines. In fact, we could say, put that right there and that would be technically correct. Now Prettier, when I save this, is gonna reformat it because it looks nicer to be on one line, but you can totally do this. And in fact, in React world, lots of times you will see, whoops, see things like, this where you have this parenthesis right here and a closing parenthesis right here and you don't need a return statement.

[06:43] In fact, in react land, this would be like div, div, and here's a div and our, you know, hello name thing, whatever. So this is all react stuff. Don't worry so much about it. And we're not in a TSX file so it's not gonna work anyway. But, but yeah.

[06:58] You'll see stuff like this a lot. And so anyway, useful bit of information. But because we are doing multiple statements, that's what forces us into using the curly braces and, now we have to have an explicit return. So there's our calculate total right there. We're gonna make our is even.

[07:19] Again, we don't necessarily need the return type. We have this apply to number. This is, takes a number to trans and a transform function and returns a transformed number. So this is one of the really cool things about TypeScript and JavaScript in general that I really like and that is that functions are first class citizens. What that means is they operate like they are objects.

[07:42] You can take a function and pass it to something else and use that inside of that function. So, this one is really interesting. So apply to number. You take a value which is a number and then you take a transform which is a function that takes a number and returns a number. And then you can say transform value.

[07:58] So whatever whatever you passed me, you're gonna be in charge of determining how this number is transformed. I'm just gonna take the number and transform and I'm gonna call that, that transform with that number. This is pretty cool. Because what it means is, I can now create, functions out of functions. So here I got my, triple and I got my square and then I can apply to number five and I wanna triple it.

[08:25] I wanna square it. And with that, we can save this and now we got triple of five is 15 and square of five is 25. So that's pretty neat. Functions being passed as, parameters or arguments to another function. And then that function can be then used and it composes together beautifully and it's it's like a, beautiful orchestral piece.

[08:49] I don't know why I said that. It composes together very nicely. But, yeah. A little bit less related to arrow functions. We could definitely In fact, my IDE can even convert this to a named function, and it's still gonna work just as well.

[09:04] But where this becomes useful is in the typing, where you can type this as a function that returns a number. And so that's why it's included here. Okay. And of course, like we could convert all of these into named functions and it would work just as well. The semantically, as far as all of these examples are concerned, they work exactly the same.

[09:26] Now things get a little bit different if you start using this, but we're not using this right now. So we'll get into that when we get into objects and stuff. Lexical scope. Let's just Yeah. Anyway, or the lexical disk.

[09:40] So, hopefully, that was interesting. Arrow functions are great. I do use them quite often. And, I also use function declarations. There's also function expressions which would be basically the same as this except you'd have function and then you wouldn't have this and you would have to have an explicit return.

[09:57] So this is called a function expression. It can actually have a name too. So is even for reals or something. Like you can give it a specific name here too. This was actually really common years ago before arrow functions were a thing.

[10:12] And now if you're gonna do something like this, you may as well just make it an arrow function because it's less characters. So yeah. And especially if you can do an implicit return, like this, which is what we had originally. I keep on typing the wrong character. Holy smokes.

[10:29] Kent, get a hold of yourself. Okay. So in any case, you you might see some function expressions like that as well. But I prefer either arrow functions or function declarations. Often, I am gonna opt for the function declaration unless I am taking advantage of the implicit return, features of, function expressions or or the the arrow function expression.

[10:53] Good job on that one. We'll see you in the next.

[00:00] Okay. Let's talk about different ways that you can write functions. We're gonna get into arrow functions in this exercise, and there are actually a couple other ways that you can write functions. There's, function expressions, and there's actually method syntax on objects and classes and stuff. We're not gonna get into those, so we're we're not done.

[00:18] There's also generator functions and stuff. We're we're so and async functions. We're not getting into every function type, in this exercise. We're gonna focus on, function declarations, which we've done so far, and arrow functions. They're actually features of arrow functions that we're not gonna dive too deep into either because they require knowledge of other things that we're gonna get to later.

[00:38] So mostly this is gonna be a syntactic difference between functions, and function declarations and arrow functions. But there will be a couple of semantic differences that we'll talk about here as well. So have a good time with this one. We'll see you when you're done.

Learning to program can feel overwhelming. There are countless tutorials, boot camps, and YouTube videos all pulling you in different directions, and most of them assume you already know something.

The result? Gaps in your understanding that haunt you for years. You memorize syntax without understanding what it means. You copy-paste code that works but can't explain why. When something breaks, you're stuck because you never built the mental model to reason about what's happening underneath.

The Programming Foundations Workshop is your ground-zero start to becoming a software developer. Built with TypeScript from the very first line, it takes you from zero prior programming experience through expressions, variables, types, functions, and beyond-- equipping you with the foundational knowledge that every concept in web development builds on.

No prior programming knowledge is required. If you can open an editor and run the workshop app, you're ready. And because this is how software is built today, you'll learn alongside AI-assisted tooling from the start-- building the skills to write, review, and understand code in a modern development workflow.

## Expressions & Output

Every program needs a way to tell you what it's doing. Without output, you're flying blind-- writing code with no way to verify it works. This is the very first skill you need as a developer.

In this section, you'll get your programs talking back to you while learning the building blocks of every piece of code you'll ever write:

- Outputting values with `console.log`
- String expressions and concatenation
- Number expressions and arithmetic operators
- Escaping special characters in strings
- Template literals with interpolation and multiline support

## Variables

Hardcoded values can only get you so far. Real programs need to store, reference, and update data as they run. Without a solid understanding of how variables work, you'll constantly be confused by unexpected behavior.

Variables are foundational to every program you'll ever write. Here you'll learn how to declare them, when to use each type, and a critical nuance that trips up even experienced developers:

- Declaring variables with `let` and `const`
- Naming conventions and casing (camelCase, SCREAMING_SNAKE_CASE)
- Reassigning values with `let` and compound operators like `+=`
- The important distinction between reassignment and mutation
- Why `const` doesn't always mean the value can't change

## Primitive Types

JavaScript has types whether you think about them or not. Every value in every variable carries a type, and ignoring that fact leads to bugs that are hard to track down. TypeScript makes these types explicit, catching entire categories of errors before your code ever runs.

This section introduces you to all seven primitive types and how TypeScript helps you work with them safely:

- Explicit type annotations with `number`, `string`, and `boolean`
- The difference between `null` and `undefined`
- Special types: `bigint` for arbitrarily large numbers and `symbol` for unique identifiers
- Type coercion and why it can surprise you
- Floating-point precision and practical considerations for working with numbers

## Comparisons & Boolean Logic

Making decisions is at the heart of every program. Should this button be enabled? Does this user have access? Is the cart empty? All of these questions boil down to comparisons and boolean logic.

Getting comparisons wrong leads to subtle bugs that are painful to debug. This section gives you the tools to write conditions that behave exactly as you'd expect:

- Loose equality (`==`) vs. strict equality (`===`) and why you should almost always use strict
- Not-equal, greater-than, and less-than-or-equal-to operators
- Combining conditions with logical AND (`&&`), OR (`||`), and NOT (`!`)
- Order of operations with logical operators
- Using parentheses to make complex conditions explicit

## Truthiness & Falsiness

JavaScript has a unique feature where every value has an inherent "truthiness" or "falsiness." This isn't a bug-- it's one of the most practical features of the language once you understand it. But misunderstanding it leads to some of the most confusing behavior new developers encounter.

Here you'll learn which values are truthy, which are falsy, and how to use this knowledge to write cleaner conditional logic:

- Coercing values to booleans with the `Boolean` constructor
- The double-not (`!!`) operator and when to use it
- Falsy values: `0`, `""`, `null`, `undefined`, `false`, and `NaN`
- Practical patterns like checking array length and optional values
- Avoiding common pitfalls with logical operators and coercion

## Functions

Up to this point, your programs run top to bottom and that's it. Functions change everything. They let you take a chunk of code, put it somewhere reusable, and call it from anywhere-- with different inputs each time.

Functions are the single most important building block for organizing and scaling your programs. This section takes you from writing your first function through passing functions as arguments to other functions:

- Function declarations with the `function` keyword
- Accepting parameters and specifying their types
- Return values and TypeScript's return type inference
- Arrow functions and implicit returns
- Passing functions as arguments to other functions
- Documenting your functions with JSDoc

## Type Inference & Arrow Functions

TypeScript is smart. You don't have to type everything explicitly-- TypeScript can often figure out the types for you by looking at your code. Knowing when to lean on inference and when to be explicit is a skill that makes your code cleaner and your development faster.

This section also covers arrow functions, a concise alternative syntax you'll see everywhere in modern JavaScript and TypeScript:

- How TypeScript infers return types from your function body
- When explicit return types help catch bugs earlier
- Converting function declarations to arrow functions
- Implicit returns for single-expression functions
- The hoisting difference between declarations and expressions
- Function expressions as first-class values

## Void & Never

Not every function returns something useful, and some code paths should never be reached. TypeScript has dedicated types for both of these situations, and understanding them helps you write more precise, self-documenting code.

This section introduces two TypeScript-specific concepts that complete your understanding of the type system's fundamentals:

- The `void` type for functions that don't return a value
- How `void` relates to `undefined` in practice
- The `never` type for functions that throw errors or never return
- Using `never` to enforce exhaustive checks
- Throwing errors to halt execution and signal failures
- Practical patterns for input validation with error throwing

Programming Foundations

Structured Data

Type Safety

Object Oriented TypeScript

Advanced TypeScript

Practical TypeScript: Foundations to Fluency

Master programming basics with our Introduction to Programming Foundations. Perfect for beginners eager to start coding and build essential skills.

Intro to Introduction To Programming Foundations

Introduction to Programming Foundations

Intro to Expressions And Output

Hello World

Escaping Strings

Strings

Numbers

Template Literals

Discover the art of taking effective breaks to boost productivity and mental clarity. Learn techniques to recharge and enhance focus in your daily routine.

Break

1. Expressions And Output

Intro to Variables

Discover the key differences between let and const in JavaScript. Optimize your code with these essential ES6 variable declarations.

Let And Const

Explore the key differences between reassignment and mutation in programming. Enhance your coding skills with clear insights and practical examples.

Reassignment Vs Mutation

Discover effective strategies to break bad habits and boost productivity. Transform your routine with actionable tips for lasting change.

Break Variables

2. Variables

Discover the basics of primitive types in programming. Understand integers, floats, booleans, and more to enhance your coding skills.

Intro to Primitive Types

Master numbers and strings with this guide. Enhance your coding skills by understanding data types and their applications in programming.

Numbers And Strings

Discover key differences and similarities with our in-depth comparisons. Make informed decisions with clear insights and expert analysis.

Comparisons

Master Booleans and comparisons in programming. Enhance your coding skills with clear examples and practical applications. Perfect for beginners!

Booleans And Comparisons

Explore the differences between null and undefined in JavaScript. Master these concepts to enhance your coding skills and avoid common errors.

Null And Undefined

Explore Bigint and Symbol in JavaScript. Enhance your coding skills with these powerful data types for handling large numbers and unique identifiers.

Bigint And Symbol

Master JavaScript truthy and falsy values with this guide. Enhance coding skills by understanding data types and logical operations.

Truthy Falsy

Break Primitive Types

3. Primitive Types

Master control flow basics in programming. Enhance your coding skills with loops, conditionals, and more. Perfect for beginners!

Intro to Control Flow

Master conditional logic by building a grade calculator that maps numeric scores to letter grades. Sharpen your programming skills today!

Conditionals

Master switch statements in programming. Simplify code logic, enhance readability, and boost efficiency with this essential guide.

Switch Statements

Master loops in programming! Enhance your coding skills with efficient loop techniques. Perfect for beginners and pros seeking to optimize code.

Loops

Master nested loops in programming to enhance your coding skills. Discover efficient techniques and practical examples for optimal performance.

Nested Loops

Master the ternary operator for concise code. Discover its syntax, benefits, and examples to enhance your programming skills efficiently.

Ternary Operator

Discover common errors, their causes, and solutions. Enhance your skills by learning to identify and fix mistakes effectively.

Errors

Break Control Flow

4. Control Flow

Master the basics of functions in programming. Enhance your coding skills with clear examples and practical insights. Perfect for beginners!

Programming Foundations

Programming Foundations

Transcript

Arrow Functions

Transcript