Задачи с собеседований

Number.prototype.plus = function (value) {
	return this + value;
}

Number.prototype.minus = function (value) {
	return this - value;
}

Число два будет доступно через this в функции plus. Из нее мы возвращаем результат сложения числа, на которое указывает this и числа, переданного в качестве аргумента. Аналогично для minus.

Array.prototype.sort = function () {}
var t = [2, 1, 22];
t.sort()

Ожидаемый результат — [1, 2, 22], а вернется undefined.
Мы рассчитываем, что стандартные методы сработают согласно документации, но какой-то разработчик можем переопределить метод, и он вернет совершенно неожиданный результат.
Именно поэтому библиотека prototype.js уступила jQuery.

function getStr() {
	return [].slice.call(arguments, 1).join(arguments[0])
}

Рекурсия.

var sum = 0;

function getSum(obj) {
	sum += obj.valueNode;
	if (obj.next != null) {
		for (var i = 0; i < obj.next.length; i++) {
			getSum(obj.next[i]);
		}
	}

	return sum;
}

var tree1 = {
				valueNode: 1,
				next: [
					{
						valueNode: 3,
						next: null
					},
					{
						valueNode: 2,
						next: null
					}
				]
			} 

var tree = {
	valueNode: 3,
	next: [{
				valueNode: 1,
				next: null
			},
			{
				valueNode: 3,
				next: null
			},
			{
				valueNode: 2,
				next: null
			},
			{
				valueNode: 2,
				next: [
					{
						valueNode: 1,
						next: null
					},
					{
						valueNode: 5,
						next: null
					}
				]
			}]
};
console.log(getSum(tree1));
sum = 0;
console.log(getSum(tree));

Очередь.

function getSum(obj) {
	var arr = [obj],
		sum = 0,
		current;

	while(arr.length > 0) {
		current = arr.shift();
		sum += current.valueNode;

		if (current.next != null) {
			for (var i = 0; i < current.next.length; i++) {
				arr.push(current.next[i]);
			}
		}
	}

	return sum;
}

var tree = {
	valueNode: 3,
	next: [{
				valueNode: 1,
				next: null
			},
			{
				valueNode: 3,
				next: null
			},
			{
				valueNode: 2,
				next: null
			},
			{
				valueNode: 2,
				next: [
					{
						valueNode: 1,
						next: null
					},
					{
						valueNode: 5,
						next: null
					}
				]
			}]
};
getSum(tree)

body {
  overflow: hidden;
}

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(230, 230, 230, .1);
}

.popup {
  position: absolute;
  width: 400px;
  height: 300px;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

width: 100px;
height: 100px;
border-right: 1px solid #f00;
border-radius: 0 50% 50% 0;

var arr = [{date: '10.01.2017'}, {date: '05.11.2016'}, {date: '21.13.2002'}];

arr.forEach(function(item) {
	var arrDate = item.date.split('.'),
      date = new Date(Number(arrDate[2]), Number(arrDate[1]), Number(arrDate[0]));
      item.time = date.getTime();
});

arr.sort(function (a, b) {
  if (a.time - b.time < 0) {
        return false;
      } else {
        return true;
      }
});

var res = arr.map(function (item) {
  return {date: item.date};
});

console.log(res);

var arr = ['kot', 'tok', 'okt'],
	arr1 = ['kot', 'tok', 'ott'];

function sameWords(arr) {
  var word1, word2;
  
  for (var i = 0; i < arr.length-1; i++) {
    word1 = 0;
    word2 = 0;
    
    if (arr[i].length !== arr[i+1].length) {
        return false;   
    } else {
      for (var j = 0; j < arr[i].length; j++) {
        word1 += arr[i][j].charCodeAt(0);
        word2 += arr[i+1][j].charCodeAt(0);
      }
      
      if (word1 !== word2) {
        return false;
      }
    }      
  }
  
  return true;
}

console.log(sameWords(arr));
console.log(sameWords(arr1));

var promis = new Promise(function (resolve, reject) {
	...
	setTimeout(function () {
		resolve(res);
	}, 5000);
});

Несколько промисов можно объединить и получить разом ответ от них

var promisesImages = [];

for (let i = 0; i < count; i++) {
    promisesImages.push(new Promise((resolveImg, rejectImg) => {
        let img =  new Image(),
            startTime = Date.now();

        img.src = this.imgUrl + '?' + Math.floor(Math.random() * 100000000);

        img.onload = () => {
            resolveImg(Date.now() - startTime);
        };
        img.onerror = rejectImg;
    }));
}

Promise.all(promisesImages)
    .then((timings) => {...})

function test() {
	return new Promise(function (resolve) {
		setTimeout (function () {
			resolve(1);
		})
	})
}

async function test1() {
	var res = await test();
	console.log(res + 1);
}

Фактически выполнение test1 как бы «останавливается» до того момета пока мы не получим ответ от test. Я и раньше читала про эти методы, но особо не обращала внимание, а как-то в разговоре речь зашла о них, я удивилась: «Как так, выполнение останавливает, это же не понятно, что за функция, где она определена, когда callback — здесь все понятно, видно что произойдет в функции по завершению операции, ну или всегда можем поискать по имени, опять же, привычно про контекст». На что мне ответили, что у меня javascript головного мозга и я на столько привыкла к асинхронности, что синхронное выполнение мне кажется чем-то за гранью, а ведь в в пыхе, на которой я некогда программировала все синхронно, там даже если чтение из файла, пока не завершиться, дальше не продолжится.

for (var i = 0; i < 10; i++) {
	(function (i) {
		setTimeout(function () {
			console.log(i);
		}, 100);
	})(i)
}

Не все обращали внимание, что в i можно передать не только контекст

for (var i = 0; i < 10; i++) {
	setTimeout(function (i) {
		console.log(i);
	}.bind(this, i), 100);
}

Так же методам setInterval и setTimeout можно передать аргументы, которые будут прокинуты в качестве аргументов калбек-функции

for (var i = 0; i < 10; i++) {
	setTimeout(function (i) {
		console.log(i);
	}, 100, i);
}

es6

for (let i = 0; i < 10; i++) {
	setTimeout(function () {
		console.log(i);
	}, 100);
}

Одна из возможностей es6, в данном случае сработает несколько неожиданно, let не в блоке {}.

var zero = [].length,
     one = [{}].length,
     two = [,,].length,
    seven = [,,,,,,,].length;

console.log(String.fromCharCode(Number(String(seven) + String(two))));

Так я получила букву H, но это изврат еще тот, осталось сделать оставшиеся 10 знаков…

Мне пришло в голову более экзотическое решение. Детям и слабонервным лучше не смотреть.

var sum = 101*50,
     sumArr = eval([4, 2, ... 3, 7].join('+').replace('++', '+')),
     res;
res = sum-sumArr;

eval([4, 2, ... 3, 7].join('+')

function Book(name, author) {
    this.name = name;
    this.author = author;
    return this;
} 

function Foo(Cclass, name, author) {
  return Object.create(Cclass.prototype);
}

var book = Foo(Book, 'js', 'petr');

console.log(book.name); -> undefined

Конечно меня не взяли, а на последок посоветовали лучше учить теорию. Хнык-хнык.
В любом случае, я бы предпочла решать так.

function Book(name, author) {
    this.name = name;
    this.author = author;
    return this;
}

function Foo(Cclass, name, author) {
    return Cclass.call({}, name, author);
}

var book = Foo(Book, 'js', 'petr');
console.log(book.name);

Хочу посоветовать чувакам лучше готовиться к собеседованиям.

<script></script>
<style></style>  

прямо на странице или

<script src="script.js"><script>
<link rel="stylesheet" href="/css/style.css"> 

подключаем из внешних файлов.

Минус подключения внешних файлов заключается в том, что для их скачки, открываются дополнительные соединения. Может случиться так, что мы не сможем закачать, а если это еще и js файл, подключенный где-то в начале, то мы рискуем показать пользователю пустую страницу.
Размещение стилей и скриптов в самом документе, в этом плане, надежнее. Но при этом скрипты и стили совершенно не кешируются.

 function f(a, b) {
 	if (b !== undefined) {
 		return a + b;
 	} else {
 	return function (b) {
 		return a + b;
 		}
 	}
 }

Хоть данный шаблон упоминается в книге Стефанова, на практике я ни разу не видела, что бы кто-то его использовал.

function f(arg) {
	var value = arg;

	return function (arg) {
		if (arg !== undefined) {
			return f(value + arg);
		} else {
		return value;
		}
	}
}

function foo(value) {
	var acc = value;
	function addNext(next) {
		acc += next;
		return addNext;
	}
	addNext.toString = addNext.valueOf = function() {
		return acc;
	}
	return addNext;
}

	var url = 'http://mydomen.com/news.php',
		script = document.createElement('script'),
		callbackName = 'jsonCallback' + Math.randome();

	script.src = url + '?callback' + callbackName;
	window[callbackName] = function(response){
		console.log(response);
	}

	document.header.appendChild(script);

тег script начинает выкачивать скрипт, лежащий по адресу в атрибуте src, а после закачки, происходит выполнение. Поэтому мы создаем тег script. Случайным образом генерируем имя функции. Формируем урл к ресурсу, где в качестве параметра передается имя нашей новой функции.
В глобальную область, по ключу callbackName помещается функция, которая вызовется, при получение данных от ресурса, они станут доступны внутри через параметр.

<script src='https://mydomen.com/news.php?callback0.90428777...'>

На сервере ресурса сработает что-то в этом роде

echo $_REQUEST[callback] + '(' + json_encode($arDate) + ')';

В window попадет

 window.jsonCallback0.90428777 -> function (response) {
 	console.log(response);
 }

Так как теги с атрибутом src способы посылать только GET запросы, то jsonp не поддерживает POST

Когда я рассказывала про альтернативу jsonp интервьюер от этого вариант «отмахнулся», сказав, что не надежный. Я с ним не согласна. JSONP легче подменить, чем CORS-заголовки

<script src="http://bla-bla/get?callback=f'></script>

<? echo $GET['callback'].'('.$date.')';

В date подпихнуть вут такую строчку

');alert(document.cookie);'

За место данных можно вернуть какой-то код, который закроет вызов функции и выполнится у пользователя.
Сейчас уже исправили, но раньше наблюдалась критическая уязвимость в json-е, с помощью символа переноса строки он подламывался.

Можно найти еще несколько, но они менее популярны или устарели.

define([
	mod1,
	mod2,
	mod3
], function (Mod1, Mod2, Mod3) {
	new Mod1();
	....
});

define — фактически простая функция, все, что написано за ее приделами будет выполняться без оглядки на то, что происходит в define, поэтому одним аргументом идет callbeck-функция. Как только подгрузятся все зависимости, перечисленные в массиве, так они станут доступны внутри через аргументы callbeck-функции.
Система модулей в Node.Js наоборот синхронна. Мы пишем:

var mod = requaer('modul');

и сразу ниже с mod можно работать, все останавливается, пока модуль не загрузится

function one(arg){
	if (typeof arg === 'function') {
		return arg(1);
	} else {
		return 1;
	}
}

function seven(arg) {
	if (typeof arg === 'function') {
		return arg(7);
	} else {
		return 7;
	}
}

function plus(arg) {
	return function (a) {
		return a + arg;
	}
}

Аналогично пишутся функции для five, minus, two. Уже дома, поразмышляв в спокойной обстановке, появилось такое решение

function one(arg) {
	return 1 + (arg || 0);
}

function two(arg) {
	return 2 + (arg || 0);
}

function five(arg) {
	return 5 + (arg || 0);
}

function seven(arg) {
	return 7 + (arg || 0);
}

function plus(arg) {
	return arg;
}

function minus(arg) {
	return -arg;
}

var m = [1, 7, 5, 13, 8],
      count = m.length - 1,
      max;
for (var i = 0; i < count; i++) {
    for (var j = 0; j < count - i; j++) {
        if (m[j] > m[j + 1]) {
            max = m[j];
            m[j] = m[j + 1];
            m[j + 1] = max;
        }
    }
}

var notation = '23+1-', notation1 = '7 2 3 * -', notation2 = '1 2 + 4 * 3 +';
function getComputation(notation) {
    var queue = [], tmp, num1, num2;
    for (var i = 0; i < notation.length; i++) {
        if (/d+/.test(notation[i]) === true) {
            queue.push(Number(notation[i]));
        }
        else {
            switch (notation[i]) {
                case '+':
                    tmp = queue.pop() + queue.pop();
                    queue.push(tmp);
                    break;
                case '-':
                    num1 = queue.pop();
                    num2 = queue.pop();
                    if (num1 > num2) {
                        tmp = num1 - num2;
                    }
                    else {
                        tmp = num2 - num1;
                    }
                    queue.push(tmp);
                    break;
                case '*':
                    tmp = queue.pop() * queue.pop();
                    queue.push(tmp);
                    break;
                case '/':
                    tmp = queue.pop() / queue.pop();
                    queue.push(tmp);
                    break;
            }
        }
    }
    return queue[0];
}
console.log(getComputation(notation));
console.log(getComputation(notation1));
console.log(getComputation(notation2));

Мне рассказали ее принцип, поэтому только реализовать механизм.

.wrap {
  width: 200px;
  border: 1px solid green;
}

.block {
  width: 200px;
  padding-bottom: 50%;
  border: 1px solid red;
}

function validBraces(str) {

	var arrOpenSymbols = [],
		result = false,
		countOpenSymbols;
	if (str.length > 0) {
		for (var i = 0; i < str.length; i++) {
			if (str[i] === '{' || str[i] === '[' || str[i] === '(') {
				arrOpenSymbols.push(str[i]);
			} else {
				countOpenSymbols = arrOpenSymbols.length;
				if ((str[i] === '}' && arrOpenSymbols[(countOpenSymbols-1)] === '{') ||
					(str[i] === ']' && arrOpenSymbols[(countOpenSymbols-1)] === '[') ||
					(str[i] === ')' && arrOpenSymbols[(countOpenSymbols-1)] === '(')
					) {
						arrOpenSymbols.pop();
				}
			}
		}

		if (arrOpenSymbols.length === 0) {
			result = true;
		} else {
			result = false;
		}
	}
	return result;
}
console.log('');
console.log(validBraces('()'));
console.log(validBraces('[)'));
console.log(validBraces('{}[]()'));
console.log(validBraces('([{}])'));
console.log(validBraces('())({}}{()][]['));

Если бы передавались строки из скобок '{', '[', ']', '}'

function validBraces(str) {
	try {
	 	eval(str);
	 	return true;
	 } catch (err) {
	 	return false;
	 }
}

$('#root').on('click', function (event) {
    event.stopPropogation();
    console.log($(event.target).attr('id'));
})

function getObj(arr) {
    var obj = {};
    
    arr.forEach(function(item){
        obj[item.name] = item.value;
    });
    
    return obj;
}

(function (i) {})(i);

создает замыкание, var i = i — уже принадлежат областям видимости в замыканиях.

function() { return i + i; }

в начале поищет в своей области видимости i, не найдя, подымется на уровень выше и там найдет его. Из функции вернется сумма, которая будет положена в массив последним элементом.

f.call(obj, a, b);
f.apply(obj, [a, b]);

obj.funk = function f() { console.log(this.x); }
obj.funk();

function f() { console.log(this.x); }.bind(obj, a, b);
f();

<div class="block1">
  <div></div>
</div>
<div class="block2">
  <div></div>
</div>

.block1 {
  width: 150px;
  height: 20px;
  border: 1px solid red;
}
.block2 {
  display: none;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

function showBlock() {
  var block1 = document.getElementsByClassName('block1')[0],
      block2 = document.getElementsByClassName('block2')[0];
  if (!(block1.childNodes.length > 0 )) {
    block2.style.display = 'block';
  }
}
document.addEventListener("DOMContentLoaded", function () {
  showBlock();
});