Native JS Interview Questions

by Bijoy Anupam

HTML

<!--
<!-- Write a JS event to reflect input text in "output" div --/>
<div class="form-control">
  <input type="text" id="search" />
  <div class="output">Typed text is shown here</div>
</div>

<!-- 
<div class="parent">
  <div class="child">Center the child element w.r.t. parent</div>
</div>

<!--
<h1>Heading 1</h1>
<div>
  Division 1
  <p> paragraph 1</p>
</div>
<p> paragraph 2</p> 
<p> paragraph 3</p> 
<div>
  Division 2
</div>
<span> Span 1 </span>

<!--
<div id="app">
  <div class="form-control">
    <span>First Name</span>
    <input type="text" />
  </div>
  <div class="form-control">
    <span>Last Name</span>
    <input type="text" />
  </div>
  <div class="form-control">
    <span>Email</span>
    <input type="text" />
  </div>
  <div class="form-control">
    <span>Phone</span>
    <input type="text" />
  </div>
  <input type="submit" value="Click here" />
</div>
-->

CSS

/**
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
}
*/

/**
div, p
div p
div ~ p
div + p
div > p
*/




















/**
Define terms:
1. Cascading
2. Inheritance
3. Specificity
4. Box model
*/

/**
Write examples of:
1. Attribute selector
2. Immediate child selector
3. Sibling selector
4. Pseudo classes and pseudo elements
*/

JavaScript

function func1(){
  setTimeout(()=>{
    console.log(x); // ?
    console.log(y); // ?
  },3000);

  var x = 2;
  let y = 12;
}

func1();

/*
(function(){
  setTimeout(()=> console.log(1),2000);
  console.log(2);
  setTimeout(()=> console.log(3),0);
  console.log(4);
})();

/*
var a = 1,
$ = {},
$$ = "hi";

(function($, $$) {
	console.log(a); // ?
  var a = 5;
	$$ = "hello";
  console.log($.abc()); // ?
  console.log(a); // ?
  $.abc = () => "hello";
} ($, $$));

console.log($.abc()); // ?
console.log($$); // ?

/*
var obj = {prop: ""};

if (obj.prop) {
	console.log("property exist");
} else {
	console.log("property doesn't exist");
}

/*
var obj = {name: "abc", city: "delhi", getName: function() {
return this.name;
}},
obj2 = {name: "def", city: "Haryana"};

console.log(obj.getName());

/*


function EmployeeNames() 
{
}
EmployeeNames.prototype = {
    names: [],
    showNames: function()
    {
        return this.names;
    }
}

var e1 = new EmployeeNames();
e1.names.push("foo");
console.log(e1.showNames());

var e2 = new EmployeeNames();
e2.names.push("bar");
console.log(e2.showNames());

/*
// Is this a correct example of async execution

function abc(callback) {
  callback();
}
abc(() => {
  console.log(1);
});
console.log(2);

/*

// Promisify following example:

function abc(ran) {
  let to = setTimeout(() => {
    if (ran < 200) {
      console.log('success');
    } else {
      console.log('failure');
    }
  }, 1000);
}

abc(Math.floor(Math.random() * 1000));

/*

async function xyz(...args) {
  return [...args];
}

const result = xyz(1, 2, "Hi there!", {key: 'value'});
alert(result); // output?

/*
// Is the following a pure function?
let counter = 0;
function increment() {
  return counter;
}

/*
// Add numbers in array using a native array method
function sum() {
	const arr = [1,2,3,4,5,6];
  // Write code here
};

console.log(sum()); // === 21

/*
// sort numbers using native array sort function
function sort() {
  const arr = [23, 55, 111, 9,...