More Frontend Questions - SEIR-59/course-wiki GitHub Wiki

Interview Questions

  • Easy Questions

    1. Please share a paragraph evaluating the below CSS. Don’t worry about rewriting it. We just want to know what you like and/or dislike about it.

      • CSS Snippet

        .container{
          display: flex; 
          flex-flow: row wrap; 
          justify-content: center; 
        }
        
        .card{
          padding: 1em; 
          width: calc(25% -4rem -2px);
          border: 1px solid black; 
          margin-left: 1em; 
          margin-right: 1em; 
          margin-top: 2em; 
        }
        
        @media (max-width: 500px){
          .card{
            width: 100%
          }
        }
        
        h1{
          text-decoration: underline; 
        }
        .card__description{
          font-size: 1.5em;
        }
        
    2. What is your favorite project you have worked on?

    3. What did you contribute to this project ?

    4. What were some of the challenges you faced?

    5. What is the difference between == and === ? When is it appropriate to use one over the other?

    6. What is your favorite ES6 feature? Why? What’s an example of how one would use it?

    7. What is the difference between Global and Block level scopes?

    8. What is an IIFE?

    9. DOT Vs Bracket Notation, when to use one or the other?

    10. What is hoisting?

    11. What is scope?

    12. What are the differences between variables created using let, var or const?

  • Medium Questions

    1. What is NaN? What is its type? How can you reliably test if a value is equal to NaN?

    2. What is the difference between a variable that is: null, undefined or undeclared?

    3. What is the difference between Asynchronous and Synchronous code?

    4. What is a “closure” in JavaScript? Provide an example

      const add = (a) => {
        return (b) => {
      			return a + b;
      	}
      }
      
      const adding = add(5)
      
      setTimeout(() => adding(4), 3000)
      
      [1,2,3].map((i) => { });
      
    5. Name to programming paradigms in JS and provide examples

    6. What is the event loop?

    7. How do you add an element at the beginning of an array? How do you add one to the end?

    8. What are some ways of adding a click event to an element in jQuery?

    9. If a variable is defined inside a function, does that variable get hoisted outside of the function?

  • Medium/Hard Questions

    1. What is a promise? Where and how would you use promise?

    2. Can you give an example of a curry function and why this syntax offers an advantage?

      const add = (a) => {
      	return (b) => {
      			return (c) => {
      				return a + b + c
      			}
      	}
      }
      
      add(1)(2)(3)
      
    3. What is function hoisting in JavaScript?

    4. What is the instanceof operator in JavaScript? What would be the output of the code below?

    5. What is the significance, and what are the benefits, of including 'use strict' at the beginning of a JavaScript source file?

    6. What does debounce mean?

    7. What is throttling?

  • Coding Challenges

    1. Write a function that takes a string as an argument and returns the number of vowels contained in that string.

      const findVowels = (s) =>{
      // ....
      }	
      
      findVowels('hello') // --> 2  
      findVowels('why') // --> 0
      
    2. You can state this challenge in the following terms: write a function that checks if two provided strings are anagrams of each other; letter casing shouldn’t matter

      Iceman can form Cinema
      Listen can form Silent
      
    3. What is the value of i each time it is logged to the console? What causes this behavior?

      for(let i =0; i < 10; i++){
        window.setTimeout(function(){
          console.log(i)
        }, i*100)
      }
      
    4. After the following code, what is the value of names.length?

      var names = [“Arthur”, “Madeline”, “Nando” ]; 
      names[100] = "Bruno"
      
    5. Write a function that calculates the nth term in the fibonacci sequence, where this sequence is defined as a series of numbers (0 1 1 2 3 5 8 13 ...), and where the sum of any term is the result of adding the previous two terms. Note: make sure that your solution calculates larger terms (n>30)!

      function fib(n){
      	  // ….
      } 
      
       fib(0); //0
       fib(1); //1
       fib(2); //1
       fib(3); //2
      
    6. Majority Element:

      Given an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times.

      You may assume that the array is non-empty and the majority element always exist in the array.

      Example 1:
      
      Input: [3,2,3]
      Output: 3
      
      Example 2:
      
      Input: [2,2,1,1,1,2,2]
      Output: 2
      
      var majorityElement = function(nums) {
          
      };
      
    7. Build a password Strength meter in React

      1. Example Here: https://codesandbox.io/s/password-strength-react-pc6lk?file=/src/components/JoinForm.js
    8. Front end code test

      https://codepen.io/madeline10302/pen/zYqYqzW

    9. Create a Progress Bar

      1. Example Here: https://codepen.io/bruno-dasilva/pen/jOWgpbv
    10. Create a carousel

      1. https://codepen.io/mtavarez/full/oKLzaB
      2. starter: https://codepen.io/madeline10302/pen/gOrOMXR
    11. Accordion

      1. https://codepen.io/syahrizaldev/pen/ZEQRaEY
    12. Uncommon Words from Two Sentences

      1. https://repl.it/repls/GrowingViciousMacrolanguage#index.js
    13. String Matching in an Array

      1. https://repl.it/repls/FondSentimentalSymbols#index.js
  1. What is a promise in JavaScript? How and where would you use promise?
  2. What is a “closure” in JavaScript? Provide an example?
  3. What is “recursion” and provide a use case.
  4. What are the key benefits/shortcomings between choosing inheritance vs composition as a design choice when building an app?
  5. What's the difference between inline, block and inline-block?
  6. Can you describe the main difference between a for and a forEach loop and why you would pick one versus the other?
  7. Can you describe the main difference between a forEach loop and a .map() loop and why you would pick one versus the other?
  8. How do you force react re-render? Give an example…
  9. Explain the difference between the onSubmit and onChange event and how are they used together in React. Give one or more examples.
  10. Describe what MVC is and how have you used it to structure a web server?
  11. Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  12. What are the benefits of using spread syntax and how is it different from rest syntax?
  13. When should you use the !important property?