reactjs - ¿Por qué puedo usar una variable antes de declararla en JavaScript/TypeScript?

Según mi comprensión, después de ES6 y la introducción de let y const, una variable declarada con ellos debe ser declarada antes de ser usada. Sin embargo, me he encontrado con muchos ejemplos donde mi código funciona perfectamente cuando declaro las variables después de su uso. Por ejemplo, este es el código de (una versión simplificada de) la plantilla de TypeScript de React Native:

import React from 'react';
import {StyleSheet, Text} from 'react-native';

const App = () => {
  return (
    <>
      <Text style={styles.text}>Some text</Text>
    </>
  );
};

const styles = StyleSheet.create({
  text: {
    backgroundColor: 'blue',
  },
});

export default App;

Aquí, styles se declaran después de que se usan, y incluso parece ser la manera idiomática de hacerlo, pero incluso ESLint lo resalta como no-use-before-define.

Mi pregunta es: ¿por qué todavía funciona?

Respuesta #1

No lo estás usando antes de que sea declarado.

La variable no se usa hasta que se llama a la función dentro de la cual se usa.

Respuesta #2

Esencialmente lo que está sucediendo es

const styles = StyleSheet.create({});

ha sido declarada como una función llamada. Así que al declarar, la función se ejecuta, la variable se asigna al objeto;

const App =() => {return()};

está declarando que App será una función, se llamará al constructor de esto cuando se ejecute desde el proceso principal y actualmente solo lo estás exportando desde el módulo. Entonces, en el punto de exportación, Styles ha sido declarado con el objeto devuelto, y App ha sido declarado esperando la ejecución futura.