[JavaScript] 03. 4대 구성요소와 자료형 완전 정리 🗂️
01. JavaScript의 4대 구성요소 💡
JavaScript는 크게 네 가지로 이루어져 있습니다.
| 구성요소 | 종류 |
|---|---|
| 조건문 | if |
switch | |
| 반복문 | while, for |
do while | |
| 변수 | var, let, const |
| 값(데이터) | 숫자, 문장, 논리, 객체, 함수 |
02. 자료형(Data Type) 🗃️
JavaScript의 값(데이터)은 실행할 수 없는 자료와 실행할 수 있는 자료로 나뉩니다.
값(데이터)
├── 실행할 수 없는 자료
│ ├── 숫자 (number)
│ ├── 문장 (string)
│ ├── 논리 (boolean)
│ └── 객체 (object)
└── 실행할 수 있는 자료
└── 함수 (function)03. 실행할 수 없는 자료 📦
✅ 숫자 (number)
var a = 10;
var b = 3.14;✅ 문장 (string)
var a = "안녕하세요";
var b = "hello";✅ 논리 (boolean)
var a = true;
var b = false;✅ 객체 (object)
복잡한 자료를 만들 때 사용합니다.
🚌 객체는 일종의 버스입니다.
버스에 승객을 계속 추가할 수 있는 것처럼, 객체에도 데이터를 계속 추가할 수 있습니다.
var person = {
name: "홍길동",
age: 22,
job: "개발자"
};객체 내부 데이터는 [] 또는 . 으로 접근합니다.
// . 문법
console.log(person.name); // 홍길동
console.log(person.age); // 22
// [] 문법
console.log(person['name']); // 홍길동
console.log(person['age']); // 22| 접근 방법 | 문법 | 특징 |
|---|---|---|
| 점 표기법 | person.name | 일반적으로 많이 사용 |
| 괄호 표기법 | person['name'] | 변수로 키를 지정할 때 유용 |
04. 실행할 수 있는 자료 — 함수 (function) ⚙️
함수는 단순한 데이터가 아니라 실행할 수 있는 자료입니다.
변수에 담을 수도 있고, 다른 함수에 전달할 수도 있습니다.
// 함수도 값이다 — 변수에 담기 가능
var hello = function() {
console.log("안녕하세요!");
};
hello(); // 실행05. 함수의 3가지 핵심 개념 🔑
✅ 지역변수 (Local Variable)
함수가 실행될 때만 잠깐 생겼다가 사라지는 하루살이 변수입니다.
해당 변수의 활동 범위는 함수를 벗어날 수 없습니다.
function hello() {
var message = "안녕!"; // 지역변수 — 함수 안에서만 존재
console.log(message);
}
hello();
console.log(message); // ❌ 오류! 함수 밖에서는 접근 불가함수 실행 시작 → message 생성 → 함수 실행 종료 → message 소멸💡 지역변수는 함수가 끝나면 사라집니다.
함수 밖에서 선언한 변수는 전역변수로, 어디서든 접근할 수 있습니다.
✅ 매개변수 (Parameter)
지역변수의 한 종류로, 함수의 데이터 입구 역할을 합니다.
function greet(name) { // name : 매개변수 (데이터 입구)
console.log("안녕하세요, " + name + "!");
}
greet("홍길동"); // "홍길동"이 name으로 전달됨호출: greet("홍길동")
↓
입구(매개변수): name = "홍길동"
↓
실행: "안녕하세요, 홍길동!"✅ return — 데이터 출구
함수의 데이터 출구 역할을 합니다.
return을 만나면 함수가 해당 값으로 변신합니다.
function add(a, b) {
return a + b; // 결과값을 밖으로 내보냄
}
var result = add(3, 5); // add(3, 5)가 8로 변신!
console.log(result); // 8add(3, 5) 호출
↓
함수 실행: 3 + 5 = 8
↓
return 8
↓
add(3, 5) → 8 로 변신!🍯
return은 변신이다!
add(3, 5)라는 함수 호출이8이라는 숫자로 변신한다고 생각하면 이해하기 쉽습니다.
06. 입구와 출구 한눈에 보기 🚪
// 입구(매개변수)
// ↓
function add(a, b) {
return a + b; // ← 출구(return)
}
// 출구로 나온 값을 변수에 저장
var result = add(3, 5);| 개념 | 역할 | 위치 |
|---|---|---|
| 매개변수 | 데이터 입구 | 함수 정의 시 () 안 |
return | 데이터 출구 | 함수 내부 |
07. 📝 실전 문제 — 다국어 인사 함수
특정 언어로 인사를 여러 번 하는 함수를 만들어보세요.
언어— 인사할 언어 ("영어","일본어", 그 외 → 기본 한국어)인사횟수— 몇 번 인사할지
hello("영어", 2) → hello 2번 출력
hello("한국어", 5) → 안녕하세요. 5번 출력
hello("일본어", 6) → 곤니짜와 6번 출력✅ 정답 코드
console.clear();
function hello(언어, 인사횟수) {
var msg = "안녕하세요."; // 기본값: 한국어
if (언어 == "영어") {
msg = "hello";
}
else if (언어 == "일본어") {
msg = "곤니짜와";
}
for (var i = 0; i < 인사횟수; i++) {
console.log(msg);
}
}
hello("영어", 2);
hello("한국어", 5);
hello("일본어", 6);// 출력 결과
hello
hello
안녕하세요.
안녕하세요.
안녕하세요.
안녕하세요.
안녕하세요.
곤니짜와
곤니짜와
곤니짜와
곤니짜와
곤니짜와
곤니짜와🔍 코드 분석
hello("영어", 2) 호출
↓
언어 = "영어", 인사횟수 = 2
↓
if (언어 == "영어") → msg = "hello"
↓
for i = 0; i < 2; i++
i=0 → "hello" 출력
i=1 → "hello" 출력💡 이 예제에 지금까지 배운 개념이 모두 들어있습니다!
지역변수 (msg) + 매개변수 (언어,인사횟수) + 조건문 (if/else if) + 반복문 (for)
📖 핵심 요약
| 포인트 | 내용 |
|---|---|
| 🗂️ 4대 구성요소 | 조건문 · 반복문 · 변수 · 값(데이터) |
| 📦 실행 불가 자료 | 숫자 · 문장 · 논리 · 객체 |
| ⚙️ 실행 가능 자료 | 함수 |
| 🚌 객체 | 복잡한 자료 묶음, . 또는 []로 접근 |
| 🪲 지역변수 | 함수 안에서만 사는 하루살이 변수 |
| 🚪 매개변수 | 함수의 데이터 입구, 지역변수의 한 종류 |
🔄 return | 함수의 데이터 출구, 함수를 값으로 변신시킴 |
