Repository: fforres/preguntas-y-respuestas-entrevistas-frontend Branch: master Commit: 0d4f738a80b0 Files: 21 Total size: 102.7 KB Directory structure: gitextract_2ujoouvw/ ├── .all-contributorsrc ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── cs/ │ └── README.md ├── css/ │ └── README.md ├── ejemplos/ │ ├── Amazon/ │ │ └── README.md │ ├── Groupon/ │ │ ├── README.md │ │ └── ticktock.md │ ├── Linkedin/ │ │ ├── README.md │ │ └── frontend1.md │ ├── README.md │ └── Uber/ │ └── README.md ├── generales/ │ └── README.md ├── html/ │ └── README.md ├── js/ │ └── README.md ├── package.json ├── tips_interviewees/ │ └── README.md ├── tips_interviewers_and_recruiters/ │ └── README.md └── tricky/ └── README.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: .all-contributorsrc ================================================ { "projectName": "preguntas-y-respuestas-entrevistas-frontend", "projectOwner": "fforres", "files": [ "README.md" ], "imageSize": 60, "commit": true, "contributors": [ { "login": "fforres", "name": "Felipe Torres (fforres)", "avatar_url": "https://avatars.githubusercontent.com/u/952992?v=3", "profile": "http://www.fforr.es", "contributions": [ "code", "question", "review", "doc" ] }, { "login": "YerkoPalma", "name": "Yerko Palma", "avatar_url": "https://avatars.githubusercontent.com/u/5105812?v=3", "profile": "https://yerkopalma.me", "contributions": [ "code", "question" ] }, { "login": "jsDotx3", "name": "Jose Nuñez Ahumada", "avatar_url": "https://avatars.githubusercontent.com/u/6550470?v=3", "profile": "https://twitter.com/jsDotx3", "contributions": [ "code", "question" ] }, { "login": "alantoro", "name": "Alan Toro", "avatar_url": "https://avatars.githubusercontent.com/u/15242024?v=3", "profile": "https://github.com/alantoro", "contributions": [ "doc" ] }, { "login": "hsorellana", "name": "Hugo Soto", "avatar_url": "https://avatars.githubusercontent.com/u/3346428?v=3", "profile": "https://github.com/hsorellana", "contributions": [ "doc" ] }, { "login": "alexandereb", "name": "Alexander Espinoza", "avatar_url": "https://avatars.githubusercontent.com/u/7150994?v=3", "profile": "https://twitter.com/alexander_eb", "contributions": [ "code", "question" ] }, { "login": "yeion7", "name": "Yeison Daza", "avatar_url": "https://avatars3.githubusercontent.com/u/9127504?v=3", "profile": "yeion7.now.sh", "contributions": [ "doc" ] }, { "login": "Xabadu", "name": "Fernando Larrañaga", "avatar_url": "https://avatars0.githubusercontent.com/u/3161019?v=4", "profile": "http://xabadu.com", "contributions": [ "question", "code", "doc", "review" ] } ] } ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* # Runtime data pids *.pid *.seed # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # node-waf configuration .lock-wscript # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules jspm_packages # Optional npm cache directory .npm # Optional REPL history .node_repl_history ================================================ FILE: CONTRIBUTING.md ================================================ #### Intenta que tus respuestas es que sean lo menos "personales" posibles. - Recuerda que mucha gente usa este repo para estudiar, por lo que respuestas del tipo: ***El ultimo proyecto en el que trabajé fue XXXXX*** pueden ser confusas. - Puedes en ese caso agregar tips para postulantes/entrevistadores: - *** Entrevistadores: *** Puedes preguntar por el rol específico dentro de proyecto, que fue lo más complejo, como lidiaron con X o Y problemas. - *** Postulantes: *** Revisa previamente los puntos fuertes o interesantes del proyecto, y como pueden aplicar a la postulación que estás realizando. #### Mantén tus colaboraciones lo más español posible. (No al Spanglish) - Palabras como `Hoisting` y `Closure` están bien, dada la poca utilización de sus traducciones. #### Explicaciones sobre ciertos temas pueden requerir de conocimiento previo. - Es genial si puedes agregar más detalles, imágenes, o links a documentación para profundizar. #### Mantengamos una conversación civilizada :) - Recuerda que es un proyecto Open Source, así que toda colaboración es alguien que regaló horas de su tiempo en crear un pull request. ================================================ FILE: LICENSE ================================================ ## creative commons # Attribution-NonCommercial-ShareAlike 4.0 International Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. ### Using Creative Commons Public Licenses Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. * __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors). * __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees). ## Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. ### Section 1 – Definitions. a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. c. __BY-NC-SA Compatible License__ means a license listed at [creativecommons.org/compatiblelicenses](http://creativecommons.org/compatiblelicenses), approved by Creative Commons as essentially the equivalent of this Public License. d. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. e. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. f. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. g. __License Elements__ means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution, NonCommercial, and ShareAlike. h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License. i. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License. i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. ### Section 2 – Scope. a. ___License grant.___ 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only. 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 3. __Term.__ The term of this Public License is specified in Section 6(a). 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. 5. __Downstream recipients.__ A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. B. __Additional offer from the Licensor – Adapted Material.__ Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply. C. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). b. ___Other rights.___ 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 2. Patent and trademark rights are not licensed under this Public License. 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. ### Section 3 – License Conditions. Your exercise of the Licensed Rights is expressly made subject to the following conditions. a. ___Attribution.___ 1. If You Share the Licensed Material (including in modified form), You must: A. retain the following if it is supplied by the Licensor with the Licensed Material: i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); ii. a copyright notice; iii. a notice that refers to this Public License; iv. a notice that refers to the disclaimer of warranties; v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. b. ___ShareAlike.___ In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply. 1. The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-NC-SA Compatible License. 2. You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material. 3. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply. ### Section 4 – Sui Generis Database Rights. Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only; b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. ### Section 5 – Disclaimer of Warranties and Limitation of Liability. a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__ b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__ c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. ### Section 6 – Term and Termination. a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 2. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. ### Section 7 – Other Terms and Conditions. a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. ### Section 8 – Interpretation. a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. ``` Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. Creative Commons may be contacted at [creativecommons.org](http://creativecommons.org/). ``` ================================================ FILE: README.md ================================================ # Preguntas para entrevistas de Frontend [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors) ## ¿Cómo contribuir? - Con `stars` o `forks`. - Compartiendo el repo en redes sociales. > _Mientras más seamos, mejores preguntas y mejores respuestas._ - Si tienes alguna idea o sugerencia, [crea un issue](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/issues/new) con el tag `IDEA`, `PREGUNTA`, o `SUGERENCIA` - Sube un **Pull Request** para sugerir una pregunta nueva, agregar una respuesta, o complementar/corregir una existente. ## Índice - [Preguntas Generales](./generales) - [HTML (Hyper Text Markup Language)](./html) - [JS (JavaScript)](./js) - [CSS (Cascading Style Sheets)](./css) - [Código y CS (Computer Science)](./cs) - [Performance](./performance) - [Preguntas Truculentas/Divertidas](./tricky) -------------------------------------------------------------------------------- - [Tips para postulantes]('./tips_interviewees') - [Tips para entrevistadores y recruiters]('./tips_interviewers_and_recruiters') ## ¿Por qué este repo? 1. Queremos generar un lugar en español donde recolectar preguntas de entrevistas que nos realizaron y que hemos realizado. 2. Contar con preguntas para realizar en entrevistas para FrontEnd Engineers y Developers. 3. "Open Sourcear" las respuestas :) ## ¿Cómo Vamos? ##### _o "Donde contribuir"_ Item | Preguntas | Respuestas :--------------------------------- | :-------: | ---------: [Preguntas Generales](./generales) | 20 | 1 [HTML](./html) | 15 | 15 [JS](./js) | 39 | 4 [CSS](./css) | 32 | 12 [Codigo/CS](./cs) | 12 | 0 [Perfomance](./performance) | 0 | 0 [Preguntas Truculentas](./tricky) | 0 | 0 [Ejemplos Reales](./ejemplos) Empresa | Preguntas | Respuestas :---------------------------- | :-------: | ---------: [Amazon](./ejemplos/Amazon) | x | x [Uber](./ejemplos/Uber) | x | x [Groupon](./ejemplos/Groupon) | x | x -------------------------------------------------------------------------------- ## Contributors Agradecimientos y kudos a estas geniales personas ([Simbología de Emojis](https://github.com/kentcdodds/all-contributors#emoji-key)): | [
Felipe Torres (fforres)](http://www.fforr.es)
[💻](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=fforres) 💁 👀 [📖](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=fforres) | [
Yerko Palma](https://yerkopalma.me)
[💻](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=YerkoPalma) 💁 | [
Jose Nuñez Ahumada](https://twitter.com/jsDotx3)
[💻](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=jsDotx3) 💁 | [
Alan Toro](https://github.com/alantoro)
[📖](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=alantoro) | [
Hugo Soto](https://github.com/hsorellana)
[📖](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=hsorellana) | [
Alexander Espinoza](https://twitter.com/alexander_eb)
[💻](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=alexandereb) 💁 | [
Yeison Daza](yeion7.now.sh)
[📖](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=yeion7) | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Fernando Larrañaga](http://xabadu.com)
💁 [💻](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=Xabadu) [📖](https://github.com/fforres/preguntas-y-respuestas-entrevistas-frontend/commits?author=Xabadu) 👀 | Este proyecto se adhiere a la especificación de [all-contributors](https://github.com/kentcdodds/all-contributors) por [@kentcdodds](https://github.com/kentcdodds). Contribuciones de todo tipo son bienvenidas. ## Licencia Licencia Creative Commons
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional. ================================================ FILE: cs/README.md ================================================ # Preguntas para entrevistas de Frontend ## Coding / CS ### Preguntas 1. [ ] [¿Cuál es el valor de `bar`?](#1) ```javascript var bar = 10 + '20'; ``` 1. [ ] [¿Cómo harías para crear una función `add` que cumpla con lo siguiente?](#2) ```javascript add(2, 5) // retorna: 7 add(2)(5) // retorna: 7 ``` 1. [ ] [¿Qué retorna lo siguiente?](#3) ```javascript "Me gusta JavaScript".split('').reverse().join(''); ``` 1. [ ] [¿Qué retorna lo siguiente?](#4) ```javascript "me gusta JavaScript".split(' ').map(function(el) { return el.split('').reverse().join(''); }).join(' '); ``` 1. [ ] [¿Qué valor toma `foo` luego de lo siguiente?](#5) ```javascript (window.foo || (window.foo = "bar")) ``` 1. [ ] [¿Qué ocurre al ejecutar lo siguiente?](#6) ```javascript var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); ``` 1. [ ] [En el siguiente código: ¿Qué imprimirán las líneas `console.log(foo.length);`?](#7) ```javascript var foo = []; foo.push(1); foo.push(2); console.log(foo.length); // ?? foo[100] = 0; console.log(foo.length); // ?? ``` 1. [ ] [¿Cuál es el valor de `foo.x`?](#8) ```javascript var foo = {n: 1}; foo.x = foo = {n: 2}; ``` 1. [ ] [¿Qué imprime el siguiente código?](#9) ```javascript console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three'); ``` 1. [ ] [¿Qué retorna `null === undefined`?](#10) 1. [ ] [¿Qué imprime el siguiente código?](#11) ```javascript console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three'); ``` 1. [ ] [Dado el siguiente input:](#12) ```javascript function ASD() { this.text = 'asd'; } ASD.prototype.test = function(cb){ cb(); console.log(this); } ASD.prototype.test2 = function(cb){ cb.bind(this)(); console.log(this); } var asd = new ASD(); var testFunction = function() { console.log(this) }; ``` ¿Qué retorna lo siguente? ```javascript asd.test(testFunction) asd.test2(testFunction) ``` ### Respuestas - [¿Cuál es el valor de `bar`?](#1)
```javascript ``` - [¿Cómo harías para crear una función `add` que cumpla con lo siguiente?](#2)
```javascript ``` - [¿Qué retorna lo siguiente?](#3)
```javascript ``` - [¿Qué retorna lo siguiente?](#4)
```javascript ``` - [¿Qué valor toma `foo` luego de lo siguiente?](#5)
```javascript ``` - [¿Qué ocurre al ejecutar lo siguiente?](#6)
```javascript ``` - [En el siguiente código: ¿Qué imprimirán las lineas `console.log(foo.length);`?](#7)
```javascript ``` - [¿Cuál es el valor de `foo.x`?](#8)
```javascript ``` - [¿Qué imprime el siguiente código?](#9)
```javascript ``` - [¿Qué retorna `null === undefined`?](#10)
```javascript ``` - [¿Qué imprime el siguiente código?](#11)
```javascript ``` - [Dado el siguiente input:](#12) ¿Qué retorna lo siguente? ```javascript ``` ================================================ FILE: css/README.md ================================================ # Preguntas para entrevistas de frontend ## CSS ### Preguntas 1. [x] [¿Cuál es la diferencia entre selectores de ID o CSS?](#1) 1. [x] [¿Cuál es la diferencia entre "resetear" y "normalizar" el CSS (reset.css y normalize.css)? ¿Cuándo elegirias uno u otro?](#2) 1. [x] [Describe la propiedad "float" y como funciona](#3) 1. [ ] [¿Cómo funciona el z-index y el context stacking (contexto de apilamiento) de elementos?](#4) 1. [ ] [¿Conoces alguna de las "técnicas de limpieza" de estilos (clearing techniques)?](#6) 1. [x] [¿Cómo funcionan los sprites de CSS, y cómo los podrías implementar?](#7) 1. [ ] [¿Cuál sería tu approach para solucionar problemas con un browser específico?](#9) 1. [x] [¿Cómo desarrollas sitios con features específicas por navegador?](#10) 1. [ ] [¿Cómo visualizas o ocultas visualmente el contenido (o habilitas la visualización solo para screen readers)?](#12) 1. [x] [¿Has usado un sistema de grid? ¿Cuáles prefieres y por qué?](#13) 1. [x] [¿Has usado media-queries? ¿Para qué?](#14) 1. [ ] [¿Has usado o creado estilos con SVG? ¿En qué situaciones?](#15) 1. [ ] [¿Cómo optimizas tu sitio para imprimir?](#16) 1. [ ] [¿Cuáles son algunos de los "detalles" para escribir CSS eficiente?](#17) 1. [ ] [¿Cuáles son las ventajas/desventajas de usar preprocesadores de CSS?](#18) 1. [ ] [De los preprocesadores que has usado, ¿cuál prefieres y por qué?](#19) 1. [ ] [¿Cómo implementarías un sitio Web que usa tipografías no estándar?](#20) 1. [x] [¿Sabes cómo un browser determina que elementos emparejar con que reglas de CSS?](#21) 1. [ ] [¿Qué son los pseudo-elementos, para qué sirven, dónde y cómo se utilizan?](#22) 1. [x] [Explica el modelo de cajas. (box model)](#23) 1. [ ] [¿Qué hace: `* { box-sizing: border-box; }`? ¿Cuáles son sus ventajas?](#24) 1. [ ] [¿Qué valores existen para "display"?](#25) 1. [x] [¿Cuál es la diferencia entre `inline` and `inline-block`?](#26) 1. [ ] [¿Cuál es la diferencia entre `relative`, `fixed`, `absolute` y `static` al definir la posición de un elemento?](#27) 1. [x] [La 'C' en CSS quiere decir 'Cascading'. ¿Cómo el browser define la prioridad al asignar estilos? ¿Cómo se puede sacar ventaja de esto?](#28) 1. [ ] [¿Qué frameworks de CSS has usado localmente y/o en producción? ¿Cómo los mejorarías?](#29) 1. [x] [¿Has usado Flexbox o Grid? ¿Qué puedes decirme de ellos?](#30) 1. [ ] [¿En qué se diferencia el diseño `responsivo` del diseño `adaptable`?](#31) 1. [ ] [¿Hay alguna razón por la que usarías `translate()` por sobre `position: absolute`, (o viceversa)?](#33) 1. [ ] [¿Qué puedes contarme de postCSS?](#34) 1. [ ] [¿Qué puedes contarme de cssNext?](#35) 1. [ ] [¿Cómo el CSS afecta al `critical-render-path`? (El proceso de "carga, analisis y renderizado" de un sitio Web)](#36) ### Respuestas - #### [¿Cuál es la diferencia entre selectores de ID o CSS?](#1)
- La primera diferencia es en sintaxis, tanto al definirlos en el HTML como en el CSS. ```html
``` ```css #hola { } .hola { } .mundo { } ``` - Un elemento puede tener solo 1 ID, pero múltiples clases. - Dentro de un DOM, los ID's son únicos, pero las clases pueden repetirse entre elementos - Los ID's funcionan como identificador único para navegar dentro de una página. - Al entrar a `http://www.ejemplo.com#hola_mundo` el navegador reconocerá el hash value `hola_mundo` e intentará encontrar el elemento con ID `hola_mundo` y scrollear la página hasta el. - Al estilar, los ID's tienen precedencia sobre las clases. - #### [¿Cuál es la diferencia entre "resetear" y "normalizar" el CSS (reset.css y normalize.css)? ¿Cuándo elegirias uno u otro?](#2)
- Al *resetear* el css (`reset.css`) se busca remover todos los estilos por defecto que los navegadores realizan a un DOM, mientras que al *normalizarlo* (`normalize.css`) busca generar un estilo consistente a lo largo de todos los navegadores. - #### [Describe la propiedad "float" y como funciona. ¿Hay alguna alternativa?](#3)
- La propiedad "float" sirve para posicionar horizontalmente un elemento y acepta 3 argumentos, que pueden ser: izquierda (left), derecha (right) o ninguno (none). De esta forma, se puede situar un contenedor o elemento al lado que deseas. - La alternativa para el caso de un menú con listas, podría ser inline-block. - #### [¿Cómo funciona el z-index y el context stacking (contexto de apilamiento) de elementos?](#4)
- #### [¿Conoces alguna de las "técnicas de limpieza" de estilos (clearing techniques)?](#6)
- #### [¿Cómo funcionan los sprites de CSS, y cómo los podrías implementar?](#7)
Los sprites en CSS hacen referencia a una imagen que puede servir para muchas situaciones. Para implementarlas se puede llamar tanto a la propiedad background-image con background-position por separado, como llamar directamente a la propiedad background y asignar todos los valores en la misma línea. En esta documentación, se explica el uso de la propiedad background, de la cual obtenemos por separado el background-image y background-position. http://www.w3schools.com/css/css_image_sprites.asp - #### [¿Cuál sería tu approach para solucionar problemas con un browser específico?](#9)
- #### [¿Cómo desarrollas sitios Web con features específicos por navegador?](#10)
** Pregunta Abierta ** Algunas solucuiones pueden ser: - Uso de frameworks de CSS para facilitar la homogeneidad. - Preprocesadores de CSS - Post-procesado del CSS al realizar el build del sitio. - Gulp / Grunt / Webpack - PostCSS - #### [¿Cómo visualizas o ocultas visualmente el contenido (o habilitas la visualización solo para screen readers)?](#12)
- #### [¿Has usado un sistema de grid? ¿Cuáles prefieres y porqué?](#13)
Sí, he ocupado son Semantic y Bootstrap 3 y 4. Personalmente, prefiero Bootstrap por el fácil manejo de grillas y como uno encuentra todo mejor documentado, aparte, es super simple y util de ocupar. - [Bootstrap](http://getbootstrap.com/) - [Semantic UI](http://semantic-ui.com/) - #### [¿Has usado media-queries? ¿Para qué?](#14)
Las Media Queries facilitan el desarrollo de un diseño adaptable. Con ellas es posible definir que reglas de CSS respondan a tamaños concretos del viewport. Usando Media Queries, es posible realizar un *diseño adaptable* que a diferencia del responsivo, ocupa unidades de tamaño fijo en conjunto a Media Queries. Puedes aprender más de Media Queries [acá](https://developer.mozilla.org/es/docs/CSS/Media_queries) - #### [¿Has usado o creado estilos con SVGs? ¿En qué situaciones?](#15)
- #### [¿Cómo optimizas tu sitio para imprimir?](#16)
- #### [¿Cuáles son algunos de los "detalles" para escribir CSS eficiente?](#17)
- #### [¿Cuáles son las ventajas/desventajas de usar preprocesadores de CSS?](#18)
- #### [De los preprocesadores que has usado ¿Cuál prefieres y por qué?](#19)
- #### [¿Cómo implementarías un sitio Web que usa tipografías no estándar?](#20)
- #### [¿Sabes cómo un browser determina que elementos emparejar con que reglas de CSS? (Especificidad de selectores)](#21)
Imaginemos un array de 4 espacios en 0 `[0,0,0,0]` donde las reglas de CSS para un elemento se analizan así: - Por cada selector de **tag** o **pseudo selector** `*, li, :nth-child(), :nth-of-type()`, se le suma 1 a la cuarta (4ta) posición - Por cada **clase** o **pseudo clase** se le suma 1 a la tercera (3era) posición. - Por cada **ID** se le suma 1 a la segunda (2da) posición. - Por un **atributo "style"** en el css, se le suma a la primera (1era) posición, ```CSS * {} /* especificidad = 0,0,0,0 */ li {} /* especificidad = 0,0,0,1 */ li:first-line {} /* especificidad = 0,0,0,2 */ ul li {} /* especificidad = 0,0,0,2 */ ul ol+li {} /* especificidad = 0,0,0,3 */ h1 + *[rel=up]{} /* especificidad = 0,0,1,1 */ ul ol li.red {} /* especificidad = 0,0,1,3 */ li.red.level {} /* especificidad = 0,0,2,1 */ #x34y {} /* especificidad = 0,1,0,0 */ #x34y #press {} /* especificidad = 0,2,0,0 */ style="" /* especificidad = 1,0,0,0 */ ``` Luego de adjuntar todos los estilos necesarios a un elemento, se adjuntan los estilos de menor prioridad a mayor, y se sobre-escriben, por ejemplo: ```html

``` En este caso la especificidad sería: ```CSS p {} /* especificidad = 0,0,0,1 */ #mi_id {} /* especificidad = 0,1,0,0 */ style="" /* especificidad = 1,0,0,0 */ ``` Finalmente, el color del contenido de `

` es azul. - OJO: `!important`, toma precedencia por sobre otras reglas del mismo nivel solamente. - Adicionalmente, al haber 2 reglas con la misma especificidad, el navegador selecciona la últma regla definida (la "más reciente"). - #### [¿Qué son los pseudo-elementos, para qué sirven, dónde y cómo se utilizan?](#22)
- #### [Explica el modelo de cajas. (box model)](#23)
![box model screenshot](./box.gif) La propiedad padding hace referencia al espacio que está dentro del contenedor, o caja, a diferencia de la propiedad margin que está relacionada al espacio que está fuera del contenedor. En cuanto a la propiedad border, hace referencia al contorno del contenedor, como la traducción literal lo menciona, es un borde como tal. Todas pueden ser definidas en cuatros posiciones (top, bottom, left, right) y de diferentes medidas de acuerdo a lo necesitado. Adicionalmente, puede usarse una definición corta e indicar los 4 valores en el mismo orden. Ejemplo: `border: 10px 15px 20px 30px` sería igual a ```CSS border-top: 10px border-right: 15px border-bottom: 20px border-left: 30px ``` Básicamente, la diferencia está en el espacio que se otorga, mientras que Padding separa desde adentro hacia afuera del contenedor, border da el contorno y finalmente margin separa hacia afuera del contenedor. - #### [¿Qué hace: `* { box-sizing: border-box; }`? ¿Cuáles son sus ventajas?](#24)
- #### [¿Qué valores existen para "display"?](#25)
- #### [¿Cuál es la diferencia entre `inline` and `inline-block`?](#26)
La diferencia entre la propiedad "inline" e "inline-block" es que la segunda puede afectar a otras directamente, ya que no tiene un largo y ancho definido que no pueda afectar a las demás. Ejemplo práctico: http://jsfiddle.net/Mta2b/ - #### [¿Cuál es la diferencia entre `relative`, `fixed`, `absolute` y `static` al definir la posición de un elemento?](#27)
- #### [La 'C' en CSS quiere decir 'Cascading'. ¿Cómo el browser define la prioridad al asignar estilos? ¿Cómo se puede sacar ventaja de ésto?](#28)
- Relacionado a la [pregunta 21](#21). - Una de las ventajas de que las definiciones sean en "cascada" es la posibilidad de encapsular comportamientos y estilos. Gracias a esto es posible usar CSS para definir características superiores y específicas: Por ejemplo: ```css .link { font-size: 1.3em; } .link:hover { font-size: 1.5em; } .mainArea .link { background-color: red; } .sideBar .link { background-color: blue; } .sideBar .social .link { background-color: teal; } ``` Gracias a esta definición es posible tener en nuestra página 3 tipos de links con un estilo y funcionalidad en común `font-size` y con estilos diferentes dependiendo del área en el que se encuentren. - #### [¿Qué frameworks de CSS has usado localmente y/o en producción? ¿Cómo los mejorarías?](#29)
- ** Pregunta Abierta ** - #### [¿Has usado Flexbox o Grid? ¿Qué puedes decirme de ellos?](#30)
- [FlexBox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) y [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) son 2 módulos de CSS creados para diseñar interfaces en la Web. - Flexbox permite que los elementos se comporten de manera mucho más predecible en diferentes tamaños de pantalla, lo que facilita el diseño de interfaces responsivas. - Grid Layout viene siendo la estandarización de los sistemas de grillas existentes actualmente (Bootstrap, GridCSS, etc). Actualmente es un **working draft**, por lo que no está soportado en producción y su API puede cambiar. - #### [¿En qué se diferencia el diseño `responsivo` del diseño `adaptable`?](#31)
- #### [¿Hay alguna razón por la que usarías `translate()` por sobre `position: absolute`, (o viceversa)?](#33)
- #### [¿Qué puedes contarme de postCSS?](#34)
- #### [¿Qué puedes contarme de cssNext?](#35)
- #### [¿Cómo el CSS afecta al `critical-render-path`? (El proceso de "carga, analisis y renderizado" de un sitio Web)](#36)
================================================ FILE: ejemplos/Amazon/README.md ================================================ Puesto: Front End Engineer. ### Preguntas 1. [ ] Existe un div#main con 2 sub-divs (#div1, #div2) exactamente iguales en estructura. ```html ``` Crea una función (o varias) que encuentre si la posición de `span#mi-otro-span` coincide con la posición de `span#mi-span` en sus respectivos "sub-dom". Extensiones: - ¿Qué pasa si agrego 2 divs en cualquier parte del `div#2`?, ¿cómo modifico la(s) función(es) para que me alerten de incosistencias en el DOM? - Recursividad - (Si usó recursividad): ¿Puedes eliminar la recursividad? - (Si no usó recursividad): ¿Puedes volverlo recursivo? - ¿Qué ventajas hay entre una u otra? - ¿Cómo puedo hacerlo mejorar su performance? ------ 1. [ ] Con el siguiente Objeto obtenido desde una API: ```javascript { data: [{ día: 'Lunes', temp: { max: 29, min: 12, }, presion: '128', viento: '110' }, { día: 'Martes', temp: { max: 29, min: 12, }, presion: '128', viento: '110' }, { día: 'Miercoles', temp: { max: 29, min: 12, }, presion: '128', viento: '110' }, { ... }] city: 'Santiago' } ``` ¿Puedes crear un acordeón (la funcionalidad del gif)? ![accordeon](./accordeon.gif) ¿Con el siguiente formato? ![accordeon example](./accordion_open_close.png) Extensiones: - ¿Puedes volverlo responsive? - (Si usó floats) ¿Puedes no usar Floats? - (Si usó flex) ¿Puedes no usar Flex? - ¿Cómo puedo hacerlo mejorar su performance? ------ 1. [ ] Crea una función que memoize cualquier función: ```javascript funcionAMemoizar(par1, par2, par3); // calcula 6; var memoizada = memoizador(funcionAMemoizar); memoizada(par1, par2, par3); // calcula 6 memoizada(par1, par2, par3); // devuelve 6, pero desde la caché (Ya memoizada, no lo calcula) ``` ------ 1. [ ] Queremos crear el siguiente widget. ![accordeon example](./widget.png) En donde un cliente pueda agregarlo a su sitio mediante un script en el header: ```html ``` En donde `{WIDGET_URL}` es la URL del script que cargará el widget en el sitio del cliente: 1. ¿Cómo debería ser esa URL? 1. ¿Qué tipo de consideraciones deberíamos tener al proveer esta funcionalidad al cliente? 1. Escribe el script que genera dicho widget. 1. ¿Como podemos optimizar el script para performance? 1. ¿Qué podemos hacer para optimizar para navegadores nuevos y viejos por separado? 1. ¿Debería ser responsive? ¿Adaptable? ¿Estático? ### Respuestas ----- ================================================ FILE: ejemplos/Groupon/README.md ================================================ 1. [TICK TOCK](./ticktock.md) ================================================ FILE: ejemplos/Groupon/ticktock.md ================================================ > `TickTock`, un ejercicio interesante y facilmente "complicable" a medida que avanza el mismo. > Es necesario realizar este ejercicio on-site y on-whiteboard. (Para poder ver como se desenvuelve el entrevistado). > Si bien el ejercicio tiene un poco de trivia, por lo que es fácil que el entrevistado se incomode. La idea es hacerlo sentir cómodo e intentar eliminar el estrés propio de la entrevista (acentuado por trivia) para que realice preguntas, comente el ejercicio y las dudas que tenga. ## TickTock Puedes crear una función `tickTock`, que por cada vez que se ejecute, imprima en consola alternadamente `tick` y luego `tock` ```javascript tickTock() // 'tick' tickTock() // 'tock' tickTock() // 'tick' tickTock() // 'tock' ... (y así hasta el infinito) ``` #### Parte 1 ```javascript let auxiliar = true; let tickTock = () => { if (auxiliar) { console.log('tick'); } else { console.log('tock'); } auxiliar = !auxiliar; } ``` #### Parte 2 Realizar lo mismo, pero sin estructuras de control `if` (normales o ternarios), `for` y/o `whiles` (do-whiles) ```javascript let a = 0; let tick = ['tick','tock'] let tickTock = () => { console.log(tick[0+a]); a = !a; } ``` #### Parte 3 Pongámosnos en el caso de que ahora "tick" y "tock", son 2 funciones que manejan otros 2 equipos. La función `tick()`, devuelve `'tick'` y La función `tock()`, devuelve `'tock'`. ¿Podrías modificar tu código para trabajar con esas funciones y no con los strings 'tick' y 'tock'? ```javascript let a = 0; var tick = () => { console.log('tick'); } var tock = () => { console.log('tock'); } const funcs = [tick, tock] let tickTock = () => { funcs[0+a](); a = !a; } ``` #### Parte 4 Asume que tienes un PM complicado para trabajar, y que es alérgico a los arrays. ¿Cómo harías el mismo ejercicio anterior si no pudieras usar arrays? ```javascript /* Opción 1: Usando nuevas funciones + eval. No es un buena práctica, pero soluciona el problema */ let a = 0; var tick = () => { console.log('tick'); } var tock = () => { console.log('tock'); } var tick0 = () => { tick() } var tick1 = () => { tock() } let tickTock = () => { eval(`tick${0+a}()`) a = !a; } /* Opción 2: Usando objetos. Aquí puedes decirle que tampoco puede usar objetos y pasar a la posible 'Opcion 3' */ let a = 0; var tick = () => { console.log('tick'); } var tock = () => { console.log('tock'); } const funcs = { 0: tick, 1:tock } let tickTock = () => { funcs[0+a](); a = !a; } /* Opción 3: Intercambiando en una variable `funct`, referencias a las funciones `tick` y `tock` con cada ejecución y llamando a 'funct' en la funcion `tickTock` */ const funct = tick; const tick = () => { console.log('tick') funct = tock; } const tock = () => { console.log('tock'); funct = tick; } const tickTock = () => { funct(); } ``` ================================================ FILE: ejemplos/Linkedin/README.md ================================================ ### LinkedIn - [Front End Interview 1](./frontend1.md) ================================================ FILE: ejemplos/Linkedin/frontend1.md ================================================ ### Pregunta 1 1. Dada las siguientes funciones, ¿podrías decirme cuál es el resultado de las últimas 3 líneas? ```javascript var Foo = function( a ) {+ var baz = function() { return a; }; this.baz = function() { return a; }; }; Foo.prototype = { biz: function() { return a; } }; var f = new Foo( 7 ); f.bar(); // bar function is not defined f.baz(); // 7 f.biz(); // a undefined ``` ##### Respuesta ```javascript f.bar(); // bar function is not defined f.baz(); // 7 f.biz(); // a undefined ``` 2. ¿Podrías modificar el código de f.bar() para que retorne `7`? ##### Respuesta Solo necesitas agregar `baz` como una función del `this` en el constructor de `Foo` ```javascript var Foo = function( a ) {+ this.bar = function() { return a; }; this.baz = function() { return a; }; }; Foo.prototype = { biz: function() { return a; } }; var f = new Foo( 7 ); f.bar(); // bar function is not defined f.baz(); // 7 f.biz(); // a undefined ``` 3. ¿Podrías modificar el código para que `f.biz()` también retorne `7`? ##### Respuesta Necesitas agregar `a` como un parámetro del `this` en el constructor de `Foo`. De esa manera puedes acceder `a` desde la funcion `biz()`, utilizando `this.a`. ```javascript var Foo = function( a ) { this.a = a; // Add a reference to A this.bar = function() { return a; }; this.baz = function() { return a; }; }; Foo.prototype = { biz: function() { return this.a; } }; var f = new Foo( 7 ); f.bar(); // bar function is not defined f.baz(); // 7 f.biz(); // a undefined ``` 4. Imagina que por alguna razón (Aliens 👽 probablemente), no podemos asignar la variable `a` a nada, por lo que realizar `this.a = a` no es posible. ¿Cómo podríamos obtener el mismo resultado que en la pregunta anterior? (Que `f.biz()` retorne `7`); ```javascript var Foo = function( a ) {+ // this.a = a; this.bar = function() { return a; } this.baz = function() { return a; }; this._biz = function() { return a; }; }; Foo.prototype = { biz: function() { return this._biz(); } }; var f = new Foo( 7 ); f.bar(); // here bar function is not defined f.baz(); // 7 f.biz(); // a undefined ``` ### Pregunta 2 En tu perfil de LinkedIn la gente puede validar tus habilidades. Dado el siguiente array de validaciones: ```javascript var endorsements = [ { skill: 'css', user: 'Bill' }, { skill: 'javascript', user: 'Chad' }, { skill: 'javascript', user: 'Bill' }, { skill: 'css', user: 'Sue' }, { skill: 'javascript', user: 'Sue' }, { skill: 'html', user: 'Sue' } ]; ``` ¿Cómo podrías ordenarlo de la siguiente forma?: ```javascript [ { skill: 'css', users: [ 'Bill', 'Sue', 'Sue' ], count: 2 }, { skill: 'javascript', users: [ 'Chad', 'Bill', 'Sue' ], count: 3 }, { skill: 'html', users: [ 'Sue' ], count: 1 } ] ``` ##### Respuesta ```javascript const sortEndorsedArrays = (endorsements) => { const ob = {}; endorsements.forEach(el => { if(!ob[el.skill]) { ob[el.skill] = { skill: el.skill, users: [], count: 0, } } ob[el.skill].user.push(el.user); ob[el.skill].count += 1; }) let modifiedArray = []; Object.keys(ob).forEach(el => { modifiedArray.push(ob[el]) }) return modifiedArray; } ``` > Bro tip: > Un objeto A puede ser asignado en alguna parte a otro objeto B (o un array). Esa nueva asignación es solo una referencia al objeto A, así que podríamos cambiar el código para que haga uso de esto. > Y salvarnos toooooda una iteración! 💪 ```javascript const sortEndorsedArrays = (endorsements) => { const ob = {}; const modifiedArray = []; endorsements.forEach(el => { if(!ob[el.skill]) { /* It happen from here: ----> */ const endorsementObject = { skill: el.skill, users: [], count: 0, } ob[el.skill] = endorsementObject; modifiedArray.push(endorsementObject); /* To here <------- */ } ob[el.skill].user.push(el.user); ob[el.skill].count += 1; }) return modifiedArray; } ``` ##### Explicación Creamos el mismo `endorsementObject`, bastante parecido a la versión anterior, salvo que: 1. Guardamos `endorsementObject` en el objeto y en el array. 2. Esto nos sirve para usar las ventajas de un objeto con, por ejemplo, tiempos de búsqueda (Si usamos una llave única como `ob[el.skill]`) 3. Como al mismo tiempo el mismo objeto lo ponemos en un array, asi la estructura final que buscábamos se completa a medida que iteramos sobre el array `endorsements`. 4. Esto sucede porque como en ambos lados (`ob` y `modifiedArray`) el mismo objeto apunta a la misma referencia, entonces al modificarlo en el objeto `ob`, modificamos la referencia, por lo que se aprecian los cambios también en `modifiedArray` Lo que si, puede usar un poco más de memoria, pero la ventaja es que nos ahorramos toda una iteración en el array final. Depende mucho del contexto en el que se use el problema. (Ordenar 10M de elementos en un smartwatch con poca memoria, no es lo mismo que en un server). ----- #### Pregunta 3 ¿Puedes replicar el markup (HTML) de lo siguiente? ![](./user_line.png) > Lo que nos interesa más en esta ocasión son los rows por usuario, no tanto el header y el body, o el padding del contenedor, etc. > Queremos que el template para un solo elemento, podemos asumir que haremos un .map sobre el array y reutilizaremos el template para cada iteración. Es una pregunta abierta, no tiene una respuesta válida. Es mucho más facil usar un approach con flexbox, pero también puedes hacerlo de otras maneras (`position absolute`, `float left y right`, etc) Comentar eso es buena idea :) Como pregunta abierta, es siempre útil preguntar mucho para acotar el problema, aclarar cosas, y demostrar tu capacidad de análisis pre-código. Por ejemplo, podrías preguntar lo siguiente: - ¿Hay alguna accion que esto tenga que realizar? Si el botón de cerrado (`x`) tiene que eliminar la fila completa, o un efecto on-hover, etc. ¿La idea es crear CSS + HTML solamente, o JS también? ¿Debe ser responsivo? ¿Hay alguna limitación? (¿Debe ser mobile?) ###### Tips - Recuerda pensar en accesibilidad. - Usa `li` para los items de una lista (y no `divs`) - Usa botones para las acciones por sobre `div` o `a`. ```css .row { display: flex; justify-content: space-between; padding: 0.5em; } .image { width: 100px; } .rowBody { flex-grow:2; display: flex; flex-direction: column; } .close { align-self: flex-start; width: 40px; } .description .profileLink { text-decoration: none; } .rowBody .description .name { /* bold */ } ``` ```html
  • Jack Smith kaskjlasjlas
    • ``` ================================================ FILE: ejemplos/README.md ================================================ # Ejemplos Ejemplos de preguntas a entrevistas en algunas empresas: ##### [Amazon](./Amazon) ##### [Uber](./Uber) ##### [Groupon](./Groupon) ================================================ FILE: ejemplos/Uber/README.md ================================================ Puesto: Front End Engineer. ### Preguntas 1. [ ] En una matriz de NxN, con M puntos puestos en la matriz al azar, encontrar todos los puntos que pasan por una línea cualquiera. 1. [ ] Si tengo las siguientes funciones: ```javascript function buscarEnFacebook(texto, callback) { /* Hace algunas cosas y las guarda en "result" */ if (result.error) { callback(error, result.error) } else { callback(null, result.data); } } function buscarEnGithub(texto, callback) { /* Hace algunas cosas y las guarda en "result" */ if (result.error) { callback(error, result.error) } else { callback(null, result.data); } } ``` - ¿Qué debería hacer para usar la funcionalidad con promesas y no callbacks? - ¿Puedes replicar la siguiente API? ```javascript buscador('hola') .facebook() .github() .then((data) => { // data[0] = data de Facebook // data[1] = data de GitHub }) .catch(error => { // error[0] = error de Facebook // error[1] de GitHub }) ``` - A la solución anterior - ¿Cómo podrías mejorar la API de la función? - ¿Cómo podrías agregarle otra búsqueda? - ¿Cómo solucionas el problema de si una API entrega un error, mientras las otras devuelven data? 1. ¿Qué puntos débiles mejorarías de JavaScript? ================================================ FILE: generales/README.md ================================================ # Preguntas para entrevistas de Frontend ## Generales *** Este set de preguntas generales considera preguntas abiertas a propósito. *** *** Busca generar una conversación, más que escuchar al entrevistado dar una respuesta unitaria o exacta *** *** La idea es que con estas preguntas pueda el entrevistado expresarse y mostrar su conocimiento de una manera relajada y con menos presión *** ### Preguntas 1. [ ] [¿Qué es lo que más te gusta de codear / programar?](#1) 1. [ ] [¿Cuál fue el último desafío técnico que tuviste?](#2) 1. [ ] [¿Cuál ha sido el desafío tecnológico más grande que has enfrentado?](#3) 1. [x] [¿Qué consideraciones tendrías que tener para hacer para que tu sitio Web tenga mejor rendimiento?](#4) 1. [ ] [¿Qué consideraciones de Seguridad, SEO, Performance, UI, UX, Tecnología, Mantenibilidad y Tamaño debes tener para hacer una Webapp?](#5) 1. [ ] [¿Cómo debugueas tu Webapp?](#6) 1. [ ] [¿Qué aprendiste esta semana?](#7) 1. [ ] [¿Cuál es tu stack de desarrollo actual?](#8) 1. [ ] [¿Cuál es tu stack de desarrollo preferido?](#9) 1. [ ] [Si tuvieras 4 hojas de estilo que tu sitio usa, ¿cómo las integrarías?](#10) 1. [ ] [Tu sitio está funcionando lento, ¿Cómo lo arreglas?](#11) 1. [ ] [¿Cómo optimizarías los assets de un sitio Web? (CSS / JS).](#12) 1. [ ] [Nombra 3 maneras de disminuir el tiempo de carga de un sitio Web (Tiempo de carga real o el percibido por el usuario).](#13) 1. [ ] [¿Cómo crearías un slideshow / carrusel de imágenes?](#14) 1. [ ] [Llegas a tu nuevo trabajo y ves que todo el codebase usa tabs, pero tú usas espacios. ¿Qué haces?](#15) 1. [ ] [¿Qué es el FOUC? (`Flash of unstyled content` o `Flash de Contenido sin Estilar`).](#16) 1. [x] [¿Qué es `ARIA` y `Screen Readers`?](#17) 1. [ ] [¿Cómo haces un sitio Web accesible?](#18) 1. [ ] [¿Cuáles son los pros y contras de usar animaciones de CSS vs animaciones de JavaScript?](#19) 1. [ ] [¿Qué es CORS?](#20) ### Respuestas 1. [¿Qué es lo que más te gusta de codear / programar?](#1)
    ** Pregunta personal, la idea es con esto generar una conversación ** 1. [¿Cuál fue el último desafío técnico que tuviste?](#2)
    ** Pregunta personal, la idea es con esto generar una conversación ** 1. [¿Cuál ha sido el desafío tecnológico más grande que has enfrentado?](#3)
    ** Pregunta personal, la idea es con esto generar una conversación ** 1. [¿Qué consideraciones tendrías que tener para hacer para que tu sitio Web tenga mejor rendimiento?](#4)
    Existen muchas respuestas correctas, sobretodo considerando que en una entrevista no tienes 3 horas para hablar de todas las formas en que podrías mejorar el rendimiento de una aplicación. (Ojo, que esta pregunta no se trata de decir "Usaría google-pagespeed y seguiría las recomendaciones") Algunas sugerencias de temas que impactan al rendimiento: - Relacionado a la Red - Revisar la compresión de los archivos que estás descargando (¿Tu servidor los comprime previamente?) - ¿Está el navegador cacheando archivos que no cambiarán tan seguido? - ¿Estás minificando tus CSS/JS en producción? - Relacionado al tiempo hasta el primer renderizado (En esta parte influye el [critical rendering path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)) - ¿Estás "demorando" el parseo de archivos de JS que no son necesarios para la carga inicial de la página? [

    Hello Shadow DOM

    ``` ```javascript const header = document.createElement('header'); const shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.innerHTML = `

    Hello Shadow DOM

    `; // También se podría usar appendChild(). document.body.appendChild(header); ``` Teniendo estos 2 elementos `

    Hello Shadow DOM

    `, uno siendo creado y estilado mediante el uso de Shadow DOM y el otro siendo creado por la interpretación del DOM, el navegador muestra lo siguiente: ![](./shadow_dom.png) ================================================ FILE: js/README.md ================================================ # Preguntas para entrevistas de frontend ### JavaScript ### Preguntas 1. [x] [Explica la delegación de eventos](#1) 1. [x] [Explica cómo funciona `this` en JavaScript](#2) 1. [ ] [Explica cómo funciona la herencia de prototipos](#3) 1. [ ] [¿Qué opiniones tienes de AMD versus CommonJS?](#4) 1. [ ] [¿Por qué este snippet no funciona como una función autoejecutable, si tiene el paréntesis al final? ¿Cómo debería ser?](#5) ```javascript function hola(){ console.log('mundo'); }() ``` 1. [ ] [¿Cuál es la diferencia entre una variable: `null`, `undefined` y no declarada?](#6) 1. [x] [¿Qué es un closure? ¿Cómo y por qué usarías uno? ¿Podrías darme un ejemplo de uso?](#7) 1. [ ] [¿Qué es una función anónima? ¿Dónde usarías una? ¿Cuál es la desventaja de ellas?](#8) 1. [ ] [¿Cuál es la diferencia entre un objeto "host" y un objeto "nativo"?](#9) [Revisa aquí](http://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-h) 1. [ ] [¿En qué difieren las siguientes expresiones?](#10) ```javascript // expresión 1 function Hola() {} // expresión 2 var hola = new Hola() // expresión 3 var hola = Hola() ``` 1. [ ] [¿En que se diferencia `Function.call()` y `Function.apply()`?](#11) 1. [ ] [¿Explícame `Function.prototype.bind` ?](#12) 1. [ ] [¿Cuál es la diferencia entre detección de features, inferencia de features y usar el string UA?](#13) 1. [ ] [Explícame AJAX.](#14) 1. [ ] [¿Qué ventajas y desventajas tiene el usar AJAX?](#15) 1. [ ] [¿Qué es JSONP?](#16) 1. [x] [Explícame Hoisting](#17) 1. [ ] [¿Cuáles son las ventajas/desventajas de usar clases en ES6?](#18) 1. [ ] [Describe el 'event bubbling'](#19) 1. [ ] [¿Cuál es la diferencia entre `==` y `===`?](#20) 1. [x] [Haz que esto funcione](#21) ```javascript [2,3,5,6].replicate() // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(1) // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(2) // [2,3,5,6,2,3,5,6,2,3,5,6] ``` 1. [ ] [¿Tienes un ejemplo de una expresión ternaria? ¿Por qué "ternaria"?](#22) 1. [ ] [¿Por qué es generalmente una buena idea no agregar cosas al scope global de un sitio Web (window)?](#23) 1. [ ] [¿Por qué usarías el evento "load"? ¿Ventajas y desventajas? ¿Alternativas?](#24) 1. [ ] [¿Cómo harías una SPA (Single page application) "SEO Friendly"?](#25) 1. [ ] [¿Qué ventajas tiene el usar promesas?](#26) 1. [ ] [Además de callbacks, ¿qué otras maneras existen de trabajar con asincronía en JavaScript?](#27) 1. [ ] [Teniendo lo siguiente:](#28) ```javascript function buscarTextoAsíncronamente(texto, callback) { const resultado = funcionQueBuscaTextoEnUnOrigen(texto); if (resultado) { callback(null, resultado); } else { callback(error, result) } } ``` ¿Qué se debería hacer para poder usar la misma funcionalidad pero con promesas? 1. [ ] [¿Por qué debería usar o no usar un lenguaje que transpile o compile a JavaScript? ¿Qué ventajas o desventajas existen?](#29) 1. [ ] [¿Cómo debugueas tu código de JavaScript?](#30) 1. [ ] [¿Cómo puedo iterar sobre un objeto y un array?](#31) 1. [ ] [¿Conoces cómo funciona `[].map()`?](#32) - Crea una función que realice lo mismo pero para objetos. (Que reciba como 1er parámetro un objeto, y como 2do parámetro una función que se ejecutará sobre cada par llave/valor). - Cambia la función para que pueda recibir como primer parámetro un Array o un Objeto - Puedes replicar `[].map()` en `{}.map()`? 1. [ ] [Explícame la diferencia entre `let`, `const` y `var`.](#33) 1. [ ] [Explícame la diferencia entre síncrono y asíncrono.](#34) 1. [ ] [¿Qué es event loop?](#35) 1. [ ] [¿Cuál es la diferencia entre `call stack` y `task queue`?](#36) 1. [ ] [Además de "porque se ve más bonito" ¿por qué debería usar arrow functions `() => {}`?](#37) 1. [ ] [¿Qué diferencia existe en el uso de `hola` entre estas expresiones?](#39) ```javascript // expresión 1 function hola(){} // expresión 2 var hola = function(){} // expresión 3 var hola = () => {} ``` 1. [ ] [¿Qué es y por qué usar o no Transpiladores? (Babel o buble)](#39) 1. [ ] [¿Qué propuestas de JavaScript es la que más te gustaría/interesa que sea aprobada?](#40) ### Respuestas 1. [Explica la delegación de eventos:](#1)
    Es una técnica que permite agregar un *controlador de eventos* (EventHandler) en un elemento padre a fin de no tener que agregar múltiples *controladores de eventos* en los hijos. ***Explicación extensa:*** La delegación de eventos en JavaScript hace uso de 2 conceptos existentes, el *Burbujeo de Eventos* (Event Bubbling) y el *Elemento Objetivo* (Target Elemento). El Burbujeo de eventos es la funcionalidad de que cualquier evento disparado en un elemento, es también disparado en los elementos padres del mismo. ```html
    1. item 1
    2. item 2
    ``` ```javascript document.getElementById('ol').addEventListener('click', () => { console.log('ol clickeado') }) document.getElementById('li1').addEventListener('click', () => { console.log('li1 clickeado') }) document.getElementById('li2').addEventListener('click', () => { console.log('li2 clickeado') }) ``` Al hacer click en un elemento 'li', se disparan ambos eventos (li y ol); [(Ejemplo en JS Bin)](https://jsbin.com/bewosoyobo/edit?html,js,console,output) Podemos comprender el elemento objetivo si cambiamos un poco el código de JS ```javascript document.getElementById('ol').addEventListener('click', (e) => console.log(e.target, e.currentTarget)) document.getElementById('li1').addEventListener('click', (e) => console.log(e.target, e.currentTarget)) document.getElementById('li2').addEventListener('click', (e) => console.log(e.target, e.currentTarget)) ``` [(Ejemplo en JS Bin)... abre tu consola de desarrollo para verlo mejor](https://jsbin.com/qizezi/edit?html,js,console,output#H:L10) Hacer click en `li1` imprime lo siguiente: ![event delegation](./event_delegation.png) Por lo que un evento contiene la propiedad `target` como `currentTarget`. `target` es el elemento del cual se disparó el evento, mientras que `currentTarget` es el elemento al cual fue adjuntado el `eventHandler`. (Por eso en el primer `console.log` son iguales, y en el segundo distintos). Nos podemos aprovechar de esto para realizar delegación de eventos. ```html
    1. item 1
    2. item 2
    3. item 3
    4. item 4
    5. item 5
    6. item 6
    ``` ```javascript document.getElementById('ol').addEventListener('click', (e) => { if (e.target.tagName === 'LI' ) { console.log('desde: ' + e.target.id); } }) ``` [Ejemplo en JSBin acá](https://jsbin.com/qavexu/2/edit?html,js,console,output) En este nuevo ejemplo, necesitamos solo definir un administrador de eventos (Event Handler) para poder realizar acciones con cada uno de los LI. A esta técnica se le conoce como "Event Delegation". 1. [Explica como funciona `this` en JavaScript](#2)
    La palabra reservada `this` hace referencia al contexto de ejecución actual, y en la mayoría de los casos, su valor es determinado dependiendo de como se llamó a la función en que se declaró. Existen una serie de factores que cambian el comportamiento de `this` en javascript **Modo estricto** En modo estricto (usando `'use strict'`), el valor de `this` es por defecto `undefined`, esto debido a razones de [performance y seguridad](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Securing_JavaScript), aunque el valor de `this` aún puede modificarse usando `bind`, `call` o `apply`. Este no es el caso para el modo no estricto. Por ejemplo ```js function f1(){ return this; } // En el browser f1() === window; // En modo estricto, esto retorna false ``` **`this` en objetos** Cuando se usa `this` en el método de un objeto, su valor hace referencia al objeto en que es invocado, **independiente del contexto en que se declara el método**. Por ejemplo, ```js var o = {p: 37}; function fn() { return this.p; } o.f = fn; console.log(o.f()); // 37 ``` **`bind`, `call` y `apply`** El valor de `this` puede ser manualmente modificado al momento de ejecutar una función, usando los métodos mencionados. `call` y `apply` funcionan de forma similar, llaman a una función pasando como parametro el valor de `this` de forma explicita ```js function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 ``` Por otro lado, bind asigna un valor al `this` de una función de forma permanente a una nueva función ```js var add2 = add.bind({a:1, b:3}) add2(1, 2) // 1 + 3 + 1 + 2 = 7 ``` **arrow functions** Las funciones de flecha asignan el valor de `this` al contexto _'padre'_ del contexto de ejecución. Independiente de si son llamadas directamente, o como método de un objeto, tampoco se puede cambiar el valor de `this` con las funciones `bind`, `call` y `apply`. 1. [Explica cómo funciona la herencia de prototipos](#3)
    1. [¿Qué opiniones tienes de AMD versus CommonJS?](#4)
    1. [¿Por qué este snippet no funciona como una función autoejecutable: `function hola(){console.log('mundo')}()` si tiene el paréntesis al final? ¿Cómo debería ser?](#5)
    1. [¿Cuál es la diferencia entre una variable: `null`, `undefined` y no declarada?](#6)
    **undefined:** Como JavaScript es un lenguaje de programación débilmente tipado nos permite hacer cosas muy flexibles como por ejemplo declarar una variable sin especificar su tipo. En términos prácticos sería declarar una variable sin valor. (Cabe destacar que JS en tiempo de ejecución asigna el tipo de variable dependiendo del valor que esta tenga) Ejemplo: ```javascript var a = 123; // El valor que contiene es un numero por ende JavaScript cataloga a la variable "a" de type Number. var b; // La variable "b" fue declarada pero no fue definido ningún valor en ella, por ende es de caracter undefined. ``` En resumen, si declaras una variable en JS y no le asignas valor alguno, por defecto es una variable undefined. **null:** Representa la ausencia de contenido. Esto quiere decir que en sí mismo `null` es un valor el cual no tiene contenido. Por otra parte el intérprete de JS a las variables null le asigna el tipo de variable `Object`. Este es un comportamiento extraño en el que puedes ver una explicación más detallada en el libro de Nicholas C. Zakas "THE PRINCIPLES OF OBJECT-ORIENTED JAVASCRIPT". Aquí un pequeño extracto del libro donde explica un poco este comportamiento: *When you run typeof null, the result is "object". But why an object when the type is null? (In fact, this has been acknowledged as an error by TC39, the committee that designs and maintains JavaScript.* **no declarada:** Como la expresión lo dice, son variables que no han sido declaradas con la palabra reservada `var`, (en ES6 también podemos declarar variables con `let` y `const`). Si queremos guardar el resultado de una operación en una variable no declarada, JavaScript crea una variable global con el identificador no declarado (nombre de la variable) y le asigna el valor de la operación Ejemplo: ```javascript number = 3 + 6; // La variable number no ha sido declarada y por lo que JavaScript crea la variable global `number` y le asigna el resultado de la operación. ``` Por otra parte si solo queremos acceder a una variable no declarada sin pasarle ningún valor nuestro código fallara, ya que JavaScript no tiene conocimiento de dicha variable. Puedes hacer la prueba abriendo tu consola del navegador, escribir una palabra y darle enter; Deberías ver un mensaje como: `Uncaught ReferenceError: variable_no_declarada is not defined` 1. [¿Qué es un closure? ¿Cómo y por qué usarías uno? ¿Podrías darme un ejemplo de uso?](#7)
    Un closure es una característica que tiene JavaScript de que una función al ejecutarse, recuerde el entorno en la que fue creada. Por ejemplo: ```javascript function bar() { var text = 'mundo'; function foo() { console.log('hola ' + text); } foo(); } bar(); ``` Esta funcion imprimirá 'hola mundo', sin ningun problema. Ahora, consideremos lo siguiente: ```javascript var text = 'fforres'; function bar() { var text = 'mundo'; function foo() { console.log('hola ' + text); } return foo; } var willItPrint = bar(); willItPrint(); ``` Si bien estamos definiendo en 2 lugares la variable `text`, al momento de definir la función `foo` la variable `text` tiene el valor de 'mundo'. La funcion `foo` la estamos devolviendo y guardando en la variable `willItPrint` por lo que independiente de el momento en el que llamemos a la funcion guardada en esa variable, el resultado será: "hola mundo"; 1. [¿Qué es una función anónima? ¿Dónde usarías una? ¿Cuál es la desventaja de ellas?](#8)
    1. [¿Cuál es la diferencia entre un objeto "host" y un objeto "nativo"?](#9)
    ```javascript // http://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-h ``` 1. [¿En qué difieren las siguientes expresiones `function Hola() {}`, `var hola = new Hola()` y `var hola = Hola()`?](#10)
    1. [¿En qué se diferencia `Function.call()` y `Function.apply()`?](#11)
    1. [¿Explícame `Function.prototype.bind` ?](#12)
    1. [¿Cuál es la diferencia entre detección de features, inferencia de features y usar el string UA?](#13)
    1. [¿Explícame AJAX?](#14)
    1. [¿Qué ventajas y desventajas tiene el usar AJAX?](#15)
    1. [¿Qué es JSONP?](#16)
    1. [Explícame Hoisting](#17)
    Hoisting es una característica de JavaScript que empuja todas las declaraciones (no las asignaciones) de variables al inicio de su scope (Al momento de interpretar incialmente el código, previo a su ejecución) ```javascript function foo() { bar(); var x = 1; } ``` Es interpretada de la siguiente manera: ```javascript function foo() { var x; bar(); x = 1; } ``` Lo que se "mueve" hacia arriba es la declaración de la variable, no la asignación de un valor a ella. En una declaración de función (`Function Declaration`), son "movidas" tanto su declaración como asignación, no así en una expresión de función (`Function Expresion`) Por ejemplo: ```javascript function ejemploDeHoisting() { bar(); // Esto imprimirá "hola" foo(); // Esto imprimirá "foo is not a function" var foo = function () { // Esto es una `Function Expresion` asignada a la variable Foo. alert("Mundo"); } function bar() { // `Function Declaration` con el nombre bar alert("Hola"); } } ejemploDeHoisting(); ``` 1. [¿Cuáles son las ventajas/desventajas de usar clases en ES6?](#18)
    1. [¿Describe el 'event bubbling'?](#19)
    1. [¿Cuál es la diferencia entre `==` y `===`?](#20)
    1. [Haz que esto funcione:](#21)
    ```javascript [2,3,5,6].replicate() // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(1) // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(2) // [2,3,5,6,2,3,5,6,2,3,5,6] ``` Para hacer funcionar el código anterior, es necesario [extender el prototipo](#3) de los objetos tipo [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Es necesario señalar que [es una mala practica extender el prototipo de objetos nativos](https://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/), pero solo para este ejemplo mostraremos como hacerlo. Para hacerlo, vamos a usar un [polyfill](https://en.wikipedia.org/wiki/Polyfill), que es básicamente, una forma de extender una funcionalidad de un objeto, en caso de que no sea implementada de forma nativa en distintos ambientes (actualmente no existe la función `replicate` para arreglos). El código es el siguiente: ```js if (!Array.prototype.replicate) { // 1 Array.prototype.replicate = function (n) { if (n === undefined) { // 2 n = 1 } var copy = this.slice(0) // 3 var arr = this for(var i = 0; i < n; i++) { arr = arr.concat(copy) // 4 } return arr } } ``` Repasemos el código de arriba, las secciones relevantes están marcadas con números en los comentarios: 1. La primera línea indica que este código solo se ejecutará si **no existe la función `replicate` para los objetos de tipo `Array`**. Si bien actualmente no existe dicha función, en un futuro puede ser implementada, y es recomendado siempre preferir las implementaciones nativas. 2. La segunda línea asigna un valor por defecto al parámetro `n`. Existen distintas formas de asignar valores por defecto (otra forma muy popular para asignar valores por defecto es usando el operador lógico OR (||)), pero en este caso sería ```js n = n || 1 ``` Ahora bien, esta forma de asignar valores [no es recomendada](http://www.codereadability.com/javascript-default-parameters-with-or-operator/) para este caso, ya que evalua valores que _parecen falsos(falsy)_, entre ellos 0. Si se hubiese escogido ese metodo, se hubiese dado que `[2,3,5,6].replicate(0) === [2,3,5,6].replicate() === [2,3,5,6].replicate(1)`, lo que es incorrecto. 3. Usamos el método `slice` para [crear un nuevo arreglo a partir del original](https://davidwalsh.name/javascript-clone-array) y replicarlo. 4. Finalmente, concatenamos el arreglo original con la copia, tantas veces como lo indique el parametro `n`. Como en todos los programas, es posible que existan mejores implementaciones de código, pero lo anterior cubre lo necesario para implementar de forma segura las funciones requeridas. Como últimas consideraciones, es necesario indicar que: a) el código es compatible con Node y el navegador y b) por compatibilidad, se consideró ECMAScript 5. En particular hubiese sido útil el uso de [parametros por defecto](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) que define ECMAScript 2015. 1. [¿Tienes un ejemplo de una expresión ternaria? ¿Por qué "ternaria"?](#22)
    1. [¿Por qué es generalmente una buena idea no agregar cosas a scope global de un sitio Web? (window) ?](#23)
    1. [¿Por qué usarías el evento "load"? ¿Ventajas y desventajas? ¿Alternativas?](#24)
    1. [¿Cómo harías una SPA (Single page application) "SEO Friendly"?](#25)
    1. [¿Qué ventajas tiene el usar promesas?](#26)
    1. [Además de callbacks, ¿Qué otras maneras existen de trabajar con asincronía en JavaScript?](#27)
    1. [Teniendo lo siguiente:](#28)
    ```javascript function buscarTextoAsíncronamente(texto, callback) { const resultado = funcionQueBuscaTextoEnUnOrigen(texto); if (resultado) { callback(null, resultado); } else { callback(error, result) } } ``` ¿Qué debería hacer para poder usar la misma funcionalidad, pero con promesas? 1. [¿Por qué debería usar o no usar un lenguaje que transpile o compile a JavaScript? ¿Qué ventajas o desventajas existen?](#29)
    1. [¿Cómo debugueas tu código de JavaScript?](#30)
    1. [¿Cómo puedo iterar sobre un objeto y un array?](#31)
    1. [¿Conoces como funciona `[].map()`?](#32)
    - Crea una función que realice lo mismo, pero para objetos. (Que reciba como 1er parámetro un objeto, y como 2do parámetro una función que se ejecutará sobre cada par llave/valor). - Cambia la función para que pueda recibir como primer parámetro un Array o un Objeto - Puedes replicar `[].map()` en `{}.map()`? 1. [Explícame la diferencia entre `let`, `const` y `var`.](#33)
    1. [Explícame la diferencia entre síncrono y asíncrono.](#34)
    1. [¿Qué es event loop?](#35)
    1. [¿Cuál es la diferencia entre `call stack` y `task queue`?](#36)
    1. [Además de "porque se ve más bonito" ¿Por qué debería usar arrow functions `() => {}`?](#37)
    1. [¿Qué diferencia existe en el uso de `hola` entre `function hola(){}`, `var hola = function(){}` y `var hola = ()=>{}`?](#39)
    1. [¿Qué es y por qué usar o no Transpiladores (Babel, o buble)?](#39)
    1. [¿Qué proposals de JavaScript es la que más te gustaría/interesa que sea aprobada?](#40)
    ================================================ FILE: package.json ================================================ { "name": "preguntas-y-respuestas-entrevistas-frontend", "version": "1.0.0", "main": "index.js", "repository": { "url": "git@github.com:fforres/preguntas-y-respuestas-entrevistas-frontend.git", "type": "git" }, "author": "fetorres ", "license": "MIT", "dependencies": { "all-contributors-cli": "^3.0.7" }, "scripts": { "add-contributor": "all-contributors add", "generate": "all-contributors generate" } } ================================================ FILE: tips_interviewees/README.md ================================================ # Preguntas para entrevistas de Frontend ## Tips para postulantes ================================================ FILE: tips_interviewers_and_recruiters/README.md ================================================ # Preguntas para entrevistas de Frontend ## Tips Entrevistadores y recruiters ================================================ FILE: tricky/README.md ================================================ # Preguntas para entrevistas de Frontend ## Truculentas