# Front-end собеседование Игоря Фролова

## Задачи

### Как боротья с сайд-эффектами?

#### Ответ

Использовать Saga
Разрулирование запросов

### Что такое чистая функция?

#### Ответ

—

### Какие значения возвращает `typeof`?

#### Ответ

string
number
object
boolean
undefined

### Какие типы есть в JS?

#### Ответ

все те же, что возвращает typeof + NaN

### Как проверить переменную `combo` на массив?

#### Ответ

Array.isArray(combo)

### Какие методы массива знаете и используете?

#### Ответ

// map reduce foreach filter sort

var a = [1, 100, 3];

a.reduce((currentItem, accumulator) => {
    return currentItem + accumulator;
},0)

a.sort() // [1, 3, 100]

### Как преобразовать массив в объект?

var list = [
  { name: 'width', value: 10 },
  { name: 'height', value: 20 },
  { name: 'x', value: 30 }
];

// TODO: { width: 10, height: 20, x: 30 }

#### Ответ

const a = {};

list.forEach((item) => {
    a[item.name] = item.value;
});

return a;

### Что будет выведено в консоль?

var b = {};
var c;

b.b = 1;
c = b;
c.b = 2;

console.log('1)', b.b);
console.log('2)', c.b);

var a = { counter: 1 };
function inc(obj) {
  obj.counter++;
  obj.changed = true;
}
inc(a);
console.log('3)', a);

#### Ответ

1) 1
2) 2
3) { counter: 1 }

### Как отрендерится код?

<div style="float: left; border: 1px solid red;">
  <span
    style="position: relative; top: -1000px; left: -1000px; border: 1px solid green;"
  >
    Inner text
  </span>
</div>

#### Ответ

div не знаю
span улетит вверх влево

### Как решить задачу?

// Есть функция и объект.
// Необходимо, чтобы функция в консоли вывела значение 'wow'.
// Как добиться желаемого не изменяя тело функции?

function f() { console.log(this.x); }
var obj = { x: 'wow' };

#### Ответ

f().bind(obj);
f.call(obj);
f.apply(obj);

### Написать счетчик используя замыкание

#### Ответ

class Counter {
    counter = 0;
    
    up = () => {
        return ++counter; 
    }
    
    down = () => {
        return --counter;
    }
    
    getState = () => {
        return counter;
    }
}

var counter = new Counter();

console.log(counter.up()); // 1
console.log(counter.up()); // 2
console.log(counter.up()); // 3
console.log(counter.getState()) // 3
console.log(counter.up()); // 4
console.log(counter.down()); // 3

### Решить задачу

* Необходимо написать функцию, которая на вход принимает урл, асинхронно ходит по этому урлу GET запросом и возвращает данные (json)
* Для получении данных можно использовать fetch
* Если во время запроса произошла ошибка, то пробовать запросить ещё 5 раз
* Если в итоге информацию получить не удалось, выбросить ошибку «Заданный URL недоступен».

#### Ответ

const requestCounter = 0;

const _request = () => {
    requestCounter++;
    
    axios.get('http://url')
        .then(onSuccess)
        .catch(onError);
    
};

const onSuccess = (payload) => {
    console.log(payload);
};

const onError = (err) => {
    if(requestCounter === 5) {
        console.error(err);
        
        return;
    }
    
    _request();
}
 

### Что будет выведено в консоль?

console.log('start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve()

.then(function() {
  console.log('promise1');
}).
.then(function() {
  console.log('promise2');
});

console.log('finish');

#### Ответ

start
finish
propmise1
promise2
setTimeout

### Написать функцию для проверки слова на палиндром

// Написать функцию, которая на вход получает слово,
// а на выходе выдает true, если входящее слово палиндром,
// иначе false. Функция должна игнорировать регистр символов.

function checkIsPalindrome(word) {
  // …
}

console.log(1, checkIsPalindrome('Иван') === false);
console.log(2, checkIsPalindrome('доход') === true);
console.log(3, checkIsPalindrome('Доход') === true);
console.log(4, checkIsPalindrome('ЗаКаз') === true);

#### Ответ

function checkIsPalindrome(word) {
  const wLength = word.length;
  const lower = word.toLowerCase();
  const neededLength = wLength > 1 ? Math.floor(wLength/2) : wLength;
  
  for (i = 0; i < neededLength; i++) {
      var firstChar = lower[i];
      var secondChar = lower[wLength - i];
      
      if(firstChar !== secondChar) {
        return false;
      }
  }
  
  return true;
  // toLowerCase
  // x = length / 2
  // floor
  // for x
  
  
}

### Как сверстать?

<p><img src="https://i.imgur.com/UJPisQ2.png" width="308"/></p>

#### Ответ

style |
  Объяснил на словах — всё ОК
  Использует flex

div.wrapper
  div.image-container
    div.image
  div.text(style="word-wrap")
    strong Константин
    span web-developer
  div.close(style="transform: rotate")