02. JavaScript 기초 문법

JavaScript는 문법이 비교적 간단하지만,

동적 타입 언어이기 때문에 주의해야 할 부분이 많다.

 

1. 선언문

JavaScript 코드는 <script> 태그 안에서 작성한다.

<script>
	console.log("Hello JavaScript");
</script>

 

내부 스크립트

HTML 문서 내부에 직접 작성

<script>
 alert("Hello");
</script>

 

외부 스크립트 분리

유지보수를 위해 JS 파일을 따로 분리하는 것이 일반적이다.

<script src="main.js"></script>

• 보통 <body> 끝 부분에 위치
• 또는 defer 속성 사용

<script src="main.js" defer></script>

 

2. 주석

코드 설명을 위한 문법

//한 줄 주석
/*
여러 줄 주석
*/

 

3. 코드 작성 시 주의 사항

1. 대소문자 구분
2. 세미콜론(;)은 자동 삽입되지만, 명시 권장
3. 변수 선언 없이 사용 금지
4. 전역 변수 남용 금지
5. let, const 사용 권장 (var 지양)

 

4. 변수

JavaScript는 동적 타입 언어다.

변수 선언

var a = 10;
var b = 20;
const c = 30;

 

var vs. let vs. const

키워드	특징
var	함수 스코프, 재선언 가능
let	블록 스코프
const	재할당 불가

현대 JavaScript에서는 let, const 사용이 표준이다.

 

자료형

JavaScript의 기본 자료형

• Number
• String
• Boolean
• Null
• Undifined
• Object
• Symbol
• BigInt

 

typeof 연산자

자료형 확인

typeof 10; //number
typeof "Hello"; //string

 

주의 사항

let  x;
console.log(x); //undifined

• undifined : 값이 할당되지 않음
• null : 의도적으로 비어 있음

 

5. 연산자

연산자는 값을 계산하거나 비교하는 기호다.

1) 산술 연산자

연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

10 % 3; //1

 

2) 문자 결합 연산자

+는 문자열 연결에도 사용된다.

"Hello" + "World";

 

3) 대입 연산자

연산자	의미
=	대입
+=	더해서 대입
-=	빼서 대입
*=	곱해서 대입
/=	나눠서 대입

 

4) 증감 연산자

let a = 5;
a++;
a--;

 

5) 비교 연산자

연산자	설명
==	값 비교
===	값 + 타입 비교
!=	값 다름
!==	값 + 타입 다름
>, <, >=, <=	크기 비교

권장 : === 사용

5 == "5"; //true
5 === "5"; //false

 

6) 논리 연산자

연산자	의미
&&	AND
||	OR
!	NOT

 

7) 연산자 우선 순위

기본 우선 순위

1. 괄호()
2. 증감
3. 산술
4. 비교
5. 논리
6. 대입

가독성을 위해 괄호 사용 권장

 

8) 삼항 조건 연산자

조건에 따라 값을 반환

조건 ? 참일 때 : 거짓일 때;

let result = (age >= 19) ? "성인" : "미성년자";