Un modelo mental para entender JavaScript

Es una representación en nuestra mente acerca de cómo funcionan las cosas en el mundo exterior.

Sirve para entender y predecir el comportamiento de las cosas, para tomar decisiones y resolver problemas.

Modelo Mental

¿Qué es?

¿Para qué sirve?

Es una representación en nuestra mente acerca de cómo funciona JavaScript.

Sirve para entender y predecir el comportamiento de JavaScript.

Modelo Mental para JavaScript

¿Qué es?

¿Para qué sirve?

Crear, almacenar, modificar o procesar valores es el mecanismo por el cual se crea cualquier programa computacional

JavaScript Values

undefined

JavaScript Values

undefined
null

JavaScript Values

undefined
null
true
false

Booleans

JavaScript Values

undefined
null
true
false

Booleans

10

Numbers

-5
20.53
-7.4
32
-44
100
21
3
120
40
40
40
40
40
NaN

JavaScript Values

undefined
null
true
false

Booleans

10

Numbers

-5
20.53
-7.4
32
-44
100
21
3
120
40
40
40
40
40

Strings

"Codeable23"

"JavaScript"

"hola"

"Bob"

"Testing"

"CSS"

"Peru"

"abc"

"Peru"

"abc"

"abc"

"abc"

"abc"

"abc"

"Hola"

JavaScript Values

undefined
null
true
false

Booleans

10

Numbers

-5
20.53
-7.4
32
-44
100
21
3
120
40
40
40
40
40

Strings

"Codeable"

"JavaScript"

"Hola"

"Bob"

"Testing"

"CSS"

"Peru"

"abc"

"Peru"

"abc"

"abc"

"abc"

"abc"

"abc"

Symbols

BigInts

"Hola"

Primitives

undefined
null
true
false

Booleans

10

Numbers

-5
20.53
-7.4
32
-44
100
21
3
120
40
40
40
40
40

{ }

Objects

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

{ }

( )

Functions

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

( )

{ }

( )

Valores Primitivos

Valores no Primitivos

BigInts

Symbols

5n
Symbol()
40
40
40
40
40
Symbol()
Symbol()

Strings

"Codeable"

"JavaScript"

"Hola"

"Bob"

"Testing"

"CSS"

"Peru"

"abc"

"Peru"

"abc"

"abc"

"abc"

"abc"

"abc"

"Hola"

Tu Programa
Valores en el Universo JavaScript

Variables

let temperatura = -5;

definición

asignación

nombre de variable

valor*

10

Numbers

-5
20.53
-7.4
32
-44
100
21
3
120
40
40
40
40
40

temperatura

Modelo mental

*Expresión que resulte en un valor

Variables

let esMayor = 10 > 20;

definición

asignación

expresión:

esMayor

Modelo mental

10 > 20

valor:

false
true
false

Booleans

Variables

let temperatura;

definición

undefined

temperatura

Modelo mental

temperatura = -5;

asignación

undefined

temperatura

-5

temperatura = "frio";

re-asignación

undefined

temperatura

-5

"frio"

let alumno1 = "Veronica";
let alumno2 = "Piero";
alumno1 = alumno2;
alumno2 = "Juan";

"Veronica"

alumno1

"Piero"

alumno2

"Juan"

"Veronica"

alumno1

"Piero"

alumno2

"Juan"

alumno1

"Veronica"

alumno1

"alumno2"

alumno2

"Juan"

alumno1

1

2

3

let alumno1 = "Veronica";
let alumno2 = "Piero";
alumno1 = alumno2;
alumno2 = "Juan";

valor

var

alumno1

"Veronica"

alumno2

"Piero"

"Juan"

let patas = 4;
let maginificos = 4;
let polos = patas;

valor

var

patas

4

magnificos

polos

let precio = 100;
let impuesto = 18;
let total = precio + impuesto;
impuesto = 20;
total = precio + impuesto;

valor

var

precio

100

impuesto

18

total

118

20

120

{ }

Objetcs

Objetos

let alumno1 = {};

alumno1

let alumno2 = {};

alumno2

{ }

{ }

Objetos

let alumno1 = {
  nombre: "Piero",
  edad: 25,
  hablaIngles: true
};

alumno1

"Piero"

25

true

nombre

hablaIngles

edad

let pokemon1 = {
  nombre: "Pikachu",
  tipo: "Electric"
}

let pokemon2 = {
  nombre: "Zapdos",
  tipo: "Electric"
}

{ }

var

value

prop

pokemon1

{ }

nombre

"Pikachu"

tipo

"Electric"

{ }

pokemon2

nombre

"Zapdos"

tipo

let pokemon1 = {
  nombre: "Pikachu",
  tipo: "Electric"
}

let pokemon2 = {
  nombre: "Zapdos",
  tipo: "Electric"
}

pokemon2.nombre = pokemon1.nombre

pokemon1.nombre = "Raichu"

{ }

pokemon1

nombre

"Pikachu"

tipo

"Electric"

{ }

pokemon2

nombre

"Zapdos"

tipo

"Raichu"

let pokemon1 = {
  nombre: "Pikachu",
  tipo: "Electric"
}

pokemon1.ciudad

pokemon1.ciudad.nombre

pokemon1

{ }

"Pikachu"

nombre

"Electric"

tipo

Propiedades no definidas

ciudad

undefined

Error!

Igualdad de valores

 Igualdad de "mismo valor"

Object.is(a, b)

 

Igualdad estrícta (triple igual)

a === b

 

Igualdad débil (doble igual)

a == b

Igualdad de "mismo valor"

Object.is(a, b)

let triangle = 3
let tripod = "3"
let musketeers = 2 + 1

Object.is(triangle, tripod)

Object.is(musketeers, triangle)

Object.is(tripod, musketeers)

false

{ }

var

value

prop

triangle

3

tripod

"3"

musketeers

true

false

Igualdad estrícta (triple igual)

a === b

NaN === NaN

false a pesar que son el mismo valor

Funciona igual que Object.is con las siguientes excepciones

0 === -0

true a pesar que son valores distintos

-0 === 0

0

-0

Igualdad débil (doble igual)

a == b

La oveja negra de la familia de igualdades

true

true

true

[[]] == ""


true == [1]


false == [0]

Revisión

let pika = {
  nombre: "Pikachu",
  type: "Electric",
  origen: { ciudad: "Kanto"}
}

let bulbi = {
  nombre: "Bulbasaur",
  type: "Plant",
  origen: pika.origen
}

bulbi.origen === pika.origen

bulbi.origen.ciudad === "Kanto"

pika.origen === { ciudad: "Kanto" }

Revisión

let pika = {
  nombre: "Pikachu",
  type: "Electric",
  origen: { ciudad: "Kanto"}
}

let bulbi = {
  nombre: "Bulbasaur",
  type: "Plant",
  origen: pika.origen
}

bulbi.origen === pika.origen

bulbi.origen.ciudad === "Kanto"

pika.origen === { ciudad: "Kanto" }

pika

{ }

"Pikachu"

nombre

"Electric"

type

origen

{ }

ciudad

"Kanto"

bulbi

{ }

"Bulbasaur"

nombre

"Plant"

type

origen

true

true

{ }

ciudad

false

deck

By Codeable

Made with Slides.com

deck

  • 289

More from Codeable