정중식의 개발공부로그

전역 스코프에 선언된 변수는..!

22 Jun 2023 | memo

질문

이 코드를 다른 파일에서 export나 import 없이 api.fetchCats 이런식으로 불러올 수 있는 이유가 뭔가요? Ex) api.js

const API_ENDPOINT = 'http://localhost:4001';
// const API_ENDPOINT =
//   'https://rhdd0roxs5.execute-api.ap-northeast-2.amazonaws.com/dev';

const api = {
  fetchCats: (keyword) => {
    return fetch(`${API_ENDPOINT}/api/cats/search?q=${keyword}`).then((res) =>
      res.json()
    );
  },

  fetchRandomCats: () => {
    return fetch(`${API_ENDPOINT}/api/cats/random50`).then((res) => res.json());
  },

  fetchCatDetail: (id) => {
    return fetch(`${API_ENDPOINT}/api/cats/${id}`).then((res) => res.json());
  },
};

답변

프로그래머스 [멘토] Anne의 답변..

전역 스코프에 선언된 변수는 다른 자바스크립트 파일에서도 접근할 수 있다.

<script> 태그로 로딩되는 순서에 따라서 파일 사이에 전역 스코프의 접근이 가능해 지는데, api.js를 정의한 <script> 태그가 App.js를 정의한 <script> 태그보다 먼저 로딩이되므로 App.js에서 api.js에서 정의한 api 변수를 사용할 수 있다.

다만, 전역 스코프에 변수를 선언하게 되면 자바스크립트 파일간에 영향을 미칠 수 있는 가능성이 있기 때문에 신중하게 다뤄야 한다.

부끄

예전에 자바스크립트를 배우면서 다뤘던 기억이난다.

Related Posts