In this course you’re going to learn a few concepts that are key to every programmer.
In the end you will have a clear understanding of:
What is input, and what is output
What are variables
What are loops
How we can alter what the program does based on the state of the program, using conditionals
How we can divide the program in little subprograms using functions
How we can divide the program into separate files
What are types, and why they are useful
What are objects
Input and output
A computer has one job. Wait for an input, do something (what we tell them, hopefully!) and return an output.
Yes, looks like they do a lot more. But if you bring things to simple terms, it’s all input and output. You open a program - you gave the input with a mouse click, or the command line. You click a button. You press a key. You .. do things. The computer runs a program that is built to handle that input.
And the computer returns a result. Something moves on the screen. Words. Pictures. Things happen.
Internally, a lot happens between the time you give the input, and the time you receive the output. Which might be just a few milliseconds, but code (as we know) is executed really, really fast.
Variables
A variable is a way to store values into your programs, and to refer to them using meaningful names.
Suppose you have the number “5” and you want to give it a special meaning.
For example, the age of a child.
You can assign it to a variable. The exact syntax depends on the programming language, but in general terms you can imagine it being
childAge = 5
In JavaScript for example you would use
let childAge = 5
(read it as “let childAge be 5”)
Now you can use the childAge variable, which has the 5 value assigned, in other operations. Like printing:
print childAge
//this prints "5" to the screen
(I’m still using pseudocode)
Now, a variable can typically change its value.
If it’s the child birthday, you can change the value to
childAge = 6
Variables are an essential part of programming.
One thing that’s very important is naming your variables in the right way. As with many things, there’s no “one true way” of doing it. It also depends on your team, if you will work on a team. But one thing that is more or less universal is that it’s important to give variables a meaningful name, so that when you look at them in your programs, you can infer their meaning while you read the code.
childAge is a good example - it’s the age of a child.
Loops
Programmers are lazy people. Instead of repeating a task 10 times, they rather spend some time up front, create a procedure that can be repeated, and run that 10 times.
This can be done on several levels. By creating automated tasks for your day to day activities, for example.
When you do this inside your programs, that’s what we call a loop.
Here’s an example of a loop. It’s written using JavaScript:
const list = [1, 2, 3, 4, 5]
for (let value of list) {
console.log(value)
}
This loop will run 5 times, exactly like the elements found in the list array, and will print the content it finds. The loop will automatically end when the list ends.
Some other kind of loops available in JavaScript do not have a fixed end like this. It’s the case of the while loop, which always checks for a condition before running the loop:
while (true) {
//do something
}
In this case the condition is always true, so the loop will run forever. If you had
while (false) {
//do something
}
the loop would never run, and the control goes to the instructions you give next.
Using loops you can usually decide to break when a particular situation happens.
In JavaScript this can be done using the break statement:
const list = [1, 2, 3, 4, 5]
for (let value of list) {
console.log(value)
break
}
This will break the loop at the end of the first execution, so instead of printing all the 5 numbers, it will only print one.
Loops can be tricky at times, but they are highly useful.
Conditionals
At some point in any program (as in life) you have to face a choice.
This is an essential part of programming.
Did the user type a number or a letter? Was it the number 1 or a number bigger than 5? Is this an image or a PDF file?
We call those conditionals. There is code that will only run if a condition is satisfied. Other code will not even run, if a condition is not met.
We wrap those portion of codes into blocks. In JavaScript, blocks are identified by curly brackets.
The most common conditional is if. Available in most languages under this name, it verifies a condition before running the code contained in its block:
if (2 > 1) {
//run this code
}
This is a simple example that always executes. Because 2 is bigger than 1. Usually you compare variables:
if (a > b) {
//run this code
}
After an if statement you can link an else statement, to execute code if the if condition is not met:
if (a > b) {
//run this code
} else {
//run this other code
}
Those blocks can be nested, to create more complex scenarios:
if (a > b) {
if (c > 5) {
//run this code
} else {
//run this other code
}
} else {
//run this other code
}
Another conditional statement in JavaScript is switch. Compared to if, it allows for an easier definition of multiple choices:
switch (a) {
case1:
//do something
break
case2:
//do something
break
case3:
//do something
break
default:
//eveything not listed as a case
break
}
I mention JavaScript to give you the real syntax that you’re going to use, but those are all general constructs that you will find in many different languages, maybe slightly changed but more or less equivalent.
Another conditional in JavaScript is the ternary operator ?: which allows a more terse syntax:
isTrue ? /* do this */ : /* do that */
We’ll learn more about this, and the other conditionals, later on.
Functions
With variables, loops and conditionals you are already well equipped to create cool little applications.
Once you grow a certain point, however, it’s hard to keep things manageable. When you write down 100, 200, 500 lines of code, it’s all fun. But go past that number and you need a way to organize them.
Various programming languages have different ways to do so. JavaScript in particular offers one way using functions. Functions are not limited to JavaScript, of course - they are adopted into many others.
A function is a block of code with a name, which can be invoked and run when needed.
For example here’s a function:
functiondoSomething() {
//code that is contained into doSomething()
}
Now into another part of the program you can call doSomething() and the code contained into it will execute.
Functions can accept arguments. In this way they can encapsulate a lot of functionality that the outer program does not need. If a function just needs a variable value to perform a calculation or save data to a database or communicate through the network, then that variable is all it should get from the rest of the program.
Here’s an example
functiondoSomething(aVariable) {
//code that is contained into doSomething()
console.log(aVariable)
}
Functions are great because they let you abstract your code, and reuse it in other places.
You can have multiple parts of a program share a common functionality into a function, so you don’t have to maintain a similar snippet of code in multiple parts of your codebase.
Modularizing the code into packages
Functions are great to organize code within one file, or a few files.
But what can you do when your files structure starts to become too crowded?
You reach for packages.
Packages are essentially similar to functions, except instead of abstracting away a piece of functionality to reuse in your program, you can remove them from your program altogether, and place them outside of it.
Multiple programs can now reuse a tiny functionality (or a bigger functionality) and you only have to maintain it in one place.
In JavaScript land, packages are commonly published to npm.
We’ll talk more about npm later in the bootcamp, but it’s basically a huge collection/repository of JavaScript packages.
Importing a package is very easy, and it’s also common to create packages for all sort of things, even very small ones.
Other languages and communities have similar package repositories and ecosystems. Python has pip, for example.
It’s great when a language ecosystem is built around Open Source. JavaScript in particular is heavily rooted towards Open Source, and you can easily find free to use packages for nearly everything.
Types
We talked about variables before. A variable is a label associated to a value.
This value has a type attached.
When it comes to types, you have 2 kinds of programming languages: loosely typed and strongly typed.
And statically typed vs dynamically typed, but I won’t go into the explanation.
For now, just know that some languages really want you to deal with types, very explicitly, and some other languages let you be more dynamic. Typically, compiled languages are more strict on this matter.
JavaScript, Python, Ruby and other interpreted languages like to have loose types. Which means you can write
const number = 5
or
const name = 'Flavio'
without saying the first is a number, and the second is a string.
With JavaScript you’ll have several built-in types to work with: Object, Array, String, Number, Date, and more.
The type of a value identifies what you can do with it. It provides peculiar properties and methods you can call on it. For example a string can be trimmed using the trim() method. A number has other properties and methods.
In short, not all variables are equal.
Objects
We introduced object oriented programming previously. This programming methodology, of course, is based on objects. But what are objects, exactly?
At some point during the global effort made by programmers to help themselves create better programs, faster, more efficiently and all, the idea came to introduce this concept of objects.
In object oriented programming, you define a set of classes, or types of objects.
An object is an instance of a class, and it contains both code and data. The data is abstracted away in to the object, and the object is responsible for providing methods (which are functions attached to an object) to manipulate this data.
Say you have a Dog class. You can create a myDog object by instantiating a new Dog:
const myDog = newDog()
Warning: this is not a working example, we’ll get to working examples when we’ll introduce JavaScript. Consider this an imaginary snippet of code.
Roger is my dog’s name, so I can set the name using:
myDog.name = 'Roger'
A dog has an age:
myDog.age = 7
We set this data on the object, and we also have ways to retrieve this data.
The simplest way, in the case of JavaScript, is to just reference the property:
myDog.name //Roger
Here I defined public properties. In general, classes offer public and private properties. Private properties allow to encapsulate data, and only let it be accessed using methods that you define.
Now, we’ll talk a lot more about objects later on - in the meantime, I hope this little introduction served as an appetizer!
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
