Skip to content

Instantly share code, notes, and snippets.

@ronapelbaum
Last active May 7, 2017 09:45
Show Gist options
  • Save ronapelbaum/98dd7363eb684e55a5bbb68d63267fd4 to your computer and use it in GitHub Desktop.
Save ronapelbaum/98dd7363eb684e55a5bbb68d63267fd4 to your computer and use it in GitHub Desktop.
interview: front end developer (answers)

Interview: Front-End developer (answers)

basic algorithm

1. implement function reverseString(str)

  • use simple iteration
  • split() vs join()
  • array vs string

2. implement function factorial(n)

  • use simple recurtion
function factorial(n){
  return n === 0 ? 1 : n * factorial(n - 1);
}
  • use simple iteration
function factorial(n){
  var res = 1;
  for (var i = 1; i < n; i++) res *= i;
  return res;
}

3. implement function removeFromArray(arr, arg1, arg2, ...)

  • can use Array.filter(), use arguments

    Arguments object: The arguments object is not an Array. It is similar to an Array, but does not have any Array properties except length. For example, it does not have the pop method.

  • impl
function removeFromArray(arr) {
  var argsToRemove = [].slice.call(arguments, 1);
  return arr.filter(function(d) {
    return argsToRemove.indexOf(d) === -1;
  });
}

//OR
function removeFromArray(arr) {
  var argsToRemove = [].slice.call(arguments, 1);
  return arr.filter( (d) => !argsToRemove.includes(d) );
  });
}
  • write a test for this!
expect(removeFromArray([])).toEqual([]);
expect(removeFromArray([], 1)).toEqual([]);
expect(removeFromArray([1])).toEqual([1]);
expect(removeFromArray([1], 1)).toEqual([]);
expect(removeFromArray([1, 2], 1)).toEqual([2]);
expect(removeFromArray([1, 2], 2, 3)).toEqual([1]);
...

javascript

1.

  • output: 5 5 5 5 5
  • javascript closures
  • fix it!
for (var i = 0; i < 5; i++) {
  (function(n){
    setTimeout(function() { console.log(n); }, n * 1000 );
  })(i);
}

2.

  • output: undefined function undefined
  • hoisting
  • function decleration vs function expression (foo is not a function)

3.

  • output: 1 4 3 2
  • event loop
  • implement setTimeoutSync()
function delay(ms) {
  var now = Date.now();
  while(Date.now() < now + ms){
    /* do nothing */ 
  } 
}
function setTimeoutSync(cb, ms) {
  delay(ms);
  cb();
}
  • or use es6 await

4.

function foo(){}

foo();
foo.call();
foo.apply();
foo.bind()();

var x = {};
x.f = foo;
x.f();

5.

  • prototype

    • module patter, use prototype
    function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    
    function Shape(point){
      this.center = point;
    }
    Shape.prototype.draw = function(){
      console.log(this.center);
    };
    Shape.prototype.move = function(point){
      this.center = point;
    };
    • with private (wha't the cost?)
    var Shape = (function() {
    
      function Shape(point) {
        var center = point;
        this.draw = function() {
          console.log(center);
        };
        this.move = function(point) {
          center = point;
        };
      }
      return Shape;
    })();
    • inheritance
    function Rect(){}
    Rect.prototype = new Shape();
    var rect1 = new Rect();
    //OR
    var rect2 = Object.create(Shape);

web

  • use vanila javascript (xhr, addEventListener)
  • use e.stopPropagation()
  • DOM vs global
  • use e.preventDefault()
  • reference a dom element

css

  • float: left

  • margin, padding and border

  • solution

    • html
    <div class="content">
    </div>
    <div class="modal-bkg">
      <div class="modal">
        hello world
      </div>
    </div>
    • css
    .modal-bkg {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.5);  
      cursor: not-allowed;
    }
    
    .modal {
      position: relative;
      top: calc((50% - 50px) / 2);
      left: calc((50% - 50px) / 2);
      height: 50px;
      width: 50px;
      background: white;
      cursor: pointer;
    }
  • why not use opacity?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment