Ejercicios interactivos y preguntas clásicas de entrevistas técnicas de Front End de Javascript !
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- Buenas buenas mi gente !
En el día de hoy... presentamos una guía de preguntas y ejercicios técnicos clásicos para una entrevista de Front End pero orientados a la parte de Javascript, seguramente este sea el primero de muchos ya que hay MUCHOS ejercicios.
Hoy vamos a hacer algo diferente, quiero que cuando escuchen "pausa", paren sus videos, lean el ejercicio y pongan en los comentarios lo que creen que sería la respuesta ! luego pueden validar a ver si han acertado.
A por ello !!
Link a vídeo de cómo pasar una entrevista: • Creando un carousel / ...
▬ Contenido del video ▬▬▬▬▬▬▬▬▬▬
0:00:00 - Welcome !
0:01:32 - Qué es ECMA ?
0:02:55 - Qué es un Scope?
0:05:06 - Ejercicio técnico Scope
0:08:03 - Qué es Closure ?
0:09:19 - Ejercicio técnico Closure
0:13:20 - Prototype
0:14:50 - Triple igual vs Doble igual
0:16:55 - Const vs Let vs Var
0:23:48 - Filter, Map, Reduce
0:28:35 - Programación funcional, declarativa, side effects, inmutabilidad
0:31:05 - Not Defined vs NUll vs Undefined
0:32:24 - Hoisting
0:35:35 - Métodos y variables privadas
0:37:24 - Object.freeze()
0:39:23 - Arrow functions
0:42:26 - Despedida
Si quieres hacer una donación:
streamelements.com/gentlemanp...
▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
Link a Spotify: spoti.fi/3y281cY
Link a la comunidad: / discord
Link a la comunidad de Facebook: / 541544337043760
Link al libro "Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación web": amzn.to/2ReBuzL - วิทยาศาสตร์และเทคโนโลยี
Es increible la pasion y dedidacion de compartir El conocimiento adquirido durante tantos años. La mayoria de tech leads jamas se tomarian la molestia de hacer lo que estas haciendo y te quiero agradecer por tu tiempo y dedidacion.
Muchas gracias Kevin ! con mensajes como estos nunca voy a dejar de ayudar
Mañana es mi primera entrevista, muchas de las cosas que están aquí las entiendo pero a la hora de la verdad no sé si me irá bien. Deseénme suerte!
Te va a ir perfecto ! Se tu mismo y no te estreses que todo sirve para aprender y es positivo
Como te fue amigo?
Espero que te hayan contratado, yo tengo mi primera entrevista el lunes
Gracias amigo ya te seguía en ig, y miraba muchos tus videos, pero no me había cruzado con ningún video tuyo todavía en TH-cam. Justo me sirvió muchísimo para repasar conceptos y profundizar el conocimiento de otros, ya que estoy repasando y practicando para una entrevista. Te banco una banda loco, gracias por los contenidos que haces, tenés una forma de explicar y enseñar muy divertida y a la vez muy profesional. Te mando un abrazo!!!
Aprovechando tu video a full !!!
que buen video alan increible como siempre muchas gracias
crack! entendi varios conceptos que no tenía claros, gracias !!
Muchas gracias!! super bueno el video!!
Laptm que buena analogía la de las puertas
Quiero ese nivel de conocimiento
Dale hermano que buen video, sirve para repasar conceptos, siempre es bueno volver a lo más básico para reforzar.
Excelente video Master!!!!! Realmente me sumó.
Se nota el conocimiento, la dedicación y la pasión!!!!
Gracias!! Vale oro esto!!!
Amo tu contenido bro, eres increíble sigue así :3
Y yo amo tu comentario !! muchas gracias miles !!!
Gracias 🎉❤, un crack y nuevo sub.
Exactly what I needed and was looking for! Thanks!!
De nada Antooooo
100% de todo lo bueno que se puede decir en español
Genial! muchas Zenkius
Exelente el video, muy bien explicado todo!
Muchas gracias Nacho !!
Sos un crack, explicas muy bien! Gracias por el video
De nada Isaías y muuuchas gracias por el comment !
Me ha ayudado mucho para repasar
muy buenn video!!!
muy buen video, muy entretenido y claro
De nada Gasparrrrr :D
Muchas gracias!!!
Que bueno esta este video. Hace mas asi porfa
El siguiente va a ser así te lo prometo
Excelente contenido!
Muchísimas gracias Soledad !!!
excelente video!!
Muchas gracias Esteban !!!!
Gracias brother ¡¡¡¡¡¡¡
Que calidad tienen estos videos, gracias
Muuuuuuchas gracias Francisco !!!
Muy muy buen video! Excelente explicacion!
Thank youuu Christian !!!
no es que nadie lo quiera si no es que dificulta a la hora de leer código por este lo complica, pero si en un caso muy concreto se requiere pues se lo utiliza en lo personal me parece que esta bien pero tan solo lo aplico cuando no lo pueda hacer de otra forma
Muchas gracias por el video Alan, Messirve jajaja
jajajaj es la que va ! muchas gracias por el comment !!
Muy bueno... gracias
De nada Yasel !!!!
guauu! es la primera vez que escucho la gran diferencia del arrow function de que no tiene scope interno y puede acceder a variables de las funciones padres, ahora si se realmente para que vale usarlo, porque en todos lo cursos que he visto sólo dicen que es una manera más bonita de meter los callback o de crear las funciones.
buenisimo el video, me tuve que subcribir jaja
Vamooooo gracias Maikel y welcome !!!
Muy bueno me hiciste entender muchas cosas.
Genial Viskarra ! Cualquier cosa siempre puedes preguntar y hacer uso de la comunidad de discord
Grande el contenido
Gracias Carlos !!!
Contenido explicado de manera espectacular. Las arrow function lo he visto en varios videos y en NINGUNO explicaba lo de que no creaba un scope en su interior, así que super agradecido con saber eso!
De nada Santiago !! Amo que te haya gustado el vídeo y mi explicación de las arrow functions !!
Gracias por la informaciòn, es realmente valiosa
De nada Alejandrooooo :D
Muy buenas preguntas Amigo, Yo hubiera agregado el tema de (Fetch Api), ya que las empresas solicitan mucho el consumo de api´s. En general Excelente video, Saludos!!!
Me sirvió mucha la última explicación, gracias!
De nada Eva !!! Geeenial que te haya gustado :D
Suscrito y merecido me gusta. Saludos desde Misiones.
Muchas gracias mister ! Que hermoso Misiones de chico iba siempre
excelente video
Muuuuuchas gracias Rubén !
Un crack! Sos un papu entre papus! MINDBLOW del video: Las arrow function no crean un scope interno! BOOOM!!!
grande alan! gracias por todo alan!
Siempre mister !!!
muchas graciassss
A ti Damaris !!
Muy buen video. Estoy mirando videos de entrevistas tecnicas porque me estoy preparando para mi primer entrevista laboral. Gracias Crack.
Esoooo, por favor dinos cómo te ha ido !! También mira mi vídeo sobre cómo pasar una entrevista técnica !! 🤓🤓
Gracias Alan, Un saludo
A ti Juan por el comment !!
Trae más a de estos vídeos me ayudan un moton, saludos!
Venga Franco, lo haré !!!
Excelente contenido amigo, te ganas un nuevo Discípulo!
Aceptado con gusto !! Welcome a la comunidad José !
Exelente video, se los voy a pasar a mis compañeros, esta muy bueno
Gracias Alexis !!! Lo agradezco muchísimo muchísimo espero que te guste el resto de contenido
O: nuevo sub Gracias por tu contenido
Genial 👍
Gracias Juan !
mil gracias me super sirvio... estoy preparando mi primera entrevista tecnica, pero me llevo conceptos usper buenos para aplicar en mi codigo.. saludos
Gracias Carol !!! luego nos dices como te fue :D
amigo me gusta como enseñas, se entienden mucho mejor los conceptos , me sirve mucho, recien comienzo en este mundo y me encanto. y deberias hacer los ejercico por capitulos, de las preguntas mas ¨faciles¨a las mas ¨dificiles¨ es solo una opinion.
Si señor ! Muchas gracias por el comentario !!
buenazoooo bro
Gracias Boris!!!
gracias
sos groso Freddie!!
cloudfront-us-east-1.images.arcpublishing.com/infobae/44NAV6FYPFFJDDVBGSTCCQ6PMY.jpg
Que buen video! Excelente contenido.
Alan, ¿por casualidad tienes algún curso sobre arquitecturas limpias aplicadas a Angular a profundidad? Estoy ahora estudiando sobre ese tema y encuentro tantas explicaciones y formas que no logro unificar criterios como para aplicar sus principios, sobre todo para angular. He visto que tienes algunos videos sobre eso.
nanan que buena personalidad!!!!
Es lo que les toco de mentor jejjejej
Que crack.
De lo mejor tu contenido, esperando el hackaton XD. Seria genial uno para entrevistas tambien con React.
Venga, vamos a hacer uno en Angular y React :D
Voy viendo 2 videos y me parece muy bueno tu canal, ahora hay un monton de canales de programacion pero la mayoria son lo mismo, me subscribo y me sumo al discord, hace unos meses arranque con angular y tengo un par de dudas. Saludos!
Gracias Ziggy S. !! Muchas muchas gracias por las palabras, voy a tratar de seguir siendo yo mismo y enseñar las cosas a mi modo 🤗
Genio Alan, refresque mucho que daba por sabído
De nada mister !! Que bueno verte por aquí !!!
Supuestamente me va a llegar un mail para tener mi primer entrevista, no estoy listo pero este tipo de videos me ayudan muchisimo. gracias crack
Vamoooo avisa como te fue !!!!
Muchas gracias Alán muy buen video, me servirá mucho para una entrevista que tendré pronto, espero la segunda parte. Saludos
Esooo, éxitos en la entrevista ! Luego nos dices cómo te fue :D
@@GentlemanProgramming por acá vuelvo para decir que sí pasé, me fue muy útil el vídeo para la entrevista técnica, muchas gracias!. Saludos
@@jaidivergomezquintero9765 vamoooooooos !! Felicitaciones !!!! Miles miles
Muy buen video, me sirvió mucho para refrescar algunas ideas que evidentemente no las tenia tan bien! jaja
Muy bueno tu contenido, nuevo suscriptor!
Por cierto, uno con React seria una locuraaaaa y se agradecería demasiado!
Muchísimas gracias !!!! :D
Eso de las puertas para separar los scopes y el arco sin puerta de la arrow function... dios mio.. nunca vi una explicacion tan buena e intuitiva como esa, me termino de cerrar para siempre el tema ese y eso que programo hace rato, que mas facil que ponerse a pensar como funciona el THIS en esos caso que decir, simple la arrow funcion no genera ninguna scope interna simplemente comparte como la de la scope anterior que la invoco, ya esta, horas y horas solucionadas en esa explicacion
Estuve muuucho tiempo pensando esa comparación ! La utilicé para mi libro y no podía dejarla pasar en esta explicación, la verdad que me pone súper contento que te haya servidoooooo
Mister que buen video, estos videos son de mucha ayuda. Justamente me estoy preparando para una entrevista y este video es como caído del cielo. gracias Alan por compartit tu cnocimiento y sigue con este excelente trabajo
Muchas gracias por las palabras Fernando !! Espero que te vaya excelente y sino es una oportunidad ! Mira el otro vídeo así vas con todo ! th-cam.com/video/vW4wTNd_3qY/w-d-xo.html
Luego nos avisas como te fue !
@@GentlemanProgramming Mister quería responder hasta estar seguro de todo, pero ya puedo decir que fueron noticias. Si conseguí el trabajo. Muchas gracias por compartir todo el conocimiento soy admirador de todo lo que nos comparte. Muchas gracias por todo
@@fer0osennin Qué alegriaaaaaaaa !!! como decimos por estos lados, mañana a por más y mejor ! genio !
Muy buenas explicaciones, vengo 2 de 5 correctas :)
Esoooo, cómo terminaste ??? :O
Hola! me ha gustado mucho este resumen que has armado, me ha caído de perlas para repasar todo en un solo lugar!
Para aclarar: null y undefined son palabras reservadas de Javascript, y son valores que pueden asignarse a un objeto. Mientras que "Not defined" no es un concepto del lenguaje como tal. Sólo hace referencia a la ausencia de declaración de un objeto que quiere ser usado. Es entonces cuando aparece el famoso Reference Error.
Yes ! Not defined es solo un posible estado de Reference Error. Gracias por el comment y la buena energía Johann !!!
Gran video amigo sin duda este contenido ayuda bastante por cierto tienes pintas de ser Ted Lasso xd
Muchas gracias por el comment ! Y ya deje de parecerlo 🙁😛
cual tema de visual studio tienes ?
Muchas gracias compañero, eres un ejemplo de a dónde quiero llegar como programador. Tengo una entrevista en breves y me sirve mucho el vídeo.
Fuerzas Pedro !!! Vamos que te va a ir bien, mírate mi vídeo sobre cómo pasar una entrevista, te va a ayudar a tener la mentalidad correcta.
No te olvides de poner como te fue !!!!
@@GentlemanProgramming Pues la entrevista ha ido bien, no ha sido todo lo técnica que pensaba. Pero parece ser que quieren a alguien con algo de experiencia en empresa, cosa que aún me falta dado que soy autodidacta. Así que habrá que seguir probando!
@@PedroMartinez-xs9bl no pasa nada ! Una oportunidad más de aprender, anota todo lo que te preguntaron !! Así sabes que te falta y que puedes utilizar para la próxima :)
@@GentlemanProgramming Hola de nuevo señor, ya he encontrado trabajo de frontend, con Angular. Un abrazo y gracias por todo!
@@PedroMartinez-xs9bl increíble y felicitaciones !!!!!! 🎉 cualquier cosa que necesites no dudes de contactar a la comunidad :)
👏🏻👏🏻👏🏻
Muchas gracias Diego !!
Estuvo bueno el video y las explicaciones, tome su like buen hombre :D
Otra manera de ejecutar JS es descargar e instalar runJS.
PD: No pude ver tu video de twitch no me deje cambiar la resolución del video jaja mi conexión no es muy buena y se me corta
Creo que tienes que tener cuenta !, igual no pasa nada que en muy poco lo subo aquí :) y muchas gracias !!!!
@@GentlemanProgramming si tengo pero creo que solo te deja si los servidores no estan muy saturados o eres partner, de igual manera espero a que lo subas, saludos 👋
Me gusto el vídeo, tienes algo como esto para Angular
Tengo clases y cursos, pero voy a hacer uno orientado a Angular no hay problema ! Muchísimas gracias por el comment !!
En el ejercicio 2 de clousures a partir del uso de las arrow function se nos permite acceder al contexto superior al que fue invocada la misma arrow function . en este caso si se usa this.tasks.forEach((el)=> console.log(`${this.name} wants to ${el}`)
funcionara ya que heredara el contexto superior que en este caso seria el de bunny!
Gracias por el contenido!
Exactamente !!!!!!!!
@@GentlemanProgramming ¿Por qué no se podría usar un for..of ? ¿Cuál es mejor usar? mañana es mi entrevista 😬 cabe mencionar que me aclaraste muchas dudas, muy buen video!
@@katvaldev Buenaaas perdon que no llegue a responder antes :(
la diferencia mas que nada es la siguiente:
for of es mas rapido que usar un forEach pero la diferencia la verdad es practicamente nula, el forEach nos da un poco mas de informacion a nivel semantico que ayuda al entendimiento para los demas desarrolladores (es mucho mas limpio y declarativo)
@@GentlemanProgramming Tuve suerte y la técnica es en una semana :) muchas gracias por responder, como dicen ahí abajo, es bueno tener a seniors que siempre están ahí para responder :')
Hola Alan, primero que nada debo decir que este es uno de los mejores vídeos que he visto de javascript en general, es super didáctico en todo sentido. Así que muchas gracias por compartir tu conocimiento hermano! Pero quería hacerte una pregunta, entendí bastante bien el tema del scope de las arrow function y las funciones normales, pero hay algo que no me quedo muy claro con respecto a los scopes de las funciones:
Este caso:
const a = "a"
function test(){
const x = "x"
console.log(x)
return function(){
const y = "y"
console.log(x + y)
return function (){
const z = "z"
console.log(x + y + z + a)
}
}
}
test()()()
Esta función retorna todos los console log perfectamente, es como que se van concatenando los contextos y así la funcion más interna tiene acceso a las constantes de más afuera (Incluso a la global a),
pero en este otro caso no:
const prueba = {
name: "Paulo",
tasks: ["Clean", "Run", "Eat"],
showName: function (){
console.log("1 ", this.name)
return function () {
console.log("2 ", this.name)
}
}
}
prueba.showName()()
Aquí la función más interna retorna undefined como bien dijiste, pero mi pregunta es ¿Por qué?. En el primer caso las funciones si van concatenando scopes de las superiores como un clousure masivo, pero en el caso de un objeto no, ahí si actúan como puertas como bien dijiste. ¿Esto se debe al comportamiento de un objeto? De antemano me disculpo por el tamaño de mi mensaje jajaja
Hola ! No hay problema por la longitud del mensaje, fíjate cuál es la única diff que tienes entre los dos… THIS. Estas tratando de acceder a la propiedad name de un scope diferente al que piensas ! La forma de resolverlo es que la segunda función sea una arrow function o sino que puedas crear una variable “scope” que guarde el this que si tiene la propiedad y esa la pases por scope chaining.
Te recomiendo un vídeo que tengo de closures y scope chaining que tengo aquí en el canal :D
@@GentlemanProgramming Sos el primer youtuber que veo que se toma el laburo de contestar un mensaje tan largo resolviendo una duda. Gracias por compartir de forma tan clara y precisa. Te mereces todo lo mejor, viejo. Saludos!
34:51 creo que es falso, si bien no da error, B no es sumada a A para dar C, porque B es usada antes de ser declarada
muy útil, por lo menos para mi que estoy comenzando.
Esa es la idea !! Seguramente venga una parte dos :D
@@GentlemanProgramming y mira, yo estoy haciendo el curso de js de FCC y necesito practica a full y terminar de asentar conocimientos, me vienen bien tus videos, la verdad se te entiende todo.
@@LardiyoX que geniooo, cualquier cosa recuerda que tenemos la comunidad a tu disposición y tiene un sistema de mentoring que estamos comenzando a implementar :D ( link en la description )
Excelente, en el ejercicio de bunny crei que tal vez se resolveria con un bind..
a veces el bind y el apply crean más complejidad que las que solucionan jajja
@@GentlemanProgramming pues de verdad que no sabia que con una funcion flecha se solucionaba tan facil, para cuando mas videos de este tipo? gracias por compartir
@@javiersivira9317 Estoy tratando de sacar la serie de Angular y volver a dar un poco de contenido de este tipo y más de mentoring
@@GentlemanProgramming excelente
El Gentleman Sapbeeeeeeeeee!
Mas bien...loquitaaaa
Usando arrow no tira undefined porque no interactua con el scope como una funcion normal
Good answer !! En que sentido no interactúa de la misma manera ? 😊
@@GentlemanProgramming Habia probado para que funcione de usar la arrow function pero despues vi en el video que lo hiciste vos mismo xd
const bunny = {
name:"sabri",
task: ["eat", "sleep", "dance" ],
showtasks: function(){
this.task.forEach((task)=>{
console.log (this.name + " wants to : " + task)
})
}
}
bunny.showtasks() //asi se resolveria el de la closures?
Todo perfect !! 🤓
Q tema usas en vscode? Por cierto excelente video 😃
Dracula !
Increíble video me encantó!
Yo solo agregaría en el minuto 16:30 que la diferencia a nivel de == y === es que js siempre intenta algo que se llama coercion que simplemente es la conversión automática de tipo. Por ende, cuando comparamos false == [ ] nos da true. Por false y [ ] al convertirlos a un número son 0 y 0 == 0 pues si
Entonces los === no hacen el coercion solo comparan valores. Por eso, siempre es recomendado usar los === a menos que sepas los que estás haciendo con los ==
=== for the win ! es mucho más seguro, creo que hace más de 6 años que no uso == ajajajja. Es total como dices, la conversion de tipos internos que tiene Javascipt es bestial, lo mismo pasa al mezclar strings con numbers, que pueden generar bastantes ambiguedades
@@GentlemanProgramming XD yo tampoco hace mucho uso los ==, es más siempre que veo eso en un proyecto me cuestionó si realmente es necesario o hay algo que mejorar
viendo esto antes de mi entrevista...
Dime luego como te fue !!!
@@GentlemanProgramming si 💪
@@GentlemanProgramming no me hicieran nunguna pregunta de Js y no me llamaron jaja
Link is down
Fixed !!
21:40 , * y dije, esto es real?*
Un poquito de magia jajaja
Sos groso alan sabelo
Muchas gracias mister !!! :D
Sos super claro y nice. Al contrario de otra gente que va corriendo. Aparte sos re lindo, ahre jajaja perdon
🥰🥰
es Dalto?
Alan Buscaglia, owner de Gentleman Programming, a tu servicio ! 🤓
Chabon, sos igual a KickAss jajajajajajajajajajjaajaj
yo pensaba que java y JavaScript eran la misma cosa
and just pay more attension. I envy you mate.
In which way ? 🤓
.☮️.✌️.
🤓🤓
Vine buscando cobre y encontré oro.
Muchas gracias Juan !! :D
es idea mia o cada vez javascript esta pareciendose mas a Java xD
Más o menos por de fondo son todos iguales, por ejemplo en el vídeo sobre Javascript engines vemos que sí tiene tipos !! solo que el desarrollador no los ve :D