함수 뒤에 나온 변수를 사용하면 왜 에러가 안날까?

이 글에서 "선언 전"이라는 의미는 단순히 줄의 전 후 관계

 

변수가 글로벌 스코프인 경우

const App = () => {
  return <div style={styles}> </div>
}

const styles = {
  display: 'flex'
}

이 코드는 에러가 안난다.

 

이유는 styles 변수가 이 파일의 글로벌스코프에 있어서, 어디에서든 접근이 가능하다. 

심지어 이렇게 실제로 styles를 사용하는, 그것보다 먼저 선언 및 할당 App 함수에서도 사용 가능하다

 

const와 let은 블록 스코프이지만, 만약 글로벌 스코프에서 정의됐다면 파일 어디에서든지 접근 가능하다.

 

변수가 렉시컬 스코프인 경우

const App = () => {
  const App2 = () => {
    console.log(styles);
    return <div style={styles}></div>;
  };

  const styles = { display: "flex" };

  return <App2 />;
};

변수가 렉시컬 스코프(클로저)에 의해 styles을, styles 변수가 선언전 함수 내에서 사용해도 에러가 발생안한다.

(클로저는 리턴되는게 App2이므로 App2 함수)

 

 

ReferenceError를 발생시키는 경우

const App = () => {
  console.log(styles); // ReferenceError: styles is not defined
  const styles = {
    display: 'flex'
  };
  return <div style={styles}> </div>
};

이 코드는 얘기가 다르다.

클로저도 아닌, 단순히 변수 자체를 선언 전에 사용하려고 했으니 당연히 ReferenceError를 맞이하게 된다.