2024.01.09 TIL #type="module" #export #import #arr.join() #클로져 #data-id="id"

type = "module"

1. 독립적인 스콥임을 알려줌 => 협업 중 충돌 막음

2. 지연 실행 : UI 개선

    html을 파싱하다가 js파일 갔다가 다시 파싱하는 게 아니라, html파싱 먼저 하고 백그라운드에서 js 파일 다운로드 후

    파싱이 끝나면 실행권 넘겨줌

3. 기본적으로 use strict

    Javascript는 변수 선언을 안하고 a = apple; 이렇게도 되긴하는데, module로 하면 변수 선언을 꼭 해줘야 함

 

다른 스콥인데 내보내고 가져오고 싶을 때

내보내기

export function abc( ) { } / const 함수이름 = () => { } 등등

가져오

import { ~~ } from "./movie.js"

- import가 있으면 그 부분부터 먼저 다운받고 실행된 다음에 그 밑에 실

 

arr.join (  ) 

- 배열을 문자요소로 변환

 

 const arr = ["나는", "야", "코딩", "병아리"];

 console.log(arr.join()); // 나는,야,코딩,병아리 

 

 console.log(arr.join("")); // 나는야코딩병아리

 console.log(arr.join("-")); // 나는-야-코딩-병아리

 console.log(arr.join(" ")); // 나는 야 코딩 병아리

 

 

addEventListner( 이벤트타입, 이벤트핸들러함수, 캡쳐링 단계에서 먼저 실행될건지-불리언타입)

- 이벤트 종류에 대해서는 추후 공부할 예정

 

html에 데이터 박기
data-id="id"

 

이 코드에서 addEventListener의 두번째 매개변수는 왜 그냥 showAlert() 이면 안되고 다시 화살표 함수 안에 들어가야할까?

   

  const moviebtns = document.querySelectorAll(".card"); 

    moviebtns.forEach((a) => {

      const id = a.dataset.id;

      a.addEventListener("click", () => showAlert(id));

    });

  })

 

- showAlert의 id 값이 반복문이 바뀔 때 마다 바뀌기 때문

- 내부함수에서 외부함수 변수를 참조하고, 그 값이 이벤트가 발생할 때마다 변경되어서 계속 바뀌는 외부변수를 사용해야하기 때문 

=> 클로져 함수 : 외부함수 변수 참조 + 외부로부터의 허락되지 않은 변경 허용 X

     반복문 내에서 이벤트 리스너를 할당하는 경우 클로저를 많이 사용

- 그냥 showAlert()면 반복문이 다 돌고 마지막 id 값만 showAlert의 매개변수가 됨