JS | JavaScript Intro

--- tags: ironhack, lecture, --- <style> .markdown-body img[src$=".png"] {background-color:transparent;} .alert-info.lecture, .alert-success.lecture, .alert-warning.lecture, .alert-danger.lecture { box-shadow:0 0 0 .5em rgba(64, 96, 85, 0.4); margin-top:20px;margin-bottom:20px; position:relative; ddisplay:none; } .alert-info.lecture:before, .alert-success.lecture:before, .alert-warning.lecture:before, .alert-danger.lecture:before { content:"👨‍🏫\A"; white-space:pre-line; display:block;margin-bottom:.5em; /*position:absolute; right:0; top:0; margin:3px;margin-right:7px;*/ } </style> ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_d5c5793015fec3be28a63c4fa3dd4d55.png) # JS | JavaScript Intro ## Learning Goals After this lesson you will be able to: - Explain what JavaScript is and a bit of its history - Explain what ES6 is and how JavaScript evolves - Understand and apply basic JavaScript syntax - Declare variables in JavaScript - Properly name variables ## What is JavaScript? :::info lecture Créé en 1995 par [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich) : ![](https://i.imgur.com/j3Yh0tp.png) en 10 jours, pour la version 2.0 beta du navigateur Netscape Navigator : ![](https://i.imgur.com/jC9F1xX.png) ::: :::info lecture A l'origine, JavaScript a été conçu comme un petit langage "glue" pour les designers et les développeurs **amateurs**. Il permettait notamment de faire un peu d'animation, valider des formulaires... etc ![](https://i.imgur.com/wJgxCTd.png =250x) A l'époque, JavaScript n'était pas considéré comme un *vrai langage* et a été **beaucoup décrié** jusque récemment (dû aux différentes implémentations des différents navigateurs). ::: :::danger lecture ![](https://i.imgur.com/u2lpLFj.png =500x) ☝️ Ne disons pas "Java" pour dire "JavaScript". **Parlons plutôt de JS** ::: According to the official **MDN** (Mozilla Developer Network) documentation, **JavaScript can be defined as a *lightweight* *interpreted* programming language with *first-class functions***. Sounds super scary, we know, but let's break it down a bit: - ***lightweight* programming language** is any programming language that is structured in such way to require very small memory usage while running. If you would like to learn more about this subject, you can start [here](https://en.wikipedia.org/wiki/Lightweight_programming_language); :::info lecture d'autant que les programmes doivent pouvoir être exécutés sur n'importe quelle machine disposant d'un navigateur web :::  - ***interpreted* programming language** is any programming language that executes the program directly translating each line of code into [machine code](https://en.wikipedia.org/wiki/Programming_paradigm#Machine_code). At this very moment this is enough to know but for deeper understanding, we suggest you start [here](https://en.wikipedia.org/wiki/Interpreted_language); :::info lecture Au contraire des langages compilés que sont le C, C++, le Java... **Q: Compiler ?** C'est convertir le code source en langage machine, ie: des instructions que le processeur va directement comprendre --- A contrario, avec un langage interprété : ![](https://i.imgur.com/JCkTK7A.png) Il n'y a pas de phase intermédiaire de compilation et nos instructions sont directement comprises et exécutées ::: - a **programming language with *first-class functions*** according to the MDN means that in this language functions are treated like any other variable and this being said, they can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. To summarize this above, we can say: :::success JavaScript is a lightweight programming language that gets converted into machine language line by line and uses functions. ::: --- It is mostly used for Web pages (runs in browsers) but at the same time there are a lot of non-browser environments where it's used, such as Node.js (which you will learn how to use later on), among the others. To simplify this: :::info JavaScript was created to run in every browser, but now you can run JavaScript in your server. This means you can **create a whole application using just the JavaScript language**! ![](https://i.imgur.com/phq1MMV.png =200x) ::: :::info lecture Grâce à nodejs, en plus d'être un langage s'exécutant côté client (nvaigateur), il peut maintenant être exécuté côté serveur ! Avec un seul et même langage, un développeur connaissant le JavaScript peut donc être **fullstack** ![](https://media.giphy.com/media/111ebonMs90YLu/giphy.gif) => intérêt sur le marché / Spécificité de la formation Ironhack ::: :::info 🤔 *Potential Interview questions* (each property clickable and will take you to external resources, feel inspired to explore): JavaScript is a [prototype-based](https://en.wikipedia.org/wiki/Prototype-based_programming), [multi-paradigm](https://en.wikipedia.org/wiki/Programming_paradigm#Support_for_multiple_paradigms), [dynamically typed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) language, supporting [object-oriented](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS), [imperative and structured](https://en.wikipedia.org/wiki/JavaScript#Imperative_and_structured), and declarative (e.g. [functional programming](https://en.wikipedia.org/wiki/JavaScript#Functional)) styles. ::: JavaScript was created in 1995 and as you might know, doesn't have anything with Java - the original name of JavaScript was *LiveScript*. Since 1995 up to this date, JavaScript went through a lot of updates and changes. #### ECMAScript Since the language evolved a lot, there had to be some kind of *standard* to make everything that was using JavaScript still running with all these updates. This is where [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) comes in the play. :::success *ECMAScript* is the standard and JavaScript is its most popular implementation. ::: The versions of ECMAScript (shorter *ES*) that are still in use are **ES5** (from 2009.), **ES6** (from 2015.), **ES7** (2016.). In this curriculum, you will use mostly **ES6** and later JavaScript features. :::info This intro was very excessive but it's needed to start thinking about these terms from the very beginning. However, fully understanding of it will come as you progress through the course so don't stress, everything is under control ✅. ::: Okay, it was enough of theory, let's move to the real JavaScript and start writing some code. :::info lecture Pour résumer, ECMAScript est un la norme ![](https://i.imgur.com/j556VZM.png =x25) du JS et s'assure que les pages web écrites il y a 20 ans continuent de fonctionner ![](https://i.imgur.com/TYAYMz6.png) ::: --- :::success lecture <span style="font-size:200%;">C'est parti, écrivons du JS !</span><br><span style="font-size:400%;">⌨️</span> ::: --- ## Basic JavaScript Syntax :::info lecture Un programme est un document texte, qui va contenir les instructions à exécuter par la machine. ```javascript= Instruction1 Instruction2 ... ``` ::: The **syntax** of a programming language is the **set of rules** that needs to be respected by programmers (who write the code) to be successfully interpreted by machines (that execute that code). JavaScript syntax is loosely based on the Java syntax. This means quite a few **curly braces** ```{``` and **parentheses** ```()```. :::info The semicolon is not mandatory in 99.5% of cases. Parentheses and curly braces ***are mandatory*** and will cause an error if they're left out. Be mindful of starting/ending these in the right place. ::: :::info lecture le `;` va nous permettre d'écrire **plusieurs instructions sur une même ligne** : ```= Instruction1; Instruction2 ``` Il n'est donc pas obligatoire si une ligne ne contient qu'une seule instruction. --- 👉 En revanche, à des fins didactiques, nous l'utiliserons à chaque fin d'instructions pour bien montrer que nous savons que l'instruction est terminée. ::: #### Output :::info lecture Nous allons ici utiliser [![](https://i.imgur.com/lysE775.png =x25)]() : ![](https://i.imgur.com/ASUYwyc.jpg =x400) sandbox Utilités : - tester rapidement (sans créer manuellement une page) - partager du code avec d'autres - se faire connaitre (réseau social) : cf. ::: We will use a function called ```console.log()``` to create an output. You will get used to writing a lot of *console.log()* and it will become you veeeerrryyyy good friend over the time. :::success lecture `console.log` est la première instruction du langage que nous allons utiliser. Son action est d'afficher un message dans un endroit appeler la console de la page. ![](https://i.imgur.com/hpDtrjs.png =200x) your new best friend ::: Today we will practice in `codepen`, a site for writing simple JavaScript. <iframe height='265' scrolling='no' src='//codepen.io/ironhack/embed/NRpbqX/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/ironhack/pen/NRpbqX/'>JavaScript - console.log</a> by Ironhack (<a href='http://codepen.io/ironhack'>@ironhack</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe> :::warning :zap: Click the **edit on codepen** link to play with the code on the website ::: :::warning lecture **Rien ne se passe ?** A: La console, présente dans chaque page web est cachée par défaut. ::: #### Comments :::info lecture L'importance des commentaires ... ::: Writing comments in your code is extremely important for multiple purposes: - it will help you while learning (now), and to be able to quickly continue where you stopped after a longer break (later, at work) - it will help you to easily skim through the code when trying to find something - sometimes we just want to comment out a piece of code we don't need at the moment :::info lecture Commentaires de fin de ligne ::: To comment out something that fits in one line, we use `//`: ```javascript // a short, one-line comment ``` If the comment is on more than one line, then we need to use `/* */`: :::info lecture Commentaires multi-lignes ::: ```javascript /* this is a long, multi-line comment Hopefully one day I'll appreciate writing all these comments :) */ ``` Now, let's start! ## Variables ### What is a variable? :::info lecture L'interpréteur JS est comme un poisson rouge 🐟 : ```jsx= Instruction1; Instruction2; // 🐟 j'ai déjà oublié ce que j'ai fait ligne 1 ``` --- La seule façon de faire persister une information va donc être de disposer d'une mémoire où ranger des informations. <span style="font-size:300%">🧠</span> Chaque variable sera **une case-mémoire**. <span style="font-size:300%">🏷</span> Il sera de notre responsabilité de donner un nom aux cases-mémoire que l'on créera, afin de pouvoir nous en reservir. ::: The main purpose of variables is to store some information. We can think of them as of some kind of containers or storages that hold some data, which is going to or can be used at any or just at some points in our program. Very important thing is that these storages are **named**, or you can often hear **labeled**. :::info Variables can be seen as named (labeled) storages that hold some **values**. The purpose behind naming them is actually to be able to **reference** them later on. ::: For us will be very interesting to talk about *different kinds of values* that can be stored in variables, and these are known as **datatypes in JavaScript**: a string, a number, an array, an object, etc. ### Declaring a variable in JavaScript :::success Before you can use a variable in a JavaScript, you have to **declare** it. The declaration of a variable doesn't mean that some value is assigned to it; it simply means "saving a spot in a memory" that will be later on filled with some value. ::: :::info lecture Afin de disposer d'une case-mémoire, nous devons au préalable la créer en lui donnant son nom : ```jsx var premier_message; ``` Cette étape préalable s'appelle **la déclaration d'une variable**. ::: :::warning lecture ☝️ Ce n'est qu'une fois déclarée qu'une variable existe ! 🛑 Si vous oubliez de déclarer une variable avant de vous en servir, le programme émettra une erreur. ::: In order to **declare or define** a variable we can use keyword **`let`** or **`const`** and in older versions of JavaScript, you would find keyword **var** which is used to declare variables. `var` is still very much present and it's super important to understand *similarities and differences between `let` and `var`* and we will go over this a bit later. For now, just keep in mind that you could **in most cases use either `let` or `var` to declare the same variable**. #### Variable declaration with `let` :::info lecture Nous disposerons de 3 moit-clés pour déclarer des variables : `var`, `let` et `const` 👉 Nous verrons plus tard leurs différences... ::: For now, let's start declaring variables using the keyword `let`: ```javascript let name; // <== this is a variable declaration ``` We can declare multiple variables with the same `let` keyword: ```javascript let name, age, email; ``` :::info lecture On peut déclarer plusieurs variables dans une même instruction : ```jsx= let message1, message2; ``` ::: --- :::info lecture Maintenant que notre case-mémoire est créée, nous pouvons y **ranger une valeur à l'intérieur** : c'est l'assignation d'une variable. On utiliser pour ce faire, l'opérateur d'assignation `=` : ```js= let message; message = "Bienvenus chez Ironhack !" ``` - ligne 1 : déclaration de la variable nommée `message` - ligne 3 : assignation de la variable à la valeur texte `"Bienvenus chez Ironhack !"` --- <span style="font-size:300%">💡🐟</span> ```jsx= var message; // déclaration message = "hey"; // assignation console.log(message) // utilisation : 💡🐟 ah ca y est je me souviens! ! ``` cf. https://slides.com/abernier/ifocop298#/0/21 ::: :::success After we declared variable, the next step is to store some value in it. This process is called **variable initialization**. *You can do variable initialization at the time of variable creation (when you declare it) or at a later point*. ::: For instance, you might create a variable `student` and assign the value `"Josh"` to it later. :+1: To put some data into the variable we use the **assignment operator** `=`. ```javascript let student; student = Josh; ``` You can also assign a value at the time of declaration. ```javascript let age = 25; ``` :::info If you don't assign a value to a variable when you declare it, its default value will be initialized to `undefined`. :::   #### Naming a variable :::info lecture Les noms de variables **ne peuvent PAS** : - ⛔️ commencer par un chiffre : `1er_message` - ⛔️ contenir un trait-d'union : `premier-message` (sinon il pourrait croire à une soustraction) - ⛔️ être un mot réservé par le langage : `var` par ex ::: Rules for naming variables are easy: :::warning 1. Names can contain letters (uppercase and lowercase), numbers and the symbols `_` and `$`. 2. The first character of the name can't be a number. ::: JavaScript allows a [large variety](http://mathiasbynens.be/notes/javascript-identifiers) of characters as variable names, so if you need to use `ñ`, `ö` or even `π`, you can. Make sure your editor saves files with [**UTF-8**](https://en.wikipedia.org/wiki/UTF-8) encoding. All these examples are valid variable names: ```javascript= let a; // the name is a, with var you are only introducing a variable. let color; let _private; let $button; let getTop10; let a_large_name; let thisWayIsCalledCamelCase; let π; ``` :::info :heavy_check_mark: When creating a variable with more than one word, we use the "camelCase" style. ::: Words or abbreviations in the middle of the phrase begin with a capital letter. The purpose of this practice is to enhance readability. ::: warning :warning: JavaScript is **case sensitive** so capital letters do make a difference. For example, `color` and `Color` are different variable names. :warning: Although we said you can use any English or non-English word, still there's a bit constraint: there are some **reserved** keywords that **can't be used**, for example: `let`, `class`, `return`, and `function` are reserved. ```javascript let let = "hello"; // <== error, you can't name variable "let" ``` You can find the full list of **reserved keywords** [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords). ::: #### Changing values :::info lecture Il est possible de **changer** la valeur d'une variable autant de fois que l'on veut : ```jsx let message; message = "Bienvenue à tous !"; // 1ère valeur console.log(message); message = "Vous allez bien ?"; // 2e valeur console.log(message); ``` ::: Variables declared using the keyword `let` can be manipulated and their values can be changed throughout the code: ```javascript let favoriteFood; favoriteFood = "Steak"; console.log(favoriteFood); favoriteFood = "Pizza"; console.log(favoriteFood); // console: // Steak // Pizza <== as we can see, the variable changed value from 'Steak' to 'Pizza' ``` In this case, we are just changing the value of the variable but **we can also change its type**. #### Type Conversion :::info lecture Il existe différents types de valeur : - du texte : délimité par des quotes `"je suis du texte"` - des nombres : `2`, `24`, `-9.6` - et d'autres que nous verrons plus tard... ::: 🔖Sidenote: Basic data types in JavaScript, that you are familiar with, are: *string*, *number*, *object*, *array*. In the next lesson we will dig a bit deeper into data types, but for now, just keep these in mind for the following paragraph. :::info lecture Une variable peut contenir n'importe quel type de variable. On peut également la changer par une valeur d'un autre type : ```jsx message = "Bonjour" message = 3; ``` ::: :::danger You can reassign values and change the data type of variables in JavaScript. ::: As we already mentioned, JavaScript is a **dynamically typed language** and that means **new variables are created at runtime**, and the **type of variables is determined at runtime**. The type will get determined automatically while the program is being processed and you can have the same variable at one point as one type and at some other point as some other type. ```javascript let favoriteFood; favoriteFood = "Steak"; console.log("Value: ",favoriteFood," Type: ", typeof favoriteFood); favoriteFood = 20; console.log("Value: ",favoriteFood," Type: ", typeof favoriteFood); // console: // Value: Steak Type: string // Value: 20 Type: number ``` 🔖 Sidenote: `typeof` is JavaScript operator that **returns the type of the variable** we passed to it. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof). As you can see, the type is changed and this is not necessarily a good thing all the time. If you are not careful, this might be a huge headache. :::warning :exclamation: Don't just try anywhere to change the value of your variables, because there are some other things we have to understand in order to know when and how we can do this. **By changing the value, we can change the type of variable**. ::: :::info lecture On peut également en même temps que l'on crée la variable lui assigner sa valeur : ```js let message = "Hello"; ``` NB : lorsque l'on n'assigne pas de valeur à la déclaration de variable, elle en possède en réalité une par défaut qui est `undefined` : ```jsx var nom; // création de la case-mémoire `nom` (sans assignation de valeur) console.log(nom) // undefined ``` ::: In order to help yourself and others who work or will work on the same code, try to use `const` whenever there is a chance to do so. #### Variable declaration with `const` :::info lecture En plus de `var` et `let`, nous disposons de `const`. On utilise `const` pour créer des variables dont **la valeur n'est pas sensée changer**. ```jsx const G = 9.81; G = 10; // 🛑 erreur : G ne peut pas changer de valeur ``` En conséquence, on ne peut pas déclarer une variable `const` en 2 temps, puisque l'interpréteur croirait à un changement de valeur : ```jsx const c; // undefined par défaut c = 299792458; // 🛑 erreur : c ne peut pas changer de valeur ``` On doit donc le faire en une seule instrcution : ```jsx const c = 299792458; // 👌 ok ``` ::: :::success **const** is used when declaring a variable which value will be constant. ::: These variables are called **constants** and if we try to change its values we will get the error back: ```javascript const name = "Ana"; name = "Marina"; // console: // unknown: "name" is read-only ``` When you are sure a variable will never change, you should declare it with *const* to guarantee and clearly communicate that fact to everyone. Unlike being able to declare variables and later to assign the value to them using `let` keyword, when using `const` the variable needs to be assigned some value in the same moment when the variable is initialized. This comes natural when you know that variables declared with const can't be changed later. (take this conditionally for now, later you'll see that in some sense they can be changed but they can't be reassigned.) ```javascript let name; // <== we can do this const price; // <== error 🚨 ``` These are basics about variables and we will keep building this knowledge through the next units. :+1: To summarize, for now, you can use `let` or `var` interchangeably when you expect that the variable will change its value. However, use `const` when you're sure it will remain unchanged. ### 🥁Important naming rules 🥁 :::info lecture De l'importance du nommage des variables : ```jsx var __ = "Bonjour"; // je suis trop créatif var $_$ = 34; // lol, on dirait un smiley console.log(__, $_$); // En fait, on va vite plus rien comprendre... ``` ::: Believe it or not, **naming variables is one of the hardest and most serious things in programming**. It might seem a bit silly, but badly named variables can jeopardize the success and development of your project. Any senior will confirm that just by taking a look at someone's variable names, they already know if they are dealing with someone experienced or with a beginner. Not all the time you will have a "luck" to start a project from a scratch, but instead you'll be working with someone else's code and you will see that their naming rules impact your speed and code quality a great deal. :100: You should always think about the next person who will work on your project (or even have to take a look at it), and make sure they don't have to ask you what and why is named the way you named it. The rules to keep in mind when naming a variable: - machines process these variables, but humans have to read them and understand them so always use **human-understandable** expressions, like `firstName`, `hasColor`, `pricePreTax`, etc. - never, ever, ever use `x`, `j`, `a` to name your variables unless it super clear to you and everyone else what is going on in the code - **name variables as descriptive and as concise as possible** (examples of good naming: *userName*, *creditCardNo*, and examples of bad names: `info`, `value`, etc. which say nothing and mean nothing from someone who was not included in coding process from the very beginning) - if you're working in a team, and in most cases you will be, this needs to be discussed amongst everybody - terms for naming variables need to be the same for everyone. :::info lecture <span style="font-size:300%">🤯</span> Pas d'overthinking non plus :) Keep it straight and simple. ::: ## Summary In this introductory lesson, you've had a chance to get familiar with JavaScript as language, to learn a bit about its history and evolution and all the paradigms that JavaScript is part of. You also learned how to declare a variable and got familiar with `let`, `const` and `var` and learn how to differentiate them on a most basic level. You also learned that JavaScript is dynamically typed language and that it's possible to change values and types of variables in the runtime (as you code). And finally, you got familiar with the most important naming rules. ## Extra Resources - [JavaScript](https://en.wikipedia.org/wiki/JavaScript) - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) This will be your main resource for any JavaScript search. It has tutorials, guides and tools. This is the most thorough JavaScript Documentation. - [Understanding Javascript Variables](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables)