6/19 TIL

js에서 전역변수

오늘 작업 하다가 article_detail.js의 한 함수에서 api.js의 어떤 함수내의 변수가 필요했다.

article_detail.js

...

async function loadComments(articleId) {
...

  response.forEach(comment => {
    const commentId = comment["id"]
...

바로 저 commentId 함수가 필요했다.

api.js

...

async function commentDelete() {
...

    const response = await fetch(`${backend_base_url}/articles/comment/${articleId}/${commentId}/`, {
    
...

바로 여기 fetch를 사용해서 url로 보내야 할 때 commentId가 필요했다.

서로 다른 각 함수 내의 변수를 어떻게 서로 사용하게 할 수 있을까?

이게 문제였다.

내가 찾은 방법은 두 가지였다.
첫 번째는 모듈 시스템이나 전역 객체를 사용하는 것.

두 번째는 내가 사용한 해당 변수를 전역 변수로 선언하는 것.

전역변수 선언

article_detail.js
...

let commentId

...

async function commentDelete() {
...
  response.forEach(comment => {
      commentId = comment["id"]
...

이렇게 함수 밖에서 원하는 변수를 전역변수로 설정한다.
그리고 함수 내의 변수를 const없이 지정한다.

그럼 다른 함수에서도 저 변수를 사용할 수 있다.

나의 문제

나는 이 간단한 것을 어렵게 생각했다.
우선 각자 다른 js파일이라는 생각에 사로잡혔던 것 같다

실제로는 파일은 이미 연결이 되어 있어서 저 변수를 어떻게 가져올지만 생각하면 됐다.

함수 안에 있는 변수? 다른 js파일로 가져와? 심시어 사용 할 곳은 또 함수 안이야?

라고 생각하며 함수 내에서 const를 let으로 바꿔보고, api.js에서 재정의 하려고 하고(당연히 comment값이 없으니 될리가..) 삽질을 많이 했다.

그래도 결국 방법을 찾아내어 해결하니 뿌듯하다

가보자고!!