[웹 국비 교육 18일차] JS: 자바스크립트의 4대 구성요소-반복문 기 정리 (2025. 6. 19.)

안녕하세요!

2025년 6월 19일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 18일차 내용을 정리해보았습니다.  
오늘은 반복문 준비 단계 정리인 자바스크립트의 4대 구성요소에 대해 배웠습니다.

 

---

 

18일차 학습내용

 

JS - 5강

 

## 자바스크립트의 4대 구성요소

• 조건문
• 반복문
• 변수
• 값(데이터)의 자료형

# 요약본

항목	설명
조건문	상황에 따라 다르게 실행 (if)
반복문	코드를 반복해서 실행 (for, while)
변수	데이터를 저장하는 이름표
자료형	데이터의 종류 (숫자, 문자, 불린, 객체 등)
객체	복잡한 데이터 묶음, 버스처럼 좌석(속성) 존재
함수	작업을 정의한 코드 덩어리
지역변수	함수 안에서만 쓰이는 변수
매개변수	함수로 값을 전달하는 방법
return	함수 결과를 돌려주는 출구

---

## 조건문

: 조건에 따라 다르게 행동하기

 

# if문

let age = 20;

if (age >= 18) {
  console.log("성인입니다!");
}

: 조건이 true일 때만 안쪽 코드가 실행된다.

---

## 반복문

: 코드를 여러 번 반복

 

# while문

: 조건이 참인 동안 계속 반복한다.

let i = 0;
while (i < 3) {
  console.log("Hello");
  i++;
}

 

---

# for문

: 몇 번 반복할지 정해놓고 반복할 때 사용한다.

for (let i = 0; i < 3; i++) {
  console.log("반복 횟수:", i);
}

---

## 변수

: 데이터를 저장하는 이름표

let name = "지민";   // 문자
let age = 25;       // 숫자

: 변수는 값을 저장해두고 나중에 다시 쓸 수 있다.

---

## 값(데이터)의 자료형

: 자바스크립트에서 다루는 자료(Data)의 종류는 아래와 같다.

 

# 실행할 없는 자료형

자료형	설명	예시
숫자 (number)	계산 가능한 수	10, 3.14
문자 (string)	글자 데이터	"hello", "안녕"
논리 (boolean)	참 / 거짓	true, false
객체 (object)	여러 데이터를 묶을 숫 있음	{ name: "미피", age: 5}

 

---

 

- 객체는 버스처럼 이해하면 쉽다!

• 객체 = 버스
• 좌석 = key
• 승객 = value

let student = {
  name: "영희",
  age: 18
};

console.log(student.name);  // "영희"

: . 또는 [ ]로 버스 좌석(속성)에 접근 가능하다.

 

---

 

# 실행할 있는 자료형

 

- 함수( function )

: 어떤 작업을 미리 정의해두고, 호출하면 실행된다.

function sayHello() {
  console.log("안녕하세요!");
}

sayHello();  // 호출하면 실행됨

---

## 함수 내부에서 알아야 할 것 들

 

# 지역변수

: 함수 안에서만 존재하는 변수. 함수 밖에서는 못 쓴다.

function greet() {
  let msg = "Hi";
  console.log(msg);
}

greet();
// console.log(msg);  ❌ 오류남!

 

 ---

 

# 매개변수

: 함수에 데이터를 전달하는 입구

function greet(name) {
  console.log(name + "님, 반갑습니다!");
}

greet("민수"); // "민수님, 반갑습니다!"

 

---

 

# return

: 함수의 출구 역할로 결과값을 밖으로 돌려준다.

function add(a, b) {
  return a + b;
}

let sum = add(3, 4);  // sum = 7

 

---

- 문제

: 구구단 8단을 출력해주세요.(변수 없이)

// 문제 : 99단 8단을 출력해주세요.
// 조건 : 변수를 사용할 수 없다.
// 출력예시
/*
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72
*/

 

- 문제풀이

console.clear();
console.log("8 * 1 = 8");
console.log("8 * 2 = 16");
console.log("8 * 3 = 24");
console.log("8 * 4 = 32");
console.log("8 * 5 = 40");
console.log("8 * 6 = 48");
console.log("8 * 7 = 56");
console.log("8 * 8 = 64");
console.log("8 * 9 = 70");

---

 

- 문제

: 구구단 8단을 출력해주세요.(dan 변수만 사용)

// 문제 : 99단 8단을 출력해주세요.
// 조건 : dan 변수만 사용할 수 있다.
// 조건 : dan 변수를 최대한 활용해야 한다.
// 출력예시
/*
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72
*/

 

- 문제풀이

var dan;
dan = 8;

console.clear();

console.log("== 정답 v1 ==");
console.log(dan + " * 1 = 8");
console.log(dan + " * 2 = 16");
console.log(dan + " * 3 = 24");
console.log(dan + " * 4 = 32");
console.log(dan + " * 5 = 40");
console.log(dan + " * 6 = 48");
console.log(dan + " * 7 = 56");
console.log(dan + " * 8 = 64");
console.log(dan + " * 9 = 70");

console.log("== 정답 v2 ==");
//dan = 11;
console.log(dan + " * 1 = " + dan * 1);
console.log(dan + " * 2 = " + dan * 2);
console.log(dan + " * 3 = " + dan * 3);
console.log(dan + " * 4 = " + dan * 4);
console.log(dan + " * 5 = " + dan * 5);
console.log(dan + " * 6 = " + dan * 6);
console.log(dan + " * 7 = " + dan * 7);
console.log(dan + " * 8 = " + dan * 8);
console.log(dan + " * 9 = " + dan * 9);

---

- 문제

: 구구단 8단을 출력해주세요.(dan과 i 변수 사용)

// 힌트
var a = "안녕";
a = a + "하"; // a = "안녕" + "하" = "안녕하";
a = a + "세"; // a = "안녕하" + "세" = "안녕하세";
a = a + "요"; // a = "안녕하세" + "요" = "안녕하세요";
console.log(a);
// "안녕하세요"

 

- 문제풀이

var dan;
dan = 8;

// 수정가능지역 시작 
var i = 1;

console.clear();

console.log(dan + " * " + i + " = " + dan * i);
i = i + 1;

console.log(dan + " * " + i + " = " + dan * i);
i += 1; // i = i + 1; 과 완전히 같은 뜻

console.log(dan + " * " + i + " = " + dan * i);
i++; // i의 값을 1 증가 시킨다.

console.log(dan + " * " + i + " = " + dan * i);
i++;

console.log(dan + " * " + i + " = " + dan * i);
i++;

console.log(dan + " * " + i + " = " + dan * i);
i++;

console.log(dan + " * " + i + " = " + dan * i);
i++;

console.log(dan + " * " + i + " = " + dan * i);
i++;

console.log(dan + " * " + i + " = " + dan * i);
i++;

// 수정가능지역 끝

---

 

 

마무리

 

오늘은 반복문을 배우기 전에 꼭 알아야 할 변수와 자료형, 함수 개념을 배웠습니다.

,, 예,, 복습의 필요성을 더 느끼는 하루였습니다.

 

복습완료! 끝-