[자바스크립트 학습] 기본 개념 및 문법 1일차

1.1 자바스크립트 기초 구조

자바스크립트는 웹 페이지를 더 똑똑하게 만들기 위한 언어입니다. HTML이 웹 페이지의 뼈대라면, CSS는 옷이고, 자바스크립트는 두뇌입니다.

자바스크립트 사용 방법

자바스크립트를 사용하는 방법은 두 가지가 있습니다:

1. HTML 안에 직접 작성하기

<script>
    alert("안녕하세요!");
</script>
    

위 코드는 브라우저가 실행되면서 "안녕하세요!"라는 메시지 상자를 띄웁니다.

 

2. 외부 파일로 작성하기

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

외부 파일(script.js)에 코드를 작성하면, HTML이 더 깔끔해집니다.

 

---

 

1.2 데이터 타입과 변수

데이터 타입

데이터는 숫자, 글자, 참/거짓처럼 다양한 종류로 구분됩니다. 자바스크립트의 주요 데이터 타입은 아래와 같습니다:

데이터 타입	예시	설명
Number	10, 3.14	숫자를 나타냄
String	"안녕", 'Hello'	글자(문자열)를 나타냄
Boolean	true, false	참/거짓을 나타냄
Null	null	"값이 없음"을 나타냄
Undefined	undefined	"정의되지 않음"을 나타냄

변수란?

변수는 데이터를 저장하는 상자입니다. 변수를 사용하면 데이터를 쉽게 관리할 수 있습니다.

변수 선언 방법

1. var: 예전 방식 (잘 사용하지 않음)

2. let: 변경 가능한 변수

3. const: 변경 불가능한 변수

예시

let 이름 = "철수"; // 이름이라는 상자에 "철수"를 저장
const 나이 = 10;   // 나이라는 상자에 10을 저장 (변경 불가)
console.log(이름, 나이); // 결과: 철수 10

let과 const 비교

let 이름 = "영희";
이름 = "민수"; // 변경 가능
console.log(이름); // 결과: 민수

const 나이 = 20;
// 나이 = 30; // 오류! 변경 불가
console.log(나이); // 결과: 20

let은 필요에 따라 값을 바꿀 수 있습니다. const는 한 번 정하면 끝입니다. (상수처럼 사용)

 

---

 

1.3 연산자와 표현식

연산자란?

연산자는 데이터를 계산하거나 조작할 때 사용하는 기호입니다.

1. 산술 연산자

연산자	설명	예시	결과
+	더하기	10 + 5	15
-	빼기	10 - 5	5
*	곱하기	10 * 5	50
/	나누기	10 / 5	2
%	나머지	10 % 3	1

2. 비교 연산자

연산자	설명	예시	결과
==	값이 같은지 비교	5 == "5"	true
===	값과 타입이 모두 같은지 비교	5 === "5"	false
!=	값이 다른지 비교	5 != 3	true
>	크기 비교 (왼쪽 > 오른쪽)	5 > 3	true
<=	작거나 같은지 비교	3 <= 5	true

3. 논리 연산자

연산자	설명	예시	결과
&&	그리고 (둘 다 참)	true && false	false
||	또는 (하나만 참)	true || false	true
!	반대	!true	false

 

---

 

1.4 조건문과 반복문

조건문: if-else

let 나이 = 18;

if (나이 >= 20) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}
// 결과: 미성년자입니다.

반복문: for

for (let i = 0; i < 5; i++) {
    console.log("안녕!"); // 결과: 안녕! (5번 출력)
}

 

---

 

1.5 함수와 스코프

함수란?

함수는 반복 작업을 저장한 레시피입니다. 필요할 때 호출해서 사용합니다.

예시

function 인사하기(이름) {
    console.log("안녕하세요, " + 이름 + "님!");
}
인사하기("철수"); // 결과: 안녕하세요, 철수님!

스코프란?

스코프는 변수가 "어디에서" 유효한지를 결정합니다.

function 함수() {
    let 메시지 = "안녕!";
    console.log(메시지);
}
console.log(메시지); // 오류! 함수 안에서만 접근 가능