[JS] 📘 자바스크립트 기초 개념 정리

📘 자바스크립트 기초 개념 정리 (입문자용)

---

1. 자바스크립트의 역할
2. 작성 규칙
3. 연결 방법 (3가지)
4. 변수
5. 자료형 (숫자형, 문자열형, 불린형, null, undefined)
6. 연산자 (기본)
7. 조건문 (if/else) - 불린형 활용 예시

---

1. 🧩 자바스크립트의 역할

웹의 기능을 담당하는 언어.

구성 요소	설명	예시
HTML	웹 페이지의 뼈대 (구조)	제목, 버튼, 이미지
CSS	웹 페이지의 디자인 (스타일)	색상, 크기, 정렬
JavaScript	웹 페이지의 동작 (기능)	버튼 클릭 시 팝업, 슬라이드, 메뉴 열고 닫기 등

2. ✍️ 자바스크립트 작성 규칙

자바스크립트는 HTML 문서 안에 혹은 별도의 파일로 작성.

📌 코드 작성 위치

1. HTML 내부에 <script> 태그로 작성
2. 외부 .js 파일로 작성 후 HTML에 연결

✅ 기본 문법 예시

<!-- HTML 안에 직접 작성 -->
<script>
  alert('안녕하세요!');
</script>

<!-- 외부 파일 연결 -->
<script src="main.js"></script>

3. 🔗 자바스크립트 연결 방법 3가지

1️⃣ 인라인 방식 (HTML 태그 속성에 직접 작성)

<button onclick="alert('클릭됨!')">눌러보세요</button>

• 코드가 HTML 안에 같이 있어서 보기 불편하고 유지보수가 어려움
• 학습용으로만 사용, 실제 개발에서는 잘 안 씀

---

2️⃣ 내부 스크립트 방식

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

• HTML 파일 안에서 바로 작성하는 방식
• 테스트나 간단한 기능 만들 때 사용

---

3️⃣ 외부 파일 방식 (⭐가장 추천)

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

• 자바스크립트를 .js 파일로 따로 저장하고 HTML에서 불러옴
• 코드 분리되어 보기 좋고, 협업과 유지보수에 유리

---

4. 📦 변수 (Variable)

변수는 데이터를 저장하는 공간
이름표를 붙여서 값을 저장해두고 나중에 꺼내 쓰는 거.

변수 선언 방법

let 이름 = 값;
const 이름 = 값;
var 이름 = 값;

키워드	설명
let	값을 변경할 수 있는 일반적인 변수
const	한 번 저장하면 바꿀 수 없는 상수
var	예전 방식. 지금도 동작하지만 특별한 경우가 아니면 잘 쓰지 않음

변수 명명 규칙

• 시작: 문자, 밑줄(_), 달러 기호($)로 시작해야 함. 숫자로 시작하면 안 됨.
• 구성: 문자, 숫자, 밑줄, 달러 기호만 사용 가능.
• 대소문자 구분: myVar와 myvar는 다른 변수로 인식됨.
• 예약어 사용 금지: let, const, function 등 자바스크립트에서 미리 정해둔 단어는 변수명으로 사용할 수 없음.

예시

let name = "지민";
const birthYear = 2000;
var city = "서울";

🔄 var, let, const 차이점 요약

키워드	재할당 가능?	블록 스코프	호이스팅	사용 권장
var	가능	❌(X)	O (문제 유발)	❌ (거의 안 씀)
let	가능	✅(O)	O (안전함)	✅ (일반 변수용)
const	불가능	✅(O)	O (안전함)	✅ (상수용)

5. 📚 자료형 (Data Types)

변수에 저장할 수 있는 값의 종류(타입)를 자료형.

---

1️⃣ 숫자형 (Number)

숫자 데이터를 저장할 때 사용.

let age = 25;
let height = 175.5;

• 정수, 소수, 음수 다 가능
• 계산도 가능

let sum = 10 + 5; // 15

---

2️⃣ 문자열형 (String)

문자, 글자, 문장을 저장할 때 사용.
"큰따옴표" 또는 '작은따옴표' 로 묶어서 표현.

let name = "민수";
let greeting = '안녕하세요';

• 글자끼리 더할 수도 있음 (문자열 연결)

let fullGreeting = "안녕, " + name + "!";
console.log(fullGreeting); // "안녕, 민수!"

---

3️⃣ 불린형 (Boolean)

참(true) 또는 거짓(false) 만 저장할 수 있는 자료형.
조건을 판단할 때 꼭 필요.

let isAdult = true;
let isStudent = false;

✅ 불린형은 언제 쓰나요?

• 조건문에서 "이게 맞아?"를 컴퓨터가 확인할 때 사용.
• 예를 들어, 나이가 18세 이상이면 성인인지 확인하는 코드:

let age = 20;
let isAdult = age >= 18; // true

if (isAdult) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

age >= 18 이라는 조건식은 결과가 true 또는 false가 되며, 그게 바로 불린값. 불린형은 단순히 참/거짓을 나타내는 것이 아니라, 조건에 따라 다른 동작을 수행하도록 하는 데 사용.

---

4️⃣ null

"아직 값이 없다"는 걸 개발자가 명시적으로 설정할 때 사용.

let selectedItem = null;

• 예: 아직 아무 것도 선택되지 않은 상태
• 나중에 값이 생기면 변수에 다시 할당

selectedItem = "사과";

---

5️⃣ undefined

"값이 정해지지 않았다"는 의미.
자바스크립트가 자동으로 설정해주는 값.

let name;
console.log(name); // undefined

• 변수를 선언만 하고 값을 저장하지 않으면 undefined.

---

6. ➕ 연산자 (기본)

연산자는 값을 계산하거나 비교하는 데 사용되는 기호.

연산자	설명	예시
+	덧셈	1 + 2 (결과: 3)
-	뺄셈	5 - 3 (결과: 2)
*	곱셈	4 * 6 (결과: 24)
/	나눗셈	10 / 2 (결과: 5)
%	나머지	7 % 3 (결과: 1)
==	같음 (값만 비교)	5 == "5" (결과: true)
===	엄격한 같음 (값과 자료형 모두 비교)	5 === "5" (결과: false)
>	크다	10 > 5 (결과: true)
<	작다	3 < 7 (결과: true)

7. 🚦 조건문 (if/else) - 불린형 활용 예시

조건문은 특정 조건이 참인지 거짓인지에 따라 다른 코드를 실행하도록.

let score = 85;

if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else {
  console.log("C 학점 이하");
}

설명:

1. score >= 90 : score가 90보다 크거나 같은지 비교합니다. 결과는 true 또는 false입니다.
2. if (score >= 90) : 조건이 true이면 {} 안에 있는 코드를 실행합니다.
3. else if (score >= 80) : 첫 번째 조건이 false이고, score가 80보다 크거나 같은지 비교합니다.
4. else : 모든 조건이 false이면 {} 안에 있는 코드를 실행합니다.

핵심: 조건문은 불린형 값을 사용하여 프로그램의 흐름을 제어합니다.

---