Night Vibe 🧑‍💻

📌 Виды функций в JavaScript

Function Declaration – объявление функции

Function Expression – функция как выражение (сохраняется в переменной)

Arrow Function – стрелочная функция (короткая запись)

Anonymous Function – анонимная функция (без имени, часто как callback)

IIFE (Immediately Invoked Function Expression) – немедленно вызываемая функция

📌 Что такое функция?

Функция – это блок кода, который можно вызывать многократно.

Может принимать аргументы (входные данные) и возвращать результат через return.

В JavaScript есть понятие hoisting (поднятие):

Function Declaration поднимается (можно вызвать до объявления).

Function Expression и Arrow Function не поднимаются.

📌 Примеры
1. Function Declaration

sayHello(); // ✅ Работает (hoisting есть)

function sayHello() {
  console.log("Привет!");
}

2. Function Expression

sayHello(); // ❌ Ошибка (ReferenceError)

const sayHello = function() {
  console.log("Привет!");
};

3. Arrow Function

sayHello(); // ❌ Ошибка

const sayHello = () => {
  console.log("Привет!");
};

4. Anonymous Function

setTimeout(function() {
  console.log("Через 2 секунды");
}, 2000);

5. IIFE

(function() {
  console.log("Выполнилось сразу!");
})();

📌 Основные виды функций
1. Function Declaration

Классическое объявление функции.

sayHello(); // Работает!

function sayHello() {
  console.log("Привет из Declaration!");
}

✅ Поднимается (hoisting есть)
✅ Можно вызвать до того, как она объявлена

2. Function Expression (в том числе Arrow Function)

Функция сохраняется в переменную.

❌ Hoisting нет
❌ Нельзя вызвать до объявления
✅ Чаще всего используется в современном коде

// Обычная запись
const sayHello = function() {
  console.log("Привет из Expression!");
};

sayHello(); // Работает

👉 Итог для практики:

Declaration – удобно, когда нужна функция, доступная в любом месте файла (hoisting).

Expression / Arrow – используется чаще в современном коде (React, Node.js и т.д.), более гибкая форма.

🤔 Как передать данные из родительского компонента в дочерний?

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

🚩Шаги для передачи данных из родительского компонента в дочерний

1️⃣Создание родительского компонента
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.

2️⃣Приём данных в дочернем компоненте
В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.

Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение

1️⃣В родительском компоненте `ParentComponent`:
Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2️⃣В дочернем компоненте ChildComponent:
Принимаем пропс message через параметр props.
Используем props.message для отображения переданной строки внутри тега <p>.

🚩Дополнительные примеры

Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

Базу знаний

🤔В чём находятся значения функции?

Значения функции компонента React находятся в теле функции. В функциональных компонентах состояние, эффекты, переменные — всё управляется через хуки и находится внутри этой функции.

Забирай 📚 Базу знаний

full stack developement (

JavaScript (logic)