31:T43a,html`

List

[  
  1,  
  -0.109,  
  ${9 / 1000000}
]

Object

{  
  name: "Napoleon Bonaparte",  
  birth_year: ${napoleon_birth_year},  
  height: ${napoleon_height}  
}

`32:[] 2f:{"title":"Chapter 1: Logic","cells":[{"id":6513,"value":"chapterTitle(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6524,"value":"chapterProgress(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6559,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6560,"value":"**Programming is really about logic.** Logic is a fundamental component in philosophy, math, physics, computer science, and general human thinking.\n\nAnyone has the capacity to work with logic. It is built into us humans, and we all use it every day. Even if you do not think of yourself as an analytical person, you can handle the level of logical thinking that is required in basic programming.","pinned":false,"hidden":false,"mode":"md"},{"id":6546,"value":"toc = getToc(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"## Your first program","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"Programming is about logic. Useful tools are built by breaking their behavior down into smaller parts, and explaining it to a computer.\n\nWhen you write a program, you describe a specific logic to a computer, which can then execute that logic.\n\nFor example, we might want to write this kind of program:","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"> _If 2 is a higher number than 1, calculate the sum of 3 and 4. Otherwise just give the number 5_.","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"2 > 1 ? 3 + 4 : 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"`2` is always a higher number than `1`, so this program will never give you `5`.\n\nThis is a totally valid program, even if it’s not very useful. We will write more useful programs later.\n\nYou can try editing the program above. Refresh the page to reset.","pinned":false,"hidden":false,"mode":"md"},{"id":491,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"## Output","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"A program usually has some sort of _output_. This means that when it runs, it will _return_ a _value_. The program above will always _return_ the number `7` as output (shown right above the program code).\n\nIt is possible that a program just runs and doesn’t output anything. This kind of program could be totally useless, or it could do something else, like duplicate a file and then simply terminate.","pinned":false,"hidden":false,"mode":"md"},{"id":8558,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8554,"value":"Programs can also take _input_ that controls what exactly they do. We will talk about input later.","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"## Basic logic","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"The program above is not very useful. \n\nFirst, `3 + 4` will always be `7`:","pinned":false,"hidden":false,"mode":"md"},{"id":1187,"value":"3 + 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":8540,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8537,"value":"Thus, we don’t really need to make the program calculate that for us. We can rewrite the program above using only the number `7`:","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"2 > 1 ? 7 : 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":540,"value":"But this has redundant logic: `2` will always be a higher number than `1`. In programming, we would say that the condition `2 > 1` will always _evaluate_ to `true`:","pinned":false,"hidden":false,"mode":"md"},{"id":1170,"value":"2 > 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":7561,"value":"Just like replacing `3 + 4` with `7` gives you the same output, so will replacing `2 > 1` with `true`:","pinned":false,"hidden":false,"mode":"md"},{"id":7563,"value":"true","pinned":true,"hidden":false,"mode":"ojs"},{"id":7574,"value":"So we could also write our program as:","pinned":false,"hidden":false,"mode":"md"},{"id":7576,"value":"true ? 7 : 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":7558,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"With the program above, we are telling the computer:\n\n> _If `true` is true, give me `7`. If not, give me `5`_.\n\nBut `true` is always true, and never false. There is never a situation where the condition would _not_ be true.\n\nSo why not just leave it out? We can do that:","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"7","pinned":true,"hidden":false,"mode":"ojs"},{"id":8211,"value":"This is technically also a valid program.","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7599,"value":"## Variables","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"The different variations of our program above will always give you the same output. But they don't encapsulate the exact same _logic_.\n\nIf we used different numbers, the output would change. With _variables_ we can apply the same logic using different values.\n\nLet’s try a variation of the programming logic:","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"> _If `a` is a number higher than `b`, calculate the sum of `a` and `b`. Otherwise just return the number `b`_.","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"To get started, let’s give a value to `a` and `b`:","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"viewof a = Inputs.range([-10, 10], {\n label: varLabel(\"a\"),\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewof b = Inputs.range([-10, 10], {\n label: varLabel(\"b\"),\n value: 1,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"a > b","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"a > b ? a + b : b","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"If you change the values, you will see the _output_ change.","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"note(md`In the language we are using, _variable names_ cannot contain spaces. Programming languages have various restrictions and rules, and this is one of them in _JavaScript_.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"## Input","pinned":false,"hidden":false,"mode":"md"},{"id":600,"value":"Speaking of changing values, let’s do that by writing a program that accepts _input_. Input could be provided by a human, or by another program.\n\nThis program takes a number as input, and then multiplies that number by `10`:","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"multiplier_program = (n) => n * 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":8219,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"`n` here is an _input variable_; it’s a placeholder. When you run this program, `n` will be replaced by the value you provide.\n\nSo let’s run the program with some number:","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"viewof my_number = Inputs.range([0, 100], {\n step: 1,\n label: varLabel(\"my_number\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"multiplier_program(my_number)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8365,"value":"Input variables like this are often called _arguments_.","pinned":false,"hidden":false,"mode":"md"},{"id":668,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"## Operators","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"You might already be familiar with the concept of _operators_. They are common in math: the _plus_ and _minus_ signs are operators.\n\nThey \"operate\" on the numbers before and after, and they have a certain logical meaning (adding and subtracting numbers).\n\nWe already used operators in the examples above:","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"1 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":8457,"value":"_Modulo_ gives the remainder after a division:","pinned":false,"hidden":false,"mode":"md"},{"id":8466,"value":"9 % 2 // Also try 8 % 3, or 9 % 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":8494,"value":"If you get `0`, the number is divisible. Checking for divisibility and remainders is common in programming, so it has its own operator in many languages.","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"There are other types of operators as well, not just the ones we know from elementary math.\n\nFor example, a common _logical_ operator is the _not_ operator. We are using _JavaScript_, so it is marked with the `!` sign:","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1105,"value":"false","pinned":true,"hidden":false,"mode":"ojs"},{"id":8380,"value":"true == false // Does true equal false? No it doesn't, that's false","pinned":true,"hidden":false,"mode":"ojs"},{"id":8385,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"!true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1109,"value":"!false","pinned":true,"hidden":false,"mode":"ojs"},{"id":8373,"value":"true == !false // Does true equal not false? Yes it does, that's true","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8119,"value":"There is also an operator for combining pieces of _text_ (marked using quotes):","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"\"Napoleon\" + \" \" + \"Bonaparte\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"Note that in this programming language, the _plus_ sign is used for two different operations depending on whether we’re dealing with text or numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":8117,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":683,"value":"Different programming languages support different operators. In _Lua_, `#` is the _length_ operator:\n\n```lua\n#\"hi\" -- 2\n#\"world\" -- 5\n```\n\nIn JavaScript, this operator simply does not exist. You have to measure the length of a piece of text in other ways, which we will touch on soon.","pinned":false,"hidden":false,"mode":"md"},{"id":8148,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8150,"value":"There is no real limitation to what operators a programming language might have, but usually they are used for very common and elementary operations.","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"## Data types","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"Individual pieces of information, called \"data points\", or simply \"data\", are fundamental in programming.\n\nFor example, the age of a particular person could be a data point. In the previous example, we were already using many data points: we assigned _numerical_ data points to variables and used them to do math.","pinned":false,"hidden":false,"mode":"md"},{"id":7266,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7267,"value":"Always pay attention to the _type_ of data you are dealing with. The most important _data types_ for a new programmer are:","pinned":false,"hidden":false,"mode":"md"},{"id":7179,"value":"row(\n html`

Boolean

false,

true

`,\n html`

Number

1, -1000,

0.109

`,\n html`

String (text)

\"Napoleon\", \"Bonaparte\",

\"கோலாலம்பூர்\"

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6853,"value":"Our first program was already dealing with _numbers_. Then in the previous section, we turned the _boolean_ `false` to `true` with the _not_ operator, and combined two pieces of _text_ into a longer piece of _text_.\n\nYou could also take a piece of _text_ and return the _number_ of characters it has:","pinned":false,"hidden":false,"mode":"md"},{"id":6896,"value":"\"Napoleon\".length","pinned":true,"hidden":false,"mode":"ojs"},{"id":6902,"value":"As you can see, we can write programs that deal with multiple different _data types_, which then have different behaviours and properties.","pinned":false,"hidden":false,"mode":"md"},{"id":7169,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"### Booleans","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"_Boolean_ data means that something is either `true` or `false`. Booleans are fundamental in logic, and thus also programming.\n\nFor example, a _boolean variable_ could hold the information of whether a historical person is still alive or not. A _program_ could display this value, like in a Wikipedia article. When the person dies, the program could update the variable.","pinned":false,"hidden":false,"mode":"md"},{"id":8036,"value":"We can assign boolean data into a variable like this:","pinned":false,"hidden":false,"mode":"md"},{"id":7416,"value":"is_alive = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":7379,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7412,"value":"We also get boolean values when evaluating expressions:","pinned":false,"hidden":false,"mode":"md"},{"id":7008,"value":"2 > 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":7010,"value":"2 == 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":7015,"value":"We already did this in our first program. Evaluating conditions like these is very common, and we will come back to this later when we discuss _conditional statements_.\n\nFor now, focus on the fact that _booleans_ are a data type distinct from numbers and strings.","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"### Numbers","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"A _number_ is a whole number or a decimal number.","pinned":false,"hidden":false,"mode":"md"},{"id":7034,"value":"For example, the birth year of a person is a number. An age calculator program could subtract a number from the current year to calculate which birthday this person will have this year.","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"napoleon_birth_year = 1769","pinned":true,"hidden":false,"mode":"ojs"},{"id":7321,"value":"napoleon_height = 1.68 // meters as decimal number","pinned":true,"hidden":false,"mode":"ojs"},{"id":7359,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7344,"value":"To write useful programs, you will usually manipulate numbers in some way. Simple math operations are at the root of almost any program, and you will see many examples of this later.\n\nFor now, focus on the fact that _numbers_ are a data type distinct from booleans and strings.","pinned":false,"hidden":false,"mode":"md"},{"id":7355,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"### Strings","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"A _string_ is a piece of text. For example, a name.","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"first_name = \"Napoleon\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"last_name = \"Bonaparte\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"This program combines two pieces of text and assigns them into a new variable:","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"full_name = first_name + \" \" + last_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":7084,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7091,"value":"We can do many other things with strings as well. As with all data types, strings have their own behaviour and properties, which we will look at in chapter 2.\n\nFor now, focus on the fact that _strings_ are a data type distinct from booleans and numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":917,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7445,"value":"### Lists and objects","pinned":false,"hidden":false,"mode":"md"},{"id":7446,"value":"We now know about different types of data points. In programming, we often have to deal with a series of them.\n\nFor example, a to-do list program would typically let a user manipulate a _list_ of strings, or a simple calculator program could sum together a _list_ of numbers. A Wikipedia article could display multiple _properties_ of a person.","pinned":false,"hidden":false,"mode":"md"},{"id":8393,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7451,"value":"_Lists_ and _objects_ are collections of data points. Let’s look at them in detail:","pinned":false,"hidden":false,"mode":"md"},{"id":7308,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8279,"value":"### List (array)","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"A _list_ is an ordered series of values. Lists are sometimes called _arrays_.","pinned":false,"hidden":false,"mode":"md"},{"id":1270,"value":"The values in a list can be of any data type:","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"[1, 2, \"Napoleon\", -12, \"Bonaparte\", false]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7505,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1275,"value":"A list can include other lists, like this:","pinned":false,"hidden":false,"mode":"md"},{"id":1277,"value":"[\n [1, 2, 3],\n [4, 5, 6],\n [\n [\"a\", \"b\"],\n [\"c\", \"d\"]\n ]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":8274,"value":"### Object","pinned":false,"hidden":false,"mode":"md"},{"id":900,"value":"An object is a set of _key-value pairs_. Usually, it is used to model a particular type of abstract structure.\n\nThese key-value pairs are often called _properties_. In some programming languages, objects might be called directories or maps.","pinned":false,"hidden":false,"mode":"md"},{"id":7478,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7480,"value":"Imagine a program that lists the birthdays of historical figures. In the program, we might model a person in this way:","pinned":false,"hidden":false,"mode":"md"},{"id":901,"value":"({\n first_name: \"Napoleon\",\n last_name: \"Bonaparte\",\n birth_year: 1769\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"The program could then conveniently manipulate or display the data of each person.","pinned":false,"hidden":false,"mode":"md"},{"id":1375,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1373,"value":"Another example could be a playlist, where multiple _objects_ representing a song could be ordered in a _list_:","pinned":false,"hidden":false,"mode":"md"},{"id":1364,"value":"[\n {\n title: \"Wannabe\",\n duration_seconds: 173,\n artist: {\n name: \"Spice Girls\"\n }\n },\n {\n title: \"I Want It That Way\",\n duration_seconds: 213,\n artist: {\n name: \"Backstreet Boys\"\n }\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"Note how the objects also contain nested objects. In _object-oriented_ programming, a programmer uses objects like this to structure very large programs.","pinned":false,"hidden":false,"mode":"md"},{"id":739,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":745,"value":"### Other data types","pinned":false,"hidden":false,"mode":"md"},{"id":875,"value":"Different programming languages support different data types depending on the use cases the language was designed for. For example, JavaScript supports _dates_:","pinned":false,"hidden":false,"mode":"md"},{"id":878,"value":"new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2556,"value":"There might be many more data types as well. But for now, concentrate on the difference between _booleans_, _numbers_ and _strings_, and how they can be organised into _lists_ and _objects_.","pinned":false,"hidden":false,"mode":"md"},{"id":919,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":920,"value":"## Conditional statements","pinned":false,"hidden":false,"mode":"md"},{"id":6652,"value":"We were already working with a _conditional statement_ in our [first program](#your-first-program). We wrote a brief _if-else_ statement that allowed our program to return different things based on a condition.","pinned":false,"hidden":false,"mode":"md"},{"id":6653,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6645,"value":"### `if` and `else`","pinned":false,"hidden":false,"mode":"md"},{"id":932,"value":"Let’s write this program:\n\n> _Return the color red if Napoleon is older than 50, otherwise return green._","pinned":false,"hidden":false,"mode":"md"},{"id":949,"value":"{\n if (current_year - napoleon_birth_year > 50) {\n return \"red\"\n } else {\n return \"green\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6666,"value":"[current_year, napoleon_birth_year, current_year - napoleon_birth_year]","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6752,"value":"### Ternary `if`","pinned":false,"hidden":false,"mode":"md"},{"id":966,"value":"In JavaScript, we can write the same program in a shorter form, called _ternary if_:","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"current_year - napoleon_birth_year > 50 ? \"red\" : \"green\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"Because if statements are so common, programmers like to make them short. That’s why ternary if is used very often.","pinned":false,"hidden":false,"mode":"md"},{"id":6638,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6640,"value":"### `switch` and `case`","pinned":false,"hidden":false,"mode":"md"},{"id":6658,"value":"Switch statements evaluate the given condition for _multiple_ potential values.\n\nImagine you’re writing a video game, where the _player can move in any of the four cardinal directions_:","pinned":false,"hidden":false,"mode":"md"},{"id":6698,"value":"mutable x = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":6699,"value":"mutable y = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":6677,"value":"viewof direction = Inputs.radio([\"up\", \"down\", \"left\", \"right\"], {\n value: \"up\",\n label: html`direction = `\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6705,"value":"Inputs.button(\"Move to direction\", {\n reduce: move_to_direction\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8293,"value":"function move_to_direction () {\n switch (direction) {\n case \"up\":\n mutable y += -1\n break\n case \"down\":\n mutable y += 1\n break\n case \"left\":\n mutable x += -1\n break\n case \"right\":\n mutable x += 1\n break\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6713,"value":"You could achieve the same result with _if-else_ statements as well. This is however a good example of a different type of conditional logic that might be built into a programming language.","pinned":false,"hidden":false,"mode":"md"},{"id":940,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"## Loops and iterators","pinned":false,"hidden":false,"mode":"md"},{"id":986,"value":"In programming, you will often want to repeat a piece of code. Let’s say your music player program has a playlist, and you want to remove every song from it.\n\nImagine that a playlist is actually a _list_ of songs:","pinned":false,"hidden":false,"mode":"md"},{"id":2606,"value":"playlist = [\"Quit Playing Games\", \"Wannabe\", \"I Want It That Way\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2628,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2619,"value":"How would you actually remove every song from this playlist?\n\nLogically, you could remove the last item ${playlist.length} times to achieve the intended result. For this type of structure, most mainstream programming languages have _loops_.\n\nIn JavaScript, you can remove the last item from an _array_ by writing `playlist.pop()`. To remove all values, we can simply do this as long as the array is _not empty_.","pinned":false,"hidden":false,"mode":"md"},{"id":2630,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2727,"value":"### `for` loop","pinned":false,"hidden":false,"mode":"md"},{"id":2697,"value":"A common type of loop is the _for_ loop that lets us go over something _for_ a number of times:","pinned":false,"hidden":false,"mode":"md"},{"id":2603,"value":"```js\nfor (let i = 0; i < playlist.length; i++) {\n playlist.pop()\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2653,"value":"First, this code sets the _variable_ `i` to `0`.\n\n_For_ every iteration of the loop, the code between the curly braces will be executed. After every iteration, the value of `i` is increased by `1`.\n\nThis will continue as long as `i` is lower than `playlist.length`, which in this case is `${playlist.length}`.","pinned":false,"hidden":false,"mode":"md"},{"id":7126,"value":"note(\n md`The variable name \\`i\\` refers to the word _index_, which is what an ordinal number is often called in programming. Indices usually start from 0, which can be confusing to beginners.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"_For_ loops are very common, and most mainstream languages have a version of them.","pinned":false,"hidden":false,"mode":"md"},{"id":7755,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7756,"value":"### forEach","pinned":false,"hidden":false,"mode":"md"},{"id":7759,"value":"We had to measure the length of our list to execute a piece of code for a number of times. But we can also iterate on every item in the list using _forEach_:","pinned":false,"hidden":false,"mode":"md"},{"id":7780,"value":"mutable longest_title_length = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":7769,"value":"playlist.forEach((title) => {\n if (title.length > longest_title_length) {\n mutable longest_title_length = title.length\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7791,"value":"This loop checks every song title one by one. If the title in question is the longest encountered so far, it will store the length in the variable `longest_title_length`.\n\nIf you wanted to get the total playlist duration, you could apply this logic to sum the duration of each song.","pinned":false,"hidden":false,"mode":"md"},{"id":2736,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2731,"value":"### `while` loop","pinned":false,"hidden":false,"mode":"md"},{"id":2734,"value":"Another common structure is the `while` loop, which you can use without having an _array_:","pinned":false,"hidden":false,"mode":"md"},{"id":980,"value":"{\n var numbers = [] // This line creates an empty array\n\n var i = 1\n while (i < 10) {\n numbers.push(i) // This line pushes the current value if `i` into the list `numbers`\n i = i + 1 // This line increases the value of `i`\n }\n\n return numbers\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2757,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2745,"value":"The following program implements this logic:\n\n> _Subtract 17 units of currency from an account that has 200 units of currency until there is no longer enough money._","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"{\n var account_balance = 200\n\n while (account_balance >= 17) {\n account_balance = account_balance - 17\n }\n\n return account_balance\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7798,"value":"A while loop will simply check if the condition given is true or not, and execute as long as it is no longer true.","pinned":false,"hidden":false,"mode":"md"},{"id":2952,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2953,"value":"### Nested loops","pinned":false,"hidden":false,"mode":"md"},{"id":2956,"value":"Loops can be nested. Let’s say we want to write the following program:\n\n> _Create the coordinates for a 10 × 10 board of Battleship._","pinned":false,"hidden":false,"mode":"md"},{"id":6768,"value":"{\n const rows = [];\n\n for (let y = 0; y < 10; ++y) {\n rows.push([]);\n\n for (let x = 0; x < 10; ++x) {\n rows[y].push(x);\n }\n }\n\n return rows;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2739,"value":"### Infinite loops","pinned":false,"hidden":false,"mode":"md"},{"id":1029,"value":"Loops can be **dangerous**! If you make a mistake, a loop might go on _forever_ and the program will never stop running.\n\nIn the example above, if you accidentally added to `account_balance` instead of subtracting from it, this entire page would crash.\n\nWe’ll talk more about errors, bugs and programmer mistakes later.","pinned":false,"hidden":false,"mode":"md"},{"id":989,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2786,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":2787,"value":"Functions are reusable pieces of code that can accept _input_ and usually _return_ some _output_. They are basically small programs that can be used to structure larger programs.","pinned":false,"hidden":false,"mode":"md"},{"id":2828,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2852,"value":"Earlier in this book, we already used this function:","pinned":false,"hidden":false,"mode":"md"},{"id":2800,"value":"```js\nmultiplier_program = ${multiplier_program}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2841,"value":"In JavaScript, we can use this function by giving the required input parameter `n` in parenthesis:","pinned":false,"hidden":false,"mode":"md"},{"id":2796,"value":"multiplier_program(20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2845,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2846,"value":"Since functions are repeatable, we can do more than just run the function once. For example:","pinned":false,"hidden":false,"mode":"md"},{"id":2860,"value":"multiplier_program(1) * multiplier_program(2) * multiplier_program(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2865,"value":"Writing `multiplier_program(20)` is not much different than just writing `200`. But if the function was more complex, we would save a lot of _code duplication_.\n\nWe can also make a function with variables and loops. Let’s program the following logic:\n\n> _Return `n` to the power of `n`._","pinned":false,"hidden":false,"mode":"md"},{"id":2871,"value":"function power(n) {\n var p = 1\n\n for (let i = 0; i < n; i++) {\n p = p * n\n }\n\n return p\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7864,"value":"power(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2887,"value":"Most languages already include elementary math functions like this, but you can see how this function could be useful if it did not exist already.","pinned":false,"hidden":false,"mode":"md"},{"id":2906,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2920,"value":"### Function output as input","pinned":false,"hidden":false,"mode":"md"},{"id":2908,"value":"You can also pass output from one function as input to another function:","pinned":false,"hidden":false,"mode":"md"},{"id":8234,"value":"power(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8236,"value":"power(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2895,"value":"power(power(2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":6806,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6807,"value":"## That’s it!","pinned":false,"hidden":false,"mode":"md"},{"id":6817,"value":"If you took all of that in, you are basically a programmer already. You could also be a logician, mathematician or many other things.\n\nWe already talked a little bit about the practical applications of each concept. In chapter ${nextChapterIndex}, we will expand on this knowledge and talk about _[simple programs](${chapters[nextChapterIndex].url})_.","pinned":false,"hidden":false,"mode":"md"},{"id":8069,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6585,"value":"chapterFooter(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6601,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6602,"value":"aboutAuthor","pinned":false,"hidden":false,"mode":"ojs"},{"id":8358,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7534,"value":"current_year = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6824,"value":"nextChapterIndex = chapterIndex + 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":6583,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6587,"value":"chapterIndex = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2777,"value":"import {\n getToc,\n tocCopyButton,\n note,\n youtube,\n bookStyles,\n chapters,\n chapterTitle,\n chapterProgress,\n chapterFooter,\n aboutAuthor,\n colors,\n varLabel\n} from \"b20b90ae4c08d3fb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7174,"value":"import { row, style } from \"@jerryjappinen/snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8351,"value":"tocCopyButton(toc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8248,"value":"bookStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}