[웹 국비 교육 25일차] JS: 반복문 for, 함수, 함수 매개변수 정리 (2025. 6. 30.)

안녕하세요! 

2025년 6월 30일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 25일차 수업 내용을 정리해보았습니다.

6월 23일(21일차)부터 6월 27일(24일차)까지는 진도체크와 모작을 진행하여, 따로 진도를 나가지 않았습니다.

그래서 오늘은 랜만에 다시 자바스크립트의 새로운 부분인 반복문 'for'을 배웠습니다.

 

---

 

25일차 학습내용

 

JS - 8강

 

## for문

: for 문은 반복 횟수가 명확할 때 자주 사용하는 반복문입니다.
: 초기값 → 조건식 → 증감식을 한 줄에 작성할 수 있어 가독성이 좋다.

for (초기값; 조건식; 증감식) {
  // 조건식이 참일 때 실행되는 코드
}

---

예제

- 1~5까지 출력하기

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// 실행 결과
1
2
3
4
5

---

## for문 동작 순서

1. 초기값 설정 → 반복 변수 선언
2. 조건식 검사 → 참이면 블록 실행, 거짓이면 종료
3. 코드 실행
4. 증감식 실행 → 다시 조건식 검사

> 초기값 → 조건식 검사 → 실행 → 증감식 순서로 반복됩니다.

---

## for문 vs while문

• for문 → 반복 횟수가 정해져 있을 때 적합
• while문 → 언제 끝날지 모르는 조건 반복에 적합

---

문제

- 구구단 8단을 출력해주세요.(for문)

 

- 구구단 2~8단을 출력해주세요.(for문)

 

- 구구단 2~8단을 출력해주세요.(for문 2개만 사용)

 

- 구구단을 출력해주세요.(for문 3개만 사용)

 

- 1부터 1000까지 출력해주세요.

 

- 1부터 1000까지의 합을 출력해주세요.

---

JS - 9강

## 함수

: 함수(Function)는 특정 작업을 수행하는 코드 블록입니다.
필요할 때마다 호출해서 재사용할 수 있으며, 코드를 깔끔하고 효율적으로 만들어 줍니다.

function 함수이름(매개변수) {
  // 실행할 코드
  return 결과값; // 선택 사항
}

---

 

예시

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

sayHello(); // 👉 "안녕하세요!"

---

함수의 종류

 

1. 선언식 함수

function greet() {
  console.log("Hello");
}

 

2. 함수 표현식

const greet = function() {
  console.log("Hello");
};

 

3. 화살표 함수

const greet = () => console.log("Hello");

---

JS - 10강

## 함수 매개변수

매개변수와 인자

• 매개변수(Parameter): 함수를 정의할 때 입력값을 받는 변수
• 인자(Argument): 함수를 호출할 때 실제로 전달하는 값

 

function greet(name) {   // name = 매개변수
  console.log("안녕, " + name + "!");
}

greet("철수");  // "철수" = 인자

---

# 매개변수 여러 개 사용하기

function add(a, b) {
  console.log(a + b);
}

add(3, 5); // 👉 8

---

# 매개변수 기본값

function greet(name = "손님") {
  console.log("안녕하세요, " + name + "님!");
}

greet();       // 👉 안녕하세요, 손님님!
greet("민수"); // 👉 안녕하세요, 민수님!

---

# 인자 개수가 다를 때

function test(a, b) {
  console.log(a, b);
}

test(1);        // 👉 1, undefined
test(1, 2, 3);  // 👉 1, 2 (3은 무시)

> 자바스크립트는 인자를 덜 주거나 더 줘도 실행된다.

---

# 가변 매개변수

function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2, 3));        // 👉 6
console.log(sum(10, 20, 30, 40)); // 👉 100

 

---

 

마무리