JavaScript

Buenas Practicas JS
24 buenas prácticas de JavaScript para principiantes
Como continuación de "30 buenas prácticas de HTML y CSS",
esta semana revisaremos JavaScript. Una vez que hayas
revisado la lista, ¡no dejes de comentarnos qué pequeños
https://code.tutsplus.com/es/tutorials/24-javascript-best-pr
actices-for-beginners--net-5399

Recomendacion:
utilizar “use strict” en la parte superior de nuestro programa o dentro de una
funcion para que JavaScript marque un error a la hora de utilizar una variable que
no se ha declarado todavia.

Curiosidades:
Cuando exportamos módulos e importamos módulos a archivos conectados
con archivos HTML debemos especificar poniendo en el script
type=’module’ así no generara un error en el navegador.

A las funciones tipo flecha no se le puede hacer Hoisting

Terminologías
Precedencia: Al igual que en matemáticas la precedencia es el orden de
ejecución de los símbolos ( + , - , / , * )…etc.

Go-To: Es como se le llama al uso de labels o etiquetas para redirigir en

código hacia un punto en especifico.

JavaScript 1
 // GO-TO
index: // esto es una etiqueta
for(let i = 0; i < 5 ; i++){
if(i % 2 == 0){
continue index;
}
console.log(`${i}`)
}

Hoisting: Cuando llamamos o ejecutamos una función la cual no ha sido

“declarada” aun en nuestro código o después de. (NO se aplica el hoisting a
funciones delcaradas con let )

//Hoisting
gretting(); //Antes de declarar

function gretting(name="Sori") {
console.log(`Hello, Welcome dear client ${name}` );
}

gretting(); //Despues de declarar

Funciones de tipo Expresión: O mejor conocidas como funciones anónimas,

estas funciones normalmente son declaradas dentro de una variable y no
tienen nombre (el no tener nombre es lo que las hace anónimas).

//Funciones de tipo expresion

let saludos = function(name="Sori"){
return `Hello, Welcome dear client ${name}`;
}
console.log(saludos("Matt"));

Self-invoking: funciones de auto-invocación estas son también funciones

anónimas y solo podemos utilizarlas una vez ya que una vez creada se auto-
invocan.

JavaScript 2
 Se declaran dentro de paréntesis y la ejecutamos con un par de paréntesis
delante de ella (podemos pasar argumentos si queremos).

//Self-Invoking
(function(name="Sori") {
console.log(`Hello, Welcome dear client ${name}` );
})("Argumento")

Funciones JavaScript
isNaN

let age = "12x"

age = Number(age);

console.log(isNaN(age)) //True

// isNaN === is not a number.

Throws

// La clausula Throw es utilizada para la creacion de errores

y detener el cidigo
try{
if(5 < 0){
return "ok";
}else{
throw "El numero no es menor";
}
}
catch(error){

JavaScript 3
 console.log(error);
}

Orientado a objetos (UDACITY)

Codigo de algunos ejercicios

// Ejercicios Universidad JavaScript

let timeOfTheDay = 69

if( 6 <= timeOfTheDay && 11 >= timeOfTheDay){

console.log("Buenos dias");
}
else if( 12 <= timeOfTheDay && 18 >= timeOfTheDay){

console.log("Buenas tardes");
}
else if( 19 <= timeOfTheDay && 24 >= timeOfTheDay){

console.log("Buenas noches");
}
else if( 0 <= timeOfTheDay && 6 > timeOfTheDay){

console.log("Durmiendo");
}
else{
console.log("Un dia SOLO tiene 24hr");
}

// SWITCH

JavaScript 4
 switch (timeOfTheDay) {
case 0:
console.log("Time is 0 ");
break;
case 6:
console.log("Time is 6 ");
break;
case 11:
console.log("Time is 11");
break;
case 12:
console.log("Time is 12");
break;
case 19:
console.log("Time is 19");
break;

case 18:
console.log("Time is 18");
break;

case 24:
console.log("Time is 24");
break;

default:
console.log("NO aplica");
break;
}

// Agregar valores a un array con length

// Se considera mejor practica y evita posibles errores
const autos = ["MercedesBenz","VMW","Mazda"]

autos[autos.length] = "Kardilac"

JavaScript 5
 console.log(autos);

console.log(Array.isArray(autos));

console.log( autos instanceof Array);

autos[6] = "Chevrolet"; // podemos crear/agregar espacios en

blanco en nuestros arrays agregando datos saltando posiciones

console.log(autos);

// GO-TO
index: // esto es una etiqueta
for(let i = 0; i < 5 ; i++){
if(i % 2 == 0){
continue index;
}
console.log(`${i}`)
}

//Hoisting
gretting(); //Antes de declarar

function gretting(name="Sori") {
console.log(`Hello, Welcome dear client ${name}` );
}

gretting(); //Despues de declarar

//Funciones de tipo expresion

let saludos = function(name="Sori"){
return `Hello, Welcome dear client ${name}`;
}
console.log(saludos("Matt"));

JavaScript 6
 //Self-Invoking

(function(name="Sori") {
console.log(`Hello, Welcome dear client ${name}` );
})("Argumento")

// toString y Arguments
function gretting_arg(name="Sori") {
console.log(arguments.length);
console.log(`Hello, Welcome dear client ${name}` );
}

let miFuncionATexto = gretting_arg.toString()

console.log(gretting_arg(),miFuncionATexto)

// Las funciones pueden ser flexibles con sus parametros

function sumar(a = 5 , b = 3) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(`La suma es: ${a + b + arguments[2]}`);
}
sumar(1,4,5)

// sumar todos los argumentos

console.log(sumarTodo(12, 34, 1, 5, 1));

function sumarTodo(){
let sumar = 0;
for (let index = 0; index < arguments.length; index++) {
sumar += arguments[index]
}
return sumar
}

JavaScript 7
 /* Paso por valor son datos primitivos a los cuales no les po
demos cambiar sus valores solo duplicarlos */
let x = 10;

function cambiarValor(a) {
a = 20;
return a
}

console.log(cambiarValor(x),"\n",x);
/* Su valor no cambia ya que los datos tipo primitivos no pos
een atributos o metodos */

/* Paso por referencia utiliza los atributos de algun objeto

para modificar sus valores */
const persona = {
nombre: "Juan",
apellido: "Perez"
}

function cambiarValoresObjec(p1) {
p1.nombre = "Fransisco"
p1.apellido = "Lara"
}
console.log(cambiarValoresObjec(persona),"\n",persona);

// Objectos

let movie = {
name: "BELLE",
estado: "Finalizada",
publicacion: 2020,
origen: "Japon",
likes : function() {
let element = 0;

JavaScript 8
 for (let index = 0; index < arguments.length; index+
+) {
element += arguments[index];
}
return `${this.name} have ${element} likes`
}
}

console.log(movie.likes(1,2,3,4,5));
for( propiedad in movie){
console.log(`${propiedad}:`);
console.log(movie[propiedad]);
}

// Agregar y eliminar propiedades

movie.tel = "123131314" //agrega
delete movie.tel //borra

//Acceder solo a los valores de un objecto

let movieArray = Object.values(movie)
console.log(movieArray);
// objecto a formato JSON
let movieJSON = JSON.stringify(movie)
console.log(movieJSON);

// Para obtener datos get y set son mejores practicas

let movieWithGetAndSet = {
name: "BELLE",
estado: "Finalizada",
publicacion: 2020,
origen: "Japon",
idioma: "es",
get info() {
return `Name: ${this.name} Publicacion: ${this.public
acion} etc...`
},

JavaScript 9
 get lang(){
return this.idioma.toUpperCase()
},
set lang(lang){
return this.idioma = lang.toUpperCase()
}
}
console.log(movieWithGetAndSet.info);
console.log(movieWithGetAndSet.lang);
movieWithGetAndSet.lang = "en"
console.log(movieWithGetAndSet.lang);
console.log(movieWithGetAndSet.idioma);

JavaScript 10