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
[Link]
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;
}
[Link](`${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") {
[Link](`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}`;
}
[Link](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") {
[Link](`Hello, Welcome dear client ${name}` );
})("Argumento")
Funciones JavaScript
isNaN
let age = "12x"
age = Number(age);
[Link](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
[Link](error);
}
Orientado a objetos (UDACITY)
Codigo de algunos ejercicios
// Ejercicios Universidad JavaScript
let timeOfTheDay = 69
if( 6 <= timeOfTheDay && 11 >= timeOfTheDay){
[Link]("Buenos dias");
}
else if( 12 <= timeOfTheDay && 18 >= timeOfTheDay){
[Link]("Buenas tardes");
}
else if( 19 <= timeOfTheDay && 24 >= timeOfTheDay){
[Link]("Buenas noches");
}
else if( 0 <= timeOfTheDay && 6 > timeOfTheDay){
[Link]("Durmiendo");
}
else{
[Link]("Un dia SOLO tiene 24hr");
}
// SWITCH
JavaScript 4
switch (timeOfTheDay) {
case 0:
[Link]("Time is 0 ");
break;
case 6:
[Link]("Time is 6 ");
break;
case 11:
[Link]("Time is 11");
break;
case 12:
[Link]("Time is 12");
break;
case 19:
[Link]("Time is 19");
break;
case 18:
[Link]("Time is 18");
break;
case 24:
[Link]("Time is 24");
break;
default:
[Link]("NO aplica");
break;
}
// Agregar valores a un array con length
// Se considera mejor practica y evita posibles errores
const autos = ["MercedesBenz","VMW","Mazda"]
autos[[Link]] = "Kardilac"
JavaScript 5
[Link](autos);
[Link]([Link](autos));
[Link]( autos instanceof Array);
autos[6] = "Chevrolet"; // podemos crear/agregar espacios en
blanco en nuestros arrays agregando datos saltando posiciones
[Link](autos);
// GO-TO
index: // esto es una etiqueta
for(let i = 0; i < 5 ; i++){
if(i % 2 == 0){
continue index;
}
[Link](`${i}`)
}
//Hoisting
gretting(); //Antes de declarar
function gretting(name="Sori") {
[Link](`Hello, Welcome dear client ${name}` );
}
gretting(); //Despues de declarar
//Funciones de tipo expresion
let saludos = function(name="Sori"){
return `Hello, Welcome dear client ${name}`;
}
[Link](saludos("Matt"));
JavaScript 6
//Self-Invoking
(function(name="Sori") {
[Link](`Hello, Welcome dear client ${name}` );
})("Argumento")
// toString y Arguments
function gretting_arg(name="Sori") {
[Link]([Link]);
[Link](`Hello, Welcome dear client ${name}` );
}
let miFuncionATexto = gretting_arg.toString()
[Link](gretting_arg(),miFuncionATexto)
// Las funciones pueden ser flexibles con sus parametros
function sumar(a = 5 , b = 3) {
[Link](arguments[0]);
[Link](arguments[1]);
[Link](arguments[2]);
[Link](`La suma es: ${a + b + arguments[2]}`);
}
sumar(1,4,5)
// sumar todos los argumentos
[Link](sumarTodo(12, 34, 1, 5, 1));
function sumarTodo(){
let sumar = 0;
for (let index = 0; index < [Link]; 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
}
[Link](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) {
[Link] = "Fransisco"
[Link] = "Lara"
}
[Link](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 < [Link]; index+
+) {
element += arguments[index];
}
return `${[Link]} have ${element} likes`
}
}
[Link]([Link](1,2,3,4,5));
for( propiedad in movie){
[Link](`${propiedad}:`);
[Link](movie[propiedad]);
}
// Agregar y eliminar propiedades
[Link] = "123131314" //agrega
delete [Link] //borra
//Acceder solo a los valores de un objecto
let movieArray = [Link](movie)
[Link](movieArray);
// objecto a formato JSON
let movieJSON = [Link](movie)
[Link](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: ${[Link]} Publicacion: ${[Link]
acion} etc...`
},
JavaScript 9
get lang(){
return [Link]()
},
set lang(lang){
return [Link] = [Link]()
}
}
[Link]([Link]);
[Link]([Link]);
[Link] = "en"
[Link]([Link]);
[Link]([Link]);
JavaScript 10
