Как понять что функция глобальная?

Определение глобальной функции

Глобальная функция - это функция, которая доступна везде в приложении и может быть вызвана из любого места без предварительного импорта. Это важное понятие для понимания области видимости и архитектуры приложения.

Глобальная область видимости в JavaScript

// ГЛОБАЛЬНО - прямое определение на window/global
function globalFunction() {
  return 'I am global';
}

// Эквивалентно:
window.globalFunction = function() {
  return 'I am global';
};

// Проверка глобальности
console.log(typeof globalFunction); // 'function'
console.log(window.globalFunction); // function
console.log(globalFunction === window.globalFunction); // true

// Вызов из любого места
function someOtherFunction() {
  globalFunction(); // Работает везде!
}

// НЕПРАВИЛЬНО - это НЕ глобально
function outsideFunction() {
  function localFunction() {
    return 'I am local';
  }
  return localFunction();
}

outsideFunction(); // OK
localFunction(); // ReferenceError! Не доступна снаружи

Module scope vs global scope

// ========== utils.ts ==========
// ЛОКАЛЬНО для модуля - не глобально
export function helperFunction() {
  return 'helper';
}

// ГЛОБАЛЬНО - доступна везде через импорт как глобальная утилита
// (в Next.js/React context)
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ru-RU');
}

// ========== components/Button.tsx ==========
// Нужен импорт - это значит функция НЕ глобальна
import { formatDate, helperFunction } from '@/utils';

export function Button() {
  return <div>{formatDate(new Date())}</div>;
}

// ========== old style - действительно глобально ==========
// Если бы мы положили функцию в window объект
// window.globalFormatDate = (date: Date) => date.toLocaleDateString();

// Тогда везде было бы доступно БЕЗ импорта:
function OldComponent() {
  // Работает без import! Это действительно глобально!
  return <div>{window.globalFormatDate(new Date())}</div>;
}

Способы проверки глобальности

// 1. Проверка через window/global
function checkIfGlobal(functionName: string): boolean {
  return typeof (window as any)[functionName] === 'function';
}

checkIfGlobal('globalFunction'); // true
checkIfGlobal('localFunction'); // false

// 2. Проверка в Node.js (для backend)
function checkIfGlobalNode(functionName: string): boolean {
  return typeof (global as any)[functionName] === 'function';
}

// 3. Попытка вызвать без импорта
try {
  someFunctionName(); // ReferenceError если не глобальна
  console.log('Функция глобальна');
} catch (e) {
  if (e instanceof ReferenceError) {
    console.log('Функция НЕ глобальна - нужен импорт');
  }
}

Когда функция считается глобальной в practice

// ========== ГЛОБАЛЬНЫЕ функции - встроены в язык ==========
console.log('Глобально'); // встроенная функция
parseInt('10'); // Глобально
setTimeout(() => {}, 1000); // Глобально
fetch('/api/data'); // Глобально (Browser API)

// ========== УСЛОВНО ГЛОБАЛЬНЫЕ в приложении ==========
// Если используются везде и везде импортируются как глобальная утилита

// src/lib/api.ts
export const api = {
  get: (url: string) => fetch(url).then(r => r.json()),
  post: (url: string, data: any) => fetch(url, { method: 'POST', body: JSON.stringify(data) }),
};

// Используется везде с импортом
import { api } from '@/lib/api';

// ========== ДЕЙСТВИТЕЛЬНО ГЛОБАЛЬНЫЕ в browser ==========
// Только если присваиваются window
(window as any).sharedState = { user: null };
(window as any).logError = (msg: string) => console.error('[APP]', msg);

// Теперь везде доступно БЕЗ импорта (но это плохая практика!)
function SomeComponent() {
  console.log(sharedState); // Работает, но очень плохо!
  logError('Something bad'); // Работает, но очень плохо!
}

Полиглот: где глобальное, где нет

// ========== FRONTEND (Browser) ==========
// Глобально по умолчанию:
- window
- document
- localStorage
- console
- fetch
- Math
- JSON
- parseInt, parseFloat
- setTimeout, setInterval

// Не глобально (нужен импорт):
- React (импорт нужен)
- lodash функции (импорт нужен)
- Custom функции (импорт нужен)

// ========== BACKEND (Node.js) ==========
// Глобально по умолчанию:
- global
- console
- process
- require
- Buffer
- setInterval, setTimeout

// Не глобально (нужен импорт):
- express, fastapi (импорт нужен)
- fs (нужен require)
- Custom функции (нужен импорт)

// ========== NEXT.JS / REACT ==========
// Особенность: можно определить глобально в app layout
// app/layout.tsx
export default function RootLayout() {
  useEffect(() => {
    // Это НЕ делает функцию глобальной в смысле доступности
    window.DEBUG = {
      logUser: (user) => console.log(user),
    };
  }, []);
  
  return <html>{/* ... */}</html>;
}

// Теперь доступно в браузере через window.DEBUG.logUser()
// Но это всё ещё плохая практика!

Правильный способ работать с "глобальными" утилитами

// ========== lib/globals.ts ==========
export const GlobalUtils = {
  formatDate: (date: Date) => date.toLocaleDateString('ru-RU'),
  parseDate: (str: string) => new Date(str),
  calculateTax: (amount: number) => amount * 0.13,
  async fetchUser(id: string) {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  },
};

export const createGlobalContext = () => {
  return {
    user: null as User | null,
    isDarkMode: false,
    notifications: [] as Notification[],
  };
};

// ========== Использование везде ==========
import { GlobalUtils } from '@/lib/globals';

function Component() {
  const formatted = GlobalUtils.formatDate(new Date());
  return <div>{formatted}</div>;
}

// ========== Или через Context для состояния ==========
import { createContext, useContext } from 'react';

const GlobalContext = createContext<ReturnType<typeof createGlobalContext> | null>(null);

export function useGlobalContext() {
  const context = useContext(GlobalContext);
  if (!context) {
    throw new Error('useGlobalContext must be used within GlobalProvider');
  }
  return context;
}

function Component() {
  const { user, isDarkMode } = useGlobalContext();
  return <div>{user?.name}</div>;
}

Checklist: как определить глобальную функцию

• Доступна БЕЗ импорта (просто вызовешь имя)
• Определена на window (browser) или global (Node.js)
• Появляется в console как window.functionName
• Может вызваться из любого модуля/компонента
• Входит в Built-in API JavaScript или специально присваивается

Правильная практика - избегать действительно глобальных функций и использовать импорты или Context для управления доступностью кода.