Тех собес на middle-senior Frontend Разработчик в ****

Доступно с премиум-подпиской

Оформите премиум-подписку, чтобы получить доступ к:

• Фильтрации по компаниям
• Названиям компаний в интервью
• Видеозаписям собеседований в категории Frontend Разработчик

Посмотреть видео в категории

Оформить премиум

(2025-01-30)

JavaScript Closures

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

let counter = 0;

function foo() {
    const str = `Current value is ${counter}`;

    function inc() {
        ++counter;
    }

    function log() {
        console.log(str);
    }

    return [inc, log];
}

const [inc, log] = foo();

inc();
inc();
inc();

log();

JavaScript Event Loop

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

console.log(1);

function foo() {
    console.log(2);

    setTimeout(() => {
        console.log(3);

        new Promise((resolve) => {
            console.log(4);
            resolve();
        });
    }, 0);
}

foo();

console.log(5);

React Performance and Best Practices

• Почему удаление todoItem может работать некорректно?
• Как предотвратить лишние ререндеры todoItem?
• Что еще можно улучшить внутри todoList?

import React, { useState } from ‘react’;

// Компонент для отображения отдельной задачи

const TodoItem = ({ task, onToggle, onDelete }) => {
    console.log(`Rendering: ${task.text}`);
    return (
        <li>
            <span 
                style={{ textDecoration: task.completed ? ‘line-through’ : ‘none’ }} 
                onClick={onToggle}
            >
                {task.text}
            </span>
            <button onClick={onDelete}>Delete</button>
        </li>
    );
};


const TodoList = () => {
    const [tasks, setTasks] = useState([]);
    const [taskInput, setTaskInput] = useState(‘’);

    const addTask = () => {
        if (taskInput) {
            setTasks([...tasks, { id: Date.now(), text: taskInput, completed: false }]);
            setTaskInput(‘’);
        }
    };

    const toggleTask = (id) => {
        setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task));
    };

    const deleteTask = (id) => {
        setTasks(tasks.filter(task => task.id !== id));
    };

    return (
        <div>
            <h1>Todo List</h1>
            
            <input 
                value={taskInput} 
                onChange={(e) => setTaskInput(e.target.value)} 
                placeholder=«Add new task» 
            />

            <button onClick={addTask}>Add</button>

            <ul>
                {tasks.map(task => (
                    <TodoItem 
                        task={task} 
                        onToggle={() => toggleTask(task.id)} 
                        onDelete={() => deleteTask(task.id)} 
                    />
                ))}
            </ul>
        </div>
    );
};

export default TodoList;