Escriu per cercar…

Computació

El propòsit inicial dels ordinadors era computar nombres.

Introducció

Instal.la Bun

ps
irm bun.sh/install.ps1 | iex

REPL

Executa l’ordre bun repl per iniciar una sessió REPL:

ps
bun repl
Welcome to Bun v1.2.21
Type ".help" for more information.
>

Tots els llenguatges de programació fan servir números, i pots fer operacions aritmètiques amb aquests números.

Escriu l’ordre 3 + 7 i prem la tecla Enter:

ps
> 3 + 7
10

Pots veure que bun avalua l’expressió 3 + 7 i torna el resultat d’avaluar aquesta expressió.

Amb typescript pots efectuar les operacions aritmètiques habituals.

Pots restar dos nombres:

ps
> 20 - 15
5

Pots multiplicar dos nombres:

ps
> 3 * 7
21

Pots dividir dos nombres:

ps
> 10 / 5
2

Pots obtenir el residu (o mòdul) d’una divisió:

ps
> 8 % 3 
2 

Pots elevar un nombre a una potència:

ps
> 5 ** 2 
25

Pots construir qualsevol expressió complexa per obtenir un resultat:

ps
> (5 + 20 ) / 3
8.333333333333334

Prem les tecles + per finalitzar la sessió.

Entorn de treball

WebStorm té suport integrat per a Bun: Bun

Crea un project nou amb WebStorm:

Modifica l’script index.ts i executa l’script:

ts
console.log("Hello World!")

Obre un terminal i executa l’script:

Sentències

Les sentències són construccions sintàctiques i ordres que realitzen accions.

Podem tenir tantes sentències al nostre codi com vulguem, les quals es poden separar amb un punt i coma.

Per exemple, aquí separem “Hello World” en dos logs:

ts
console.log("Hello"); console.log("World");

Generalment, les sentències s’escriuen en línies separades per fer que el codi sigui més llegible:

ts
console.log("Hello");
console.log("World");

Punt i coma

Es pot ometre un punt i coma en la majoria dels casos quan existeix un salt de línia.

Això també funciona:

ts
console.log("Hello")
console.log("World")

Aquí, TypeScript interpreta el salt de línia com un punt i coma “implícit”. Això s’anomena inserció automàtica de punt i coma.

En la majoria dels casos, una nova línia implica un punt i coma. Però “en la majoria dels casos” no significa “sempre”!

Hi ha casos en què una nova línia no significa un punt i coma. Per exemple:

ts
console.log(3 +
    1
    + 2)

El codi dona com a resultat 6 perquè TypeScript no insereix punt i coma aquí. És intuïtivament obvi que si la línia acaba amb un signe més +, és una “expressió incompleta”, un punt i coma aquí seria incorrecte. I en aquest cas això funciona segons el previst.

Però hi ha situacions en les quals TypeScript “falla” en assumir un punt i coma on realment es necessita.

Els errors que ocorren en aquests casos són força difícils de trobar i corregir.

Comentaris

A mesura que passa el temps, els programes es tornen cada cop més complexos. Es fa necessari afegir comentaris que descriguin què fa el codi i per què.

Els comentaris es poden posar a qualsevol lloc d’un script. No afecten la seva execució perquè el motor simplement els ignora.

Els comentaris d’una línia comencen amb dues barres inclinades //.

La resta de la línia és un comentari. Pot ocupar una línia sencera o anar després d’una sentència.

Com aquí:

ts
// Aquest comentari ocupa una línia sencera.
console.log("Hello")

console.log("World") // Aquest comentari va després de la sentència.

Els comentaris de diverses línies comencen amb una barra inclinada i un asterisc /* i acaben amb un asterisc i una barra inclinada */.

Com aquí:

ts
/* Un exemple amb dos missatges.
Això és un comentari multilínia.
*/
console.log("Hello")
console.log("World")

El contingut dels comentaris s’ignora, així que si posem codi dins de /* … */, no s’executarà.

De vegades pot ser útil desactivar temporalment una part del codi:

ts
/* Comentant el codi
console.log("Hello")
*/
console.log("World")

Variables

Una variable és un “magatzem amb un nom” per desar dades.

Per crear una variable en TypeScript, s’utilitza la paraula clau let.

La declaració següent defineix una variable amb el nom message de tipus string:

ts
let message: string

Ara hi podem introduir dades, fent servir l’operador d’assignació =:

ts
let message: string
message = "Hello!" // desa el string 'Hello' a la variable message

Ara el string està desat a l’àrea de la memòria associada amb la variable.

Hi podem accedir utilitzant el nom de la variable:

ts
let message: string
message = "Hello!"

console.log(message) // mostra el contingut de la variable

Per ser concisos, podem combinar la declaració de la variable i la seva assignació en una sola línia:

ts
let message = "Hello!" // defineix la variable i li assigna un valor
console.log(message); // Hello!

És un error assignar un number a la variable message de tipus string:

ts
let message = "hello"
message = 3

També podem declarar múltiples variables en una sola línia:

ts
let user = "John", age = 25, message = "Hola";

Una analogia de la vida real

Podem entendre fàcilment el concepte de “variable” si ens la imaginem com una “caixa” amb una etiqueta de nom únic enganxada.

Per exemple, la variable message es pot imaginar com una caixa etiquetada “message” amb el valor “Hello!” a dins:

Podem posar qualsevol valor a la caixa.

També la podem canviar tantes vegades com vulguem:

ts
let message: string

message = "Hello!"

message = 'World!'; // valor alterat

console.log(message);

Quan el valor s’ha alterat, les dades antigues s’eliminen de la variable:

També podem declarar dues variables i copiar dades d’una a l’altra.

ts
let hello = "Hello world!"

let message: string

// copia 'Hello world' de hello a message
message = hello

// Ara, totes dues variables contenen les mateixes dades
console.log(hello) // Hello World!
console.logt(message) // Hello World!
Declarar dues vegades provoca un error

Una variable només s’ha de declarar una vegada.

Una declaració repetida de la mateixa variable és un error:

ts
let message = "This";

// repetir 'let' porta a un error
let message = "That"; // SyntaxError: 'message' ja s'ha declarat

Hem de declarar una variable una sola vegada i, a partir d’aleshores, referir-nos-hi sense let.

Nomenclatura de variables

Hi ha dues limitacions en els noms de variable en TypeScript:

  1. El nom només pot incloure lletres, dígits o els símbols $ i _.
  2. El primer caràcter no pot ser un dígit.

Exemples de noms vàlids:

ts
let userName: string
let test123: string

Quan el nom conté diverses paraules, se sol fer servir l’estil camelCase, on les paraules van enganxades una darrere l’altra, amb cada inicial en majúscula: elMeuNomMoltLlarg.

És interessant notar que el símbol del dòlar $ i el guió baix _ també es fan servir en els noms. Són símbols habituals, igual que les lletres, sense cap significat especial.

Els noms següents són vàlids:

ts
let $ = 1 // Declara una variable amb el nom "$"
let _ = 2 // i ara una variable amb el nom "_"

console.log($ + _); // 3

Exemples de noms incorrectes:

ts
let 1a: string // no pot començar amb un dígit

let my-name: string // els guions '-' no estan permesos en els noms
Les majúscules i minúscules importen

Dues variables amb els noms poma i POMA són variables diferents.

Les lletres que no són de l'alfabet anglès estan permeses, però no es recomanen

És possible utilitzar lletres de qualsevol alfabet, incloent-hi lletres del ciríl·lic, logogrames xinesos, etc.:

ts
let имя = "..."
let  = "..."

Tècnicament, aquí no hi ha cap error. Aquests noms estan permesos, però internacionalment hi ha la convenció d’utilitzar l’anglès per als noms de les variables. Encara que estiguem escrivint un script petit, pot tenir una llarga vida per endavant. Gent d’altres països pot necessitar llegir-lo en algun moment.

Noms reservats

Hi ha una llista de paraules reservades que no es poden fer servir com a nom de variable perquè el llenguatge mateix les utilitza.

Per exemple: let, class, return i function estan reservades.

El codi següent ens dona un error de sintaxi:

ts
let let = 5 // no es pot anomenar "let" una variable. Error!
let return = 5 // tampoc es pot anomenar "return". Error!

Constants

Per declarar una variable constant (immutable) utilitza const en lloc de let:

ts
const myBirthday = "18.04.1982"

Les variables declarades amb const s’anomenen “constants”. No es poden alterar. Intentar-ho provocaria un error:

ts
const myBirthday = "18.04.1982"

myBirthday = '01.01.2001' // error, no es pot reassignar la constant!

Quan un programador està segur que una variable no canviarà mai, la pot declarar amb const per garantir-ho i comunicar-ho clarament als altres.

Constants en majúscules

Hi ha una pràctica molt estesa d’utilitzar constants com a àlies de valors difícils de recordar i que es coneixen abans de l’execució.

Aquestes constants s’anomenen amb lletres majúscules i guions baixos.

Per exemple, creem constants per als colors en format “web” (hexadecimal):

ts
const COLOR_RED = "#F00"
const COLOR_GREEN = "#0F0"
const COLOR_BLUE = "#00F"
const COLOR_ORANGE = "#FF7F00"

// ...quan hem de triar un color
let color = COLOR_ORANGE
console.log(color) // #FF7F00

Avantatges:

  • COLOR_ORANGE és molt més fàcil de recordar que "#FF7F00".
  • És molt més fàcil escriure malament "#FF7F00" que COLOR_ORANGE.
  • En llegir el codi, COLOR_ORANGE té molt més significat que "#FF7F00".

Quan cal utilitzar lletres majúscules per a una constant i quan cal anomenar-la de manera normal? Deixem-ho clar.

Ser una “constant” només significa que el valor de la variable no canvia mai. Però hi ha constants que es coneixen abans de l’execució (com el valor hexadecimal del color vermell) i n’hi ha que es calculen en temps d’execució, però no canvien després de la seva assignació inicial.

Per exemple:

ts
const pageLoadTime: number = /* el temps que ha trigat a carregar la pàgina web */;

El valor de pageLoadTime no està preestablert. Com que no es coneix abans de carregar la pàgina, l’anomenem de manera normal. Però la podem declarar com a constant, perquè després de la seva assignació inicial no canviarà.

En altres paraules, les constants en majúscules només s’utilitzen com a àlies de valors invariables i preestablerts.

Anomenar les coses correctament

Ja que parlem de variables, hi ha una cosa de molta importància.

Una variable ha de tenir un nom clar, de significat evident, que descrigui la dada que desa.

Anomenar variables és una de les habilitats més importants i complexes de la programació. Un cop d’ull ràpid als noms de les variables ens revela quin codi ha escrit un principiant i quin un desenvolupador experimentat.

En un projecte real, es passa molt més temps modificant i ampliant una base de codi existent que no pas escrivint una cosa nova des de zero. Quan tornem al nostre codi al cap d’un temps, és molt més fàcil trobar la informació que està ben etiquetada. O, dit d’una altra manera, quan les variables tenen els noms adequats.

Dedica temps a pensar un nom correcte per a una variable abans de declarar-la. Fer-ho et sortirà molt a compte.

Algunes regles bones a seguir:

  • Fes servir termes llegibles per a humans com userName o shoppingCart.
  • Evita abreviacions o noms curts com a, b, c, tret que realment sàpigues què fas.
  • Crea noms que descriguin al màxim què són i que siguin concisos. Exemples de noms dolents són data i value. Aquests noms no ens diuen res; només són adequats en el context d’un codi que deixi excepcionalment obvi a quina dada o valor fa referència la variable.
  • Posa’t d’acord amb el teu equip, i amb tu mateix, sobre quins termes fareu servir. Si un visitant s’anomena “user”, hem d’anomenar les variables relacionades currentUser o newUser en lloc de currentVisitor o newManInTown.

Sona senzill? De fet ho és, però no és tan fàcil crear noms de variable descriptius i concisos a l’hora de la veritat. Prova-ho.

Reutilitzar o crear?

Una última nota. Hi ha programadors gandols que, en lloc de declarar una variable nova, tendeixen a reutilitzar les existents.

El resultat d’això és que les seves variables són com caixes on la gent posa coses diferents sense canviar-ne les etiquetes. Què hi ha dins de la caixa? Qui ho sap? Ens hi hem d’acostar a mirar-ho.

Aquests programadors s’estalvien una mica en la declaració de la variable, però perden deu vegades més a l’hora de depurar.

Una variable de més és una cosa bona, no una cosa diabòlica.

Els navegadors moderns i els minificadors de TypeScript optimitzen el codi, així que això no impacta en el rendiment. Utilitzar variables diferents per a valors diferents fins i tot pot ajudar a optimitzar el teu codi.

Tipus de dades

Un valor en TypeScript sempre pertany a un tipus de dada determinat. Per exemple, un string o un número.

Totes les variables tenen un tipus que pots declarar de manera explícita.

Number

El tipus number representa tant nombres enters com de coma flotant.

En aquest codi Typescript determina que la variable n ha de ser de tipus number

ts
let n = 123
n = 12.345

Si intentes assignar un string a n tens un error perquè el tipus implícit és number:

ts
let n = 123
n = "hola"

Si declares el tipus de manera explícita, el que dius va a misa:

ts
let n: number = "Hola"

Hi ha moltes operacions per a números. Per exemple, multiplicació *, divisió /, suma +, resta -, etcètera.

A més dels números habituals, existeixen els anomenats “valors numèrics especials”, que també pertanyen a aquest tipus de dades: Infinity, -Infinity i NaN.

Infinity representa l’infinit matemàtic ∞. És un valor especial que és més gran que qualsevol número.

El podem obtenir com a resultat de la divisió per zero:

ts
console.log( 1 / 0 ); // Infinity

O simplement fer-hi referència directament:

ts
console.log( Infinity ); // Infinity

NaN representa un error de càlcul. És el resultat d’una operació matemàtica incorrecta o indefinida, per exemple:

ts
console.log( "no és un número" / 2 ); // NaN, aquesta divisió és errònia

NaN és “enganxós”. Qualsevol altra operació sobre NaN retorna NaN:

ts
console.log NaN + 1 ); // NaN
console.log 3 * NaN ); // NaN
console.log "not a number" / 2 - 1 ); // NaN

Per tant, si hi ha un NaN en alguna part d’una expressió matemàtica, es propaga a tot el resultat (amb una única excepció: NaN ** 0 és 1).

Les operacions matemàtiques són segures

Fer matemàtiques és “segur” en JavaScript. Podem fer qualsevol cosa: dividir per zero, tractar les cadenes no numèriques com a números, etc.

L’script no s’aturarà mai amb un error fatal (i “morir”). En el pitjor dels casos, obtindrem NaN com a resultat.

Els valors numèrics especials pertanyen formalment al tipus “número”. Evidentment, no són números en el sentit estricte de la paraula.

BigInt

BigInt representa enters de longitud arbitrària.

En TypeScript, el tipus `number` no pot representar de manera segura valors enters més grans que <span className="font-mono">(253</sup>-1)</span> (això és `9007199254740991`), ni més petits que <span className="font-mono">-(2<sup>53</sup>-1)</span> per als negatius.

Per ser realment precisos, el tipus de dada `number` pot desar enters molt grans (fins a <span className="font-mono">1.7976931348623157 * 10<sup>308</sup></span>), però fora del rang d'enters segurs <span className="font-mono">±(2<sup>53<sup>-1)</span> hi haurà un error de precisió, perquè no tots els dígits caben al magatzem fix de 64 bits. Així que és possible que es desi un valor “aproximat”.

Per exemple, aquests dos números (just per sobre del rang segur) són iguals:

ts
console.log(9007199254740991 + 1) // 9007199254740992
console.log(9007199254740991 + 2) // 9007199254740992
Podem dir que cap enter senar més gran que <code>(2<sup>53</sup>-1)</code> es pot desar en el tipus de dada `number`.

Per a la majoria de propòsits, el rang <code>±(2<sup>53<sup>-1)</code> és suficient, però de vegades necessitem números realment grans; per exemple, per a criptografia o marques de temps amb precisió de microsegons.

Un valor BigInt es crea afegint n al final d’un enter:

ts
// la "n" al final significa que és un BigInt
const big = 1234567890123456789012345678901234567890n
console.log(big + 1n) //1234567890123456789012345678901234567891n

String

Un string en JavaScript és una cadena de caràcters i s’ha de posar entre cometes.

ts
let str = "Hola"
let str2 = 'Les cometes simples també van bé'
let phrase = `es pot incrustar un altre ${str}`

En JavaScript hi ha 3 tipus de cometes.

  1. Cometes dobles: "Hola".
  2. Cometes simples: 'Hola'.
  3. Backticks (cometes invertides): `Hola`.

Les cometes dobles i les simples són cometes “senzilles” (és a dir, funcionen igual). No hi ha cap diferència entre elles en TypeScript.

Els backticks són cometes de “funcionalitat estesa”. Ens permeten incrustar variables i expressions dins d’un string tancant-les entre ${...}, per exemple:

ts
let name = "John";

// incrustar una variable
console.log `Hola, ${name}!` ) // Hola, John!

// incrustar una expressió
console.log `el resultat és ${1 + 2}` ) //el resultat és 3

L’expressió dins de ${...} s’avalua i el resultat passa a formar part del string. Hi podem posar qualsevol cosa: una variable com name, una expressió aritmètica com 1 + 2, o alguna cosa més complexa.

Tingues en compte que això només es pot fer amb els backticks. Les altres cometes no tenen aquesta capacitat d’incrustació!

ts
console.log("el resultat és ${1 + 2}" ) // el resultat és ${1 + 2} (les cometes dobles no fan res)

Quina és la sortida de l’script?

ts
let name = "Ilya";

console.log( `Hola ${1}` ) // ?

console.log( `Hola ${"name"}` ) // ?

console.log( `Hola ${name}` ) // ?
Show solution
ps
Hola 1
Hola name
Hola Ilya

El valor “null” (nul)

El valor especial null no pertany a cap dels tipus descrits anteriorment.

Forma un tipus propi separat que només conté el valor null:

ts
let age = null

null és només un valor especial que representa “res”, “buit” o “valor desconegut”.

El codi anterior indica que el valor d’age és desconegut o està buit per alguna raó.

El valor “undefined” (indefinit)

El valor especial undefined també es distingeix. Forma un tipus propi, igual que null.

El significat d’undefined és “valor no assignat”.

Si una variable es declara, però no s’assigna, aleshores el seu valor és undefined:

ts
let age;

console.log(age) // mostra "undefined"

Tècnicament, és possible assignar undefined a qualsevol variable:

ts
let age = 100;

// canviant el valor a undefined
age = undefined;

console.log(age); // "undefined"

…Però no et recomanem fer-ho. Normalment, fem servir null per assignar un valor “buit” o “desconegut” a una variable, mentre que undefined és un valor inicial reservat per a coses que no s’han assignat.

any

TypeScript també té un tipus especial, any, que pots fer servir sempre que no vulguis que un valor concret provoqui errors de comprovació de tipus.

Quan un valor és de tipus any, hi pots accedir a qualsevol de les seves propietats (que al seu torn seran de tipus any), el pots cridar com una funció, l’hi pots assignar (o assignar-lo a) un valor de qualsevol tipus, o gairebé qualsevol altra cosa que sigui sintàcticament legal:

ts
let x: any = 1;
x = "Hello World";
x = true;

El tipus any és útil quan no vols escriure un tipus llarg només per convèncer TypeScript que una línia de codi concreta és correcta.

Unió de tipus

TODO

prompt

Mostra un missatge de text, un camp d’entrada per al visitant i els botons OK/CANCEL·LAR.

ts
let result = prompt(title, [default]);

La funció prompt accepta dos arguments:

  • title El text a mostrar a l’usuari.
  • default Un segon paràmetre opcional, és el valor inicial del camp d’entrada.

L’usuari pot escriure alguna cosa al camp d’entrada i prémer OK; així obtenim aquest text a result.

Per exemple:

ts
let age = prompt("How old are you?", 33);
console.log(`You are ${age} years old.`);

Activitat

Escriu un codi que pregunti el nom a l’usuari i el saludi per pantalla:

Show solution
ts
let name = prompt("What is your name?");
console.log(`Hello ${name}`);

Conversions de tipus

La majoria de les vegades, els operadors i les funcions converteixen automàticament els valors que se’ls passen al tipus correcte. Això s’anomena “conversió de tipus”.

Per exemple, alert converteix automàticament qualsevol valor a string per mostrar-lo. Les operacions matemàtiques converteixen els valors a números.

També hi ha casos en què necessitem convertir de manera explícita un valor al tipus esperat. Encara no hem parlat d’objectes

ToString

La conversió a string passa quan necessitem la representació en forma de text d’un valor.

Per exemple, alert(value) ho fa per mostrar el valor com a text.

També podem cridar la funció String(value) per convertir un valor a string:

ts
let value = true;
console.log(typeof value) // boolean

let strValue = String(value) // ara value és el string "true"
console.log(typeof strValue) // string

La conversió a string és bastant òbvia. El boolean false es converteix en "false", null en "null", etc.

ToNumber

Podem fer servir la funció Number(value) per convertir un valor a un número:

ts
let str = "123"
console.log(typeof str) // string

let num = Number(str) // es converteix en 123
console.log(typeof num) // number

Si el string no és un número vàlid, el resultat de la conversió serà NaN.

Per exemple:

ts
let age = Number("un text arbitrari en lloc d'un número")
console.log(age) // NaN, conversió fallida

Regles de conversió numèrica:

ValorEs converteix en…
undefinedNaN
null0
true i false1 i 0
stringS’eliminen els espais (inclou espais, tabuladors \t, salts de línia \n, etc.) al principi i al final del text. Si el string resultant és buit, el resultat és 0; en cas contrari, el número es “llegeix” del string. Un error retorna NaN.

Exemples:

ts
console.log(Number("   123   ")) // 123
console.log(Number("123z"))      // NaN (error en llegir un número a "z")
console.log(Number(true));       // 1
console.log(Number(false))       // 0

Tingues en compte que null i undefined es comporten de manera diferent aquí: null es converteix en 0 mentre que undefined es converteix en NaN.

La suma ‘+’ concatena strings

Gairebé totes les operacions matemàtiques converteixen els valors a números. Una excepció notable és la suma +. Si un dels valors sumats és un string, l’altre valor es converteix a string.

Després, els concatena (uneix):

ts
alert( 1 + '2' ); // '12' (string a la dreta)
alert( '1' + 2 ); // '12' (string a l'esquerra)

Això només passa si almenys un dels arguments és un string; en cas contrari, els valors es converteixen a número.

Operadors bàsics, matemàtiques

Coneixem uns quants operadors matemàtics perquè ens els van ensenyar a l’escola. Són coses com la suma +, la multiplicació *+, la resta -, etcètera.

Termes: “unari”, “binari”, “operand”

Abans de continuar, entenguem la terminologia habitual.

Un operand és allò a què s’apliquen els operadors. Per exemple, en la multiplicació 5 * 2 hi ha dos operands: l’operand esquerre és 5 i l’operand dret és 2. De vegades, la gent els anomena “arguments” en lloc d’“operands”.

Un operador és unari si té un sol operand. Per exemple, la negació unària - inverteix el signe d’un número:

ts
let x = 1
x = -x
console.log(x) // -1, s'ha aplicat la negació unària

** Un operador és binari si té dos operands. El mateix negatiu també existeix en forma binària:

ts
let x = 1, y = 3
console.log( y - x ) // 2, el binari negatiu resta valors

Formalment, estem parlant de dos operadors diferents: la negació unària (un operand: inverteix el signe) i la resta binària (dos operands: resta).

Matemàtiques

Estan suportades les operacions següents:

  • Suma +,
  • Resta -,
  • Multiplicació *,
  • Divisió /,
  • Residu %,
  • Exponenciació **.

Els quatre primers són coneguts, mentre que % i ** s’han d’explicar més àmpliament.

Residu %

L’operador residu %, tot i la seva aparença, no té relació amb els percentatges.

El resultat d’a % b és el residu de la divisió entera d’a per b.

Per exemple:

ts
console.log(5 % 2) // 1, és el residu de 5 dividit per 2
console.log(8 % 3) // 2, és el residu de 8 dividit per 3
console.log(8 % 4) // 0, és el residu de 8 dividit per 4

Exponenciació **

L’operador d’exponenciació a ** b eleva a a la potència de b.

En matemàtiques d’escola, ho escrivim com ab.

Per exemple:

ts
console.log(2 ** 2) // 2² = 4
console.log(2 ** 3) // 2³ = 8
console.log(2 ** 4) // 2⁴ = 16

Matemàticament, l’exponenciació també està definida per a operands no enters.

Per exemple, l’arrel quadrada és l’exponent ½:

alert( 4 ** (1/2) ); // 2 (potència de 1/2 és el mateix que arrel quadrada) alert( 8 ** (1/3) ); // 2 (potència de 1/3 és el mateix que arrel cúbica)

Concatenació de strings amb el + binari

Normalment l’operador + suma números.

Però si s’aplica el + binari a un string, els uneix (concatena):

ts
let s = "my" + "string"
console.log(s) // mystring

Tingues present que si un dels operands és una cadena, l’altre també es converteix en cadena.

Per exemple:

ts
console.log("1" + 2); // "12"
console.log(2 + "1") // "21"

Com veus, tant se val si el primer operand és una cadena o el segon.

Aquí tens un exemple una mica més complex:

ts
console.log(2 + 2 + "1") // "41" i no "221"

Aquí, els operadors treballen un darrere l’altre. El primer + suma dos números i retorna 4; després, el + següent hi afegeix el string 1, així que s’avalua com 4 + "1" = 41.

ts
console.log("1" + 2 + 2) // "122", no és "14"

Aquí el primer operand és una cadena, i el compilador tracta els altres dos operands com a cadenes també. El 2 es concatena a "1", així que és com "1" + 2 = "12" i "12" + 2 = "122".

El + binari és l’únic operador que suporta strings d’aquesta manera.

Els altres operadors matemàtics només treballen amb números.

Precedència dels operadors

Si una expressió té més d’un operador, l’ordre d’execució es defineix per la seva precedència o, en altres paraules, l’ordre de prioritat predeterminat dels operadors.

Des de l’escola, tots sabem que la multiplicació en l’expressió 1 + 2 * 2 s’ha de calcular abans que la suma. Això és exactament la precedència. Es diu que la multiplicació té una precedència més alta que la suma.

Els parèntesis anul·len qualsevol precedència, així que si no estem satisfets amb l’ordre predeterminat, els podem fer servir per canviar-lo. Per exemple, escriu (1 + 2) * 2.

Hi ha molts operadors en JavaScript. Cada operador té un número de precedència corresponent. El que té el número més gran s’executa primer. Si la precedència és la mateixa, l’ordre d’execució és d’esquerra a dreta.

Aquí tens un extracte de la taula de precedència (no cal que ho recordis, però tingues en compte que els operadors unaris són més alts que l’operador binari corresponent):

Modificar in situ

Sovint necessitem aplicar un operador a una variable i desar el nou resultat en aquesta mateixa variable.

Per exemple:

ts
let n = 2
n = n + 5
n = n * 2

Aquesta notació es pot escurçar utilitzant els operadors += i *=:

ts
let n = 2
n += 5 // ara n = 7  (és el mateix que n = n + 5)
n *= 2 // ara n = 14 (és el mateix que n = n * 2)

console.log(n) // 14

Els operadors curts “modifica i assigna” existeixen per a tots els operadors aritmètics: /=, -=, etcètera.

Aquests operadors tenen la mateixa precedència que l’assignació normal, per tant s’executen després dels altres càlculs:

ts
let n = 2
n *= 3 + 5 // el costat dret s'avalua primer, és el mateix que n *= 8
console.log(n) // 16

Activitat

Task

Quins són els valors d’a i x després del codi següent?

ts
let a = 2
a *= 2
let x = 1 + a
Show solution
ps
a = 4 (multiplicat per 2)
x = 5 (calculat com 1 + 4)
Task

A continuació tens un codi que demana a l’usuari dos nombres i mostra la suma.

Té un error, arregla el codi.

ts
let a = prompt("Primer número?")
let b = prompt("Segon número?")

console.log(a + b)
Show solution

let a = prompt(“Primer número?”) let b = prompt(“Segon número?”)

console.log(Number(a) + Number(b))

Activitat

Cercle

Per calcular l’àrea d’un cercle has d’utilitzar la fórmula πr², on r és el radi del cercle i π és el número Pi.

Calcula l’area d’un cercle de diametre 5:

Show solution
ts
let area = 3.141592653 * (5 ** 2)
console.log(area) //78.539816325

Modifica el codi per tal que demani l’àrea a l’usuari:

Show solution
ts
let radius = Number(prompt("Radi del cercle?"))
let PI = 3.141592653
let area =  PI* (5 ** 2)

console.log(`L'àrea és ${area}`)

Cost

Crea un script cost.ts que:

  • Demani les dimensions en centímetres d’una capsa
  • Calculi el volume de la capsa en centémetres.
  • Calculi el cost d’enviar la capsa en funció del volume: 1 euro cada 5000 cm2
  • Mostri per consola el cost en euros d’enviar aquesta capsa.

A continuació tens un exemple d’una capsa de 23 x 45 x 10 que té un cost d’enviament de 2.07€ :

ps
bun .\cost.ts
Llargada:  23
Amplada:  24
Altura:  56
Cost: 6.1824 €
Show solution
ts
const boxLength = Number(prompt("Llargada: "))
const boxWidth = Number(prompt("Amplada: "))
const boxHeight = Number(prompt("Altura: "))

const volum = boxLength * boxWidth * boxHeight
const cost = volum / 5000

alert(`Cost: ${cost}`)

Pendent

PENDENT DE REVISAR EN PROFUNDITAT

  • Primer expliquem els números
  • Després els strings
  • Explicar any i el union type (i.e string | null)