[JavaScript] - 기본 문법 (1)

게시 2024/07/15

By Minddo

4 분읽는 시간

🚀 JavaScript를 실행 시키는 방법

1️⃣ node 명령어를 사용

우선 실행시킬 js 파일로 이동한다.

#  ex
cd Desktop/my-app/next-study.js

node 명령어로 실행
1 node next-study.js

2️⃣ code runner 익스텐션을 사용

Code Runner

vscode Extensions -> code runner 검색 후 설치
실행시킬 js 파일에서 출력할 결과 console.log 작성 후 ⇧ + space

3️⃣ html 파일에서 script 태그를 사용

외부 스크립트

head 태그 사이

        
      
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js 파일 경로"></script>
</html>

🔥 속성

async : async 속성을 사용하면 스크립트는 비동기적으로 로드된다. 즉, HTML 파싱이 진행되는 동안 스크립트 파일을 비동기적으로 다운로드하고, 다운로드가 완료되면 바로 실행된다.

defer : defer 속성을 사용하면 스크립트는 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다. 이는 HTML 문서의 파싱이 끝날 때까지 스크립트가 실행되지 않음을 보장해준다.

속성	실행 시점	실행 순서	비고
async	스크립트 다운로드 완료 즉시 실행	순서 보장 안됨	독립적인 스크립트에 적합
defer	HTML 파싱 완료 후 실행	순서 보장됨	DOM 의존 스크립트에 적합

body 태그 사이

        
      
<body>
<!-- body content -->
  <script src="js 파일 경로"></script>
</body>

🐥 모든 DOM 요소가 파싱된 후 스크립트가 로드

내부 스크립트
➡️ 🐥 말 그대로 HTML 파일 내부의 스크립트를 작성한다. 공부할 때 말고는 왠만하면 쓰지말자 !

4️⃣ 웹 브라우저의 개발자 도구 ➡️ Console 탭에서 작성하는 방법

✔️ 크롬 -> 마우스 우클릭 -> 검사 -> Console 탭

🚀 변수 / 상수

1️⃣ 상수

상수는 값을 한 번 할당하면 변경할 수 없는 변수
const 키워드를 사용하여 선언

2️⃣ 변수

변수는 변하는 값을 저장할 수 있는 공간
JavaScript에서 변수를 선언할 때 var, let, const 키워드를 사용

var: 함수 스코프, 재선언 가능, 재할당 가능
let: 블록 스코프, 재선언 불가, 재할당 가능
const: 블록 스코프, 재선언 불가, 재할당 불가, 단, 객체나 배열의 경우 내부 값은 변경 가능

3️⃣ 사용 지침

var는 사용하지 않음
let은 재할당이 필요할 때 사용
const는 재할당이 필요 없을 때 사용
❗️ 습관적으로 사용하도록 노력

🚀 기타 기호

; -> 세미콜론
: -> 콜론
” -> 큰따옴표
’ -> 작은따옴표
`` -> 백틱
[] -> 대괄호
{} -> 중괄호
() -> 소괄호

📖, JavaScript

JavaScript